Basemaps updated for new ESRI API

This updates basemap code for ESRI basemaps to accommodate the use of an API key. Create and edit functionality now prompts for an API key when an ESRI basemap is chosen. Docs are updated. The NPM version is incremented.
bcgov · Jul 20, 2022 · 79c9bed · 79c9bed
1 parent 7ae0b93
commit 79c9bed
Show file tree

Hide file tree

Showing 12 changed files with 90 additions and 45 deletions.
diff --git a/docs/create-an-app.md b/docs/create-an-app.md
@@ -18,7 +18,7 @@ which will return the available commands that the SMK-CLI supports.
 /\__/ /| || | | | | || |_) || ||  __/ | |  | || (_| || |_) | | |\  \| || |_
 \____/ |_||_| |_| |_|| .__/ |_| \___| \_|  |_/ \__,_|| .__/  \_| \_/|_| \__|
                      | |                             | |
-                     |_|                             |_|   CLI v1.0.0
+                     |_|                             |_|   CLI v1.1.0
 Usage: index create|edit|help
 To create a new SMK project:     index create [name]
 To modify an SMK project config: index edit [-p port]
@@ -55,7 +55,7 @@ Where `mySmkProject` will be your desired project name. You will then be present
   /  \ |   / |/ |/ |    |/ \_ |/   |/      |  |  |   /  |    |/ \_    | \    |    |
  /(__/ |_/   |  |  |_/  |__/  |__/ |__/    |  |  |_/ \_/|_/  |__/     |  \_/ |_/  |_/
                        /|                                   /|
-                       \|                                   \|      CLI v1.0.0-beta.6
+                       \|                                   \|      CLI v1.1.0
 Welcome to the SMK application creation tool!
 An application skeleton will be created for you at the current directory.
 But first, please answer some questions about your new SMK application.
@@ -65,10 +65,11 @@ But first, please answer some questions about your new SMK application.
 ? Enter a short description for your application: This is a really cool map
 ? Enter the author's name: Vivid Solutions Inc.
 ? Enter the package name of SMK: smk
-? Select the version of smk for your application: 1.0.0-beta.3
+? Select the version of smk for your application: 1.1.0
 ? Select the template for your application: default
 ? Select the type of map viewer: leaflet
 ? Select the base map: Topographic
+? Enter an Esri API key: my-Esri-API-key
 ? Select the tools: about, coordinate, layers, pan, zoom, scale, minimap, identify, search
 ```
 
@@ -88,20 +89,26 @@ But first, please answer some questions about your new SMK application.
 
 `Select the type of map viewer` The SMK-CLI comes with two different map viewer options: `leaflet` or `ESRI 3D`. Press your arrow direction buttons up or down to choose an option, and press enter to select it. The default is `leaflet`.
 
-Note: Currently ESRI 3D support is experimental.
+Note: Currently Esri 3D support is experimental.
 
-`Select the base map` This will be the default map viewable on your application. Currently SMK uses the ESRI basemap layers:
+`Select the base map` This will be the default map viewable on your application. Currently SMK uses the Esri basemap layers:
 
-- Streets
 - Topographic
-- NationalGeographic
+- Streets
+- Imagery
 - Oceans
-- Gray
+- ShadedRelief
 - DarkGray
-- Imagery
+- Gray
+
+SMK also uses:
+
+- StamenTonerLight
 
 Press your arrow direction buttons up or down to choose an option, and press enter to select it. The default is `Topographic`.
 
+`Enter an Esri API key` Several basemaps are provided by Esri and require the use of an API key. To get an API key, create an [ArcGIS Developer account](https://developers.arcgis.com/sign-up/) or [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/).
+
 `Select the tools` Allows you to pre-select from a set of default SMK tools to activate. Press `space` to select, `a` to toggle all, `i` to invert selection. The options are:
 
 - about
@@ -138,19 +145,11 @@ copying \smk-cli\smk-create\template-default\resources\smk-init.js ..
 
 Installing application dependencies...
 npm notice created a lockfile as package-lock.json. You should commit this file.
-added 25 packages from 37 contributors and audited 25 packages in 1.201s
-npm WARN mySmkProject@0.0.1 No repository field.
-npm WARN mySmkProject@0.0.1 No license field.
-
-
-1 package is looking for funding
-  run `npm fund` for details
-
-found 0 vulnerabilities
+added 31 packages, and audited 32 packages in 3s
 
 mySmkProject@0.0.1 C:\smk\mySmkProject
-+-- http-server@0.12.3
-`-- smk@1.0.0-beta.3
+├── @bcgov/smk@1.1.0
+└── http-server@0.12.3
 
 Your application has been created.
 ```

diff --git a/docs/edit-an-app.md b/docs/edit-an-app.md
@@ -22,7 +22,7 @@ Once you've navigated to your application, you use the SMK-CLI `edit` command.
 smk edit
 ```
 
-This will launch the SMK-CLI editor in your browser. As part of this process, a mini-api is launched in the background. To prevent issues with any other development servers you may have running, you can optionally supply a port number. The default is `1337`
+This will launch the SMK-CLI editor in your browser. As part of this process, a mini-api is launched in the background. To prevent issues with any other development servers you may have running, you can optionally supply a port number. The default is `1337`.
 
 ```bash
 smk edit -p 1337
@@ -108,9 +108,9 @@ You can also test your application by building and launching it on a local serve
 
 The Application screen shows you your current settings for the application name and title, and allows you to modify the following settings for your application.
 
-- Map Viewer (Leaflet or ESRI 3D)
+- Map Viewer (Leaflet)
 - Device (Auto-detect, Desktop, or Mobile)
-- Base map (ESRI basemaps)
+- Base map (basemaps from Esri and other sources)
 
 You can use the map on the right to select your applications initial extent. When the application is launched, this is the location that the map will zoom to. By default the extent is a bounding box around British Columbia, Canada.
 

diff --git a/docs/smk-cli-editor.png b/docs/smk-cli-editor.png
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@bcgov/smk-cli",
-  "version": "1.0.6",
+  "version": "1.1.0",
   "description": "A utility for creating and configuring a Simple Map Kit project",
   "main": "index.js",
   "author": "Ben Jubb <benjubb@gmail.com>",
@@ -16,7 +16,7 @@
     "debug": "./index.js edit --open no --base build/test-app --ping 300000"
   },
   "dependencies": {
-    "@bcgov/smk": ">=1.0.10",
+    "@bcgov/smk": ">=1.1.0",
     "@tmcw/togeojson": "~4.5.0",
     "chalk": "~4.1.0",
     "cors": "~2.8.5",

diff --git a/smk-create/index.js b/smk-create/index.js
@@ -3,6 +3,7 @@ const fs = require( 'fs' )
 const path = require( 'path' )
 const inquirer = require( 'inquirer' )
 const shell = require( 'shelljs' )
+const semverGte = require ( 'semver/functions/gte' )
 const semverRsort = require( 'semver/functions/rsort' )
 
 module.exports = async function ( args ) {
@@ -133,7 +134,9 @@ async function inquireAppInfo( name, baseDir, package, version ) {
                 return `Select the version of ${ chalk.yellow( app.smkPackage ) } for your application:`
             },
             choices: function ( app ) {
-                return semverRsort( JSON.parse( shell.exec( `npm view ${ app.smkPackage } versions --json`, { silent: true } ).stdout ) )
+                const allVersions = JSON.parse( shell.exec( `npm view ${ app.smkPackage } versions --json`, { silent: true } ).stdout )
+                const supportedVersions = allVersions.filter(version => semverGte(version, '1.1.0'))
+                return semverRsort( supportedVersions )
             }
         },
         {
@@ -154,9 +157,15 @@ async function inquireAppInfo( name, baseDir, package, version ) {
             name: 'baseMap',
             type: 'list',
             message: 'Select the base map:',
-            choices: [ 'Streets', 'Topographic', 'NationalGeographic', 'Oceans', 'Gray', 'DarkGray', 'Imagery', 'ShadedRelief' ],
+            choices: [ 'Topographic', 'Streets', 'Imagery', 'Oceans', 'ShadedRelief', 'DarkGray', 'Gray', 'StamenTonerLight' ],
             default: 'Topographic'
         },
+        {
+            name: 'esriApiKey',
+            type: 'input',
+            message: 'Enter an Esri API key:',
+            when: answers => !['StamenTonerLight'].includes(answers.baseMap)
+        },
         {
             name: 'tools',
             type: 'checkbox',

diff --git a/smk-create/template-default/resources/smk-config.json b/smk-create/template-default/resources/smk-config.json
@@ -19,6 +19,7 @@
             ],
             "zoom": 6.0
         },
+        "esriApiKey": "<%= app.esriApiKey %>",
         "baseMap": "<%= app.baseMap %>"
     },
     "tools": [

diff --git a/smk-create/template-mobile/resources/smk-config.json b/smk-create/template-mobile/resources/smk-config.json
@@ -19,6 +19,7 @@
             ],
             "zoom": 6.0
         },
+        "esriApiKey": "<%= app.esriApiKey %>",
         "baseMap": "<%= app.baseMap %>",
         "device": "mobile"
     },

diff --git a/smk-edit/static/components/presentation.js b/smk-edit/static/components/presentation.js
@@ -211,39 +211,43 @@ export const baseMaps = [
     {
         id: 'Topographic',
         title: 'Topographic',
+        type: 'ESRI'
     },
     {
         id: 'Streets',
-        title: 'Streets'
+        title: 'Streets',
+        type: 'ESRI'
     },
     {
         id: 'Imagery',
         title: 'Imagery',
+        type: 'ESRI'
     },
     {
         id: 'Oceans',
-        title: 'Oceans'
-    },
-    {
-        id: 'NationalGeographic',
-        title: 'National Geographic'
+        title: 'Oceans',
+        type: 'ESRI'
     },
     {
         id: 'ShadedRelief',
-        title: 'Shaded Relief'
+        title: 'Shaded Relief',
+        type: 'ESRI'
     },
     {
         id: 'DarkGray',
-        title: 'Dark Gray'
+        title: 'Dark Gray',
+        type: 'ESRI'
     },
     {
         id: 'Gray',
-        title: 'Gray'
+        title: 'Gray',
+        type: 'ESRI'
     },
     {
         id: 'StamenTonerLight',
-        title: 'Stamen Toner Light'
-    },
+        title: 'Stamen Toner Light',
+        type: 'Open'
+    }
 ]
 
 export const zoomScale = []

diff --git a/smk-edit/static/components/tab-application.html b/smk-edit/static/components/tab-application.html
@@ -54,6 +54,12 @@ <h5>Application</h5>
                 </input-select>
             </div>
 
+            <div class="row tight" v-if="selectedBasemapIsEsriType">
+                <input-text class="col s12"
+                    v-model="esriApiKey"
+                >Esri API key
+                </input-text>
+            </div>
         </div>
     </section>
 

diff --git a/smk-edit/static/components/tab-application.js b/smk-edit/static/components/tab-application.js
@@ -41,6 +41,23 @@ export default importComponents( [
                     this.$store.commit( 'configViewerBaseMap', val )
                 }
             },
+            esriApiKey: {
+                get: function () {
+                    return this.$store.getters.configViewerEsriApiKey
+                },
+                set: function ( val ) {
+                    this.location = null
+                    this.$store.commit( 'configViewerEsriApiKey', val )
+                }
+            },
+            selectedBasemapIsEsriType: function() {
+                for (const bm of baseMaps) {
+                    if(bm.id == this.$store.getters.configViewerBaseMap && bm.type === "ESRI") {
+                        return true;
+                    }
+                }
+                return false;
+            },
             hasMapConfig: function () {
                 return this.$store.getters.hasConfig
             },
@@ -54,6 +71,7 @@ export default importComponents( [
                     {
                         viewer: {
                             baseMap: this.$store.getters.configViewerBaseMap,
+                            esriApiKey: this.$store.getters.configViewerEsriApiKey,
                             location: JSON.parse( JSON.stringify( this.location ) )
                         }
                     }

diff --git a/smk-edit/static/store/config-viewer.js b/smk-edit/static/store/config-viewer.js
@@ -4,6 +4,7 @@ export default {
             type: null,
             device: null,
             baseMap: null,
+            esriApiKey: null,
             location: {
                 center: null,
                 extent: null,
@@ -27,6 +28,9 @@ export default {
         configViewerBaseMap: function ( state ) {
             return state.baseMap || 'Topographic'
         },
+        configViewerEsriApiKey: function ( state ) {
+            return state.esriApiKey
+        },
         configViewerLocation: function ( state ) {
             return state.location
         },
@@ -41,6 +45,9 @@ export default {
         configViewerBaseMap: function ( state, baseMap ) {
             state.baseMap = baseMap
         },
+        configViewerEsriApiKey: function ( state, esriApiKey ) {
+            state.esriApiKey = esriApiKey
+        },
         configViewerLocation: function ( state, location ) {
             state.location = location
         },