Merge pull request #29 from kalenkevich/line-styles

Line styles part 1
kalenkevich · Apr 4, 2024 · c7e3744 · c7e3744
2 parents 5c2d215 + d9b945b
commit c7e3744
Show file tree

Hide file tree

Showing 50 changed files with 1,468 additions and 13,664 deletions.
diff --git a/src/demo/demo_utils.ts b/src/demo/demo_utils.ts
@@ -0,0 +1,20 @@
+export function createRootEl(
+  width: number = window.innerWidth,
+  height: number = window.innerHeight,
+  margin: number = 0
+) {
+  width -= margin;
+  height -= margin;
+
+  const div = document.createElement('div');
+
+  div.id = 'glide-gl';
+  div.style.margin = `${margin / 2}px`;
+  div.style.width = `${width}px`;
+  div.style.height = `${height}px`;
+  div.style.position = `relative`;
+  div.style.overflow = 'hidden';
+  document.body.appendChild(div);
+
+  return div;
+}
diff --git a/src/demo/enabled_features.ts b/src/demo/enabled_features.ts
@@ -0,0 +1,10 @@
+import { MapFeatureFlags } from '../map/flags';
+import { FontFormatType } from '../map/font/font_config';
+
+export const ENABLED_FEATURE_FLAGS: MapFeatureFlags = {
+  debugLayer: false,
+  webglRendererDebug: false,
+  webglRendererUseShaderLines: true,
+  webglRendererFontFormatType: FontFormatType.texture,
+  enableObjectSelection: false,
+};
diff --git a/src/demo/map_demo.ts b/src/demo/map_demo.ts
@@ -9,35 +9,12 @@ import {
   BingImageTyleStyles,
 } from './map_styles';
 import { MapTileRendererType } from '../map/renderer/renderer';
-import { FontFormatType } from '../map/font/font_config';
+import { createRootEl } from './demo_utils';
+import { ENABLED_FEATURE_FLAGS } from './enabled_features';
 
