add worldview and places params (#214)

* add worldview param and places wip * obfuscate apikey * add places param support * Update src/Util.js Co-authored-by: Gavin Rehkemper <[email protected]> * update worldview example * rev fetch method --------- Co-authored-by: Gavin Rehkemper <[email protected]>
Esri · Dec 5, 2023 · 299f3f3 · 299f3f3
1 parent 2e47516
commit 299f3f3
Show file tree

Hide file tree

Showing 6 changed files with 204 additions and 14 deletions.
diff --git a/examples/basemap-places.html b/examples/basemap-places.html
@@ -0,0 +1,72 @@
+<html>
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no" />
+    <title>Esri Leaflet Vector: Display basemap places</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 -->
+  <script src=https://unpkg.com/[email protected]/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([34.101, -118.339], 17);
+     const apiKey = "<YOUR ARCGIS API KEY HERE>";
+
+      const basemapStyle = "arcgis/navigation";
+
+      const getLayer = places => {
+        return L.esri.Vector.vectorBasemapLayer(basemapStyle, {
+            apiKey: apiKey,
+            version: 2,
+            places:places
+        })
+      }
+
+      const placeOptions = {
+        "all":getLayer("all").addTo(map), // Show all places
+        "attributed":getLayer("attributed"), // Show places with attributes
+        "none":getLayer("none") // Hide all places
+      };
+
+      L.control.layers(placeOptions, null, { collapsed: false }).addTo(map);
+
+      map.on('baselayerchange', e=>{
+        console.log(e);
+      })
+    </script>
+
+  </body>
+</html>
diff --git a/examples/languages.html b/examples/languages.html
@@ -44,7 +44,7 @@
       }).setView([35.7088, 48.8790], 4);
 
 
-      const apiKey = "< YOUR ARCGIS API KEY HERE >";
+      const apiKey = "<YOUR ARCGIS API KEY HERE>";
 
       const basemapStyle = "arcgis/outdoor";
 

diff --git a/examples/worldview.html b/examples/worldview.html
@@ -0,0 +1,71 @@
+<html>
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no" />
+    <title>Esri Leaflet Vector: Display basemap places</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 map = L.map("map", {
+        minZoom: 2
+      }).setView([35.7088, 48.8790], 4);
+
+      const apiKey = "< YOUR ARCGIS API KEY HERE >";
+
+      const basemapStyle = "arcgis/light-gray";
+
+      const getLayer = code => {
+        return L.esri.Vector.vectorBasemapLayer(basemapStyle, {
+            apiKey: apiKey,
+            version: 2,
+            worldview:code
+        })
+      }
+
+      // Retrieve list of supported worldviews from /self url
+      L.esri.get('https://basemapstyles-api.arcgis.com/arcgis/rest/services/styles/v2/styles/self',{}, (error,response)=>{
+        // Add leaflet control to map
+        const worldviewOptions = Object.fromEntries(response.worldviews.map(worldview => [worldview.name,getLayer(worldview.code)]));
+        L.control.layers(worldviewOptions, null, { collapsed: false }).addTo(map);
+      })
+
+      map.on('baselayerchange', e=>{
+        console.log(e);
+      })
+    </script>
+
+  </body>
+</html>
diff --git a/spec/VectorBasemapLayerSpec.js b/spec/VectorBasemapLayerSpec.js
@@ -5,6 +5,8 @@ const basemapKey = 'ArcGIS:Streets';
 const basemapKeyV2 = 'arcgis/streets';
 const customBasemap = 'f04f33b9626240f084cb52f0b08758ef';
 const language = 'zh_s';
