@mapwhit/tilerenderer 0.52.1 → 1.1.0

package/src/shaders/index.js

@@ -1,103 +1,155 @@
+// Import all shader sources
+import preludeFragmentSource from '../../build/min/src/shaders/_prelude.fragment.glsl.js';
+import preludeVertexSource from '../../build/min/src/shaders/_prelude.vertex.glsl.js';
+import backgroundFragmentSource from '../../build/min/src/shaders/background.fragment.glsl.js';
+import backgroundVertexSource from '../../build/min/src/shaders/background.vertex.glsl.js';
+import backgroundPatternFragmentSource from '../../build/min/src/shaders/background_pattern.fragment.glsl.js';
+import backgroundPatternVertexSource from '../../build/min/src/shaders/background_pattern.vertex.glsl.js';
+import circleFragmentSource from '../../build/min/src/shaders/circle.fragment.glsl.js';
+import circleVertexSource from '../../build/min/src/shaders/circle.vertex.glsl.js';
+import clippingMaskFragmentSource from '../../build/min/src/shaders/clipping_mask.fragment.glsl.js';
+import clippingMaskVertexSource from '../../build/min/src/shaders/clipping_mask.vertex.glsl.js';
+import collisionBoxFragmentSource from '../../build/min/src/shaders/collision_box.fragment.glsl.js';
+import collisionBoxVertexSource from '../../build/min/src/shaders/collision_box.vertex.glsl.js';
+import collisionCircleFragmentSource from '../../build/min/src/shaders/collision_circle.fragment.glsl.js';
+import collisionCircleVertexSource from '../../build/min/src/shaders/collision_circle.vertex.glsl.js';
+import debugFragmentSource from '../../build/min/src/shaders/debug.fragment.glsl.js';
+import debugVertexSource from '../../build/min/src/shaders/debug.vertex.glsl.js';
+import fillFragmentSource from '../../build/min/src/shaders/fill.fragment.glsl.js';
+import fillVertexSource from '../../build/min/src/shaders/fill.vertex.glsl.js';
+import fillExtrusionFragmentSource from '../../build/min/src/shaders/fill_extrusion.fragment.glsl.js';
+import fillExtrusionVertexSource from '../../build/min/src/shaders/fill_extrusion.vertex.glsl.js';
+import fillExtrusionPatternFragmentSource from '../../build/min/src/shaders/fill_extrusion_pattern.fragment.glsl.js';
+import fillExtrusionPatternVertexSource from '../../build/min/src/shaders/fill_extrusion_pattern.vertex.glsl.js';
+import fillOutlineFragmentSource from '../../build/min/src/shaders/fill_outline.fragment.glsl.js';
+import fillOutlineVertexSource from '../../build/min/src/shaders/fill_outline.vertex.glsl.js';
+import fillOutlinePatternFragmentSource from '../../build/min/src/shaders/fill_outline_pattern.fragment.glsl.js';
+import fillOutlinePatternVertexSource from '../../build/min/src/shaders/fill_outline_pattern.vertex.glsl.js';
+import fillPatternFragmentSource from '../../build/min/src/shaders/fill_pattern.fragment.glsl.js';
+import fillPatternVertexSource from '../../build/min/src/shaders/fill_pattern.vertex.glsl.js';
+import heatmapFragmentSource from '../../build/min/src/shaders/heatmap.fragment.glsl.js';
+import heatmapVertexSource from '../../build/min/src/shaders/heatmap.vertex.glsl.js';
+import heatmapTextureFragmentSource from '../../build/min/src/shaders/heatmap_texture.fragment.glsl.js';
+import heatmapTextureVertexSource from '../../build/min/src/shaders/heatmap_texture.vertex.glsl.js';
+import hillshadeFragmentSource from '../../build/min/src/shaders/hillshade.fragment.glsl.js';
+import hillshadeVertexSource from '../../build/min/src/shaders/hillshade.vertex.glsl.js';
+import hillshadePrepareFragmentSource from '../../build/min/src/shaders/hillshade_prepare.fragment.glsl.js';
+import hillshadePrepareVertexSource from '../../build/min/src/shaders/hillshade_prepare.vertex.glsl.js';
+import lineFragmentSource from '../../build/min/src/shaders/line.fragment.glsl.js';
+import lineVertexSource from '../../build/min/src/shaders/line.vertex.glsl.js';
+import lineGradientFragmentSource from '../../build/min/src/shaders/line_gradient.fragment.glsl.js';
+import lineGradientVertexSource from '../../build/min/src/shaders/line_gradient.vertex.glsl.js';
+import linePatternFragmentSource from '../../build/min/src/shaders/line_pattern.fragment.glsl.js';
+import linePatternVertexSource from '../../build/min/src/shaders/line_pattern.vertex.glsl.js';
+import lineSDFFragmentSource from '../../build/min/src/shaders/line_sdf.fragment.glsl.js';
+import lineSDFVertexSource from '../../build/min/src/shaders/line_sdf.vertex.glsl.js';
+import rasterFragmentSource from '../../build/min/src/shaders/raster.fragment.glsl.js';
+import rasterVertexSource from '../../build/min/src/shaders/raster.vertex.glsl.js';
+import symbolIconFragmentSource from '../../build/min/src/shaders/symbol_icon.fragment.glsl.js';
+import symbolIconVertexSource from '../../build/min/src/shaders/symbol_icon.vertex.glsl.js';
+import symbolSDFFragmentSource from '../../build/min/src/shaders/symbol_sdf.fragment.glsl.js';
+import symbolSDFVertexSource from '../../build/min/src/shaders/symbol_sdf.vertex.glsl.js';
+
 const shaders = {
   prelude: {
-    fragmentSource: require('../../build/min/src/shaders/_prelude.fragment.glsl.js'),
-    vertexSource: require('../../build/min/src/shaders/_prelude.vertex.glsl.js')
+    fragmentSource: preludeFragmentSource,
+    vertexSource: preludeVertexSource
   },
   background: {
-    fragmentSource: require('../../build/min/src/shaders/background.fragment.glsl.js'),
-    vertexSource: require('../../build/min/src/shaders/background.vertex.glsl.js')
+    fragmentSource: backgroundFragmentSource,
+    vertexSource: backgroundVertexSource
   },
   backgroundPattern: {
-    fragmentSource: require('../../build/min/src/shaders/background_pattern.fragment.glsl.js'),
-    vertexSource: require('../../build/min/src/shaders/background_pattern.vertex.glsl.js')
+    fragmentSource: backgroundPatternFragmentSource,
+    vertexSource: backgroundPatternVertexSource
   },
   circle: {
-    fragmentSource: require('../../build/min/src/shaders/circle.fragment.glsl.js'),
-    vertexSource: require('../../build/min/src/shaders/circle.vertex.glsl.js')
+    fragmentSource: circleFragmentSource,
+    vertexSource: circleVertexSource
   },
   clippingMask: {
-    fragmentSource: require('../../build/min/src/shaders/clipping_mask.fragment.glsl.js'),
-    vertexSource: require('../../build/min/src/shaders/clipping_mask.vertex.glsl.js')
+    fragmentSource: clippingMaskFragmentSource,
+    vertexSource: clippingMaskVertexSource
   },
   heatmap: {
-    fragmentSource: require('../../build/min/src/shaders/heatmap.fragment.glsl.js'),
-    vertexSource: require('../../build/min/src/shaders/heatmap.vertex.glsl.js')
+    fragmentSource: heatmapFragmentSource,
+    vertexSource: heatmapVertexSource
   },
   heatmapTexture: {
-    fragmentSource: require('../../build/min/src/shaders/heatmap_texture.fragment.glsl.js'),
-    vertexSource: require('../../build/min/src/shaders/heatmap_texture.vertex.glsl.js')
+    fragmentSource: heatmapTextureFragmentSource,
+    vertexSource: heatmapTextureVertexSource
   },
   collisionBox: {
-    fragmentSource: require('../../build/min/src/shaders/collision_box.fragment.glsl.js'),
-    vertexSource: require('../../build/min/src/shaders/collision_box.vertex.glsl.js')
+    fragmentSource: collisionBoxFragmentSource,
+    vertexSource: collisionBoxVertexSource
   },
   collisionCircle: {
-    fragmentSource: require('../../build/min/src/shaders/collision_circle.fragment.glsl.js'),
-    vertexSource: require('../../build/min/src/shaders/collision_circle.vertex.glsl.js')
+    fragmentSource: collisionCircleFragmentSource,
+    vertexSource: collisionCircleVertexSource
   },
   debug: {
-    fragmentSource: require('../../build/min/src/shaders/debug.fragment.glsl.js'),
-    vertexSource: require('../../build/min/src/shaders/debug.vertex.glsl.js')
+    fragmentSource: debugFragmentSource,
+    vertexSource: debugVertexSource
   },
   fill: {
-    fragmentSource: require('../../build/min/src/shaders/fill.fragment.glsl.js'),
-    vertexSource: require('../../build/min/src/shaders/fill.vertex.glsl.js')
+    fragmentSource: fillFragmentSource,
+    vertexSource: fillVertexSource
   },
   fillOutline: {
-    fragmentSource: require('../../build/min/src/shaders/fill_outline.fragment.glsl.js'),
-    vertexSource: require('../../build/min/src/shaders/fill_outline.vertex.glsl.js')
+    fragmentSource: fillOutlineFragmentSource,
+    vertexSource: fillOutlineVertexSource
   },
   fillOutlinePattern: {
-    fragmentSource: require('../../build/min/src/shaders/fill_outline_pattern.fragment.glsl.js'),
-    vertexSource: require('../../build/min/src/shaders/fill_outline_pattern.vertex.glsl.js')
+    fragmentSource: fillOutlinePatternFragmentSource,
+    vertexSource: fillOutlinePatternVertexSource
   },
   fillPattern: {
-    fragmentSource: require('../../build/min/src/shaders/fill_pattern.fragment.glsl.js'),
-    vertexSource: require('../../build/min/src/shaders/fill_pattern.vertex.glsl.js')
+    fragmentSource: fillPatternFragmentSource,
+    vertexSource: fillPatternVertexSource
   },
   fillExtrusion: {
-    fragmentSource: require('../../build/min/src/shaders/fill_extrusion.fragment.glsl.js'),
-    vertexSource: require('../../build/min/src/shaders/fill_extrusion.vertex.glsl.js')
+    fragmentSource: fillExtrusionFragmentSource,
+    vertexSource: fillExtrusionVertexSource
   },
   fillExtrusionPattern: {
-    fragmentSource: require('../../build/min/src/shaders/fill_extrusion_pattern.fragment.glsl.js'),
-    vertexSource: require('../../build/min/src/shaders/fill_extrusion_pattern.vertex.glsl.js')
+    fragmentSource: fillExtrusionPatternFragmentSource,
+    vertexSource: fillExtrusionPatternVertexSource
   },
   hillshadePrepare: {
-    fragmentSource: require('../../build/min/src/shaders/hillshade_prepare.fragment.glsl.js'),
-    vertexSource: require('../../build/min/src/shaders/hillshade_prepare.vertex.glsl.js')
+    fragmentSource: hillshadePrepareFragmentSource,
+    vertexSource: hillshadePrepareVertexSource
   },
   hillshade: {
-    fragmentSource: require('../../build/min/src/shaders/hillshade.fragment.glsl.js'),
-    vertexSource: require('../../build/min/src/shaders/hillshade.vertex.glsl.js')
+    fragmentSource: hillshadeFragmentSource,
+    vertexSource: hillshadeVertexSource
   },
   line: {
-    fragmentSource: require('../../build/min/src/shaders/line.fragment.glsl.js'),
-    vertexSource: require('../../build/min/src/shaders/line.vertex.glsl.js')
+    fragmentSource: lineFragmentSource,
+    vertexSource: lineVertexSource
   },
   lineGradient: {
-    fragmentSource: require('../../build/min/src/shaders/line_gradient.fragment.glsl.js'),
-    vertexSource: require('../../build/min/src/shaders/line_gradient.vertex.glsl.js')
+    fragmentSource: lineGradientFragmentSource,
+    vertexSource: lineGradientVertexSource
   },
   linePattern: {
-    fragmentSource: require('../../build/min/src/shaders/line_pattern.fragment.glsl.js'),
-    vertexSource: require('../../build/min/src/shaders/line_pattern.vertex.glsl.js')
+    fragmentSource: linePatternFragmentSource,
+    vertexSource: linePatternVertexSource
   },
   lineSDF: {
-    fragmentSource: require('../../build/min/src/shaders/line_sdf.fragment.glsl.js'),
-    vertexSource: require('../../build/min/src/shaders/line_sdf.vertex.glsl.js')
+    fragmentSource: lineSDFFragmentSource,
+    vertexSource: lineSDFVertexSource
   },
   raster: {
-    fragmentSource: require('../../build/min/src/shaders/raster.fragment.glsl.js'),
-    vertexSource: require('../../build/min/src/shaders/raster.vertex.glsl.js')
+    fragmentSource: rasterFragmentSource,
+    vertexSource: rasterVertexSource
   },
   symbolIcon: {
-    fragmentSource: require('../../build/min/src/shaders/symbol_icon.fragment.glsl.js'),
-    vertexSource: require('../../build/min/src/shaders/symbol_icon.vertex.glsl.js')
+    fragmentSource: symbolIconFragmentSource,
+    vertexSource: symbolIconVertexSource
   },
   symbolSDF: {
-    fragmentSource: require('../../build/min/src/shaders/symbol_sdf.fragment.glsl.js'),
-    vertexSource: require('../../build/min/src/shaders/symbol_sdf.vertex.glsl.js')
+    fragmentSource: symbolSDFFragmentSource,
+    vertexSource: symbolSDFVertexSource
   }
 };
 
