OpenMapTiles 3.13 Features: Highway shields, Interstate filtering

.github/workflows/deploy.yml

@@ -17,11 +17,9 @@ jobs:
           node-version: 16.x
       - name: Install and Build 🔧
         run: |
-          sudo apt install -y xmlstarlet
           cd style
-          npm install
           sed 's/<your MapTiler key>/53iZvB2drcamS0Ge0xiD/g' config.default.js > config.js
-          make sprites js/maplibre-gl.js
+          make sprites
         # MapTiler key 53iZvB2drcamS0Ge0xiD only allows requests from zelonewolf.github.io
 
       - name: Deploy 🚀

README.md

@@ -10,6 +10,8 @@ The purpose of the Americana style is to:
 - Challenge the status quo by showcasing innovation and invention
 - Promote collaboration and common purpose in the American mapping community
 
+The Americana style is the first digital map to achieve concurrent, state-specific highway shields arranged along the path of road. Representative highway shield rendering is of considerable cartographic importance to the American community. We do this proudly in an open source project using vector tile technology.
+
 ## Contributor's Guide
 
 _Contributors welcome!_

style/.prettierignore

@@ -0,0 +1,3 @@
+build
+sprites
+js/maplibre-gl.js

style/Makefile

@@ -1,16 +1,7 @@
 clean:
-	rm -rf sprites build icons/us_* rebusurance.zip
-	rm -rf build
+	rm -rf sprites
 
-rebusurance.zip:
-	curl -s -L https://github.com/1ec5/rebusurance/releases/download/v1.0.0/rebusurance-v1.0.0.zip --output rebusurance.zip
-
-
-build/rebusurance-v1.0.0: rebusurance.zip
-	unzip -q rebusurance.zip "*/image2d/*.svg" -d build
-
-sprites: build/rebusurance-v1.0.0
-	scripts/import_rebusurance.sh
+sprites: clean
 	mkdir -p sprites
 	npx spritezero sprites/sprite@2x icons/ --retina
 	npx spritezero sprites/sprite icons/
@@ -21,5 +12,5 @@ config.js:
 code_format:
 	npx prettier --write .
 
-run: sprites config.js js/maplibre-gl.js
+run: sprites config.js
 	npx browser-sync -w --port 1776

style/americana.js

@@ -3,6 +3,8 @@
 import config from "./config.js";
 
 import * as Util from "./js/util.js";
+import * as Shield from "./js/shield.js";
+import * as ShieldDef from "./js/shield_defs.js";
 
 import * as lyrBackground from "./layer/background.js";
 import * as lyrBoundary from "./layer/boundary.js";
