ArcGIS API for JavaScript

Transcription

1 ArcGIS API for JavaScript Getting Started Bjorn Svensson, Undral Batsukh 1

2 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

3 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

4 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

5 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

6 Take advantage of the ArcGIS platform Create a WebMap The map document Use in your apps Easy to set up layers and symbology 6

7 Use ArcGIS API for JavaScript js.arcgis.com 7

8 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: , center: [ , 21.78] }); }); Demo: Hello World 8

9 The Big Four Layers Visualization Popups Widgets

10 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

11 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: "8444e c1acab02d2626daaee" } }).then(function(layer){ map.add(layer); }); 11

12 Layers Demo Demo: Add Trees FeatureLayer Demo: Add a layer from portal item portal layer 12

13 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

14 Basic coding pattern for visualization var citiesrenderer = new SimpleRenderer({ symbol: new SimpleMarkerSymbol({ size: 16, color: "red", style: "diamond" }) }); var citieslayer = new FeatureLayer({ url: " renderer: citiesrenderer }); map.add(citieslayer); Demo: Simple Renderer 14

15 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

16 15 Pop ups Displays information associated with graphic or feature layers: PopupTemplate Anything else: Popup Typically opened by clicking a feature 16

17 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

18 Webmap PopupTemplate Layer PopupTemplate Themed PopupTemplate 18

19 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

20 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

21 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

22 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

23 22 BasemapGallery widget 23

24 Search widget 24

25 Print widget 25

26 Legend widget 26

27 thank you :) Questions?

28 27 28