-const MAP_LOCATION_PARAM_NAME = 'l';
-
-function createRootEl() {
-  const margin = 0;
-  const width = window.innerWidth - margin * 2 - 2;
-  const height = window.innerHeight - margin * 2 - 2;
-
-  const div = document.createElement('div');
-
-  div.id = 'glide-gl';
-  div.style.margin = `${margin}px`;
-  div.style.width = `${width}px`;
-  div.style.height = `${height}px`;
-  div.style.position = `relative`;
-  div.style.overflow = 'hidden';
-  document.body.appendChild(div);
-
-  window.addEventListener('resize', () => {
-    const width = window.innerWidth - margin * 2 - 2;
-    const height = window.innerHeight - margin * 2 - 2;
-
-    div.style.width = `${width}px`;
-    div.style.height = `${height}px`;
-  });
+const MAP_ROOT_EL_MARGIN = 10;
 
-  return div;
-}
+const MAP_LOCATION_PARAM_NAME = 'l';
 
 const getSafelocation = (zoom: number, lat: number, lng: number) => {
   return `${Number(zoom).toFixed(4)}/${Number(lat).toFixed(4)}/${Number(lng).toFixed(4)}`;
@@ -88,7 +65,7 @@ function fireMapEvent(eventType: MapEventType) {
 let currentMap: GlideMap | undefined;
 
 export function renderMap() {
-  const rootDiv = createRootEl();
+  const rootDiv = createRootEl(window.innerWidth, window.innerHeight, MAP_ROOT_EL_MARGIN);
   document.body.appendChild(rootDiv);
 
   const [zoom, lat, lng] = getStartMapLocation();
@@ -98,7 +75,7 @@ export function renderMap() {
     zoom,
     center: [lat, lng],
     rendrer: MapTileRendererType.webgl2,
-    tileStyles: SateliteTilesStyles,
+    tileStyles: MapboxVectorTileStyles,
     projection: 'mercator',
     controls: {
       compas: true,
@@ -138,12 +115,17 @@ export function renderMap() {
       ],
     },
     workerPool: 8,
-    featureFlags: {
-      debugLayer: true,
-      webglRendererDebug: false,
-      webglRendererFontFormatType: FontFormatType.texture,
-      enableObjectSelection: false,
-    },
+    featureFlags: ENABLED_FEATURE_FLAGS,
+  });
+
+  window.addEventListener('resize', () => {
+    const width = window.innerWidth - MAP_ROOT_EL_MARGIN;
+    const height = window.innerHeight - MAP_ROOT_EL_MARGIN;
+
+    rootDiv.style.width = `${width}px`;
+    rootDiv.style.height = `${height}px`;
+
+    currentMap.resize(width, height);
   });
 
   subscribeOnEvents(currentMap);

diff --git a/src/demo/map_styles.ts b/src/demo/map_styles.ts
@@ -31,7 +31,7 @@ const StyleFonts: {
   defaultFont: {
     type: FontFormatType.sdf,
     name: 'defaultFont',
-    pixelRatio: 2,
+    pixelRatio: 1,
     fontSize: 24,
     sourceType: FontSourceType.pbf,
     sourceUrl:
@@ -41,6 +41,7 @@ const StyleFonts: {
       [256, 511],
       [1024, 1279],
       [8192, 8447],
+      // [19968, 20479], // chinese
     ],
   },
   // roboto: {
@@ -517,7 +518,9 @@ export const MapboxVectorTileStyles: DataTileStyles = {
         type: MapTileFeatureType.line,
         show: ['$lte', ['$get', 'properties.admin_level'], 7],
         color: ['$rgba', 120, 123, 140, 1],
-        width: 2,
+        width: 4,
+        borderWidth: 2,
+        borderColor: ['$rgba', 0, 0, 0, 1],
       },
       maxzoom: 16,
       minzoom: 0,
@@ -538,7 +541,9 @@ export const MapboxVectorTileStyles: DataTileStyles = {
           ['motorway', ['$rgba', 233, 201, 43, 1]],
           ['$default', ['$rgba', 215, 218, 226, 1]],
         ],
-        width: ['$switch', ['$get', 'properties.class'], ['primary', 4], ['$default', 2]],
+        width: ['$switch', ['$get', 'properties.class'], ['primary', 12], ['$default', 6]],
+        borderWidth: 2,
+        borderColor: ['$rgba', 0, 0, 0, 1],
         joinStyle: LineJoinStyle.round,
       },
       minzoom: 6,
@@ -652,7 +657,7 @@ export const MapboxVectorTileStyles: DataTileStyles = {
         borderColor: ['$rgba', 255, 255, 255, 1],
         text: ['$get', 'properties.house_num'],
         font: 'defaultFont',
-        fontSize: 14,
+        fontSize: 12,
       },
     },
     structureIcon: {
@@ -787,7 +792,7 @@ export const SateliteTilesStyles: DataTileStyles = {
         color: ['$rgba', 0, 0, 0, 1],
         borderColor: ['$rgba', 255, 255, 255, 1],
         text: ['$get', 'properties.name'],
-        show: ['$lte', ['$get', 'properties.filterrank'], 3],
+        show: ['$lte', ['$get', 'properties.filterrank'], 0],
         font: 'defaultFont',
         fontSize: [
           '$switch',
@@ -803,6 +808,21 @@ export const SateliteTilesStyles: DataTileStyles = {
       maxzoom: 16,
       minzoom: 0,
     },
+    housenum_label: {
+      source: 'dataSource',
+      sourceLayer: 'housenum_label',
+      styleLayerName: 'housenum_labelStyles',
+      zIndex: 4,
+      show: true,
+      feature: {
+        type: MapTileFeatureType.text,
+        color: ['$rgba', 0, 0, 0, 1],
+        borderColor: ['$rgba', 255, 255, 255, 1],
+        text: ['$get', 'properties.house_num'],
+        font: 'defaultFont',
+        fontSize: 12,
+      },
+    },
   },
   glyphs: {
     iconsAtlas: {