@@ -191,4 +243,4 @@ ${precision} ${type} ${name} = u_${name};
   });
 }
 
-module.exports = shaders;
+export default shaders;

package/src/source/geojson_source.js

@@ -1,7 +1,8 @@
-const { Event, ErrorEvent, Evented } = require('@mapwhit/events');
+import { ErrorEvent, Event, Evented } from '@mapwhit/events';
 
-const EXTENT = require('../data/extent');
-const browser = require('../util/browser');
+import EXTENT from '../data/extent.js';
+import browser from '../util/browser.js';
+import GeoJSONWorkerSource from './geojson_worker_source.js';
 
 /**
  * A source containing GeoJSON.
@@ -52,8 +53,9 @@ class GeoJSONSource extends Evented {
   #pendingDataEvents = new Set();
   #newData = false;
   #updateInProgress = false;
+  #worker;
 
-  constructor(id, options, dispatcher, eventedParent) {
+  constructor(id, options, eventedParent, { resources, layerIndex }) {
     super();
 
     this.id = id;
@@ -69,14 +71,17 @@ class GeoJSONSource extends Evented {
     this.reparseOverscaled = true;
     this._removed = false;
 
-    this.dispatcher = dispatcher;
     this.setEventedParent(eventedParent);
 
-    this._data = options.data;
+    this.data = options.data;
     this._options = Object.assign({}, options);
 
-    if (options.maxzoom !== undefined) this.maxzoom = options.maxzoom;
-    if (options.type) this.type = options.type;
+    if (options.maxzoom !== undefined) {
+      this.maxzoom = options.maxzoom;
+    }
+    if (options.type) {
+      this.type = options.type;
+    }
 
     const scale = EXTENT / this.tileSize;
 
@@ -107,6 +112,7 @@ class GeoJSONSource extends Evented {
       },
       options.workerOptions
     );
+    this.#worker = new GeoJSONWorkerSource(resources, layerIndex);
   }
 
   load() {
@@ -125,7 +131,7 @@ class GeoJSONSource extends Evented {
    * @returns {GeoJSONSource} this
    */
   setData(data) {
-    this._data = data;
+    this.data = data;
     this.#updateData();
     return this;
   }
