Migrate to vector tiles to add boundaries and better styling. (#247)

Author: m-mohr

package-lock.json

@@ -19,7 +19,8 @@
     "geojson": "^0.5.0",
     "jwt-decode": "^4.0.0",
     "jwt-encode": "^1.0.1",
-    "ol": "^10.7.0",
+    "ol": "^10.8.0",
+    "ol-mapbox-style": "^13.4.0",
     "ol-pmtiles": "^2.0.2",
     "pmtiles": "^4.4.0",
     "vue": "^3.4.15",

package.json

@@ -1,15 +1,61 @@
-import TileLayer from 'ol/layer/Tile'
-import { XYZ } from 'ol/source'
+import type { FeatureLike } from 'ol/Feature'
+import VectorTileLayer from 'ol/layer/VectorTile'
+import { applyStyle } from 'ol-mapbox-style'
+
+const POSITRON_STYLE_URL = 'https://basemaps.cartocdn.com/gl/positron-gl-style/style.json'
+
+// Only render administrative boundaries and place/water/road labels
+// (no background, fills, or road geometry — keeps the layer transparent)
+const LABEL_AND_BOUNDARY_LAYERS = [
+  'boundary_county',
+  'boundary_state',
+  'boundary_country_outline',
+  'boundary_country_inner',
+  'waterway_label',
+  'watername_ocean',
+  'watername_sea',
+  'watername_lake',
+  'watername_lake_line',
+  'place_hamlet',
+  'place_suburbs',
+  'place_villages',
+  'place_town',
+  'place_country_2',
+  'place_country_1',
+  'place_state',
+  'place_continent',
+  'place_city_r6',
+  'place_city_r5',
+  'place_city_dot_r7',
+  'place_city_dot_r4',
+  'place_city_dot_r2',
+  'place_city_dot_z7',
+  'place_capital_dot_z7',
+  'roadname_minor',
+  'roadname_sec',
+  'roadname_pri',
+  'roadname_major',
+]
 
 export default function createLabelLayer() {
-  return new TileLayer({
-    source: new XYZ({
-      url: 'https://{a-d}.basemaps.cartocdn.com/dark_only_labels/{z}/{x}/{y}@2x.png',
-      maxZoom: 20,
-      minZoom: 0,
-      crossOrigin: 'anonymous',
-      attributions:
-        '&copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>, &copy; <a href="https://carto.com/attributions">CARTO</a>',
-    }),
+  const layer = new VectorTileLayer({ declutter: true })
+
+  applyStyle(layer, POSITRON_STYLE_URL, { layers: LABEL_AND_BOUNDARY_LAYERS }).then(() => {
+    const originalStyleFn = layer.getStyleFunction()!
+    layer.setStyle((feature: FeatureLike, resolution: number) => {
+      const styles = originalStyleFn(feature, resolution)
+      if (!styles) return styles
+      const arr = Array.isArray(styles) ? styles : [styles]
+      for (const style of arr) {
+        const text = style.getText()
+        if (text) {
+          text.getFill()?.setColor('#ffffff')
+          text.getStroke()?.setColor('#333333')
+        }
+      }
+      return arr
+    })
   })
+
+  return layer
 }