feat: migrate to MapLibre v4.3.2

jawg · Jun 6, 2024 · 07a1efc · 07a1efc
1 parent 6fed7d6
commit 07a1efc
Show file tree

Hide file tree

Showing 18 changed files with 171 additions and 159 deletions.
diff --git a/examples/add-geometry.html b/examples/add-geometry.html
@@ -2,12 +2,14 @@
 <html>
   <head>
     <meta charset="UTF-8" />
-    <link href="https://unpkg.com/maplibre-gl@3.3.0/dist/maplibre-gl.css" rel="stylesheet" />
-    <script src="https://unpkg.com/maplibre-gl@3.3.0/dist/maplibre-gl.js"></script>
+    <link href="https://unpkg.com/maplibre-gl@4.3.2/dist/maplibre-gl.css" rel="stylesheet" />
+    <script src="https://unpkg.com/maplibre-gl@4.3.2/dist/maplibre-gl.js"></script>
     <style>
+      html,
       body {
         margin: 0;
         padding: 0;
+        height: 100%;
       }
       #map {
         min-height: 500px;
@@ -88,7 +90,7 @@
         },
       };
 
-      map.on("load", function () {
+      map.on("load", () => {
         map.addLayer({
           id: "route",
           type: "line",

diff --git a/examples/add-marker.html b/examples/add-marker.html
@@ -3,8 +3,8 @@
   <head>
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1" />
-    <link href="https://unpkg.com/maplibre-gl@3.3.0/dist/maplibre-gl.css" rel="stylesheet" />
-    <script src="https://unpkg.com/maplibre-gl@3.3.0/dist/maplibre-gl.js"></script>
+    <link href="https://unpkg.com/maplibre-gl@4.3.2/dist/maplibre-gl.css" rel="stylesheet" />
+    <script src="https://unpkg.com/maplibre-gl@4.3.2/dist/maplibre-gl.js"></script>
     <style>
       html,
       body {
@@ -44,7 +44,7 @@
       new maplibregl.Marker().setLngLat([2.349902, 48.852966]).addTo(map);
 
       // Add a Marker with a custom icon.
-      // Check all the marker options here: https://maplibre.org/maplibre-gl-js/docs/API/types/maplibregl.MarkerOptions/
+      // Check all the marker options here: https://maplibre.org/maplibre-gl-js/docs/API/type-aliases/MarkerOptions/
       const el = document.createElement("div");
       el.addEventListener("click", () => {
         window.alert("Eiffel Tower");

diff --git a/examples/add-origin-info.html b/examples/add-origin-info.html
@@ -2,8 +2,8 @@
 <html>
   <head>
     <meta charset="UTF-8" />
-    <link href="https://unpkg.com/maplibre-gl@3.3.0/dist/maplibre-gl.css" rel="stylesheet" />
-    <script src="https://unpkg.com/maplibre-gl@3.3.0/dist/maplibre-gl.js"></script>
+    <link href="https://unpkg.com/maplibre-gl@4.3.2/dist/maplibre-gl.css" rel="stylesheet" />
+    <script src="https://unpkg.com/maplibre-gl@4.3.2/dist/maplibre-gl.js"></script>
     <style>
       html,
       body {

diff --git a/examples/add-popup.html b/examples/add-popup.html
@@ -2,12 +2,14 @@
 <html>
   <head>
     <meta charset="UTF-8" />
-    <link href="https://unpkg.com/maplibre-gl@3.3.0/dist/maplibre-gl.css" rel="stylesheet" />
-    <script src="https://unpkg.com/maplibre-gl@3.3.0/dist/maplibre-gl.js"></script>
+    <link href="https://unpkg.com/maplibre-gl@4.3.2/dist/maplibre-gl.css" rel="stylesheet" />
+    <script src="https://unpkg.com/maplibre-gl@4.3.2/dist/maplibre-gl.js"></script>
     <style>
+      html,
       body {
         margin: 0;
         padding: 0;
+        height: 100%;
       }
       #map {
         min-height: 500px;

diff --git a/examples/add-your-data.html b/examples/add-your-data.html
@@ -2,12 +2,15 @@
 <html>
   <head>
     <meta charset="UTF-8" />
-    <link href="https://unpkg.com/[email protected]/dist/maplibre-gl.css" rel="stylesheet" />
-    <script src="https://unpkg.com/[email protected]/dist/maplibre-gl.js"></script>
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <link href="https://unpkg.com/[email protected]/dist/maplibre-gl.css" rel="stylesheet" />
+    <script src="https://unpkg.com/[email protected]/dist/maplibre-gl.js"></script>
     <style>
+      html,
       body {
         margin: 0;
         padding: 0;
+        height: 100%;
       }
       #map {
         min-height: 500px;
@@ -24,33 +27,32 @@
       const map = new maplibregl.Map({
         container: "map",
         style: `https://api.jawg.io/styles/jawg-sunny.json?access-token=${accessToken}`,
-        zoom: 10,
+        zoom: 11,
         center: [2.3488, 48.8534],
         hash: true,
       }).addControl(new maplibregl.NavigationControl(), "top-right");
       // This plugin is used for right to left languages
       maplibregl.setRTLTextPlugin("https://unpkg.com/@mapbox/[email protected]/mapbox-gl-rtl-text.min.js");
 
-      map.on("load", function () {
+      map.on("load", async () => {
         // Add an image to use as a custom marker
-        map.loadImage("https://media.jawg.io/add-your-data/shop.png", function (error, image) {
-          if (error) throw error;
-          // Add image to map
-          map.addImage("custom-marker", image);
+        const image = await map.loadImage("https://media.jawg.io/add-your-data/shop.png");
+        // Add image to map
+        map.addImage("custom-marker", image.data);
 
-          // Add layer to map, using your geojson as source
-          map.addLayer({
-            id: "shops",
-            type: "symbol",
-            source: {
-              type: "geojson",
-              data: "https://media.jawg.io/add-your-data/marketplaces.geojson",
-            },
-            layout: {
-              "icon-image": "custom-marker",
-              "icon-anchor": "bottom",
-            },
-          });
+        // Add layer to map, using your geojson as source
+        map.addLayer({
+          id: "shops",
+          type: "symbol",
+          source: {
+            type: "geojson",
+            data: "https://media.jawg.io/add-your-data/marketplaces.geojson",
+          },
+          layout: {
+            "icon-image": "custom-marker",
+            "icon-anchor": "bottom",
+            "icon-overlap": "always",
+          },
         });
       });
     </script>

diff --git a/examples/change-language.html b/examples/change-language.html
@@ -2,12 +2,14 @@
 <html>
   <head>
     <meta charset="UTF-8" />
-    <link href="https://unpkg.com/maplibre-gl@3.3.0/dist/maplibre-gl.css" rel="stylesheet" />
-    <script src="https://unpkg.com/maplibre-gl@3.3.0/dist/maplibre-gl.js"></script>
+    <link href="https://unpkg.com/maplibre-gl@4.3.2/dist/maplibre-gl.css" rel="stylesheet" />
+    <script src="https://unpkg.com/maplibre-gl@4.3.2/dist/maplibre-gl.js"></script>
     <style>
+      html,
       body {
         margin: 0;
         padding: 0;
+        height: 100%;
       }
       #map {
         min-height: 500px;
@@ -39,20 +41,23 @@
     <script>
       // Don't forget to replace <YOUR_ACCESS_TOKEN> by your real access token!
       const accessToken = "<YOUR_ACCESS_TOKEN>";
+
+      const styleId = "jawg-lagoon";
+
       const map = new maplibregl.Map({
         container: "map",
-        style: `https://api.jawg.io/styles/jawg-dark.json?lang=en&access-token=${accessToken}`,
+        style: `https://api.jawg.io/styles/${styleId}.json?lang=en&access-token=${accessToken}`,
         zoom: 2,
         center: [2.3210938, 48.7965913],
         hash: true,
       }).addControl(new maplibregl.NavigationControl(), "top-right");
       // This plugin is used for right to left languages
       maplibregl.setRTLTextPlugin("https://unpkg.com/@mapbox/[email protected]/mapbox-gl-rtl-text.min.js");
 
-      map.on("load", function () {
+      map.on("load", () => {
         document.getElementById("languages").addEventListener("change", function (event) {
           var language = event.target.value;
-          map.setStyle(`https://api.jawg.io/styles/jawg-dark.json?lang=${language}&access-token=${accessToken}`);
+          map.setStyle(`https://api.jawg.io/styles/${styleId}.json?lang=${language}&access-token=${accessToken}`);
         });
       });
     </script>

diff --git a/examples/change-style.html b/examples/change-style.html
@@ -2,12 +2,14 @@
 <html>
   <head>
     <meta charset="UTF-8" />
-    <link href="https://unpkg.com/maplibre-gl@3.3.0/dist/maplibre-gl.css" rel="stylesheet" />
-    <script src="https://unpkg.com/maplibre-gl@3.3.0/dist/maplibre-gl.js"></script>
+    <link href="https://unpkg.com/maplibre-gl@4.3.2/dist/maplibre-gl.css" rel="stylesheet" />
+    <script src="https://unpkg.com/maplibre-gl@4.3.2/dist/maplibre-gl.js"></script>
     <style>
+      html,
       body {
         margin: 0;
         padding: 0;
+        height: 100%;
       }
       #map {
         min-height: 500px;
@@ -28,6 +30,7 @@
     <div id="map">
       <select id="styles" class="dropdownSelect">
         <option value="jawg-streets">jawg-streets</option>
+        <option value="jawg-lagoon">jawg-lagoon</option>
         <option value="jawg-sunny">jawg-sunny</option>
         <option value="jawg-terrain">jawg-terrain</option>
         <option value="jawg-dark">jawg-dark</option>
@@ -48,10 +51,10 @@
       // This plugin is used for right to left languages
       maplibregl.setRTLTextPlugin("https://unpkg.com/@mapbox/[email protected]/mapbox-gl-rtl-text.min.js");
 
-      map.on("load", function () {
+      map.on("load", () => {
         document.getElementById("styles").addEventListener("change", function (event) {
-          const style = event.target.value;
-          map.setStyle(`https://api.jawg.io/styles/${style}.json?access-token=${accessToken}`);
+          const styleId = event.target.value;
+          map.setStyle(`https://api.jawg.io/styles/${styleId}.json?access-token=${accessToken}`);
         });
       });
     </script>

diff --git a/examples/cluster.html b/examples/cluster.html
@@ -2,8 +2,8 @@
 <html>
   <head>
     <meta charset="UTF-8" />
-    <link href="https://unpkg.com/maplibre-gl@3.3.0/dist/maplibre-gl.css" rel="stylesheet" />
-    <script src="https://unpkg.com/maplibre-gl@3.3.0/dist/maplibre-gl.js"></script>
+    <link href="https://unpkg.com/maplibre-gl@4.3.2/dist/maplibre-gl.css" rel="stylesheet" />
+    <script src="https://unpkg.com/maplibre-gl@4.3.2/dist/maplibre-gl.js"></script>
     <style>
       html,
       body {
@@ -25,28 +25,24 @@
       const accessToken = "<YOUR_ACCESS_TOKEN>";
       const map = new maplibregl.Map({
         container: "map",
-        style: `https://api.jawg.io/styles/jawg-terrain.json?access-token=${accessToken}`,
+        style: `https://api.jawg.io/styles/jawg-lagoon.json?access-token=${accessToken}`,
         zoom: 2,
         center: [2.3210938, 48.7965913],
         hash: true,
       }).addControl(new maplibregl.NavigationControl(), "top-right");
       // This plugin is used for right to left languages
       maplibregl.setRTLTextPlugin("https://unpkg.com/@mapbox/[email protected]/mapbox-gl-rtl-text.min.js");
 
-      map.on("load", () => {
+      map.on("load", async () => {
         // Add the tree cluster image
-        map.loadImage(
+        const clusterImage = await map.loadImage(
           "https://jawg.github.io/maplibre-gl-js-examples/icons/cluster/tree-cluster.png",
-          (error, image) => {
-            if (error) throw error;
-            map.addImage("tree-cluster", image);
-          },
         );
+        map.addImage("tree-cluster", clusterImage.data);
+
         // Add the simple tree image
-        map.loadImage("https://jawg.github.io/maplibre-gl-js-examples/icons/cluster/tree.png", (error, image) => {
-          if (error) throw error;
-          map.addImage("tree", image);
-        });
+        const treeImage = await map.loadImage("https://jawg.github.io/maplibre-gl-js-examples/icons/cluster/tree.png");
+        map.addImage("tree", treeImage.data);
 
         // Add a new source from our GeoJSON data and set the "cluster" option to true.
         // MapLibre will add the "point_count" property to your source data
@@ -116,16 +112,14 @@
         });
 
         // On click on a cluster, zoom to the expansion zoom level
-        map.on("click", "tree", (e) => {
+        map.on("click", "tree", async (e) => {
           const feature = e.features[0];
           var clusterId = feature.properties.cluster_id;
           if (!clusterId) return;
-          map.getSource("trees").getClusterExpansionZoom(clusterId, (err, zoom) => {
-            if (err) return;
-            map.easeTo({
-              center: feature.geometry.coordinates,
-              zoom: zoom + 0.5,
-            });
+          const zoom = await map.getSource("trees").getClusterExpansionZoom(clusterId);
+          map.easeTo({
+            center: feature.geometry.coordinates,
+            zoom: zoom + 0.5,
           });
         });
 

diff --git a/examples/custom-style.html b/examples/custom-style.html
@@ -2,12 +2,14 @@
 <html>
   <head>
     <meta charset="UTF-8" />
-    <link href="https://unpkg.com/maplibre-gl@3.3.0/dist/maplibre-gl.css" rel="stylesheet" />
-    <script src="https://unpkg.com/maplibre-gl@3.3.0/dist/maplibre-gl.js"></script>
+    <link href="https://unpkg.com/maplibre-gl@4.3.2/dist/maplibre-gl.css" rel="stylesheet" />
+    <script src="https://unpkg.com/maplibre-gl@4.3.2/dist/maplibre-gl.js"></script>
     <style>
+      html,
       body {
         margin: 0;
         padding: 0;
+        height: 100%;
       }
       #map {
         min-height: 500px;