Replace StamenTonerLight basemap with BC Gov basemaps

* Replace StamenTonerLight basemap with BC Gov basemaps * Update basemap name in debug apps * Skip ArcGIS basemaps in basemap tool when no Esri API key * Replace Topographic with BCGov as viewer config default * Increment version to 1.2.0
bcgov · Oct 24, 2023 · 8d7a4bc · 8d7a4bc
1 parent 7ecc2af
commit 8d7a4bc
Show file tree

Hide file tree

Showing 28 changed files with 71 additions and 57 deletions.
diff --git a/debug/app/francophone/map-config.json b/debug/app/francophone/map-config.json
@@ -28,7 +28,7 @@
 			],
 			"zoom": 6.0
 		},
-		"baseMap": "StamenTonerLight",
+		"baseMap": "BCGov",
 		"activeTool": "about",
 		"clusterOption": {
 			"showCoverageOnHover": false

diff --git a/debug/app/translink/config/map.json b/debug/app/translink/config/map.json
@@ -14,7 +14,7 @@
             49.72867079292322
         ]
     },
-    "baseMap": "StamenTonerLight",
+    "baseMap": "BCGov",
     "minZoom": 10,
     "activeTool": "directions"
   },

diff --git a/debug/app/wf/map-config.json b/debug/app/wf/map-config.json
@@ -12,7 +12,7 @@
       -122.88096914067867,
       48.25579824757873
     ],
-    "baseMap": "StamenTonerLight",
+    "baseMap": "BCGov",
     "minZoom": 4
   },
   "tools": [

diff --git a/debug/config/about-long.json b/debug/config/about-long.json
diff --git a/debug/config/dylans-test-map.json b/debug/config/dylans-test-map.json
diff --git a/debug/config/victoria.json b/debug/config/victoria.json
@@ -5,6 +5,6 @@
             "center": null,
             "zoom": null
         },
-        "baseMap": "StamenTonerLight"
+        "baseMap": "BCGov"
     }
 }
diff --git a/debug/customization/bespoke/smk-config.json b/debug/customization/bespoke/smk-config.json
@@ -15,7 +15,7 @@
             ],
             "zoom": 5.662861104534402
         },
-        "baseMap": "StamenTonerLight"
+        "baseMap": "BCGov"
     },
     "layers": [],
     "tools": [

diff --git a/debug/customization/vector-tile-layer/smk-config.json b/debug/customization/vector-tile-layer/smk-config.json
@@ -15,7 +15,7 @@
             ],
             "zoom": 3
         },
