release 2.0.1 on npm (#139)

* Bump npm version to 2.0.0 [#112] * update examples for 2.0.0 [#112] * npm 2.0.1
protomaps · Feb 19, 2024 · 7a06f22 · 7a06f22
1 parent 3d48445
commit 7a06f22
Show file tree

Hide file tree

Showing 13 changed files with 112 additions and 45 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -10,6 +10,25 @@ This library re-focuses on being a Leaflet plugin for vector tile basemaps, i.e.
 
 * **Programmatic shading and extra basemap styles are removed.** This library's default style aligns with the 5 MapLibre styles developed in protomaps/basemaps.
 
+* `levelDiff` is no longer configurable and defaults to 1 to match MapLibre GL.
+
+* consistent camelCase naming e.g. `paint_rules` -> `paintRules`
+
+* You must pass one of the default basemap themes `light, dark, white, black, grayscale`. remove `dark` and `shade` options.
+
+* Remove WebKit vertex count workaround.
+
+* remove `PolygonLabelSymbolizer` as it is not accurate for tiled rendering.
+
+* `maxDataZoom` defaults to 15.
+
+* Use Protomaps basemap tileset v3 instead of v2. 
+
+* remove `setDefaultStyle` method.
+
+* remove multi-language `language1`, `language2`: frontends take a single `language` parameter.
+
+
 # 1.24.2
 * Continue internal refactors in preparation of 2.0.0 major revision.
 

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@1.24.2/dist/protomaps-leaflet.min.js"></script>
+        <script src="https://unpkg.com/protomaps-leaflet@2.0.1/dist/protomaps-leaflet.min.js"></script>
         <!-- <script src="../dist/protomaps-leaflet.js"></script> -->
         <style>
             html {

diff --git a/examples/comparison.html b/examples/comparison.html
@@ -0,0 +1,57 @@
+<html>
+    <head>
+        <meta charset="utf-8" />
+        <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/leaflet-hash@0.2.1/leaflet-hash.js"></script>
+        <script src="https://unpkg.com/leaflet.sync@0.2.4/L.Map.Sync.js"></script>
+        <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@2.0.1/dist/protomaps-leaflet.min.js"></script>
+        <style>
+            #parent {
+                display:flex;
+            }
+            #leaflet, #map2 {
+                height:97vh;
+                width: 50%;
+            }
+        </style>
+    </head>
+    <body>
+        <div id="parent">
+            <div id="leaflet"></div> 
+            <div id="map2"></div> 
+        </div>
+        <script>
+            const theme = "light";
+            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})
+            layer.addTo(map)
+
+            const map2 = L.map('map2')
+            fetch(`http://unpkg.com/protomaps-themes-base@2.0.0-alpha.4/dist/layers/${theme}.json`).then(r => r.json()).then(j => {
+                const style = {
+                    version:8,
+                    glyphs: "https://protomaps.github.io/basemaps-assets/fonts/{fontstack}/{range}.pbf",
+                    sources:{
+                        protomaps:{
+                            type:"vector",
+                            tiles:['https://api.protomaps.com/tiles/v3/{z}/{x}/{y}.mvt?key=1003762824b9687f'],
+                            maxzoom: 15
+                        }
+                    },
+                    layers:j
+                };
+                var gl = L.maplibreGL({
+                    style: style 
+                }).addTo(map2);
+                map.sync(map2);
+            });
+        </script>
+    </body>
+</html>
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@1.24.2/dist/protomaps-leaflet.min.js"></script>
+        <script src="https://unpkg.com/protomaps-leaflet@2.0.1/dist/protomaps-leaflet.min.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">
@@ -61,7 +61,7 @@
             const map = L.map('map')
             hash = new L.Hash(map)
             if (!window.location.hash) map.setView(new L.LatLng(0,0),2)
