V5 0 tiles 4 (#188)

bdon · web-flow · commit f7d07e0e3b2e · 2025-04-04T16:48:07.000+08:00
* v5.0: compatibility with basemap tileset v4 [#177] * add `lang` option to frontends for basic multilingual support [#157] * change `theme` option to `flavor` * add @protomaps/basemaps as dependency for flavor definitions * add landcover styling * bump to version v5.0.0 * update CHANGELOG
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,3 +1,13 @@
+# 5.0.0
+
+This is a breaking major version change.
+
+* Now only works with the protomaps basemap tileset v4.0 and above. [#177]
+* visualize the `landcover` layer in the light and dark flavors.
+* replace `theme` option with `flavor` in frontends.
+* Add a `lang` option to frontends to change the label language. [#157]
+* depend on the `@protomaps/basemaps` package for flavor definitions.
+
 # 4.1.0
 * clarify types of `LeafletLayerOptions` and `leafletLayer` via @jwasilgeo [#179]
 
diff --git a/benchmark/index.html b/benchmark/index.html
@@ -6,7 +6,7 @@
         <meta name="viewport" content="width=device-width, initial-scale=1">
         <script src="https://unpkg.com/leaflet@1.7.1/dist/leaflet.js"></script>
         <script src="pixelmatch.js"></script>
-        <script src="https://unpkg.com/protomaps-leaflet@4.1.1/dist/protomaps-leaflet.js"></script>
+        <script src="https://unpkg.com/protomaps-leaflet@5.0.0/dist/protomaps-leaflet.js"></script>
         <!-- <script src="../dist/protomaps-leaflet.js"></script> -->
         <style>
             html {
diff --git a/examples/comparison.html b/examples/comparison.html
@@ -9,7 +9,7 @@
         <link rel="stylesheet" href="https://unpkg.com/maplibre-gl@3.3.1/dist/maplibre-gl.css" crossorigin="anonymous">
         <script src="https://unpkg.com/maplibre-gl@3.3.1/dist/maplibre-gl.js" crossorigin="anonymous"></script>
         <script src="https://unpkg.com/@maplibre/maplibre-gl-leaflet@0.0.20/leaflet-maplibre-gl.js"></script>
-        <script src="https://unpkg.com/protomaps-leaflet@4.1.1/dist/protomaps-leaflet.js"></script>
+        <script src="https://unpkg.com/protomaps-leaflet@5.0.0/dist/protomaps-leaflet.js"></script>
         <!-- <script src="../dist/protomaps-leaflet.js"></script> -->
         <style>
             #parent {
@@ -31,7 +31,7 @@
             const map = L.map('leaflet');
             let hash = new L.Hash(map)
             if (!window.location.hash) map.setView(new L.LatLng(0,0),0)
-            var layer = protomapsL.leafletLayer({url:'https://api.protomaps.com/tiles/v3/{z}/{x}/{y}.mvt?key=1003762824b9687f',theme:theme})
+            var layer = protomapsL.leafletLayer({url:'https://api.protomaps.com/tiles/v4/{z}/{x}/{y}.mvt?key=1003762824b9687f',theme:theme})
             layer.addTo(map)
 
             const map2 = L.map('map2')
@@ -42,7 +42,7 @@
                     sources:{
                         protomaps:{
                             type:"vector",
-                            tiles:['https://api.protomaps.com/tiles/v3/{z}/{x}/{y}.mvt?key=1003762824b9687f'],
+                            tiles:['https://api.protomaps.com/tiles/v4/{z}/{x}/{y}.mvt?key=1003762824b9687f'],
                             maxzoom: 15
                         }
                     },
diff --git a/examples/fonts.html b/examples/fonts.html
@@ -5,7 +5,7 @@
         <link rel="stylesheet" href="https://unpkg.com/leaflet@1.7.1/dist/leaflet.css"/>
         <script src="https://unpkg.com/leaflet@1.7.1/dist/leaflet.js"></script>
         <script src="https://unpkg.com/leaflet-hash@0.2.1/leaflet-hash.js"></script>
-        <script src="https://unpkg.com/protomaps-leaflet@4.1.1/dist/protomaps-leaflet.js"></script>
+        <script src="https://unpkg.com/protomaps-leaflet@5.0.0/dist/protomaps-leaflet.js"></script>
         <!-- <script src="../dist/protomaps-leaflet.js"></script> -->
 
         <link href="https://fonts.googleapis.com/css2?family=Inter:wght@100..900&family=Work+Sans:wght@100..900&family=Petrona:wght@100..900&family=Raleway:wght@100..900" rel="stylesheet">
@@ -91,7 +91,7 @@
             }
 
             let layer = protomapsL.leafletLayer({
-                url:'https://api.protomaps.com/tiles/v3/{z}/{x}/{y}.mvt?key=1003762824b9687f',
+                url:'https://api.protomaps.com/tiles/v4/{z}/{x}/{y}.mvt?key=1003762824b9687f',
                 paintRules:paintRules,
                 labelRules:labelRulesWithFont("sans-serif"),
                 tasks:[document.fonts.load("12px Work Sans"),document.fonts.load("12px Manrope"),document.fonts.load("12px Inter"),document.fonts.load("12px Petrona"),document.fonts.load("12px Raleway")]
diff --git a/examples/inset.html b/examples/inset.html
@@ -2,7 +2,7 @@
     <head>
         <meta charset="utf-8" />
         <meta name="viewport" content="width=device-width, initial-scale=1">
-        <script src="https://unpkg.com/protomaps-leaflet@4.1.1/dist/protomaps-leaflet.js"></script>
+        <script src="https://unpkg.com/protomaps-leaflet@5.0.0/dist/protomaps-leaflet.js"></script>
         <!-- <script src="../dist/protomaps-leaflet.js"></script> -->
         <style>
             #map {
@@ -23,7 +23,7 @@
             canvas.height = 600 * dpr
             let ctx = canvas.getContext('2d')
             ctx.scale(dpr,dpr)
-            let map = new protomapsL.Static({url:"https://api.protomaps.com/tiles/v3/{z}/{x}/{y}.mvt?key=1003762824b9687f", theme: "light"})
+            let map = new protomapsL.Static({url:"https://api.protomaps.com/tiles/v4/{z}/{x}/{y}.mvt?key=1003762824b9687f", theme: "light"})
             let {project} = await map.drawContext(ctx,800,600,{y:22.1777,x:114.1635},10)
             let highlight = project({y:22.2777,x:114.1635})
             ctx.globalAlpha = 0.2
diff --git a/examples/labels.html b/examples/labels.html
@@ -5,7 +5,7 @@
         <link rel="stylesheet" href="https://unpkg.com/leaflet@1.7.1/dist/leaflet.css"/>
         <script src="https://unpkg.com/leaflet@1.7.1/dist/leaflet.js"></script>
         <script src="https://unpkg.com/leaflet-hash@0.2.1/leaflet-hash.js"></script>
-        <script src="https://unpkg.com/protomaps-leaflet@4.1.1/dist/protomaps-leaflet.js"></script>
+        <script src="https://unpkg.com/protomaps-leaflet@5.0.0/dist/protomaps-leaflet.js"></script>
         <!-- <script src="../dist/protomaps-leaflet.js"></script> -->
         <style>
             body, #map {
@@ -41,7 +41,7 @@
                 }
             ]
 
-            let labels = protomapsL.leafletLayer({url:'https://api.protomaps.com/tiles/v3/{z}/{x}/{y}.mvt?key=1003762824b9687f',paintRules:[],labelRules:labelRules})
+            let labels = protomapsL.leafletLayer({url:'https://api.protomaps.com/tiles/v4/{z}/{x}/{y}.mvt?key=1003762824b9687f',paintRules:[],labelRules:labelRules})
             labels.addTo(map)
         </script>
     </body>
diff --git a/examples/leaflet.html b/examples/leaflet.html
@@ -5,7 +5,7 @@
         <link rel="stylesheet" href="https://unpkg.com/leaflet@1.7.1/dist/leaflet.css"/>
         <script src="https://unpkg.com/leaflet@1.7.1/dist/leaflet.js"></script>
         <script src="https://unpkg.com/leaflet-hash@0.2.1/leaflet-hash.js"></script>
-        <script src="https://unpkg.com/protomaps-leaflet@4.1.1/dist/protomaps-leaflet.js"></script>
+        <script src="https://unpkg.com/protomaps-leaflet@5.0.0/dist/protomaps-leaflet.js"></script>
         <!-- <script src="../dist/protomaps-leaflet.js"></script> -->
         <style>
             body, #map {
@@ -20,7 +20,7 @@
             const map = L.map('map')
             let hash = new L.Hash(map)
             if (!window.location.hash) map.setView(new L.LatLng(0,0),0)
-            var layer = protomapsL.leafletLayer({url:'https://api.protomaps.com/tiles/v3/{z}/{x}/{y}.mvt?key=1003762824b9687f',theme:'light'})
+            var layer = protomapsL.leafletLayer({url:'https://api.protomaps.com/tiles/v4/{z}/{x}/{y}.mvt?key=1003762824b9687f',flavor:'light', lang: "en"})
             layer.addTo(map)
 
             map.on("click", (ev) => {
diff --git a/examples/multi_source.html b/examples/multi_source.html
@@ -5,7 +5,7 @@
         <link rel="stylesheet" href="https://unpkg.com/leaflet@1.7.1/dist/leaflet.css"/>
         <script src="https://unpkg.com/leaflet@1.7.1/dist/leaflet.js"></script>
         <script src="https://unpkg.com/leaflet-hash@0.2.1/leaflet-hash.js"></script>
-        <script src="https://unpkg.com/protomaps-leaflet@4.1.1/dist/protomaps-leaflet.js"></script>
+        <script src="https://unpkg.com/protomaps-leaflet@5.0.0/dist/protomaps-leaflet.js"></script>
         <!-- <script src="../dist/protomaps-leaflet.js"></script> -->
         <style>
             body, #map {
@@ -19,8 +19,8 @@
         <canvas id="map"></canvas>
         <script>
             let sources = {
-                '':{url:'https://api.protomaps.com/tiles/v3/{z}/{x}/{y}.mvt?key=1003762824b9687f'},
-                'source2':{url:'https://api.protomaps.com/tiles/v3/{z}/{x}/{y}.mvt?key=1003762824b9687f',maxDataZoom:10}
+                '':{url:'https://api.protomaps.com/tiles/v4/{z}/{x}/{y}.mvt?key=1003762824b9687f'},
+                'source2':{url:'https://api.protomaps.com/tiles/v4/{z}/{x}/{y}.mvt?key=1003762824b9687f',maxDataZoom:10}
             }
 
             let paintRules = [
diff --git a/examples/pmtiles.html b/examples/pmtiles.html
@@ -4,7 +4,7 @@
         <meta name="viewport" content="width=device-width, initial-scale=1">
         <link rel="stylesheet" href="https://unpkg.com/leaflet@1.7.1/dist/leaflet.css"/>
         <script src="https://unpkg.com/leaflet@1.7.1/dist/leaflet.js"></script>
-        <script src="https://unpkg.com/protomaps-leaflet@4.1.1/dist/protomaps-leaflet.js"></script>
+        <script src="https://unpkg.com/protomaps-leaflet@5.0.0/dist/protomaps-leaflet.js"></script>
         <!-- <script src="../dist/protomaps-leaflet.js"></script> -->
         <style>
             body, #map {
@@ -17,7 +17,7 @@
         <div id="map"></div> 
         <script>
             const map = L.map('map')
-            var layer = protomapsL.leafletLayer({url:'https://data.source.coop/protomaps/openstreetmap/tiles/v3.pmtiles',theme:'black'})
+            var layer = protomapsL.leafletLayer({url:'https://data.source.coop/protomaps/openstreetmap/v4.pmtiles',theme:'black'})
             map.setView(new L.LatLng(0,0),0)
             layer.addTo(map)
         </script>
diff --git a/examples/pmtiles_headers.html b/examples/pmtiles_headers.html
@@ -5,7 +5,7 @@
         <link rel="stylesheet" href="https://unpkg.com/leaflet@1.7.1/dist/leaflet.css"/>
         <script src="https://unpkg.com/leaflet@1.7.1/dist/leaflet.js"></script>
         <script src="https://unpkg.com/pmtiles@3.0.3/dist/pmtiles.js"></script>
-        <script src="https://unpkg.com/protomaps-leaflet@4.1.1/dist/protomaps-leaflet.js"></script>
+        <script src="https://unpkg.com/protomaps-leaflet@5.0.0/dist/protomaps-leaflet.js"></script>
         <!-- <script src="../dist/protomaps-leaflet.js"></script> -->
         <style>
             body, #map {
@@ -19,7 +19,7 @@
         <script>
             const map = L.map('map')
 
-            const source = new pmtiles.FetchSource("https://data.source.coop/protomaps/openstreetmap/tiles/v3.pmtiles", {"x-custom-header":"value"});
+            const source = new pmtiles.FetchSource("https://data.source.coop/protomaps/openstreetmap/v4.pmtiles", {"x-custom-header":"value"});
 
             const p = new pmtiles.PMTiles(source)
             var layer = protomapsL.leafletLayer({url:p,theme:'black'})
diff --git a/examples/sandwich.html b/examples/sandwich.html
@@ -5,7 +5,7 @@
         <link rel="stylesheet" href="https://unpkg.com/leaflet@1.7.1/dist/leaflet.css"/>
         <script src="https://unpkg.com/leaflet@1.7.1/dist/leaflet.js"></script>
         <script src="https://unpkg.com/leaflet-hash@0.2.1/leaflet-hash.js"></script>
-        <script src="https://unpkg.com/protomaps-leaflet@4.1.1/dist/protomaps-leaflet.js"></script>
+        <script src="https://unpkg.com/protomaps-leaflet@5.0.0/dist/protomaps-leaflet.js"></script>
         <!-- <script src="../dist/protomaps-leaflet.js"></script> -->
         <style>
             body, #map {
@@ -54,7 +54,7 @@
                 }
 
             ]
-            let paint = protomapsL.leafletLayer({url:'https://api.protomaps.com/tiles/v3/{z}/{x}/{y}.mvt?key=1003762824b9687f',paintRules:paintRules,labelRules:[]})
+            let paint = protomapsL.leafletLayer({url:'https://api.protomaps.com/tiles/v4/{z}/{x}/{y}.mvt?key=1003762824b9687f',paintRules:paintRules,labelRules:[]})
             paint.addTo(map)
 
             let labelRules = [
@@ -71,7 +71,7 @@
 
             // https://leafletjs.com/examples/map-panes/
             map.createPane('labels');
-            let labels = protomapsL.leafletLayer({url:'https://api.protomaps.com/tiles/v3/{z}/{x}/{y}.mvt?key=1003762824b9687f',paintRules:[],labelRules:labelRules,pane:'labels'})
+            let labels = protomapsL.leafletLayer({url:'https://api.protomaps.com/tiles/v4/{z}/{x}/{y}.mvt?key=1003762824b9687f',paintRules:[],labelRules:labelRules,pane:'labels'})
             labels.addTo(map)
         </script>
     </body>
diff --git a/examples/sprites.html b/examples/sprites.html
@@ -5,7 +5,7 @@
         <link rel="stylesheet" href="https://unpkg.com/leaflet@1.7.1/dist/leaflet.css"/>
         <script src="https://unpkg.com/leaflet@1.7.1/dist/leaflet.js"></script>
         <script src="https://unpkg.com/leaflet-hash@0.2.1/leaflet-hash.js"></script>
-        <script src="https://unpkg.com/protomaps-leaflet@4.1.1/dist/protomaps-leaflet.js"></script>
+        <script src="https://unpkg.com/protomaps-leaflet@5.0.0/dist/protomaps-leaflet.js"></script>
         <!-- <script src="../dist/protomaps-leaflet.js"></script> -->
         <style>
             body, #map {
@@ -20,7 +20,7 @@
             const map = L.map('map')
             let hash = new L.Hash(map)
             if (!window.location.hash) map.setView(new L.LatLng(25.0412,121.5177),16)
-            let url = 'https://api.protomaps.com/tiles/v3/{z}/{x}/{y}.mvt?key=1003762824b9687f'
+            let url = 'https://api.protomaps.com/tiles/v4/{z}/{x}/{y}.mvt?key=1003762824b9687f'
 
             const ICONS = `
             <html>
diff --git a/examples/static.html b/examples/static.html
@@ -2,7 +2,7 @@
     <head>
         <meta charset="utf-8" />
         <meta name="viewport" content="width=device-width, initial-scale=1">
-        <script src="https://unpkg.com/protomaps-leaflet@4.1.1/dist/protomaps-leaflet.js"></script>
+        <script src="https://unpkg.com/protomaps-leaflet@5.0.0/dist/protomaps-leaflet.js"></script>
         <!-- <script src="../dist/protomaps-leaflet.js"></script> -->
         <style>
             #map {
@@ -22,7 +22,7 @@
        <script>
         let canvas = document.getElementById("map")
         var zoom = 11
-        let map = new protomapsL.Static({url:"https://api.protomaps.com/tiles/v3/{z}/{x}/{y}.mvt?key=1003762824b9687f",theme:"dark"})
+        let map = new protomapsL.Static({url:"https://api.protomaps.com/tiles/v4/{z}/{x}/{y}.mvt?key=1003762824b9687f",theme:"dark"})
         let center = {y:37.7658,x:-122.4221}
         map.drawCanvas(canvas,center,zoom)
         document.getElementById("zoom").innerHTML = zoom
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
diff --git a/src/default_style/style.ts b/src/default_style/style.ts
diff --git a/src/default_style/themes.ts b/src/default_style/themes.ts
diff --git a/src/frontends/leaflet.ts b/src/frontends/leaflet.ts
diff --git a/src/frontends/static.ts b/src/frontends/static.ts
