Implement v2 styles endpoint and update layer inheritance (#182)

* add support for v2 styles #174 * suggestions from code review * Apply suggestions from code review Co-authored-by: Gavin Rehkemper <[email protected]> * add unit tests and style enum validation * add support for custom itemids * revert package-lock.json * update leaflet, esri leaflet, maplibre versions * fix basemap layer pane options #170 * change VectorBasemapLayer to inherit from VectorTileLayer #150 * clean up inheritance change #150 * fix attribution sources for v2 #174 * revert version update (goes in separate pr) * apply fixes from review meeting * remove debug statement * update unit tests * Apply suggestions from code review Co-authored-by: Gavin Rehkemper <[email protected]> Co-authored-by: Patrick Arlt <[email protected]> * add suggested unit test #174 --------- Co-authored-by: Gavin Rehkemper <[email protected]> Co-authored-by: Patrick Arlt <[email protected]>
Esri · May 30, 2023 · 8c31733 · 8c31733
1 parent 1deeaac
commit 8c31733
Show file tree

Hide file tree

Showing 7 changed files with 526 additions and 115 deletions.
diff --git a/examples/customize-basemap-style.html b/examples/customize-basemap-style.html
@@ -0,0 +1,73 @@
+<html>
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no" />
+    <title>Esri Leaflet Vector: Customize the basemap style</title>
+
+  <!-- Load Leaflet from CDN or local node_modules -->
+  <link rel="stylesheet" href="../node_modules/leaflet/dist/leaflet.css" />
+  <script src="../node_modules/leaflet/dist/leaflet.js"></script>
+
+  <!--
+    Load maplibre-gl from CDN or local node_modules for dev/debug purposes because it is not bundled in Esri Leaflet Vector's dev/debug code
+    (note also that loading maplibre-gl.css is not necessary)
+  -->
+  <script src="../node_modules/maplibre-gl/dist/maplibre-gl.js"></script>
+
+  <!-- Load Esri Leaflet and Esri Leaflet Vector plugin dev/debug version -->
+  <script src="../node_modules/esri-leaflet/dist/esri-leaflet.js"></script>
+  <script src="../dist/esri-leaflet-vector-debug.js"></script>
+
+    <style>
+      body {
+        margin: 0;
+        padding: 0;
+      }
+      #map {
+        position: absolute;
+        top: 0;
+        bottom: 0;
+        right: 0;
+        left: 0;
+        font-family: Arial, Helvetica, sans-serif;
+        font-size: 14px;
+        color: #323232;
+      }
+    </style>
+  </head>
+
+  <body>
+    <div id='map'></div>
+    <script>
+      const map = L.map('map', {
+        minZoom: 2
+      }).setView([33.97, -118.15],9);
+
+
+      const apiKey = "< YOUR VALID API KEY HERE >";
+
+      const props = {
+        apiKey: apiKey,
+        style: function (style) {
+          for (const [i, layer] of style.layers.entries()) {
+            if (layer.type === 'fill' && layer.id.match(/(Land|Military|Indigenous)/)) {
+              style.layers[i].paint['fill-color'] = '#393D3F';
+            } 
+            if (layer.type === 'fill' && layer.id.match(/(Vegetation|Park|park|forest)/)) {
+              style.layers[i].paint['fill-color'] = '#4E5356';
+            }
+            if (layer.type === 'fill' && layer.id.match(/(Water|Marine|Bathymetry|background)/)) {
+              style.layers[i].paint['fill-color'] = '#C6C5B9';
+            }
+          }
+          return style;
+        }
+      }
+
+      const basemapStyle = 'ArcGIS:DarkGray';
+      const basemap = L.esri.Vector.vectorBasemapLayer(basemapStyle, props)
+      basemap.addTo(map);
+
+    </script>
+  </body>
+</html>
diff --git a/examples/customize-vtl-style.html b/examples/customize-vtl-style.html
@@ -0,0 +1,79 @@
+<!--
+
+To run this demo, you need to replace 'YOUR_API_KEY' with an API key from the ArcGIS Developers dashboard.
+
+Sign up for a free account and get an API key.
+
+https://developers.arcgis.com/documentation/mapping-apis-and-services/get-started/
+
+-->
+<html>
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no" />
+    <title>Esri Leaflet: Customize a vector tile layer style</title>
+
+    <!-- Load Leaflet from CDN or local node_modules -->
+    <link rel="stylesheet" href="../node_modules/leaflet/dist/leaflet.css" />
+    <script src="../node_modules/leaflet/dist/leaflet.js"></script>
+
+    <!--
+        Load maplibre-gl from CDN or local node_modules for dev/debug purposes because it is not bundled in Esri Leaflet Vector's dev/debug code
+        (note also that loading maplibre-gl.css is not necessary)
+    -->
+    <script src="../node_modules/maplibre-gl/dist/maplibre-gl.js"></script>
+
+    <!-- Load Esri Leaflet and Esri Leaflet Vector plugin dev/debug version -->
+    <script src="../node_modules/esri-leaflet/dist/esri-leaflet.js"></script>
+    <script src="../dist/esri-leaflet-vector-debug.js"></script>
+
+
+    <style>
+      body {
+        margin: 0;
+        padding: 0;
+      }
+      #map {
+        position: absolute;
+        top: 0;
+        bottom: 0;
+        right: 0;
+        left: 0;
+        font-family: Arial, Helvetica, sans-serif;
+        font-size: 14px;
+        color: #323232;
+      }
+    </style>
+  </head>
+
+  <body>
+    <div id="map"></div>
+
+    <script type="module">
+
+    const apiKey = "< YOUR VALID API KEY HERE >";
+
+    const basemapEnum = "ArcGIS:Streets";
+
+    const map = L.map("map", {
+    minZoom: 2
+    }).setView([34.02, -118.805], 13);
+
+
+    const basemap = L.esri.Vector.vectorBasemapLayer(basemapEnum, {
+      apiKey: apiKey,
+      pane: "tilePane"
+    }).addTo(map);
+
+
+    const vtl = L.esri.Vector.vectorTileLayer(
+    "https://vectortileservices3.arcgis.com/GVgbJbqm8hXASVYi/arcgis/rest/services/Santa_Monica_Mountains_Parcels_VTL/VectorTileServer", {
+        style: function (style) {
+            console.log(style);
+            style.layers[0].paint['fill-color'] = '#ff0000';
+            return style;
+        }
+    }).addTo(map);
+  </script>
+  </body>
+</html>
diff --git a/examples/languages.html b/examples/languages.html
@@ -0,0 +1,104 @@
+<html>
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no" />
+    <title>Esri Leaflet Tutorials: Change the basemap style</title>
+
+  <!-- Load Leaflet from CDN or local node_modules -->
+  <link rel="stylesheet" href="../node_modules/leaflet/dist/leaflet.css" />
+  <script src="../node_modules/leaflet/dist/leaflet.js"></script>
+
+  <!--
+    Load maplibre-gl from CDN or local node_modules for dev/debug purposes because it is not bundled in Esri Leaflet Vector's dev/debug code
+    (note also that loading maplibre-gl.css is not necessary)
+  -->
+  <script src="../node_modules/maplibre-gl/dist/maplibre-gl.js"></script>
+
+  <!-- Load Esri Leaflet and Esri Leaflet Vector plugin dev/debug version -->
+  <script src="../node_modules/esri-leaflet/dist/esri-leaflet.js"></script>
+  <script src="../dist/esri-leaflet-vector-debug.js"></script>
+
+    <style>
+      body {
+        margin: 0;
+        padding: 0;
+      }
+      #map {
+        position: absolute;
+        top: 0;
+        bottom: 0;
+        right: 0;
+        left: 0;
+        font-family: Arial, Helvetica, sans-serif;
+        font-size: 14px;
+        color: #323232;
+
+      }
+    </style>
+  </head>
+  <body>
+    <div id="map"></div>
+    <script>
+      const map = L.map("map", {
+        minZoom: 2
+      }).setView([35.7088, 48.8790], 4);
+
+
+      const apiKey = "< YOUR VALID API KEY HERE >";
+
+      const basemapStyle = "arcgis/outdoor";
+
+      const getLayer = language => {
+        return L.esri.Vector.vectorBasemapLayer(basemapStyle, {
+            apiKey: apiKey,
+            version: 2,
+            language: language
+        })
+      }
+      const basemapLayers = {
+        "Global": getLayer("global"),
+        "Arabic": getLayer("ar"),
+        "Bosnian": getLayer("bs"),
+        "Catalan": getLayer("ca"),
+        "Chinese (Simplified)": getLayer("zh_s"),
+        "Chinese (Hong Kong)": getLayer("zh_hk"),
+        "Chinese (Taiwan)": getLayer("zh_tw"),
+        "Croatian": getLayer("hr"),
+        "Czech": getLayer("cs"),
+        "Danish": getLayer("da"),
+        "Dutch": getLayer("nl"),
+        "Estonian": getLayer("et"),
+        "English": getLayer("en"),
+        "Finnish": getLayer("fi"),
+        "French": getLayer("fr"),
+        "German": getLayer("de"),
+        "Greek": getLayer("el"),
+        "Hebrew": getLayer("he"),
+        "Hungarian": getLayer("hu"),
+        "Indonesian": getLayer("id"),
+        "Italian": getLayer("it"),
+        "Japanese": getLayer("ja"),
+        "Korean": getLayer("ko"),
+        "Latvian": getLayer("lv"),
+        "Lithuanian": getLayer("lt"),
+        "Norwegian": getLayer("no"),
+        "Polish": getLayer("pl"),
+        "Portuguese (Brazil)": getLayer("pt_br"),
+        "Portuguese (Portugal)": getLayer("pt_p"),
+        "Romanian": getLayer("ro"),
+        "Russian": getLayer("ru"),
+        "Serbian": getLayer("sr"),
+        "Spanish": getLayer("es"),
+        "Swedish": getLayer("sv"),
+        "Thai": getLayer("th"),
+        "Turkish": getLayer("tr"),
+        "Ukrainian": getLayer("uk").addTo(map),
+        "Vietnamese": getLayer("vi")
+      };
+
+      L.control.layers(basemapLayers, null, { collapsed: false }).addTo(map);
+
+    </script>
+
+  </body>
+</html>