-            let paint_rules = [
+            let paintRules = [
               {
                 dataLayer:"water",
                 symbolizer:new protomapsL.PolygonSymbolizer({fill:"#CDECFF"})
@@ -79,36 +79,28 @@
                     symbolizer:new protomapsL.CenteredTextSymbolizer({
                         label_props:["name:en"],
                         font: (z,f) => {
-                            if (f.props.place === 'city') return "100 24px " + font
-                            else if (f.props.place === 'state') return "400 28px " + font
+                            if (f.props.place === 'locality') return "100 24px " + font
+                            else if (f.props.place === 'region') return "400 28px " + font
                             else if (f.props.place === 'country') return "900 32px " + font
                             return "400 12px " + font
                         },
                         fill:"#19A974"
                     })
-                  },
-                  {
-                    dataLayer:"water",
-                    symbolizer:new protomapsL.PolygonLabelSymbolizer({
-                        label_props:["name:en"],
-                        font:"900 20px " + font,
-                        fill:"#00449E"
-                    })
                   }
                 ]
             }
 
             let layer = protomapsL.leafletLayer({
-                url:'https://api.protomaps.com/tiles/v2/{z}/{x}/{y}.pbf?key=1003762824b9687f',
-                paint_rules:paint_rules,
-                label_rules:labelRulesWithFont("sans-serif"),
+                url:'https://api.protomaps.com/tiles/v3/{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")]
             })
             layer.addTo(map) 
 
             document.getElementById("font").addEventListener('change', e => {
                 let font = e.target.value
-                layer.label_rules = labelRulesWithFont(font)
+                layer.labelRules = labelRulesWithFont(font)
                 layer.clearLayout()
                 layer.rerenderTiles()
             })

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@1.24.2/dist/protomaps-leaflet.min.js"></script>
+        <script src="https://unpkg.com/protomaps-leaflet@2.0.1/dist/protomaps-leaflet.min.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/v2/{z}/{x}/{y}.pbf?key=1003762824b9687f"})
+            let map = new protomapsL.Static({url:"https://api.protomaps.com/tiles/v3/{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@1.24.2/dist/protomaps-leaflet.min.js"></script>
+        <script src="https://unpkg.com/protomaps-leaflet@2.0.1/dist/protomaps-leaflet.min.js"></script>
         <!-- <script src="../dist/protomaps-leaflet.js"></script> -->
         <style>
             body, #map {
@@ -24,7 +24,7 @@
                 attribution: '<a href="https://s2maps.eu/">Sentinel-2 cloudless - https://s2maps.eu</a> by <a href="https://eox.at/">EOX IT Services GmbH</a> (Contains modified Copernicus Sentinel data 2016 & 2017)'
             }).addTo(map);
 
