ArcGIS API for JavaScript Getting Started Bjorn Svensson, Undral Batsukh 1
Agenda Don't write code JavaScript development Use ArcGIS platform, use webmaps and webscenes js.arcgis.com The Big Four: layers, visualization, popups, and widgets 2
Configure when possible Map Viewer Presentations Create Web app: using a Template (configurable apps) using the Web AppBuilder Embedded viewer Esri, HERE, Garmin, NGA, USGS, NPS Esri, HERE 3
Embedded viewer with more options: Sök efter adress eller plats Topografisk 0 3 6km City of New York, Esri, HERE, Garmin, NGA, USGS, NPS Esri, HERE
4 JavaScript development IDE: Visual Studio Code, Sublime, WebStorm and many others testing, linting JSAPI4: Programming Patterns and API Fundamentals. Rene & Yann at Tue 5:30 6:30pm in Primrose C D (repeated on Friday 1pm) JSAPI: Tips and Tricks for Developing and Debugging Apps Kelly & Heather: Now and Friday 1 2pm (Santa Rosa). JavaScript for Geographers link Patrick & John at Thu 9 10am, Demo Theater 1. 5
Take advantage of the ArcGIS platform Create a WebMap The map document Use in your apps Easy to set up layers and symbology 6
Use ArcGIS API for JavaScript js.arcgis.com 7
Hello World Map require(["esri/map", "esri/views/sceneview", "dojo/domready!"], function(map, SceneView) { var map = new Map({ basemap: "streets", ground: "world elevation" }); var view = new SceneView({ container: "viewdiv", map: map, scale: 50000000, center: [ 101.17, 21.78] }); }); Demo: Hello World 8
The Big Four Layers Visualization Popups Widgets
9 Layers Visually represent geospatial data in 2D or 3D (v4) Built for a specific purpose 16 different types of layers Commonly used layer types are Basemap layers ArcGIS Tiles, vector tiles, OpenStreetMap, WebTiledLayer, imagery layer... Operational layer FeatureLayer, MapImageLayer, CSVLayer, SceneLayer, PointCloudLayer, GeoRSSLayer, GraphicsLayer 10
Basic coding pattern for layers Create a new layer // add layer using its url var featurelayer = new FeatureLayer({ url: url }); map.add(featurelayer); Add layer from portal item //add layer from portal item Layer.fromPortalItem({ portalitem: { // agol layer id: "8444e275037549c1acab02d2626daaee" } }).then(function(layer){ map.add(layer); }); 11
Layers Demo Demo: Add Trees FeatureLayer Demo: Add a layer from portal item portal layer 12
Visualization Most symbols can be used for both 2D and 3D. Most data can be displayed in both 2D and 3D, except meshes and point cloud Can be applied to individual graphics or set on a renderer applied to a layer 13
Basic coding pattern for visualization var citiesrenderer = new SimpleRenderer({ symbol: new SimpleMarkerSymbol({ size: 16, color: "red", style: "diamond" }) }); var citieslayer = new FeatureLayer({ url: "http://url.to.service", renderer: citiesrenderer }); map.add(citieslayer); Demo: Simple Renderer 14
More about visualization 3D Visualization with the ArcGIS API for JavaScript. Kristian, Jeremy, and Joe at Wed 1 2pm in Pasadena Sierra Ventura 2D Visualization with the ArcGIS API for JavaScript. Kristian & Jeremy at Thu 1 2 pm in Primrose C D
15 Pop ups Displays information associated with graphic or feature layers: PopupTemplate Anything else: Popup Typically opened by clicking a feature 16
PopupTemplate Formats and defines the content of a Popup for a specific Layer or Graphic PopupTemplate content can display text (html markup) media Charts and Images fields Attachments Can display custom action that executes when clicked on 17
Webmap PopupTemplate Layer PopupTemplate Themed PopupTemplate 18
Basic coding pattern for PopupTemplate var popuptemplate = { title: "Marriage in NY, Zip Code: {ZIP}", content: "<p>as of 2015, <b>{marriedrate}%</b> of the population in this zip code is married.</p>" }; featurelayer.popuptemplate = popuptemplate; Demo: PopupTemplate 19
Widgets Performs one or more tasks Reusable across multiple applications different default widgets for MapView and SceneView 4.x so far: BasemapGallery, BasemapToggle, LayerList, Legend, Print, ScaleBar, Search etc 3x has more: Editing, analysis widget etc 20
Basic coding pattern for widgets view.then(function() { var layerlist = new LayerList({ view: view }); // Add widget to the top right corner of the view view.ui.add(layerlist, "top right"); }); Demo: LayerList Widget 21
More about widgets Customizing the ArcGIS API for JavaScript Widgets Matt Franco & Alan at Wed 1 2 pm in Smoketree A E Building Your own Widget with ArcGIS API for JavaScript Matt & Franco at Thu 10:30 11:30am in Pasadena Sierra Ventura Deep Dive on How ArcGIS API for JavaScript Widgets Were Built Matt & Franco at Fri 8:30 9:30am in Primrose A
22 BasemapGallery widget 23
Search widget 24
Print widget 25
Legend widget 26
thank you :) Questions? https://js.arcgis.com
27 28