@mapwhit/tilerenderer 0.52.1 → 1.1.0

package/src/data/bucket/symbol_buffers.js

@@ -0,0 +1,62 @@
+import {
+  PlacedSymbolArray,
+  StructArrayLayout3f12 as SymbolDynamicLayoutArray,
+  StructArrayLayout4i4ui16 as SymbolLayoutArray,
+  StructArrayLayout1ul4 as SymbolOpacityArray,
+  StructArrayLayout3ui6 as TriangleIndexArray
+} from '../array_types.js';
+import SegmentVector from '../segment.js';
+import { dynamicLayoutAttributes, symbolLayoutAttributes } from './symbol_attributes.js';
+
+// Opacity arrays are frequently updated but don't contain a lot of information, so we pack them
+// tight. Each Uint32 is actually four duplicate Uint8s for the four corners of a glyph
+// 7 bits are for the current opacity, and the lowest bit is the target opacity
+
+// actually defined in symbol_attributes.js
+// const placementOpacityAttributes = [
+//     { name: 'a_fade_opacity', components: 1, type: 'Uint32' }
+// ];
+const shaderOpacityAttributes = [{ name: 'a_fade_opacity', components: 1, type: 'Uint8', offset: 0 }];
+
+export default class SymbolBuffers {
+  constructor(programConfigurations) {
+    this.layoutVertexArray = new SymbolLayoutArray();
+    this.indexArray = new TriangleIndexArray();
+    this.programConfigurations = programConfigurations;
+    this.segments = new SegmentVector();
+    this.dynamicLayoutVertexArray = new SymbolDynamicLayoutArray();
+    this.opacityVertexArray = new SymbolOpacityArray();
+    this.placedSymbolArray = new PlacedSymbolArray();
+  }
+
+  upload(context, dynamicIndexBuffer, upload, update) {
+    if (upload) {
+      this.layoutVertexBuffer = context.createVertexBuffer(this.layoutVertexArray, symbolLayoutAttributes.members);
+      this.indexBuffer = context.createIndexBuffer(this.indexArray, dynamicIndexBuffer);
+      this.dynamicLayoutVertexBuffer = context.createVertexBuffer(
+        this.dynamicLayoutVertexArray,
+        dynamicLayoutAttributes.members,
+        true
+      );
+      this.opacityVertexBuffer = context.createVertexBuffer(this.opacityVertexArray, shaderOpacityAttributes, true);
+      // This is a performance hack so that we can write to opacityVertexArray with uint32s
+      // even though the shaders read uint8s
+      this.opacityVertexBuffer.itemSize = 1;
+    }
+    if (upload || update) {
+      this.programConfigurations.upload(context);
+    }
+  }
+
+  destroy() {
+    if (!this.layoutVertexBuffer) {
+      return;
+    }
+    this.layoutVertexBuffer.destroy();
+    this.indexBuffer.destroy();
+    this.programConfigurations.destroy();
+    this.segments.destroy();
+    this.dynamicLayoutVertexBuffer.destroy();
+    this.opacityVertexBuffer.destroy();
+  }
+}

package/src/data/bucket/symbol_collision_buffers.js

@@ -0,0 +1,33 @@
+import { StructArrayLayout2ub4 as CollisionVertexArray } from '../array_types.js';
+import SegmentVector from '../segment.js';
+import { collisionVertexAttributes } from './symbol_attributes.js';
+
+export default class CollisionBuffers {
+  constructor(LayoutArray, layoutAttributes, IndexArray) {
+    this.layoutVertexArray = new LayoutArray();
+    this.layoutAttributes = layoutAttributes;
+    this.indexArray = new IndexArray();
+    this.segments = new SegmentVector();
+    this.collisionVertexArray = new CollisionVertexArray();
+  }
+
+  upload(context) {
+    this.layoutVertexBuffer = context.createVertexBuffer(this.layoutVertexArray, this.layoutAttributes);
+    this.indexBuffer = context.createIndexBuffer(this.indexArray);
+    this.collisionVertexBuffer = context.createVertexBuffer(
+      this.collisionVertexArray,
+      collisionVertexAttributes.members,
+      true
+    );
+  }
+
+  destroy() {
+    if (!this.layoutVertexBuffer) {
+      return;
+    }
+    this.layoutVertexBuffer.destroy();
+    this.indexBuffer.destroy();
+    this.segments.destroy();
+    this.collisionVertexBuffer.destroy();
+  }
+}

package/src/data/bucket.js