@@ -142,7 +148,7 @@ class GeoJSONSource extends Evented {
       this.fire(new Event('dataloading', { dataType: 'source' }));
       while (this.#newData) {
         this.#newData = false;
-        await this._updateWorkerData(this._data);
+        await this._updateWorkerData(this.data);
       }
       this.#pendingDataEvents.forEach(sourceDataType =>
         this.fire(new Event('data', { dataType: 'source', sourceDataType }))
@@ -165,13 +171,9 @@ class GeoJSONSource extends Evented {
     if (!json) {
       throw new Error('no GeoJSON data');
     }
-    const options = { ...this.workerOptions, data: JSON.stringify(json) };
-    this.workerID ??= this.dispatcher.nextWorkerId();
+    const options = { ...this.workerOptions, data: json };
 
-    // target {this.type}.loadData rather than literally geojson.loadData,
-    // so that other geojson-like source types can easily reuse this
-    // implementation
-    await this.dispatcher.send(`${this.type}.loadData`, options, this.workerID);
+    return await this.#worker.loadData(options);
   }
 
   async loadTile(tile) {
@@ -185,14 +187,15 @@ class GeoJSONSource extends Evented {
       source: this.id,
       pixelRatio: browser.devicePixelRatio,
       showCollisionBoxes: this.map.showCollisionBoxes,
-      globalState: this.map.getGlobalState()
+      globalState: this.map.getGlobalState(),
+      justReloaded: tile.workerID != null,
+      painter: this.map.painter
     };
 
-    const justReloaded = tile.workerID != null;
-    tile.workerID ??= this.dispatcher.nextWorkerId(this.workerID);
-    const data = await this.dispatcher.send('loadTile', params, tile.workerID).finally(() => tile.unloadVectorData());
+    tile.workerID ??= true;
+    const data = await this.#worker.loadTile(params).finally(() => tile.unloadVectorData());
     if (!tile.aborted) {
-      tile.loadVectorData(data, this.map.painter, justReloaded);
+      tile.loadVectorData(data, this.map.painter);
     }
   }
 
@@ -206,14 +209,6 @@ class GeoJSONSource extends Evented {
 
   onRemove() {
     this._removed = true;
-    return this.dispatcher.send('removeSource', { type: this.type, source: this.id }, this.workerID);
-  }
-
-  serialize() {
-    return Object.assign({}, this._options, {
-      type: this.type,
-      data: this._data
-    });
   }
 
   hasTransition() {
@@ -221,4 +216,4 @@ class GeoJSONSource extends Evented {
   }
 }
 
-module.exports = GeoJSONSource;
+export default GeoJSONSource;

package/src/source/geojson_worker_source.js

@@ -1,68 +1,14 @@
-const rewind = require('@mapwhit/geojson-rewind');
-const GeoJSONWrapper = require('./geojson_wrapper');
-const { fromVectorTileJs } = require('@mapwhit/vt-pbf');
-const { default: Supercluster } = require('supercluster');
-const { default: geojsonvt } = require('geojson-vt');
-const VectorTileWorkerSource = require('./vector_tile_worker_source');
-
-function loadGeoJSONTile(params) {
-  if (!this._geoJSONIndex) {
-    if (!this._createGeoJSONIndex) {
-      return; // we couldn't load the file
-    }
-
-    try {
-      this._geoJSONIndex = this._createGeoJSONIndex();
-    } finally {
-      this._createGeoJSONIndex = null;
-    }
-  }
-
-  const { z, x, y } = params.tileID.canonical;
-  const geoJSONTile = this._geoJSONIndex.getTile(z, x, y);
-  if (!geoJSONTile) {
-    return; // nothing in the given tile
-  }
-
-  const geojsonWrapper = new GeoJSONWrapper(geoJSONTile.features);
-
-  // Encode the geojson-vt tile into binary vector tile form.  This
-  // is a convenience that allows `FeatureIndex` to operate the same way
-  // across `VectorTileSource` and `GeoJSONSource` data.
-  let pbf = fromVectorTileJs(geojsonWrapper);
-  if (pbf.byteOffset !== 0 || pbf.byteLength !== pbf.buffer.byteLength) {
-    // Compatibility with node Buffer (https://github.com/mapbox/pbf/issues/35)
-    pbf = new Uint8Array(pbf);
-  }
-
-  return {
-    vectorTile: geojsonWrapper,
-    rawData: pbf.buffer
-  };
-}
+import rewind from '@mapwhit/geojson-rewind';
+import geojsonvt from 'geojson-vt';
+import Supercluster from 'supercluster';
+import GeoJSONWrapper from './geojson_wrapper.js';
+import VectorTileWorkerSource from './vector_tile_worker_source.js';
 
 /**
  * The {@link WorkerSource} implementation that supports {@link GeoJSONSource}.
- * This class is designed to be easily reused to support custom source types
- * for data formats that can be parsed/converted into an in-memory GeoJSON
- * representation.  To do so, create it with
- * `new GeoJSONWorkerSource(resources, layerIndex, customLoadGeoJSONFunction)`.
- * For a full example, see [mapbox-gl-topojson](https://github.com/developmentseed/mapbox-gl-topojson).
  *
  */
 class GeoJSONWorkerSource extends VectorTileWorkerSource {
-  /**
-   * @param [loadGeoJSON] Optional method for custom loading/parsing of
-   * GeoJSON based on parameters passed from the main-thread Source.
-   * See {@link GeoJSONWorkerSource#loadGeoJSON}.
-   */
-  constructor(resources, layerIndex, loadGeoJSON) {
-    super(resources, layerIndex, loadGeoJSONTile);
-    if (loadGeoJSON) {
-      this.loadGeoJSON = loadGeoJSON;
-    }
-  }
-
   /**
    * Fetches (if appropriate), parses, and index geojson data into tiles. This
    * preparatory method must be called before {@link GeoJSONWorkerSource#loadTile}
@@ -76,7 +22,7 @@ class GeoJSONWorkerSource extends VectorTileWorkerSource {
    * @param callback
    */
   loadData(params) {
-    const data = this.loadGeoJSON(params);
+    const data = loadJSON(params.data);
     this._geoJSONIndex = null;
     this._createGeoJSONIndex = params.cluster
       ? () => {
@@ -89,21 +35,47 @@ class GeoJSONWorkerSource extends VectorTileWorkerSource {
         };
   }
 
-  /**
-   * Fetch and parse GeoJSON according to the given params.
-   *
-   * GeoJSON is expected as a literal (string or object) `params.data`.
-   *
-   * @param params
-   * @param [params.data] Literal GeoJSON data. Must be provided.
-   */
-  loadGeoJSON(params) {
-    try {
-      return JSON.parse(params.data);
-    } catch (e) {
-      throw new Error('Input data is not a valid GeoJSON object.');
+  getTile(tileID) {
+    if (!this._geoJSONIndex) {
+      if (!this._createGeoJSONIndex) {
+        return; // we couldn't load the file
+      }
+
+      try {
+        this._geoJSONIndex = this._createGeoJSONIndex();
+      } finally {
+        this._createGeoJSONIndex = null;
+      }
+    }
+    const { z, x, y } = tileID.canonical;
+    return this._geoJSONIndex.getTile(z, x, y);
+  }
+
+  loadVectorData({ tileID }) {
+    const geoJSONTile = this.getTile(tileID);
+    if (!geoJSONTile) {
+      return; // nothing in the given tile
     }
+
+    const vectorTile = new GeoJSONWrapper(geoJSONTile.features);
+
+    return {
+      vectorTile
+    };
+  }
+}
+
+/**
+ * Fetch and parse GeoJSON according to the given params.
+ *
+ * @param data Literal GeoJSON data. Must be provided.
+ */
+function loadJSON(data) {
+  try {
+    return typeof data === 'string' ? JSON.parse(data) : data;
+  } catch {
+    throw new Error('Input data is not a valid GeoJSON object.');
   }
 }
 
-module.exports = GeoJSONWorkerSource;
+export default GeoJSONWorkerSource;

package/src/source/geojson_wrapper.js

@@ -1,6 +1,6 @@
-const { default: Point } = require('@mapbox/point-geometry');
-const { VectorTileFeature } = require('@mapwhit/vector-tile');
-const EXTENT = require('../data/extent');
+import Point from '@mapbox/point-geometry';
+import { VectorTileFeature } from '@mapwhit/vector-tile';
+import EXTENT from '../data/extent.js';
 
 const { toGeoJSON } = VectorTileFeature.prototype;
 
@@ -20,6 +20,14 @@ class FeatureWrapper {
     if ('id' in feature && !isNaN(feature.id)) {
       this.id = Number.parseInt(feature.id, 10);
     }
+
+    // fix geometry - it has to be at least array of 2 points
+    if (typeof this._feature.geometry[0] === 'number') {
+      this._feature.geometry = [this._feature.geometry];
+      if (this._feature.geometry.length === 1) {
+        this._feature.geometry.push(this._feature.geometry[0]);
+      }
+    }
   }
 
   get type() {
@@ -27,7 +35,7 @@ class FeatureWrapper {
   }
 
   get properties() {
-    return this._feature.tags;
+    return this._feature.tags ?? {};
   }
 
   get extent() {
@@ -68,7 +76,7 @@ class GeoJSONWrapper {
   }
 }
 
-module.exports = GeoJSONWrapper;
+export default GeoJSONWrapper;
 
 function makePoint(arr) {
   return new Point(arr[0], arr[1]);

package/src/source/image_source.js

@@ -1,15 +1,13 @@
-const { getCoordinatesCenter } = require('../util/util');
-
-const { CanonicalTileID } = require('./tile_id');
-const LngLat = require('../geo/lng_lat');
-const { default: Point } = require('@mapbox/point-geometry');
-const { Event, ErrorEvent, Evented } = require('@mapwhit/events');
-const loadImage = require('../util/loader/image');
-const EXTENT = require('../data/extent');
-const { RasterBoundsArray } = require('../data/array_types');
-const rasterBoundsAttributes = require('../data/raster_bounds_attributes');
-const SegmentVector = require('../data/segment');
-const Texture = require('../render/texture');
+import { ErrorEvent, Event, Evented } from '@mapwhit/events';
+import { RasterBoundsArray } from '../data/array_types.js';
+import EXTENT from '../data/extent.js';
+import rasterBoundsAttributes from '../data/raster_bounds_attributes.js';
+import SegmentVector from '../data/segment.js';
+import LngLat from '../geo/lng_lat.js';
+import Texture from '../render/texture.js';
+import loadImage from '../util/loader/image.js';
+import { getCoordinatesCenter } from '../util/util.js';
+import { CanonicalTileID } from './tile_id.js';
 
 /**
  * A data source containing an image.
@@ -44,10 +42,9 @@ class ImageSource extends Evented {
   /**
    * @private
    */
-  constructor(id, options, dispatcher, eventedParent) {
+  constructor(id, options, eventedParent) {
     super();
     this.id = id;
-    this.dispatcher = dispatcher;
     this.coordinates = options.coordinates;
 
     this.type = 'image';
@@ -125,10 +122,10 @@ class ImageSource extends Evented {
     // tile.
     const tileCoords = cornerZ0Coords.map(coord => {
       const zoomedCoord = coord.zoomTo(centerCoord.zoom);
-      return new Point(
-        Math.round((zoomedCoord.column - centerCoord.column) * EXTENT),
-        Math.round((zoomedCoord.row - centerCoord.row) * EXTENT)
-      );
+      return {
+        x: Math.round((zoomedCoord.column - centerCoord.column) * EXTENT),
+        y: Math.round((zoomedCoord.row - centerCoord.row) * EXTENT)
+      };
     });
 
     this._boundsArray = new RasterBoundsArray();
@@ -185,24 +182,16 @@ class ImageSource extends Evented {
     // single tile.
     if (this.tileID?.equals(tile.tileID.canonical)) {
       this.tiles[String(tile.tileID.wrap)] = tile;
-      tile.buckets = {};
+      tile.buckets = new Map();
     } else {
       tile.state = 'errored';
     }
     return Promise.resolve();
   }
 
-  serialize() {
-    return {
-      type: 'image',
-      url: this.options.url,
-      coordinates: this.coordinates
-    };
-  }
-
   hasTransition() {
     return false;
   }
 }
 
-module.exports = ImageSource;
+export default ImageSource;

package/src/source/load_tilejson.js

@@ -1,8 +1,8 @@
-const { pick } = require('../util/object');
+import { pick } from '../util/object.js';
 
-module.exports = function (tileJSON) {
+export default function (tileJSON) {
   return tileJSON.resourceSets ? fromResourseSets(tileJSON) : fromTileJSON(tileJSON);
-};
+}
 
 function fromTileJSON(tileJSON) {
   const result = pick(tileJSON, ['tiles', 'minzoom', 'maxzoom', 'attribution', 'bounds']);

package/src/source/pixels_to_tile_units.js

@@ -1,4 +1,4 @@
-const EXTENT = require('../data/extent');
+import EXTENT from '../data/extent.js';
 
 /**
  * Converts a pixel value at a the given zoom level to tile units.
@@ -12,6 +12,6 @@ const EXTENT = require('../data/extent');
  * @returns value in tile units
  * @private
  */
-module.exports = function (tile, pixelValue, z) {
+export default function (tile, pixelValue, z) {
   return pixelValue * (EXTENT / (tile.tileSize * 2 ** (z - tile.tileID.overscaledZ)));
-};
+}