Update NOC layer

emfcamp · May 31, 2024 · c485995 · c485995
1 parent 3d65fb1
commit c485995
Show file tree

Hide file tree

Showing 3 changed files with 81 additions and 10 deletions.
diff --git a/web/src/index.ts b/web/src/index.ts
@@ -24,7 +24,7 @@ async function loadIcons(map: maplibregl.Map) {
     const ratio = Math.min(Math.round(window.devicePixelRatio), 2)
     const icons = manifest[ratio.toString()]
 
-    const images = ['camping', 'no-access', 'water', 'tree']
+    const images = ['camping', 'no-access', 'water', 'tree', 'datenklo']
 
     Promise.all(
         images
@@ -81,7 +81,8 @@ class EventMap {
         'Buried Services': 'services_',
         Water: 'site_water_',
         DKs: 'dk_',
-        'NOC-Physical': 'noc_',
+        Network: 'noc_',
+        'NOC Cables': 'noc_cable',
         Power: 'power_',
         Lighting: 'lighting_',
         Villages: 'villages_',
@@ -182,7 +183,7 @@ class EventMap {
             updateVehicles(this.map!)
         })
 
-        this.transit_info = new TransitInfo(this.map);
+        this.transit_info = new TransitInfo(this.map)
     }
 }
 

diff --git a/web/src/style/map_style.ts b/web/src/style/map_style.ts
@@ -506,7 +506,7 @@ const layers: LayerSpecificationWithZIndex[] = [
         },
     },
     {
-        id: 'noc_fiber',
+        id: 'noc_cable_fiber',
         type: 'line',
         source: 'site_plan',
         'source-layer': 'noc_fibre_linestring',
@@ -517,7 +517,7 @@ const layers: LayerSpecificationWithZIndex[] = [
         },
     },
     {
-        id: 'noc_fiber_labels',
+        id: 'noc_cable_fiber_labels',
         type: 'symbol',
         source: 'site_plan',
         'source-layer': 'noc_fibre_linestring',
@@ -540,7 +540,7 @@ const layers: LayerSpecificationWithZIndex[] = [
         },
     },
     {
-        id: 'noc_copper',
+        id: 'noc_cable_copper',
         type: 'line',
         source: 'site_plan',
         'source-layer': 'noc_copper_linestring',
@@ -552,7 +552,7 @@ const layers: LayerSpecificationWithZIndex[] = [
         },
     },
     {
-        id: 'noc_copper_labels',
+        id: 'noc_cable_copper_labels',
         type: 'symbol',
         source: 'site_plan',
         'source-layer': 'noc_copper_linestring',
@@ -575,7 +575,7 @@ const layers: LayerSpecificationWithZIndex[] = [
         },
     },
     {
-        id: 'noc_switch',
+        id: 'noc_physical_switch',
         type: 'circle',
         source: 'site_plan',
         'source-layer': 'noc_switch_point',
@@ -588,7 +588,7 @@ const layers: LayerSpecificationWithZIndex[] = [
         },
     },
     {
-        id: 'noc_switch_labels',
+        id: 'noc_physical_switch_labels',
         type: 'symbol',
         source: 'site_plan',
         'source-layer': 'noc_switch_point',
@@ -975,6 +975,70 @@ const layers: LayerSpecificationWithZIndex[] = [
         },
         paint: {},
     },
+    {
+        id: 'noc_datenklo',
+        type: 'symbol',
+        source: 'noc',
+        filter: ['get', 'dk'],
+        minzoom: 16,
+        layout: {
+            'icon-image': 'datenklo',
+            'icon-size': ['interpolate', ['linear'], ['zoom'], 16, 0.1, 24, 2],
+            'icon-allow-overlap': true,
+            'text-field': '{name}',
+            'text-size': 12,
+            'text-optional': false,
+            'text-font': ['Open Sans Regular'],
+            'text-keep-upright': true,
+            'text-allow-overlap': true,
+            'text-offset': [
+                'interpolate',
+                ['linear'],
+                ['zoom'],
+                17,
+                ['literal', [0, 2]],
+                24,
+                ['literal', [0, 6]],
+            ],
+        },
+        paint: {
+            'text-halo-color': 'rgba(241, 241, 241, 0.8)',
+            'text-halo-width': 3,
+            'text-opacity': ['interpolate', ['linear'], ['zoom'], 16.9, 0, 17, 1],
+        },
+    },
+    {
+        id: 'noc_switch',
+        type: 'circle',
+        source: 'noc',
+        filter: ['!', ['get', 'dk']],
+        minzoom: 16,
+        layout: {},
+        paint: {
+            'circle-color': 'rgba(75, 0, 130, 1)',
+            'circle-stroke-color': 'rgba(255, 255, 255, 1)',
+            'circle-stroke-width': 1,
+            'circle-radius': ['interpolate', ['linear'], ['zoom'], 16, 3, 24, 15],
+        },
+    },
+    {
+        id: 'noc_switch_label',
+        type: 'symbol',
+        source: 'noc',
+        filter: ['!', ['get', 'dk']],
+        minzoom: 19,
+        layout: {
+            'text-field': '{name}',
+            'text-font': ['Open Sans Regular'],
+            'text-size': 12,
+            'text-optional': false,
+            'text-offset': [0, 1],
+        },
+        paint: {
+            'text-halo-color': 'rgba(255, 255, 255, 1)',
+            'text-halo-width': 2,
+        },
+    },
     {
         id: 'vehicles',
         type: 'symbol',
@@ -1214,6 +1278,10 @@ const style: StyleSpecification = {
             type: 'geojson',
             data: { type: 'FeatureCollection', features: [] },
         },
+        noc: {
+            type: 'geojson',
+            data: 'https://map.emfcamp.org/noc/dk.json',
+        },
     },
     sprite: 'https://openmaptiles.github.io/positron-gl-style/sprite',
     glyphs: 'https://map.emfcamp.org/fonts/{fontstack}/{range}.pbf',

diff --git a/web/src/sw.ts b/web/src/sw.ts
@@ -1,6 +1,6 @@
 import { createHandlerBoundToURL, precacheAndRoute, cleanupOutdatedCaches } from 'workbox-precaching'
 import { clientsClaim } from 'workbox-core'
-import { StaleWhileRevalidate, CacheFirst } from 'workbox-strategies'
+import { StaleWhileRevalidate, CacheFirst, NetworkFirst } from 'workbox-strategies'
 import { registerRoute } from 'workbox-routing'
 
 declare let self: ServiceWorkerGlobalScope
@@ -22,6 +22,8 @@ register('maps', new StaleWhileRevalidate({ cacheName: 'maps-20240527' }))
 
 register('data', new CacheFirst({ cacheName: 'basemaps-20240529' }))
 
+register('noc', new NetworkFirst())
+
 try {
     // Only catch requests to the root URL (a regex doesn't do this).
     registerRoute(