Esri / arcgis-js-vscode-snippets

Collection of Visual Studio Code snippets for common code patterns in the ArcGIS Maps SDK for JavaScript.
https://marketplace.visualstudio.com/items?itemName=Esri.arcgis-maps-sdk-js-snippets
Apache License 2.0
25 stars 8 forks source link

Enhance snippets to work with basemaps (using API keys) & JS SDK 4.x #45

Open hhkaos opened 10 months ago

hhkaos commented 10 months ago

Check existing issues

Snippet prefix

"require" and "map"

Proposal

1) map enhance proposal

The map prefix adds:

const map = new Map({
        basemap: "arcgis-imagery"
      });
      const view = new MapView({
        container:"viewDiv",
        map:map,
        zoom:  4,
        center: [15,65]
      });

Following our conventions and having to remove variable declaration, I would replace it using autocasting and changing the prefix to MapView to have something like this (I have replace the basemap selector with to prefixes of the two snippets to the the different basemap enums):

https://github.com/Esri/arcgis-js-vscode-snippets/assets/826965/0a2ece06-1b05-40e6-b237-8f23ec7bb050

My proposed snippets:

"Create MapView using a Map": {
  "prefix": "MapView",
  "body": [
    "new MapView({",
    "\tcenter: ${1:[15, 65]},",
    "\tcontainer: \"${2:viewDiv}\",",
    "\tmap: {",
    "\t\tbasemap: ${3:basemapsWithAPIKeys|basemapsWithoutAPIKeys}",
    "\t},",
    "\tzoom: ${4:4}"
    "});",
  ],
  "description": "Create MapView using a Map"
},
"Basemaps with API keys": {
  "prefix": "basemapsWithAPIKeys",
  "body": [
    "\"${1|arcgis-imagery,arcgis-imagery-standard,arcgis-imagery-labels,arcgis-light-gray,arcgis-dark-gray,arcgis-navigation,arcgis-navigation-night,arcgis-streets,arcgis-streets-night,arcgis-streets-relief,arcgis-topographic,arcgis-oceans,osm-standard,osm-standard-relief,osm-streets,osm-streets-relief,osm-light-gray,osm-dark-gray,arcgis-terrain,arcgis-community,arcgis-charted-territory,arcgis-colored-pencil,arcgis-nova,arcgis-modern-antique,arcgis-midcentury,arcgis-newspaper,arcgis-hillshade-light,arcgis-hillshade-dark|}\"",
  ],
  "description": "Basemaps enums to be used with API keys"
},
"Basemaps without API keys": {
  "prefix": "basemapsWithoutAPIKeys",
  "body": [
    "${1|satellite,hybrid,oceans,osm,terrain,dark-gray-vector,gray-vector,streets-vector,streets-night-vector,streets-navigation-vector,topo-vector,streets-relief-vector|}",
  ],
  "description": "Basemaps enums to be used without API keys"
}

The same thing would apply to scene


UPDATE: dismiss this one

2) require enhance proposal

require snippets adds:

require(["esri/Map", "esri/views/MapView","dojo/domReady!"],function(Map, MapView){

  });

dojo/domReady! which if I'm not wrong is for the JS SDK 3.x, right? In 4.x it returns a:

Failed to load resource: the server responded with a status of 404 ()
4.27:31 Error: scriptError: https://js.arcgis.com/4.27/dojo/domReady.js
    at n (4.27:6:46)
    at HTMLScriptElement.<anonymous> (4.27:30:44)

So, considering 3.x will be retired in July 2024, we should remove the dojo/domReady.

I would also include to add a require and a requireApiKeys

require([
    "esri/config",
    "esri/Map", 
    "esri/views/MapView"
], function(
    esriConfig,
    Map, 
    MapView
){
      esriConfig = "${1:YOUR_API_KEY}";
});

What do you think @kellyhutchins ?

hhkaos commented 10 months ago

I have already introduced changes to the require snippets and added requireApiKeys (available snippets)