and the a rcgis api for javascri pt getting st arted with web … · 2020. 4. 30. · contains...
TRANSCRIPT
![Page 1: and the A rcGIS API for JavaScri pt Getting St arted with Web … · 2020. 4. 30. · contains styles for ent ire API Vie w.css is smaller in size but bet ter choice if only needing](https://reader031.vdocuments.site/reader031/viewer/2022012007/611033540126d279562f4f9c/html5/thumbnails/1.jpg)
Getting Started with Web DevelopmentGetting Started with Web Development
and the ArcGIS API for JavaScriptand the ArcGIS API for JavaScriptHeather Gonzago and Anne Fitz👉 Slides & demos: 👈https://bit.ly/3cnPptf
1
![Page 2: and the A rcGIS API for JavaScri pt Getting St arted with Web … · 2020. 4. 30. · contains styles for ent ire API Vie w.css is smaller in size but bet ter choice if only needing](https://reader031.vdocuments.site/reader031/viewer/2022012007/611033540126d279562f4f9c/html5/thumbnails/2.jpg)
AgendaAgenda
SetupFirst stepsWorking with layersSymbols and renderersMake the map interactiveFiltering dataWidgets
2
![Page 3: and the A rcGIS API for JavaScri pt Getting St arted with Web … · 2020. 4. 30. · contains styles for ent ire API Vie w.css is smaller in size but bet ter choice if only needing](https://reader031.vdocuments.site/reader031/viewer/2022012007/611033540126d279562f4f9c/html5/thumbnails/3.jpg)
Presentations accessible via GitHubPresentations accessible via GitHub
This session focuses on version 4.x
Concepts remain similar between versions 3.x and 4.x
👉 Slides & demos: 👈https://bit.ly/3cnPptf
3
![Page 5: and the A rcGIS API for JavaScri pt Getting St arted with Web … · 2020. 4. 30. · contains styles for ent ire API Vie w.css is smaller in size but bet ter choice if only needing](https://reader031.vdocuments.site/reader031/viewer/2022012007/611033540126d279562f4f9c/html5/thumbnails/5.jpg)
Which version of the API is best?Which version of the API is best?
5
![Page 7: and the A rcGIS API for JavaScri pt Getting St arted with Web … · 2020. 4. 30. · contains styles for ent ire API Vie w.css is smaller in size but bet ter choice if only needing](https://reader031.vdocuments.site/reader031/viewer/2022012007/611033540126d279562f4f9c/html5/thumbnails/7.jpg)
JSAPI ResourcesJSAPI Resources
IncludesJSHint �leTypeScript de�nition �leBuild tools (Webpack, npm)Working with frameworks
7
![Page 8: and the A rcGIS API for JavaScri pt Getting St arted with Web … · 2020. 4. 30. · contains styles for ent ire API Vie w.css is smaller in size but bet ter choice if only needing](https://reader031.vdocuments.site/reader031/viewer/2022012007/611033540126d279562f4f9c/html5/thumbnails/8.jpg)
Get the APIGet the API
CDNCustom buildsDownload builds
<link rel="stylesheet" href="https://js.arcgis.com/4.15/esri/css/main.css"> <script src="https://js.arcgis.com/4.15/"></script>
8
![Page 9: and the A rcGIS API for JavaScri pt Getting St arted with Web … · 2020. 4. 30. · contains styles for ent ire API Vie w.css is smaller in size but bet ter choice if only needing](https://reader031.vdocuments.site/reader031/viewer/2022012007/611033540126d279562f4f9c/html5/thumbnails/9.jpg)
CSSCSS
contains styles for entire API
View.css is smaller in size but better choice if only needing basic CSS (maps,widgets, etc.)
Main.css
<link rel="stylesheet" href="https://js.arcgis.com/4.15/esri/css/main.css">
<link rel="stylesheet" href="https://js.arcgis.com/4.15/esri/css/view.css">
Custom CSS (SASS)
9
![Page 10: and the A rcGIS API for JavaScri pt Getting St arted with Web … · 2020. 4. 30. · contains styles for ent ire API Vie w.css is smaller in size but bet ter choice if only needing](https://reader031.vdocuments.site/reader031/viewer/2022012007/611033540126d279562f4f9c/html5/thumbnails/10.jpg)
First stepsFirst steps
How will your app be written?Separate �les or one combined �le?
10
![Page 11: and the A rcGIS API for JavaScri pt Getting St arted with Web … · 2020. 4. 30. · contains styles for ent ire API Vie w.css is smaller in size but bet ter choice if only needing](https://reader031.vdocuments.site/reader031/viewer/2022012007/611033540126d279562f4f9c/html5/thumbnails/11.jpg)
MapViewMapViewVisualize data within Map or Scene
const map = new Map({ basemap: "gray-vector" });
const view = new MapView({ container: "viewDiv", map: map, zoom: 12, center: [-117.168, 32.776]});
const view = new SceneView({ container: "viewDiv", map: map, camera: { heading: 210, tilt: 78, position: { x: -8249335, y: 4832005, z: 50.7, spatialReference: { wkid: 3857 } } }});
11
![Page 12: and the A rcGIS API for JavaScri pt Getting St arted with Web … · 2020. 4. 30. · contains styles for ent ire API Vie w.css is smaller in size but bet ter choice if only needing](https://reader031.vdocuments.site/reader031/viewer/2022012007/611033540126d279562f4f9c/html5/thumbnails/12.jpg)
Demo: Make a mapDemo: Make a map
12
![Page 13: and the A rcGIS API for JavaScri pt Getting St arted with Web … · 2020. 4. 30. · contains styles for ent ire API Vie w.css is smaller in size but bet ter choice if only needing](https://reader031.vdocuments.site/reader031/viewer/2022012007/611033540126d279562f4f9c/html5/thumbnails/13.jpg)
Common GotchasCommon GotchasModule order makes a differenceMissing moduleMissing CSS
13
![Page 14: and the A rcGIS API for JavaScri pt Getting St arted with Web … · 2020. 4. 30. · contains styles for ent ire API Vie w.css is smaller in size but bet ter choice if only needing](https://reader031.vdocuments.site/reader031/viewer/2022012007/611033540126d279562f4f9c/html5/thumbnails/14.jpg)
Add layersAdd layers
1. Load module 2. Create layers 3. Set properties 4. Add to map or scene
Basic steps remain the same
Various layer types
14
![Page 15: and the A rcGIS API for JavaScri pt Getting St arted with Web … · 2020. 4. 30. · contains styles for ent ire API Vie w.css is smaller in size but bet ter choice if only needing](https://reader031.vdocuments.site/reader031/viewer/2022012007/611033540126d279562f4f9c/html5/thumbnails/15.jpg)
PropertiesPropertiesNo need for a bunch of get/set statements
can be set in constructor
const map = new Map();map.basemap = "streets";const view = new MapView();view.center = [-100, 40];view.zoom = 6;
Properties
const map = new Map({ basemap: "streets"});const view = new MapView({ map: map, center: [-100, 40], zoom: 6});
15
![Page 16: and the A rcGIS API for JavaScri pt Getting St arted with Web … · 2020. 4. 30. · contains styles for ent ire API Vie w.css is smaller in size but bet ter choice if only needing](https://reader031.vdocuments.site/reader031/viewer/2022012007/611033540126d279562f4f9c/html5/thumbnails/16.jpg)
Watch for property changesWatch for property changes
for changes
Can also use utility methods
See this in action with the sample
Watch
layer.watch("loadStatus", function(status) {// do something});
esri/core/watchUtils
Watch for Changes
16
![Page 17: and the A rcGIS API for JavaScri pt Getting St arted with Web … · 2020. 4. 30. · contains styles for ent ire API Vie w.css is smaller in size but bet ter choice if only needing](https://reader031.vdocuments.site/reader031/viewer/2022012007/611033540126d279562f4f9c/html5/thumbnails/17.jpg)
Demo: Add layer to sample appDemo: Add layer to sample app
17
![Page 18: and the A rcGIS API for JavaScri pt Getting St arted with Web … · 2020. 4. 30. · contains styles for ent ire API Vie w.css is smaller in size but bet ter choice if only needing](https://reader031.vdocuments.site/reader031/viewer/2022012007/611033540126d279562f4f9c/html5/thumbnails/18.jpg)
RenderersRenderers
a set of symbols to use for the layer
Sets the rules on how the symbols are used
Basic coding pattern
De�ne
const layerRenderer = new UniqueValueRenderer(); // Set the rendererconst featurelayer = new FeatureLayer({ url: "featurelayer url", renderer: layerRenderer // pass in renderer to featurelayer using default properties})
18
![Page 19: and the A rcGIS API for JavaScri pt Getting St arted with Web … · 2020. 4. 30. · contains styles for ent ire API Vie w.css is smaller in size but bet ter choice if only needing](https://reader031.vdocuments.site/reader031/viewer/2022012007/611033540126d279562f4f9c/html5/thumbnails/19.jpg)
SymbolsSymbolsRenderers use symbology, e.g. points, lines, polygonsCan set symbology via a renderer's visual variables
const sizeVisualVariable = { type: 'size', field: 'WIND_SPEED', minDataValue: 0, maxDataValue: 60, minSize: 8, maxSize: 40}// Apply visual variable to rendererrenderer.visualVariables = [sizeVisualVariable]// Create the layerconst featureLayer = new FeatureLayer({ url: '<URL to feature layer', outFields: ['*'], renderer: renderer // Add the renderer to the feature layer})
19
![Page 20: and the A rcGIS API for JavaScri pt Getting St arted with Web … · 2020. 4. 30. · contains styles for ent ire API Vie w.css is smaller in size but bet ter choice if only needing](https://reader031.vdocuments.site/reader031/viewer/2022012007/611033540126d279562f4f9c/html5/thumbnails/20.jpg)
AutocastingAutocasting
No need to Require() the module
Look for the label in the API Reference
shows autocasting in action
Read more about in the Guide
Create a layer from portal item sample
Autocasting
20
![Page 21: and the A rcGIS API for JavaScri pt Getting St arted with Web … · 2020. 4. 30. · contains styles for ent ire API Vie w.css is smaller in size but bet ter choice if only needing](https://reader031.vdocuments.site/reader031/viewer/2022012007/611033540126d279562f4f9c/html5/thumbnails/21.jpg)
Demo: Update a feature layer's rendererDemo: Update a feature layer's renderer
21
![Page 22: and the A rcGIS API for JavaScri pt Getting St arted with Web … · 2020. 4. 30. · contains styles for ent ire API Vie w.css is smaller in size but bet ter choice if only needing](https://reader031.vdocuments.site/reader031/viewer/2022012007/611033540126d279562f4f9c/html5/thumbnails/22.jpg)
Map interaction using popupsMap interaction using popups
Responds to mouse clicks
Provides info on:feature attributeslocationsearch results
Customizable
22
![Page 23: and the A rcGIS API for JavaScri pt Getting St arted with Web … · 2020. 4. 30. · contains styles for ent ire API Vie w.css is smaller in size but bet ter choice if only needing](https://reader031.vdocuments.site/reader031/viewer/2022012007/611033540126d279562f4f9c/html5/thumbnails/23.jpg)
PopupTemplatePopupTemplateView has a default instance of FeatureLayer has associated propertyPosition the popup using
popuppopupTemplate
dockOptions
const popupTemplate = new PopupTemplate({ title: "Title of the popup", content: [{ // Set the content here }]});
const featurelayer = new FeatureLayer({ url: "url to the feature layer", outFields: ["*"], popupTemplate: popupTemplate, renderer: renderer});
23
![Page 24: and the A rcGIS API for JavaScri pt Getting St arted with Web … · 2020. 4. 30. · contains styles for ent ire API Vie w.css is smaller in size but bet ter choice if only needing](https://reader031.vdocuments.site/reader031/viewer/2022012007/611033540126d279562f4f9c/html5/thumbnails/24.jpg)
Demo: Add a popup to the mapDemo: Add a popup to the map
24
![Page 25: and the A rcGIS API for JavaScri pt Getting St arted with Web … · 2020. 4. 30. · contains styles for ent ire API Vie w.css is smaller in size but bet ter choice if only needing](https://reader031.vdocuments.site/reader031/viewer/2022012007/611033540126d279562f4f9c/html5/thumbnails/25.jpg)
Filtering dataFiltering data
All data is �ltered on the client = better performance
FeatureFilterFeatureLayerView
switch (selectedCrimeAmount) { case '100': crimeLayerView.filter = { where: "CrimeCnt >= '" + selectedCrimeAmount + "'" } break case '50-99': crimeLayerView.filter = { where: '(CrimeCnt >= 50)' + 'AND' + '(CrimeCnt <= 99)' } break case '49': crimeLayerView.filter = { where: "CrimeCnt <= '" + selectedCrimeAmount + "'" }}
25
![Page 26: and the A rcGIS API for JavaScri pt Getting St arted with Web … · 2020. 4. 30. · contains styles for ent ire API Vie w.css is smaller in size but bet ter choice if only needing](https://reader031.vdocuments.site/reader031/viewer/2022012007/611033540126d279562f4f9c/html5/thumbnails/26.jpg)
Demo: Filter features within a layerDemo: Filter features within a layer
26
![Page 27: and the A rcGIS API for JavaScri pt Getting St arted with Web … · 2020. 4. 30. · contains styles for ent ire API Vie w.css is smaller in size but bet ter choice if only needing](https://reader031.vdocuments.site/reader031/viewer/2022012007/611033540126d279562f4f9c/html5/thumbnails/27.jpg)
Using web mapsUsing web maps
Reduces coding effortRetains all customizations with rendering, popups, etc.
const map = new WebMap({ portalItem: { id: "f9a9a7e3857d4d51b2c801cf8c399add" // Remember portalItem is autocasted }});
27
![Page 28: and the A rcGIS API for JavaScri pt Getting St arted with Web … · 2020. 4. 30. · contains styles for ent ire API Vie w.css is smaller in size but bet ter choice if only needing](https://reader031.vdocuments.site/reader031/viewer/2022012007/611033540126d279562f4f9c/html5/thumbnails/28.jpg)
Demo: Add a web map to an applicationDemo: Add a web map to an application
28
![Page 29: and the A rcGIS API for JavaScri pt Getting St arted with Web … · 2020. 4. 30. · contains styles for ent ire API Vie w.css is smaller in size but bet ter choice if only needing](https://reader031.vdocuments.site/reader031/viewer/2022012007/611033540126d279562f4f9c/html5/thumbnails/29.jpg)
WidgetsWidgets
Similar coding pattern across all widgets Encapsulates functionality
view.when(function){ const featurelayer = map.layers.getItemAt(1); // 1. Create the widget const legend = new Legend({ // 2. Specify properties for widget view: view, layerInfos: [{ layer: featurelayer, title: "Name" }]}); // 3. Add widget to the view UI view.ui.add(legend, "top-right");});
29
![Page 30: and the A rcGIS API for JavaScri pt Getting St arted with Web … · 2020. 4. 30. · contains styles for ent ire API Vie w.css is smaller in size but bet ter choice if only needing](https://reader031.vdocuments.site/reader031/viewer/2022012007/611033540126d279562f4f9c/html5/thumbnails/30.jpg)
View UIView UIPosition widgets
AddMoveRemove
view.ui.add(legend, "bottom-left");view.ui.add(swipe);
30
![Page 31: and the A rcGIS API for JavaScri pt Getting St arted with Web … · 2020. 4. 30. · contains styles for ent ire API Vie w.css is smaller in size but bet ter choice if only needing](https://reader031.vdocuments.site/reader031/viewer/2022012007/611033540126d279562f4f9c/html5/thumbnails/31.jpg)
Demo: Add widgets to the applicationDemo: Add widgets to the application
31
![Page 32: and the A rcGIS API for JavaScri pt Getting St arted with Web … · 2020. 4. 30. · contains styles for ent ire API Vie w.css is smaller in size but bet ter choice if only needing](https://reader031.vdocuments.site/reader031/viewer/2022012007/611033540126d279562f4f9c/html5/thumbnails/32.jpg)
Where can I get more info?Where can I get more info?SDK DocumentationEsri-related training and webinarsJavaScript online training, free and not-so-freeUser forums, e.g. , , , etc.GeoNet StackExchange Spatial Community in Slack
32
![Page 33: and the A rcGIS API for JavaScri pt Getting St arted with Web … · 2020. 4. 30. · contains styles for ent ire API Vie w.css is smaller in size but bet ter choice if only needing](https://reader031.vdocuments.site/reader031/viewer/2022012007/611033540126d279562f4f9c/html5/thumbnails/33.jpg)
33