-            let label_rules = [
+            let labelRules = [
                 {
                     dataLayer: "places",
                     symbolizer: new protomapsL.CenteredTextSymbolizer({
@@ -34,15 +34,14 @@
                         stroke:"black",
                         font:(z,f) => {
                             if (f.props["pmap:kind"] === "country") return "600 16px sans-serif"
-                            else if (f.props["pmap:kind"] === "city") return "400 14px sans-serif"
-                            else if (f.props["pmap:kind"] === "neighbourhood") return "200 12px sans-serif"
+                            else if (f.props["pmap:kind"] === "locality") return "400 14px sans-serif"
                             return "800 18px sans-serif"
                         }
                     })
                 }
             ]
 
-            let labels = protomapsL.leafletLayer({url:'https://api.protomaps.com/tiles/v2/{z}/{x}/{y}.pbf?key=1003762824b9687f',paint_rules:[],label_rules:label_rules})
+            let labels = protomapsL.leafletLayer({url:'https://api.protomaps.com/tiles/v3/{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@1.24.2/dist/protomaps-leaflet.min.js"></script>
+        <script src="https://unpkg.com/protomaps-leaflet@2.0.1/dist/protomaps-leaflet.min.js"></script>
         <!-- <script src="../dist/protomaps-leaflet.js"></script> -->
         <style>
             body, #map {
@@ -19,8 +19,8 @@
         <script>
             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)
-            var layer = protomapsL.leafletLayer({url:'https://api.protomaps.com/tiles/v2/{z}/{x}/{y}.pbf?key=1003762824b9687f'})
+            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'})
             layer.addTo(map)
         </script>
     </body>

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@1.24.2/dist/protomaps-leaflet.min.js"></script>
+        <script src="https://unpkg.com/protomaps-leaflet@2.0.1/dist/protomaps-leaflet.min.js"></script>
         <!-- <script src="../dist/protomaps-leaflet.js"></script> -->
         <style>
             body, #map {
@@ -19,11 +19,11 @@
         <canvas id="map"></canvas>
         <script>
             let sources = {
-                '':{url:'https://api.protomaps.com/tiles/v2/{z}/{x}/{y}.pbf?key=1003762824b9687f'},
-                'source2':{url:'https://api.protomaps.com/tiles/v2/{z}/{x}/{y}.pbf?key=1003762824b9687f',maxDataZoom:10}
+                '':{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}
             }
 
-            let paint_rules = [
+            let paintRules = [
                 {
                     dataSource:"source2",
                     dataLayer:"landuse",
@@ -49,7 +49,7 @@
 
             let canvas = document.getElementById("map")
             var zoom = 13
-            let map = new protomapsL.Static({sources:sources,paint_rules:paint_rules})
+            let map = new protomapsL.Static({sources:sources,paintRules:paintRules})
             let center = {y:37.7658,x:-122.4221}
             map.drawCanvas(canvas,center,zoom)
         </script>

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@1.24.2/dist/protomaps-leaflet.min.js"></script>
+        <script src="https://unpkg.com/protomaps-leaflet@2.0.1/dist/protomaps-leaflet.min.js"></script>
         <!-- <script src="../dist/protomaps-leaflet.js"></script> -->
         <style>
             body, #map {
@@ -39,7 +39,7 @@
             }
             L.geoJson(example_geojson).addTo(map)
 
-            let paint_rules = [
+            let paintRules = [
                 {
                     dataLayer: "buildings",
                     symbolizer: new protomapsL.PolygonSymbolizer({
@@ -54,10 +54,10 @@
                 }
 
             ]
-            let paint = protomapsL.leafletLayer({url:'https://api.protomaps.com/tiles/v2/{z}/{x}/{y}.pbf?key=1003762824b9687f',paint_rules:paint_rules,label_rules:[]})
+            let paint = protomapsL.leafletLayer({url:'https://api.protomaps.com/tiles/v3/{z}/{x}/{y}.mvt?key=1003762824b9687f',paintRules:paintRules,labelRules:[]})
             paint.addTo(map)
 
-            let label_rules = [
+            let labelRules = [
                 {
                     dataLayer: "places",
                     symbolizer: new protomapsL.CenteredTextSymbolizer({
@@ -71,7 +71,7 @@
 
             // https://leafletjs.com/examples/map-panes/
             map.createPane('labels');
-            let labels = protomapsL.leafletLayer({url:'https://api.protomaps.com/tiles/v2/{z}/{x}/{y}.pbf?key=1003762824b9687f',paint_rules:[],label_rules:label_rules,pane:'labels'})
+            let labels = protomapsL.leafletLayer({url:'https://api.protomaps.com/tiles/v3/{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@1.24.2/dist/protomaps-leaflet.min.js"></script>
+        <script src="https://unpkg.com/protomaps-leaflet@2.0.1/dist/protomaps-leaflet.min.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/v2/{z}/{x}/{y}.pbf?key=1003762824b9687f'
+            let url = 'https://api.protomaps.com/tiles/v3/{z}/{x}/{y}.mvt?key=1003762824b9687f'
 
             const ICONS = `
             <html>
@@ -41,7 +41,7 @@
 
             let sheet = new protomapsL.Sheet(ICONS)
 
-            var layer = protomapsL.leafletLayer({url:url,tasks:[sheet.load()],label_rules:[
+            var layer = protomapsL.leafletLayer({url:url,tasks:[sheet.load()],labelRules:[
                     {
                         dataLayer:"pois",
                         symbolizer:new protomapsL.IconSymbolizer({

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@1.24.2/dist/protomaps-leaflet.min.js"></script>
+        <script src="https://unpkg.com/protomaps-leaflet@2.0.1/dist/protomaps-leaflet.min.js"></script>
         <!-- <script src="../dist/protomaps-leaflet.js"></script> -->
         <style>
             #map {
@@ -22,7 +22,7 @@
        <script>
         let canvas = document.getElementById("map")
         var zoom = 12
-        let map = new protomapsL.Static({url:"https://api.protomaps.com/tiles/v2/{z}/{x}/{y}.pbf?key=1003762824b9687f"})
+        let map = new protomapsL.Static({url:"https://api.protomaps.com/tiles/v3/{z}/{x}/{y}.mvt?key=1003762824b9687f",theme:"light"})
         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
@@ -1,6 +1,6 @@
 {
   "name": "protomaps-leaflet",
-  "version": "1.24.2",
+  "version": "2.0.1",
   "files": [
     "dist",
     "src"