+const worldview = 'morocco';
+const places = 'attributed';
 
 describe('VectorBasemapLayer', function () {
   it('should have a L.esri.vectorBasemapLayer alias', function () {
@@ -129,14 +131,18 @@ describe('VectorBasemapLayer', function () {
     expect(layer.options.version).to.equal(2);
   });
 
-  it('should save the language from the constructor', function () {
+  it('should save the language and worldview parameters from the constructor', function () {
     const layer = new L.esri.Vector.vectorBasemapLayer(basemapKeyV2, {
       apikey: apikey,
       version: 2,
-      language: language
+      language: language,
+      worldview: worldview,
+      places: places
     });
 
     expect(layer.options.language).to.equal(language);
+    expect(layer.options.worldview).to.equal(worldview);
+    expect(layer.options.places).to.equal(places);
   });
 
   it('should error if a language is provided when accessing the v1 service', function () {
@@ -148,6 +154,24 @@ describe('VectorBasemapLayer', function () {
     }).to.throw('The language parameter is only supported by the basemap styles service v2. Provide a v2 style enumeration to use this option.');
   });
 
+  it('should error if a worldview is provided when accessing the v1 service', function () {
+    expect(function () {
+      L.esri.Vector.vectorBasemapLayer(basemapKey, {
+        apikey: apikey,
+        worldview: worldview
+      });
+    }).to.throw('The worldview parameter is only supported by the basemap styles service v2. Provide a v2 style enumeration to use this option.');
+  });
+
+  it('should error if a places parameter is provided when accessing the v1 service', function () {
+    expect(function () {
+      L.esri.Vector.vectorBasemapLayer(basemapKey, {
+        apikey: apikey,
+        places: places
+      });
+    }).to.throw('The places parameter is only supported by the basemap styles service v2. Provide a v2 style enumeration to use this option.');
+  });
+
   it('should not accept a v2 style enumeration when accessing the v1 service', function () {
     expect(function () {
       L.esri.Vector.vectorBasemapLayer(basemapKeyV2, {

diff --git a/src/Util.js b/src/Util.js
@@ -20,7 +20,15 @@ export function getBasemapStyleUrl (style, apikey) {
   return url;
 }
 
-export function getBasemapStyleV2Url (style, apikey, language) {
+/**
+ * Utility to establish a URL for the basemap styles API v2
+ *
+ * @param {string} style
+ * @param {string} token
+ * @param {Object} [options] Optional list of options: language, worldview, or places.
+ * @returns {string} the URL
+ */
+export function getBasemapStyleV2Url (style, token, options) {
   if (style.includes(':')) {
     throw new Error(style + ' is a v1 style enumeration. Set version:1 to request this style');
   }
@@ -30,19 +38,24 @@ export function getBasemapStyleV2Url (style, apikey, language) {
     // style is an itemID
     url = url + 'items/' + style;
 
-    if (language) {
+    if (options.language) {
       throw new Error('The \'language\' parameter is not supported for custom basemap styles');
     }
   } else {
     url = url + style;
   }
 
-  if (apikey) {
-    url = url + '?token=' + apikey;
+  if (!token) throw new Error('A token is required to access basemap styles.');
 
-    if (language) {
-      url = url + '&language=' + language;
-    }
+  url = url + '?token=' + token;
+  if (options.language) {
+    url = url + '&language=' + options.language;
+  }
+  if (options.worldview) {
+    url = url + '&worldview=' + options.worldview;
+  }
+  if (options.places) {
+    url = url + '&places=' + options.places;
   }
   return url;
 }

diff --git a/src/VectorBasemapLayer.js b/src/VectorBasemapLayer.js
@@ -23,11 +23,17 @@ export var VectorBasemapLayer = VectorTileLayer.extend({
     if (!(options.apikey || options.apiKey || options.token)) {
       throw new Error('An API Key or token is required for vectorBasemapLayer.');
     }
-    // Validate language param
-    if (options.language) {
-      if (options.version !== 2) {
+    // Validate v2 service params
+    if (options.version !== 2) {
+      if (options.language) {
         throw new Error('The language parameter is only supported by the basemap styles service v2. Provide a v2 style enumeration to use this option.');
       }
+      if (options.worldview) {
+        throw new Error('The worldview parameter is only supported by the basemap styles service v2. Provide a v2 style enumeration to use this option.');
+      }
+      if (options.places) {
+        throw new Error('The places parameter is only supported by the basemap styles service v2. Provide a v2 style enumeration to use this option.');
+      }
     }
     // Determine layer order
     if (!options.pane) {
@@ -51,7 +57,11 @@ export var VectorBasemapLayer = VectorTileLayer.extend({
   _createLayer: function () {
     let styleUrl;
     if (this.options.version && this.options.version === 2) {
-      styleUrl = getBasemapStyleV2Url(this.options.key, this.options.apikey, this.options.language);
+      styleUrl = getBasemapStyleV2Url(this.options.key, this.options.apikey, {
+        language: this.options.language,
+        worldview: this.options.worldview,
+        places: this.options.places
+      });
     } else {
       styleUrl = getBasemapStyleUrl(this.options.key, this.options.apikey);
     }