View
2
Download
0
Category
Preview:
Citation preview
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
AgendaAgenda
SetupFirst stepsWorking with layersSymbols and renderersMake the map interactiveFiltering dataWidgets
2
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
Which version of the API is best?Which version of the API is best?
5
JSAPI ResourcesJSAPI Resources
IncludesJSHint �leTypeScript de�nition �leBuild tools (Webpack, npm)Working with frameworks
7
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
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
First stepsFirst steps
How will your app be written?Separate �les or one combined �le?
10
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
Demo: Make a mapDemo: Make a map
12
Common GotchasCommon GotchasModule order makes a differenceMissing moduleMissing CSS
13
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
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
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
Demo: Add layer to sample appDemo: Add layer to sample app
17
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
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
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
Demo: Update a feature layer's rendererDemo: Update a feature layer's renderer
21
Map interaction using popupsMap interaction using popups
Responds to mouse clicks
Provides info on:feature attributeslocationsearch results
Customizable
22
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
Demo: Add a popup to the mapDemo: Add a popup to the map
24
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
Demo: Filter features within a layerDemo: Filter features within a layer
26
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
Demo: Add a web map to an applicationDemo: Add a web map to an application
28
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
View UIView UIPosition widgets
AddMoveRemove
view.ui.add(legend, "bottom-left");view.ui.add(swipe);
30
Demo: Add widgets to the applicationDemo: Add widgets to the application
31
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
33
Recommended