Building Ambitious Applications Integrated with ArcGIS Online/Portal

Maps

Tom Wayson :: Washington DC R&D Center

Follow Along

goo.gl/OYgA4q

@tomwayson/dev-summit-2017-ambitious-arcgis-workshop

Esri's 2 JavaScript mapping libraries

ArcGIS API for JavaScript
esri-leaflet

Which should you use?

3D, geom engine, smartmapping

web maps, analysis services

Lightweight / mobile friendly

esri-leaflet: framework friendly

ArcGIS: challenge to load modules

import Map from 'esri/map';

4.x Samples show framework components in ArcGIS apps

require(['vue','esri/Map'],(Vue, Map)=>{...})

ArcGIS map in a React app?

import Map from 'esri/map';

Module loader helper libraries

import Map from 'esri/map';

becomes require(['esri/Map'],(Map)=>{...})

+ = not 1st choice for mobile

Which is right for our use case?

We'll use ember-cli-amd

Let's make a map!

Framework component lifecyles

Dojo (dijit)

  • constructor()
  • buildRendering()
  • postCreate()
  • startup()
  • destroy()

React

  • constructor()
  • componentWillMount()
  • render()
  • componentDidMount()
  • componentDidUpdate()
  • componentWillUnmount()

Angular

  • constructor()
  • ngOnInit()
  • ngOnChanges()
  • ngOnDestroy()

Ember

  • constructor()
  • init()
  • didReceiveAttrs()
  • didInsertElement()
  • didUpdateAttrs()
  • willDestroyElement()

Let's show extents on the map!

Open Data uses same patterns

Similar app built w/ ember-leaflet

Examle: Open Data Gallery (code)