-        "baseMap": "StamenTonerLight"
+        "baseMap": "BCGov"
     },
     "layers": [],
     "tools": [

diff --git a/debug/feature/INIT/after.html b/debug/feature/INIT/after.html
@@ -18,7 +18,7 @@
             SMK.INIT( {
                 containerSel:   '#smk-map-frame',
                 config: [ 
-                    { viewer: { baseMap: "StamenTonerLight" } }
+                    { viewer: { baseMap: "BCGov" } }
                 ]
             } )
             .then( function ( smk ) {

diff --git a/debug/feature/INIT/everything.html b/debug/feature/INIT/everything.html
@@ -30,7 +30,7 @@
                 baseUrl:        SMK.BASE_URL + '../dist/',
                 config: [ 
                     // literal configuration
-                    { viewer: { baseMap: "StamenTonerLight" }, tools: [ { type: 'markup', enabled: false } ] },
+                    { viewer: { baseMap: "BCGov" }, tools: [ { type: 'markup', enabled: false } ] },
                     // URL to JSON object
                     './map-config.json', 
                     // SMK command

diff --git a/debug/feature/INIT/minimal.html b/debug/feature/INIT/minimal.html
@@ -18,7 +18,7 @@
             SMK.INIT( {
                 containerSel: "#smk-map-frame",
                 config: [ 
-                    { viewer: { baseMap: "StamenTonerLight" } }
+                    { viewer: { baseMap: "BCGov" } }
                 ]
             } )
         </script>

diff --git a/debug/feature/INIT/script-init.html b/debug/feature/INIT/script-init.html
@@ -3,7 +3,7 @@
     <head>
         <title>Script init</title>
 
-        <script src="../../../dist/smk.js" smk-container-sel="#smk-map-frame" smk-id="2" smk-config='{"viewer":{"baseMap":"StamenTonerLight"}}'></script>
+        <script src="../../../dist/smk.js" smk-container-sel="#smk-map-frame" smk-id="2" smk-config='{"viewer":{"baseMap":"BCGov"}}'></script>
         <link rel="stylesheet" type="text/css" href="style.css"/>
     </head>
     <body>

diff --git a/debug/feature/Layer-Type/map-config.json b/debug/feature/Layer-Type/map-config.json
@@ -1,7 +1,7 @@
 {
     "viewer": {
         "activeTool": "layers",
-        "baseMap": "StamenTonerLight"
+        "baseMap": "BCGov"
     },
     "tools": [
         {

diff --git a/debug/feature/Viewer-Config/default-config.json b/debug/feature/Viewer-Config/default-config.json
@@ -1,6 +1,6 @@
 {
     "viewer": {
-        "baseMap": "StamenTonerLight"
+        "baseMap": "BCGov"
     },
     "tools": [
         {

diff --git a/debug/layout/fullframe/index.html b/debug/layout/fullframe/index.html
@@ -3,7 +3,7 @@
     <head>
         <title></title>
         <!-- SMK BOOTSTRAP - - - - - - - -->
-        <script src="../../../dist/smk.js" smk-container-sel="#smk-map-frame" smk-config='{"viewer":{"baseMap":"StamenTonerLight"}}'></script>
+        <script src="../../../dist/smk.js" smk-container-sel="#smk-map-frame" smk-config='{"viewer":{"baseMap":"BCGov"}}'></script>
         <!-- - - - - - - - - - - - - - - -->
         <style>
             #smk-map-frame {

diff --git a/debug/layout/header/index.html b/debug/layout/header/index.html
@@ -3,7 +3,7 @@
     <head>
         <title></title>
         <!-- SMK BOOTSTRAP - - - - - - - -->
-        <script src="../../../dist/smk.js" smk-container-sel="#smk-map-frame" smk-config='{"viewer":{"baseMap":"StamenTonerLight"}}'></script>
+        <script src="../../../dist/smk.js" smk-container-sel="#smk-map-frame" smk-config='{"viewer":{"baseMap":"BCGov"}}'></script>
         <!-- - - - - - - - - - - - - - - -->
         <style>
             #header {

diff --git a/debug/layout/inline/index.html b/debug/layout/inline/index.html
@@ -3,7 +3,7 @@
     <head>
         <title></title>
         <!-- SMK BOOTSTRAP - - - - - - - -->
-        <script src="../../../dist/smk.js" smk-container-sel="#smk-map-frame" smk-config='{"viewer":{"baseMap":"StamenTonerLight"}}'></script>
+        <script src="../../../dist/smk.js" smk-container-sel="#smk-map-frame" smk-config='{"viewer":{"baseMap":"BCGov"}}'></script>
         <!-- - - - - - - - - - - - - - - -->
         <style>
             #header {

diff --git a/debug/layout/mobile/mobile.json b/debug/layout/mobile/mobile.json
@@ -1,7 +1,7 @@
 {
   "viewer": {
       "device": "mobile",
-      "baseMap": "StamenTonerLight"
+      "baseMap": "BCGov"
   },
   "tools": [
     {

diff --git a/debug/layout/multiple/index.html b/debug/layout/multiple/index.html
@@ -6,13 +6,13 @@
         <script src="../../../dist/smk.js"
             smk-id="1"
             smk-container-sel="#smk-map-frame1"
-            smk-config='{"viewer":{"baseMap":"StamenTonerLight"}}'
+            smk-config='{"viewer":{"baseMap":"BCGov"}}'
         ></script>
 
         <script src="../../../dist/smk.js"
             smk-id="2"
             smk-container-sel="#smk-map-frame2"
-            smk-config='{"viewer":{"baseMap":"StamenTonerLight"}}'
+            smk-config='{"viewer":{"baseMap":"BCGov"}}'
         ></script>
 
         <!-- - - - - - - - - - - - - - - -->

diff --git a/debug/layout/sidebar/index.html b/debug/layout/sidebar/index.html
@@ -3,7 +3,7 @@
     <head>
         <title></title>
         <!-- SMK BOOTSTRAP - - - - - - - -->
-        <script src="../../../dist/smk.js" smk-container-sel="#smk-map-frame" smk-config='{"viewer":{"baseMap":"StamenTonerLight"}}'></script>
+        <script src="../../../dist/smk.js" smk-container-sel="#smk-map-frame" smk-config='{"viewer":{"baseMap":"BCGov"}}'></script>
         <!-- - - - - - - - - - - - - - - -->
         <style>
             #header {

diff --git a/docs/configuration/viewer.md b/docs/configuration/viewer.md
@@ -14,7 +14,7 @@ Click on a property name for more information:
     <a href="#deviceautobreakpoint-property"    >"deviceAutoBreakpoint"</a>: 500,
     <a href="#themes-property"                  >"themes"</a>:      null
     <a href="#panelwidth-property"              >"panelWidth"</a>:  300,
-    <a href="#basemap-property"                 >"baseMap"</a>:     "Topographic",
+    <a href="#basemap-property"                 >"baseMap"</a>:     "BCGov",
     <a href="#esriapikey-property"              >"esriApiKey"</a>:  null,
     <a href="#activeTool-property"              >"activeTool"</a>:  null,
     <a href="#minZoom-property"                 >"minZoom"</a>:  null,
@@ -82,20 +82,21 @@ The width of the UI panel, in pixels.
 The name of the basemap to display at startup.
 These are the possible values:
 
+- `"BCGov"`
+- `"BCGovHillshade"`
 - `"Topographic"`
 - `"Streets"`
 - `"Imagery"`
 - `"Oceans"`
 - `"ShadedRelief"`
 - `"DarkGray"`
 - `"Gray"`
-- `"StamenTonerLight"`
 
 
 ## EsriApiKey Property
 `"esriApiKey": String`
 
-An Esri API key to use with Esri's [vector basemap service](https://developers.arcgis.com/documentation/mapping-apis-and-services/maps/services/basemap-layer-service), which is used for all basemaps except *StamenTonerLight*.
+An Esri API key to use with Esri's [vector basemap service](https://developers.arcgis.com/documentation/mapping-apis-and-services/maps/services/basemap-layer-service), which is used for all basemaps except *BCGov* and *BCGovHillshade*.
 
 To provide an Esri API key, you can create an [ArcGIS Developer account](https://developers.arcgis.com/sign-up/) for free or use an [ArcGIS Online account](https://www.esri.com/en-us/arcgis/products/arcgis-online/trial) and then create an [API key](https://developers.arcgis.com/documentation/mapping-apis-and-services/security/api-keys/) in the [developer dashboard](https://developers.arcgis.com/dashboard/).
 

diff --git a/docs/examples.md b/docs/examples.md
@@ -236,7 +236,7 @@ Using default configuration.
 - The window/tab has title 'SMK Default Map'.
 - These tools are available: directions, location, markup, and search.
 - Map is centered over BC, showing whole province.
-- The base map is 'Topographic'.
+- The base map is 'BC Government'.
 
 ### Discussion 1
 
@@ -417,7 +417,7 @@ Setting location of map.
 - The window/tab has title 'SMK Default Map'.
 - These tools are available: directions, location, search, and markup.
 - Map is centered over southern Vancouver Island.
-- The base map is 'Topographic'.
+- The base map is 'BC Government'.
 
 
 
@@ -478,7 +478,7 @@ The URL parameters can be processed before or after other configuration specifie
 - The window/tab has title 'SMK Default Map'.
 - These tools are available: directions, location, search, and markup.
 - Map is centered over southern Vancouver Island.
-- The base map is 'Topographic'.
+- The base map is 'BC Government'.
 
 ### Discussion 5
 
@@ -527,7 +527,7 @@ Enabling tools.
 - The map fills browser window.
 - The window/tab has title 'SMK Default Map'.
 - These tools are available: about, baseMaps, coordinate, directions, identify, layers, location, markup, measure, menu, minimap, pan, scale, search, select, and zoom.
-- The base map is 'Topographic'.
+- The base map is 'BC Government'.
 
 ### Discussion 6
 
@@ -575,7 +575,7 @@ Configuring tools.
 - The window/tab has title 'SMK Default Map'.
 - These tools are available: directions, location, scale, search, and markup.
 - The scale display doesn't show the scale factor.
-- The base map is 'Topographic'.
+- The base map is 'BC Government'.
 
 
 
@@ -611,7 +611,7 @@ Running an ad-hoc query.
 - The map fills browser window.
 - The window/tab has title 'SMK Default Map'.
 - These tools are available: directions, location, scale, search, query, and markup.
-- The base map is 'Topographic'.
+- The base map is 'BC Government'.
 - The query tool is activated when the map loads.
 - The query is executed immediately.
 

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -1,5 +1,5 @@
 {
-  "version": "1.1.12",
+  "version": "1.2.0",
   "name": "@bcgov/smk",
   "title": "Simple Map Kit",
   "description": "A simple way to add a map your application.",

diff --git a/src/smk.js b/src/smk.js
@@ -724,7 +724,7 @@
                     location: {
                         extent: [ -139.1782, 47.6039, -110.3533, 60.5939 ],
                     },
-                    baseMap: 'Topographic',
+                    baseMap: 'BCGov',
                     clusterOption: {
                         showCoverageOnHover: false
                     }

diff --git a/src/smk/tool/baseMaps/tool-baseMaps.js b/src/smk/tool/baseMaps/tool-baseMaps.js
@@ -36,6 +36,9 @@ include.module( 'tool-baseMaps', [
                     return Object.assign( { id: id }, smk.$viewer.basemap[ id ] )
                 } )
                 .filter( function ( bm ) {
+                    if (!smk.viewer.esriApiKey && bm.apiId.startsWith("ArcGIS")) {
+                        return false;
+                    }
                     if ( !self.choices || self.choices.length == 0 ) return true
                     if ( self.choices.indexOf( bm.id ) > -1 ) return true
                     if ( smk.viewer.baseMap == bm.id ) return true

diff --git a/src/smk/viewer-leaflet/viewer-leaflet.js b/src/smk/viewer-leaflet/viewer-leaflet.js
@@ -193,9 +193,9 @@ include.module( 'viewer-leaflet', [ 'viewer', 'leaflet', 'layer-leaflet', /*'fea
 
     ViewerLeaflet.prototype.basemap.Gray.create = createBasemapEsri
 
-    ViewerLeaflet.prototype.basemap.StamenTonerLight.create = createBasemapTiled
-    ViewerLeaflet.prototype.basemap.StamenTonerLight.url = 'https://stamen-tiles-{s}.a.ssl.fastly.net/toner-lite/{z}/{x}/{y}.png'
-    ViewerLeaflet.prototype.basemap.StamenTonerLight.attribution = "Map tiles by <a href='http://stamen.com'>Stamen Design</a>, under <a href='http://creativecommons.org/licenses/by/3.0'>CC BY 3.0</a>. Data by <a href='http://openstreetmap.org'>OpenStreetMap</a>, under <a href='http://www.openstreetmap.org/copyright'>ODbL</a>."
+    ViewerLeaflet.prototype.basemap.BCGov.create = createBasemapTiled
+
+    ViewerLeaflet.prototype.basemap.BCGovHillshade.create = createBasemapTiled
 
     function createBasemapEsri( apiId, esriApiKey ) {
         if (!esriApiKey) {
@@ -212,9 +212,9 @@ include.module( 'viewer-leaflet', [ 'viewer', 'leaflet', 'layer-leaflet', /*'fea
         return [ L.esri.Vector.vectorBasemapLayer( apiId, opt ) ];
     }
 
-    function createBasemapTiled( id ) {
+    function createBasemapTiled( apiId ) {
         /* jshint -W040 */
-        return [ L.tileLayer( this.url, { attribution: this.attribution, pane: BASEMAP_PANE } ) ]
+        return [ L.esri.Vector.vectorTileLayer( apiId ) ]
     }
 
     ViewerLeaflet.prototype.setBasemap = function ( basemapId, esriApiKey ) {
@@ -226,6 +226,10 @@ include.module( 'viewer-leaflet', [ 'viewer', 'leaflet', 'layer-leaflet', /*'fea
             } )
         }
 
+        // If basemap is not recognized, apply the default
+        if(!this.basemap[basemapId]) {
+            basemapId = "BCGov";
+        }
         this.currentBasemap = this.createBasemapLayer( basemapId, esriApiKey );
 
         this.map.addLayer( this.currentBasemap[ 0 ] );