@@ -37,12 +39,14 @@ americanaLayers.push(
   lyrBoundary.country,
 
   lyrRoad.motorwayTunnel.casing(),
+  lyrRoad.trunkExpresswayTunnel.casing(),
   lyrRoad.trunkTunnel.casing(),
 
   lyrRoad.motorwayLinkTunnel.casing(),
   lyrRoad.trunkLinkTunnel.casing(),
 
   lyrRoad.motorwayTunnel.fill(),
+  lyrRoad.trunkExpresswayTunnel.fill(),
   lyrRoad.trunkTunnel.fill(),
 
   lyrRoad.motorwayLinkTunnel.fill(),
@@ -52,9 +56,13 @@ americanaLayers.push(
   lyrOneway.tunnelLink,
 
   lyrRoad.motorway.casing(),
+  lyrRoad.trunkExpressway.casing(),
   lyrRoad.trunk.casing(),
+  lyrRoad.primaryExpressway.casing(),
   lyrRoad.primary.casing(),
+  lyrRoad.secondaryExpressway.casing(),
   lyrRoad.secondary.casing(),
+  lyrRoad.tertiaryExpressway.casing(),
   lyrRoad.tertiary.casing(),
 
   lyrRoad.motorwayLink.casing(),
@@ -64,18 +72,27 @@ americanaLayers.push(
   lyrRoad.trunkLink.fill(),
 
   lyrRoad.tertiary.fill(),
+  lyrRoad.tertiaryExpressway.fill(),
   lyrRoad.secondary.fill(),
+  lyrRoad.secondaryExpressway.fill(),
   lyrRoad.primary.fill(),
+  lyrRoad.primaryExpressway.fill(),
   lyrRoad.trunk.fill(),
+  lyrRoad.trunkExpressway.fill(),
   lyrRoad.motorway.fill(),
+  lyrRoad.interstate.fill(),
 
   lyrRoad.motorwayLink.surface(),
   lyrRoad.trunkLink.surface(),
 
   lyrRoad.tertiary.surface(),
+  lyrRoad.tertiaryExpressway.surface(),
   lyrRoad.secondary.surface(),
+  lyrRoad.secondaryExpressway.surface(),
   lyrRoad.primary.surface(),
+  lyrRoad.primaryExpressway.surface(),
   lyrRoad.trunk.surface(),
+  lyrRoad.trunkExpressway.surface(),
   lyrRoad.motorway.surface(),
 
   lyrOneway.road,
@@ -84,31 +101,40 @@ americanaLayers.push(
 
 var bridgeLayers = [
   lyrRoad.tertiaryBridge.casing(),
+  lyrRoad.tertiaryExpresswayBridge.casing(),
   lyrRoad.tertiaryLinkBridge.casing(),
   lyrRoad.tertiaryBridge.fill(),
+  lyrRoad.tertiaryExpresswayBridge.fill(),
   lyrRoad.tertiaryLinkBridge.fill(),
   lyrRoad.tertiaryBridge.surface(),
   lyrRoad.tertiaryLinkBridge.surface(),
 
   lyrRoad.secondaryBridge.casing(),
+  lyrRoad.secondaryExpresswayBridge.casing(),
   lyrRoad.secondaryLinkBridge.casing(),
   lyrRoad.secondaryBridge.fill(),
+  lyrRoad.secondaryExpresswayBridge.fill(),
   lyrRoad.secondaryLinkBridge.fill(),
   lyrRoad.secondaryBridge.surface(),
   lyrRoad.secondaryLinkBridge.surface(),
 
   lyrRoad.primaryBridge.casing(),
+  lyrRoad.primaryExpresswayBridge.casing(),
   lyrRoad.primaryLinkBridge.casing(),
   lyrRoad.primaryBridge.fill(),
+  lyrRoad.primaryExpresswayBridge.fill(),
   lyrRoad.primaryLinkBridge.fill(),
   lyrRoad.primaryBridge.surface(),
   lyrRoad.primaryLinkBridge.surface(),
 
   lyrRoad.trunkBridge.casing(),
+  lyrRoad.trunkExpresswayBridge.casing(),
   lyrRoad.trunkLinkBridge.casing(),
-  lyrRoad.trunkBridge.fill(),
   lyrRoad.trunkLinkBridge.fill(),
+  lyrRoad.trunkBridge.fill(),
+  lyrRoad.trunkExpresswayBridge.fill(),
   lyrRoad.trunkBridge.surface(),
+  lyrRoad.trunkExpresswayBridge.surface(),
   lyrRoad.trunkLinkBridge.surface(),
 
   lyrRoad.motorwayBridge.casing(),
@@ -156,7 +182,11 @@ americanaLayers.push(
 
   lyrPark.label,
 
-  lyrHighwayShield.interstate,
+  lyrHighwayShield.motorway,
+  lyrHighwayShield.trunk,
+  lyrHighwayShield.primary,
+  lyrHighwayShield.secondary,
+  lyrHighwayShield.tertiary,
 
   lyrPlace.state,
   lyrPlace.city,
@@ -195,14 +225,22 @@ var style = {
   },
 };
 
-var map = new maplibregl.Map({
+var map = (window.map = new maplibregl.Map({
   container: "map", // container id
   hash: true,
   antialias: true,
   style: style,
   center: [-94, 40.5], // starting position [lng, lat]
   zoom: 4, // starting zoom
   attributionControl: false,
+}));
+
+map.on("styledata", function () {
+  ShieldDef.loadShields(map.style.imageManager.images);
+});
+
+map.on("styleimagemissing", function (e) {
+  Shield.missingIconLoader(map, e);
 });
 
 map.addControl(
@@ -212,4 +250,4 @@ map.addControl(
   })
 );
 map.addControl(new maplibregl.NavigationControl(), "top-left");
-document.querySelector("#map canvas").focus();
+map.getCanvas().focus();

style/config.default.js

@@ -10,7 +10,7 @@ Go to Account->Keys and create a key to paste here:
 */
 const MAPTILER_KEY = "<your MapTiler key>";
 
-const OPENMAPTILES_URL = `https://api.maptiler.com/tiles/v3/tiles.json?key=${MAPTILER_KEY}`;
+const OPENMAPTILES_URL = `https://api.maptiler.com/tiles/v3-openmaptiles/tiles.json?key=${MAPTILER_KEY}`;
 
 export default {
   OPENMAPTILES_URL,