@@ -11,43 +11,44 @@
  * properties and the zoom level to populate the attributes needed for
  * data-driven styling.
  *
- * Buckets are designed to be built on a worker thread and then serialized and
- * transferred back to the main thread for rendering.  On the worker side, a
- * bucket's vertex, index, and attribute data is stored in `bucket.arrays:
- * ArrayGroup`.  When a bucket's data is serialized and sent back to the main
- * thread, is gets deserialized (using `new Bucket(serializedBucketData)`, with
- * the array data now stored in `bucket.buffers: BufferGroup`.  BufferGroups
- * hold the same data as ArrayGroups, but are tuned for consumption by WebGL.
+ * Buckets are designed to be built when tile is loaded and then converted (uploaded)
+ * to tune bucket's vertex, index, and attribute data for consumption by WebGL.
  *
  * @private
  */
 
-function deserialize(input, style) {
-  const output = {};
-
+// style may have changed between creating a bucket when tile was loaded and rendering it
+export function updateBuckets(buckets, style) {
+  if (!style._changed) {
+    return;
+  }
   // Guard against the case where the map's style has been set to null while
   // this bucket has been parsing.
-  if (!style) return output;
+  if (!style) {
+    for (const bucket of buckets.values()) {
+      bucket.destroy();
+    }
+    buckets.clear();
+    return;
+  }
+
+  const updatedAlready = new Set();
+  for (const [id, bucket] of buckets) {
+    if (updatedAlready.has(id)) {
+      continue;
+    }
+    updatedAlready.add(id);
 
-  for (const bucket of input) {
-    const layers = bucket.layerIds.map(id => style.getLayer(id)).filter(Boolean);
+    const layers = bucket.layers.map(({ id }) => style.getLayer(id)).filter(Boolean);
 
     if (layers.length === 0) {
+      bucket.destroy();
+      buckets.delete(id);
       continue;
     }
 
-    // look up StyleLayer objects from layer ids (since we don't
-    // want to waste time serializing/copying them from the worker)
+    // swap out the layers in the bucket with the current style layers
     bucket.layers = layers;
-    bucket.stateDependentLayers = layers.filter(l => l.isStateDependent());
-    for (const layer of layers) {
-      output[layer.id] = bucket;
-    }
+    bucket.stateDependentLayers = layers.filter(layer => layer.isStateDependent());
   }
-
-  return output;
 }
-
-module.exports = {
-  deserialize
-};

package/src/data/dem_data.js

@@ -1,7 +1,5 @@
-const { RGBAImage } = require('../util/image');
-
-const warn = require('../util/warn');
-const { register } = require('../util/transfer_registry');
+import { RGBAImage } from '../util/image.js';
+import warn from '../util/warn.js';
 
 // DEMData is a data structure for decoding, backfilling, and storing elevation data for processing in the hillshade shaders
 // data can be populated either from a pngraw image tile or from serliazed data sent back from a worker. When data is initially
@@ -16,7 +14,9 @@ const { register } = require('../util/transfer_registry');
 class DEMData {
   constructor(uid, data, encoding) {
     this.uid = uid;
-    if (data.height !== data.width) throw new RangeError('DEM tiles must be square');
+    if (data.height !== data.width) {
+      throw new RangeError('DEM tiles must be square');
+    }
     if (encoding && encoding !== 'mapbox' && encoding !== 'terrarium') {
       warn.once(`"${encoding}" is not a valid encoding type. Valid types include "mapbox" and "terrarium".`);
       return;
@@ -64,8 +64,9 @@ class DEMData {
   }
 
   _idx(x, y) {
-    if (x < -1 || x >= this.dim + 1 || y < -1 || y >= this.dim + 1)
+    if (x < -1 || x >= this.dim + 1 || y < -1 || y >= this.dim + 1) {
       throw new RangeError('out of range source coordinates for DEM data');
+    }
     return (y + 1) * this.stride + (x + 1);
   }
 
@@ -86,7 +87,9 @@ class DEMData {
   }
 
   backfillBorder(borderTile, dx, dy) {
-    if (this.dim !== borderTile.dim) throw new Error('dem dimension mismatch');
+    if (this.dim !== borderTile.dim) {
+      throw new Error('dem dimension mismatch');
+    }
 
     let xMin = dx * this.dim;
     let xMax = dx * this.dim + this.dim;
@@ -121,6 +124,4 @@ class DEMData {
   }
 }
 
-register('DEMData', DEMData);
-
-module.exports = DEMData;
+export default DEMData;

package/src/data/extent.js

@@ -14,4 +14,4 @@
  * @private
  * @readonly
  */
-module.exports = 8192;
+export default 8192;

package/src/data/feature_index.js

@@ -1,17 +1,13 @@
-const loadGeometry = require('./load_geometry');
-const EXTENT = require('./extent');
-const featureFilter = require('../style-spec/feature_filter');
-const Grid = require('grid-index');
-const dictionaryCoder = require('../util/dictionary_coder');
-const vt = require('@mapwhit/vector-tile');
-const Protobuf = require('@mapwhit/pbf');
-const GeoJSONFeature = require('../util/vectortile_to_geojson');
-const { arraysIntersect } = require('../util/object');
-const { register } = require('../util/transfer_registry');
-const EvaluationParameters = require('../style/evaluation_parameters');
-const { polygonIntersectsBox } = require('../util/intersection_tests');
-
-const { FeatureIndexArray } = require('./array_types');
+import Grid from 'grid-index';
+import EvaluationParameters from '../style/evaluation_parameters.js';
+import featureFilter from '../style-spec/feature_filter/index.js';
+import dictionaryCoder from '../util/dictionary_coder.js';
+import { polygonIntersectsBox } from '../util/intersection_tests.js';
+import { arraysIntersect } from '../util/object.js';
+import GeoJSONFeature from '../util/vectortile_to_geojson.js';
+import { FeatureIndexArray } from './array_types.js';
+import EXTENT from './extent.js';
+import loadGeometry from './load_geometry.js';
 
 class FeatureIndex {
   constructor(tileID, grid = new Grid(EXTENT, 16, 0), featureIndexArray = new FeatureIndexArray()) {
@@ -37,7 +33,7 @@ class FeatureIndex {
 
   loadVTLayers() {
     if (!this.vtLayers) {
-      this.vtLayers = new vt.VectorTile(new Protobuf(this.rawTileData)).layers;
+      this.vtLayers = this.vectorTile?.layers;
       this.sourceLayerCoder = dictionaryCoder(this.vtLayers ? Object.keys(this.vtLayers) : ['_geojsonTileLayer']);
     }
     return this.vtLayers;
@@ -88,7 +84,9 @@ class FeatureIndex {
       const index = matching[k];
 
       // don't check the same feature more than once
-      if (index === previousIndex) continue;
+      if (index === previousIndex) {
+        continue;
+      }
       previousIndex = index;
 
       const match = this.featureIndexArray.get(index);
@@ -139,13 +137,17 @@ class FeatureIndex {
     intersectionTest
   ) {
     const layerIDs = this.bucketLayerIDs[bucketIndex];
-    if (filterLayerIDs && !arraysIntersect(filterLayerIDs, layerIDs)) return;
+    if (filterLayerIDs && !arraysIntersect(filterLayerIDs, layerIDs)) {
+      return;
+    }
 
     const sourceLayerName = this.sourceLayerCoder.decode(sourceLayerIndex);
     const sourceLayer = this.vtLayers[sourceLayerName];
     const feature = sourceLayer.feature(featureIndex);
 
-    if (!filter(new EvaluationParameters(this.tileID.overscaledZ), feature)) return;
+    if (!filter(new EvaluationParameters(this.tileID.overscaledZ), feature)) {
+      return;
+    }
 
     const { x, y, z } = this.tileID.canonical;
     for (const layerID of layerIDs) {
@@ -153,8 +155,10 @@ class FeatureIndex {
         continue;
       }
 
-      const styleLayer = styleLayers[layerID];
-      if (!styleLayer) continue;
+      const styleLayer = styleLayers.get(layerID);
+      if (!styleLayer) {
+        continue;
+      }
 
       const intersectionZ = !intersectionTest || intersectionTest(feature, styleLayer);
       if (!intersectionZ) {
@@ -163,7 +167,7 @@ class FeatureIndex {
       }
 
       const geojsonFeature = new GeoJSONFeature(feature, z, x, y);
-      geojsonFeature.layer = styleLayer.serialize();
+      geojsonFeature.layer = styleLayer;
       const layerResult = (result[layerID] ??= []);
       layerResult.push({ featureIndex, feature: geojsonFeature, intersectionZ });
     }
@@ -192,9 +196,7 @@ class FeatureIndex {
   }
 }
 
-register('FeatureIndex', FeatureIndex, { omit: ['rawTileData', 'sourceLayerCoder'] });
-
-module.exports = FeatureIndex;
+export default FeatureIndex;
 
 function getBounds(geometry) {
   let minX = Number.POSITIVE_INFINITY;
@@ -202,10 +204,18 @@ function getBounds(geometry) {
   let maxX = Number.NEGATIVE_INFINITY;
   let maxY = Number.NEGATIVE_INFINITY;
   for (const { x, y } of geometry) {
-    if (x < minX) minX = x;
-    if (x > maxX) maxX = x;
-    if (y < minY) minY = y;
-    if (y > maxY) maxY = y;
+    if (x < minX) {
+      minX = x;
+    }
+    if (x > maxX) {
+      maxX = x;
+    }
+    if (y < minY) {
+      minY = y;
+    }
+    if (y > maxY) {
+      maxY = y;
+    }
   }
   return { minX, minY, maxX, maxY };
 }

package/src/data/index_array_type.js

@@ -1,4 +1,4 @@
-const { LineIndexArray, TriangleIndexArray, LineStripIndexArray } = require('./array_types');
+export { LineIndexArray, LineStripIndexArray, TriangleIndexArray } from './array_types.js';
 
 /**
  * An index array stores Uint16 indices of vertexes in a corresponding vertex array. We use
@@ -7,8 +7,3 @@ const { LineIndexArray, TriangleIndexArray, LineStripIndexArray } = require('./a
  * forming a line strip.
  * @private
  */
-module.exports = {
-  LineIndexArray,
-  TriangleIndexArray,
-  LineStripIndexArray
-};

package/src/data/load_geometry.js

@@ -1,6 +1,5 @@
-const warn = require('../util/warn');
-
-const EXTENT = require('./extent');
+import warn from '../util/warn.js';
+import EXTENT from './extent.js';
 
 // These bounds define the minimum and maximum supported coordinate values.
 // While visible coordinates are within [0, EXTENT], tiles may theoretically
@@ -21,13 +20,11 @@ const bounds = createBounds(16);
  * @param {VectorTileFeature} feature
  * @private
  */
-module.exports = function loadGeometry(feature) {
+export default function loadGeometry(feature) {
   const scale = EXTENT / feature.extent;
   const geometry = feature.loadGeometry();
-  for (let r = 0; r < geometry.length; r++) {
-    const ring = geometry[r];
-    for (let p = 0; p < ring.length; p++) {
-      const point = ring[p];
+  for (const ring of geometry) {
+    for (const point of ring) {
       // round here because mapbox-gl-native uses integers to represent
       // points and we need to do the same to avoid renering differences.
       point.x = Math.round(point.x * scale);
@@ -39,4 +36,4 @@ module.exports = function loadGeometry(feature) {
     }
   }
   return geometry;
-};
+}

package/src/data/pos_attributes.js

@@ -1,3 +1,2 @@
-const { createLayout } = require('../util/struct_array');
-
-module.exports = createLayout([{ name: 'a_pos', type: 'Int16', components: 2 }]);
+import { createLayout } from '../util/struct_array.js';
+export default createLayout([{ name: 'a_pos', type: 'Int16', components: 2 }]);

package/src/data/program_configuration.js

@@ -1,15 +1,14 @@
-const { packUint8ToFloat } = require('../shaders/encode_attribute');
-const { supportsPropertyExpression } = require('@mapwhit/style-expressions');
-const { register } = require('../util/transfer_registry');
-const { PossiblyEvaluatedPropertyValue } = require('../style/properties');
-const {
+import { supportsPropertyExpression } from '@mapwhit/style-expressions';
+import { Uniform1f, Uniform4f, UniformColor } from '../render/uniform_binding.js';
+import { packUint8ToFloat } from '../shaders/encode_attribute.js';
+import EvaluationParameters from '../style/evaluation_parameters.js';
+import { PossiblyEvaluatedPropertyValue } from '../style/properties.js';
+import {
+  PatternLayoutArray,
   StructArrayLayout1f4,
   StructArrayLayout2f8,
-  StructArrayLayout4f16,
-  PatternLayoutArray
-} = require('./array_types');
-const EvaluationParameters = require('../style/evaluation_parameters');
-const { Uniform1f, UniformColor, Uniform4f } = require('../render/uniform_binding');
+  StructArrayLayout4f16
+} from './array_types.js';
 
 function packColor(color) {
   return [packUint8ToFloat(255 * color.r, 255 * color.g), packUint8ToFloat(255 * color.b, 255 * color.a)];
@@ -97,8 +96,12 @@ class CrossFadedConstantBinder {
 
   setUniforms(context, uniform, globals, currentValue, uniformName) {
     const pos = this.patternPositions;
-    if (uniformName === 'u_pattern_to' && pos.patternTo) uniform.set(pos.patternTo);
-    if (uniformName === 'u_pattern_from' && pos.patternFrom) uniform.set(pos.patternFrom);
+    if (uniformName === 'u_pattern_to' && pos.patternTo) {
+      uniform.set(pos.patternTo);
+    }
+    if (uniformName === 'u_pattern_from' && pos.patternFrom) {
+      uniform.set(pos.patternFrom);
+    }
   }
 
   getBinding(context, location) {
@@ -351,7 +354,9 @@ class CrossFadedCompositeBinder {
       const imageMid = imagePositions[mid];
       const imageMax = imagePositions[max];
 
-      if (!imageMin || !imageMid || !imageMax) return;
+      if (!imageMin || !imageMid || !imageMax) {
+        return;
+      }
 
       for (let i = start; i < length; i++) {
         zoomInArray.emplaceBack(
@@ -394,7 +399,9 @@ class CrossFadedCompositeBinder {
       const imageMid = imagePositions[mid];
       const imageMax = imagePositions[max];
 
-      if (!imageMin || !imageMid || !imageMax) return;
+      if (!imageMin || !imageMid || !imageMax) {
+        return;
+      }
       for (let i = start; i < end; i++) {
         zoomInArray.emplace(
           i,
@@ -439,8 +446,12 @@ class CrossFadedCompositeBinder {
   }
 
   destroy() {
-    if (this.zoomOutPaintVertexBuffer) this.zoomOutPaintVertexBuffer.destroy();
-    if (this.zoomInPaintVertexBuffer) this.zoomInPaintVertexBuffer.destroy();
+    if (this.zoomOutPaintVertexBuffer) {
+      this.zoomOutPaintVertexBuffer.destroy();
+    }
+    if (this.zoomInPaintVertexBuffer) {
+      this.zoomInPaintVertexBuffer.destroy();
+    }
   }
 
   setUniforms(context, uniform) {
@@ -472,7 +483,7 @@ class CrossFadedCompositeBinder {
  *
  * @private
  */
-class ProgramConfiguration {
+export default class ProgramConfiguration {
   constructor() {
     this.binders = {};
     this.cacheKey = '';
@@ -486,9 +497,11 @@ class ProgramConfiguration {
     const self = new ProgramConfiguration();
     const keys = [];
 
-    for (const property in layer.paint._values) {
-      if (!filterProperties(property)) continue;
-      const value = layer.paint.get(property);
+    for (const property in layer._paint._values) {
+      if (!filterProperties(property)) {
+        continue;
+      }
+      const value = layer._paint.get(property);
       if (
         !(value instanceof PossiblyEvaluatedPropertyValue) ||
         !supportsPropertyExpression(value.property.specification)
@@ -575,7 +588,9 @@ class ProgramConfiguration {
     let dirty = false;
     for (const id in featureStates) {
       const posArray = this._idMap[id];
-      if (!posArray) continue;
+      if (!posArray) {
+        continue;
+      }
 
       const featureState = featureStates[id];
       for (const pos of posArray) {
@@ -583,10 +598,12 @@ class ProgramConfiguration {
 
         for (const property in this.binders) {
           const binder = this.binders[property];
-          if (binder instanceof ConstantBinder || binder instanceof CrossFadedConstantBinder) continue;
+          if (binder instanceof ConstantBinder || binder instanceof CrossFadedConstantBinder) {
+            continue;
+          }
           if (binder.expression.isStateDependent === true) {
             //AHM: Remove after https://github.com/mapbox/mapbox-gl-js/issues/6255
-            const value = layer.paint.get(property);
+            const value = layer._paint.get(property);
             binder.expression = value.value;
             binder.updatePaintArray(pos.start, pos.end, feature, featureState, options);
             dirty = true;
@@ -640,7 +657,9 @@ class ProgramConfiguration {
       if (binder instanceof CrossFadedCompositeBinder) {
         const patternVertexBuffer =
           crossfade.fromScale === 2 ? binder.zoomInPaintVertexBuffer : binder.zoomOutPaintVertexBuffer;
-        if (patternVertexBuffer) buffers.push(patternVertexBuffer);
+        if (patternVertexBuffer) {
+          buffers.push(patternVertexBuffer);
+        }
       } else if (
         (binder instanceof SourceExpressionBinder || binder instanceof CompositeExpressionBinder) &&
         binder.paintVertexBuffer
@@ -677,7 +696,7 @@ class ProgramConfiguration {
   }
 }
 
-class ProgramConfigurationSet {
+export class ProgramConfigurationSet {
   constructor(layoutAttributes, layers, zoom, filterProperties = () => true) {
     this.programConfigurations = {};
     for (const layer of layers) {
@@ -707,7 +726,9 @@ class ProgramConfigurationSet {
   }
 
   upload(context) {
-    if (!this.needsUpload) return;
+    if (!this.needsUpload) {
+      return;
+    }
     for (const layerId in this.programConfigurations) {
       this.programConfigurations[layerId].upload(context);
     }
@@ -776,15 +797,3 @@ function layoutType(property, type, binderType) {
   const layoutException = getLayoutException(property);
   return layoutException?.[binderType] || defaultLayouts[type][binderType];
 }
-
-register('ConstantBinder', ConstantBinder);
-register('CrossFadedConstantBinder', CrossFadedConstantBinder);
-register('SourceExpressionBinder', SourceExpressionBinder);
-register('CrossFadedCompositeBinder', CrossFadedCompositeBinder);
-register('CompositeExpressionBinder', CompositeExpressionBinder);
-register('ProgramConfiguration', ProgramConfiguration, { omit: ['_buffers'] });
-register('ProgramConfigurationSet', ProgramConfigurationSet);
-
-ProgramConfiguration.ProgramConfigurationSet = ProgramConfigurationSet;
-
-module.exports = ProgramConfiguration;

package/src/data/raster_bounds_attributes.js

@@ -1,6 +1,6 @@
-const { createLayout } = require('../util/struct_array');
+import { createLayout } from '../util/struct_array.js';
 
-module.exports = createLayout([
+export default createLayout([
   { name: 'a_pos', type: 'Int16', components: 2 },
   { name: 'a_texture_pos', type: 'Int16', components: 2 }
 ]);

package/src/data/segment.js

@@ -1,6 +1,4 @@
-const warn = require('../util/warn');
-
-const { register } = require('../util/transfer_registry');
+import warn from '../util/warn.js';
 
 class SegmentVector {
   constructor(segments = []) {
@@ -8,10 +6,11 @@ class SegmentVector {
   }
 
   prepareSegment(numVertices, layoutVertexArray, indexArray) {
-    if (numVertices > SegmentVector.MAX_VERTEX_ARRAY_LENGTH)
+    if (numVertices > SegmentVector.MAX_VERTEX_ARRAY_LENGTH) {
       warn.once(
         `Max vertices per segment is ${SegmentVector.MAX_VERTEX_ARRAY_LENGTH}: bucket requested ${numVertices}`
       );
+    }
     let segment = this.segments.at(-1);
     if (!segment || segment.vertexLength + numVertices > SegmentVector.MAX_VERTEX_ARRAY_LENGTH) {
       segment = {
@@ -58,6 +57,4 @@ class SegmentVector {
  */
 SegmentVector.MAX_VERTEX_ARRAY_LENGTH = 2 ** 16 - 1;
 
-register('SegmentVector', SegmentVector);
-
-module.exports = SegmentVector;
+export default SegmentVector;

package/src/geo/coordinate.js

@@ -75,4 +75,4 @@ class Coordinate {
   }
 }
 
-module.exports = Coordinate;
+export default Coordinate;

package/src/geo/lng_lat.js

@@ -1,4 +1,5 @@
-const { wrap } = require('../util/util');
+import { wrap } from '../util/util.js';
+import LngLatBounds from './lng_lat_bounds.js';
 
 /**
  * A `LngLat` object represents a given longitude and latitude coordinate, measured in degrees.
@@ -80,7 +81,6 @@ class LngLat {
     const earthCircumferenceInMetersAtEquator = 40075017;
     const latAccuracy = (360 * radius) / earthCircumferenceInMetersAtEquator;
     const lngAccuracy = latAccuracy / Math.cos((Math.PI / 180) * this.lat);
-    const LngLatBounds = require('./lng_lat_bounds');
 
     return new LngLatBounds(
       new LngLat(this.lng - lngAccuracy, this.lat - latAccuracy),
@@ -126,4 +126,4 @@ class LngLat {
  * var v2 = [-122.420679, 37.772537];
  */
 
-module.exports = LngLat;
+export default LngLat;