Use styles in renderer (#16)

* Use styles in renderer. * Update styles format * Support rendering points. * Fix ThreeJs renderer. * Render lines with width three js. * Integration tests updated.
kalenkevich · Oct 19, 2023 · 05040b4 · 05040b4
1 parent 6621c01
commit 05040b4
Show file tree

Hide file tree

Showing 58 changed files with 3,670 additions and 1,875 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -5,7 +5,7 @@
   "main": "index.js",
   "scripts": {
     "build": "rm -rf dist && node ./esbuild.mjs",
-    "start": "node ./esbuild.mjs --serve",
+    "start": "webpack serve --open",
     "test": "jest",
     "test:unit": "jest --selectProjects unit",
     "test:build": "node ./esbuild.mjs",
@@ -21,6 +21,7 @@
     "@turf/bbox": "^6.5.0",
     "earcut": "^2.2.4",
     "geojson": "^0.5.0",
+    "meshline": "^3.1.6",
     "pbf": "^3.2.1",
     "three": "^0.157.0",
     "turf": "^3.0.14",
@@ -45,6 +46,7 @@
     "@types/turf": "^3.5.32",
     "esbuild": "0.19.4",
     "express": "^4.18.2",
+    "html-webpack-plugin": "^5.5.3",
     "jest": "^29.7.0",
     "jest-environment-jsdom": "^29.7.0",
     "jest-image-snapshot": "^6.2.0",
@@ -56,6 +58,9 @@
     "ts-jest": "^29.1.1",
     "ts-loader": "^9.4.4",
     "ts-node": "^10.9.1",
-    "typescript": "^5.2.2"
+    "typescript": "^5.2.2",
+    "webpack": "^5.88.2",
+    "webpack-cli": "^5.1.4",
+    "webpack-dev-server": "^4.15.1"
   }
 }
diff --git a/src/demo/map_demo.ts b/src/demo/map_demo.ts
@@ -1,92 +1,106 @@
-import {MapOptions,} from '../map/types';
+import { MapOptions } from '../map/types';
 import { LatLng } from '../map/geo/lat_lng';
 import { GlideMap, MapEventType, DEFAULT_MAP_METADATA } from '../map/map';
 import { MapTileFormatType } from '../map/tile/tile';
 import { MapRendererType } from '../map/render/renderer';
+import { VectorStyles } from './vector_styles';
 
-type ButtonOption = Partial<MapOptions & {name: string; id: string}>;
+type ButtonOption = Partial<MapOptions & { name: string; id: string }>;
 
 const MAP_LOCATION_PARAM_NAME = 'l';
 const USE_LOCAL_SERVER_PARAM_NAME = 'ls';
 const SELECTED_MAP_VIEW_PARAM_MNAME = 'sm';
 
 const useLocalServer = new URLSearchParams(document.location.search).has(USE_LOCAL_SERVER_PARAM_NAME);
 const OSM_TILE_URL = `${useLocalServer ? '/osm' : 'https://tile.openstreetmap.org'}/{z}/{x}/{y}.png`;
