MVTAnnotationsPlugin, MVTImageOverlay: Add reasonable default behavior

eslint.config.js

@@ -131,6 +131,7 @@ export default [
 			'jsdoc/no-undefined-types': [ 'error', {
 				definedTypes: [
 					'ArrayBufferView',
+					'Iterable',
 					'RequestInit',
 					'TypedArray',
 					'TypedArrayConstructor',

example/three/annotationsExample.js

@@ -12,6 +12,8 @@ import {
 	PMTilesOverlay,
 	MVTAnnotationsPlugin,
 	MVTAnnotationsDriver,
+	MVTIconGlyphs,
+	MVTLabelGlyphs,
 	UpdateOnChangePlugin,
 } from '3d-tiles-renderer/plugins';
 import { LoadRegionPlugin } from '3d-tiles-renderer/three/plugins';
@@ -25,8 +27,6 @@ import {
 } from 'three';
 import { DRACOLoader } from 'three/addons/loaders/DRACOLoader.js';
 import { GUI } from 'three/addons/libs/lil-gui.module.min.js';
-import { AnnotationPoints } from './src/plugins/mvt/AnnotationPoints.js';
-import { CharacterPoints } from './src/plugins/mvt/CharacterPoints.js';
 import { MeshBVHPlugin } from './src/plugins/MeshBVHPlugin.js';
 
 // CDN source for the icons
@@ -142,7 +142,7 @@ class ExampleAnnotationsDriver extends MVTAnnotationsDriver {
 		const dpr = renderer.getPixelRatio();
 
 		// icons for point annotations
-		const annotationPoints = new AnnotationPoints( {
+		const annotationPoints = new MVTIconGlyphs( {
 			getKind: ( layer, properties ) => {
 
 				return KIND_TO_ICON[ properties.kind ] || 'point';
@@ -176,7 +176,7 @@ class ExampleAnnotationsDriver extends MVTAnnotationsDriver {
 		);
 
 		// glyphs for text ( road ) annotations
-		const characterPoints = new CharacterPoints( {
+		const characterPoints = new MVTLabelGlyphs( {
 			strokeStyle: '#3f3e4c',
 			strokeWidth: 3 * dpr,
 		} );

example/three/pmtiles.js

@@ -13,7 +13,7 @@ import {
 import GUI from 'three/addons/libs/lil-gui.module.min.js';
 
 // Protomaps "Light" theme — from protomaps/basemaps flavors.ts
-const LAYERS_LIGHT = {
+const LAYERS = {
 	earth: { enabled: true, fill: '#e2dfda', order: 0 },
 	water: { enabled: true, fill: '#80deea', order: 1 },
 	landcover: { enabled: true, fill: '#c4e7d2', order: 2 },
@@ -27,84 +27,6 @@ const LAYERS_LIGHT = {
 	pois: { enabled: true, fill: '#1a8cbd', radius: 3, order: 10 },
 };
 
-/*
-// Protomaps "Dark" theme — from protomaps/basemaps flavors.ts
-const LAYERS_DARK = {
-	earth: { enabled: true, fill: '#1f1f1f', order: 0 },
-	water: { enabled: true, fill: '#31353f', order: 1 },
-	landcover: { enabled: true, fill: '#1c2925', order: 2 },
-	landuse: { enabled: true, fill: '#1c2421', order: 3 },
-	natural: { enabled: true, fill: '#212123', order: 4 },
-	buildings: { enabled: true, fill: '#111111', order: 5 },
-	roads: { enabled: true, stroke: '#3d3d3d', order: 6 },
-	transit: { enabled: true, stroke: '#000000', order: 7 },
-	boundaries: { enabled: true, stroke: '#5b6374', order: 8 },
-	places: { enabled: true, fill: '#7a7a7a', order: 9 },
-	pois: { enabled: true, fill: '#4299bb', radius: 3, order: 10 },
-};
-
-// Protomaps "White" theme — from protomaps/basemaps flavors.ts
-const LAYERS_WHITE = {
-	earth: { enabled: true, fill: '#ffffff', order: 0 },
-	water: { enabled: true, fill: '#dcdcdc', order: 1 },
-	landcover: { enabled: true, fill: '#fcfcfc', order: 2 },
-	landuse: { enabled: true, fill: '#fcfcfc', order: 3 },
-	natural: { enabled: true, fill: '#fafafa', order: 4 },
-	buildings: { enabled: true, fill: '#efefef', order: 5 },
-	roads: { enabled: true, stroke: '#ebebeb', order: 6 },
-	transit: { enabled: true, stroke: '#d6d6d6', order: 7 },
-	boundaries: { enabled: true, stroke: '#adadad', order: 8 },
-	places: { enabled: true, fill: '#5c5c5c', order: 9 },
-	pois: { enabled: true, fill: '#1a8cbd', radius: 3, order: 10 },
-};
-
-// Protomaps "Black" theme — from protomaps/basemaps flavors.ts
-const LAYERS_BLACK = {
-	earth: { enabled: true, fill: '#141414', order: 0 },
-	water: { enabled: true, fill: '#333333', order: 1 },
-	landcover: { enabled: true, fill: '#181818', order: 2 },
-	landuse: { enabled: true, fill: '#181818', order: 3 },
-	natural: { enabled: true, fill: '#161616', order: 4 },
-	buildings: { enabled: true, fill: '#0a0a0a', order: 5 },
-	roads: { enabled: true, stroke: '#3f3f3f', order: 6 },
-	transit: { enabled: true, stroke: '#3f3f3f', order: 7 },
-	boundaries: { enabled: true, stroke: '#707070', order: 8 },
-	places: { enabled: true, fill: '#999999', order: 9 },
-	pois: { enabled: true, fill: '#707070', radius: 3, order: 10 },
-};
-
-// Pastel theme — each layer gets a distinct hue at high lightness, moderate saturation
-const LAYERS_PASTEL = {
-	earth: { enabled: true, fill: '#f6f5f2', order: 0 },
-	water: { enabled: true, fill: '#c2e0f4', order: 1 },
-	landcover: { enabled: true, fill: '#d4ecd5', order: 2 },
-	landuse: { enabled: true, fill: '#e6e4f2', order: 3 },
-	natural: { enabled: true, fill: '#f3ebd1', order: 4 },
-	buildings: { enabled: true, fill: '#f7e1e1', order: 5 },
-	roads: { enabled: true, stroke: '#ffffff', order: 6 },
-	transit: { enabled: true, stroke: '#ccbfe6', order: 7 },
-	boundaries: { enabled: true, stroke: '#d9c2cd', order: 8 },
-	places: { enabled: true, fill: '#5c5470', order: 9 },
-	pois: { enabled: true, fill: '#e08a9b', radius: 3, order: 10 },
-};
-
-const LAYERS_RADICAL = {
-	earth: { enabled: true, fill: '#0c001a', order: 0 },
-	water: { enabled: true, fill: '#00f0ff', order: 1 },
-	landcover: { enabled: true, fill: '#120036', order: 2 },
-	landuse: { enabled: true, fill: '#ff0055', order: 3 },
-	natural: { enabled: true, fill: '#00ff66', order: 4 },
-	buildings: { enabled: true, fill: '#2d0066', order: 5 },
-	roads: { enabled: true, stroke: '#ffdd00', order: 6 },
-	transit: { enabled: true, stroke: '#ff00ff', order: 7 },
-	boundaries: { enabled: true, stroke: '#00ffcc', order: 8 },
-	places: { enabled: true, fill: '#ffffff', order: 9 },
-	pois: { enabled: true, fill: '#ff9900', radius: 3, order: 10 },
-};
-*/
-
-const LAYERS = LAYERS_LIGHT;
-
 let scene, renderer, camera, controls, tiles, overlay;
 
 init();