-const MAPTILER_PNG_TILE_URL = `${useLocalServer ? '/maptiler/satellite' : 'https://api.maptiler.com/maps/satellite/256'}/{z}/{x}/{y}@2x.jpg?key=MfT8xhKONCRR9Ut0IKkt`;
-const MAPTILER_VT_META_URL = `${useLocalServer ? '/maptiler/tiles_meta.json' : 'https://api.maptiler.com/tiles/v3/tiles.json'}?key=MfT8xhKONCRR9Ut0IKkt`;
-
-export const ButtonMapOptions: ButtonOption[] = [{
-  name: 'VT webgl maptiler',
-  id: 'webgl_vt_maptiler',
-  renderer: MapRendererType.webgl,
-  resizable: true,
-  preheatTiles: true,
-  tilesMetaUrl: MAPTILER_VT_META_URL,
-}, {
-  name: 'VT threejs maptiler',
-  id: 'threejs_vt_maptiler',
-  renderer: MapRendererType.threejs,
-  resizable: true,
-  tilesMetaUrl: MAPTILER_VT_META_URL,
-}, {
-  name: 'Png image osm',
-  id: 'html_png_osm',
-  renderer: MapRendererType.png,
-  resizable: true,
-  mapMeta: {
-    ...DEFAULT_MAP_METADATA,
-    maxzoom: 19,
-    minzoom: 0,
-    format: MapTileFormatType.png,
-    tiles: [OSM_TILE_URL],
+const MAPTILER_PNG_TILE_URL = `${
+  useLocalServer ? '/maptiler/satellite' : 'https://api.maptiler.com/maps/satellite/256'
+}/{z}/{x}/{y}@2x.jpg?key=MfT8xhKONCRR9Ut0IKkt`;
+const MAPTILER_VT_META_URL = `${
+  useLocalServer ? '/maptiler/tiles_meta.json' : 'https://api.maptiler.com/tiles/v3/tiles.json'
+}?key=MfT8xhKONCRR9Ut0IKkt`;
+
+export const ButtonMapOptions: ButtonOption[] = [
+  {
+    name: 'VT webgl maptiler',
+    id: 'webgl_vt_maptiler',
+    renderer: MapRendererType.webgl,
+    resizable: true,
+    preheatTiles: true,
+    tileMetaUrl: MAPTILER_VT_META_URL,
+    styles: VectorStyles,
   },
-}, {
-  name: 'Png image maptiler',
-  id: 'html_png_maptiler',
-  renderer: MapRendererType.png,
-  resizable: true,
-  mapMeta: {
-    ...DEFAULT_MAP_METADATA,
-    maxzoom: 19,
-    minzoom: 0,
-    format: MapTileFormatType.png,
-    tiles: [MAPTILER_PNG_TILE_URL],
+  {
+    name: 'VT threejs maptiler',
+    id: 'threejs_vt_maptiler',
+    renderer: MapRendererType.threejs,
+    resizable: true,
+    tileMetaUrl: MAPTILER_VT_META_URL,
+    styles: VectorStyles,
   },
-}, {
-  name: 'Png webgl osm',
-  id: 'webgl_png_osm',
-  renderer: MapRendererType.webgl,
-  resizable: true,
-  preheatTiles: true,
-  mapMeta: {
-    ...DEFAULT_MAP_METADATA,
-    maxzoom: 19,
-    minzoom: 0,
-    format: MapTileFormatType.png,
-    tiles: [OSM_TILE_URL],
+  {
+    name: 'Png image osm',
+    id: 'html_png_osm',
+    renderer: MapRendererType.png,
+    resizable: true,
+    mapMeta: {
+      ...DEFAULT_MAP_METADATA,
+      maxzoom: 19,
+      minzoom: 0,
+      format: MapTileFormatType.png,
+      tiles: [OSM_TILE_URL],
+    },
   },
-}, {
-  name: 'Png webgl maptiler',
-  id: 'webgl_png_maptiler',
-  renderer: MapRendererType.webgl,
-  resizable: true,
-  preheatTiles: true,
-  mapMeta: {
-    ...DEFAULT_MAP_METADATA,
-    maxzoom: 19,
-    minzoom: 0,
-    format: MapTileFormatType.png,
-    tiles: [MAPTILER_PNG_TILE_URL],
+  {
+    name: 'Png image maptiler',
+    id: 'html_png_maptiler',
+    renderer: MapRendererType.png,
+    resizable: true,
+    mapMeta: {
+      ...DEFAULT_MAP_METADATA,
+      maxzoom: 19,
+      minzoom: 0,
+      format: MapTileFormatType.png,
+      tiles: [MAPTILER_PNG_TILE_URL],
+    },
   },
-}];
+  {
+    name: 'Png webgl osm',
+    id: 'webgl_png_osm',
+    renderer: MapRendererType.webgl,
+    resizable: true,
+    preheatTiles: true,
+    mapMeta: {
+      ...DEFAULT_MAP_METADATA,
+      maxzoom: 19,
+      minzoom: 0,
+      format: MapTileFormatType.png,
+      tiles: [OSM_TILE_URL],
+    },
+  },
+  {
+    name: 'Png webgl maptiler',
+    id: 'webgl_png_maptiler',
+    renderer: MapRendererType.webgl,
+    resizable: true,
+    preheatTiles: true,
+    mapMeta: {
+      ...DEFAULT_MAP_METADATA,
+      maxzoom: 19,
+      minzoom: 0,
+      format: MapTileFormatType.png,
+      tiles: [MAPTILER_PNG_TILE_URL],
+    },
+  },
+];
 
 let currentMap: GlideMap | undefined;
 let rootEl: HTMLElement | undefined;
 
 function createRootEl() {
   const margin = 20;
-  const width = window.innerWidth - (margin * 2) - 2;
-  const height = window.innerHeight - (margin * 2) - 2 - 50;
+  const width = window.innerWidth - margin * 2 - 2;
+  const height = window.innerHeight - margin * 2 - 2 - 50;
 
   const div = document.createElement('div');
 
@@ -98,8 +112,8 @@ function createRootEl() {
   document.body.appendChild(div);
 
   window.addEventListener('resize', () => {
-    const width = window.innerWidth - (margin * 2) - 2;
-    const height = window.innerHeight - (margin * 2) - 2 - 50;
+    const width = window.innerWidth - margin * 2 - 2;
+    const height = window.innerHeight - margin * 2 - 2 - 50;
 
     div.style.width = `${width}px`;
     div.style.height = `${height}px`;
@@ -110,7 +124,7 @@ function createRootEl() {
 
 function getStartMapLocation(): [number, number, number] {
   const query = new URLSearchParams(document.location.search);
-  
+
   if (!query.has(MAP_LOCATION_PARAM_NAME)) {
     return [14.3218, 53.0875, 25.3183];
   }
@@ -134,7 +148,7 @@ function getStartMapViewId(): string {
 const syncQueryParamsWithMapState = () => {
   const center = currentMap.getCenter();
   const zoom = currentMap.getZoom();
-  
+
   const query = new URLSearchParams(document.location.search);
   const safeLocation = `${Number(zoom).toFixed(4)}/${Number(center.lat).toFixed(4)}/${Number(center.lng).toFixed(4)}`;
 
@@ -155,7 +169,7 @@ const syncQueryParamsWithSelectedMap = (selectdMapId: string) => {
   query.append(SELECTED_MAP_VIEW_PARAM_MNAME, selectdMapId);
 
   history.replaceState(null, '', '?' + query.toString());
-}
+};
 
 function fireMapEvent(eventType: MapEventType) {
   document.dispatchEvent(new Event(eventType));
@@ -193,7 +207,7 @@ const createDownloadTilesButton = () => {
 };
 
 const showMap = (options: ButtonOption[], optionId: string) => {
-  const option =  options.find((op) => op.id === optionId);
+  const option = options.find(op => op.id === optionId);
 
   if (currentMap) {
     unsubscribeFromEvents(currentMap);
@@ -232,7 +246,7 @@ export const renderMapOptions = (options: ButtonOption[]) => {
     mapViewSelect.appendChild(selectOption);
   }
 
-  mapViewSelect.addEventListener('change', (e) => {
+  mapViewSelect.addEventListener('change', e => {
     // @ts-ignore
     const id = e.target.value;
 
@@ -242,6 +256,6 @@ export const renderMapOptions = (options: ButtonOption[]) => {
   downloadTilesButton.onclick = () => {
     currentMap.downloadTiles();
   };
-  
+
   showMap(options, startMapViewOptionId);
-};
+};