Building Ambitious Web Applications Integrated with ArcGIS Online / Portal
Maps
Tom Wayson
slides: https://bit.ly/2H3143h
Follow Along
Esri's 2 JavaScript mapping libraries
3D, geom engine, smartmapping
web maps, analysis services
Lightweight / mobile friendly
esri-leaflet: framework friendly
ArcGIS: can be a challenge to integrate
Module loading solutions
Are you:
- Using ArcGIS API >= 4.7?
- Using webpack?
- Able to configure webpack?
Try @arcgis/webpack-plugin
Using @arcgis/webpack-plugin
Let's you use ArcGIS API like any other library 🎉
import Map from 'esri/Map'
import MapView from 'esri/views/MapView';
var map = new Map({ basemap: "streets" });
var view = new MapView({
container: "viewDiv",
map: map
});
For everyone else, there's esri-loader
Works with ArcGIS API 4.x and 3.x
Works with any module loader
Works with any framework & CLIs
Using esri-loader:
import { loadModules } from 'esri-loader'
loadModules([
'esri/views/MapView',
'esri/WebMap'
]).then(([MapView, WebMap]) => {
// use MapView and WebMap as normal
})
Which lib is right for our use case?
Advanced mapping capabilities?
Not really... but let's pretend
Framework: Ember
We'll use ember-esri-loader
ArcGIS API: Pro Tips
<Component />
1. Centralize use of the ArcGIS API
2. Lazy-load the ArcGIS API
3. Use POJOs & autocasting
var diamondSymbol = {
type: "simple-marker", // autocasts as new SimpleMarkerSymbol()
style: "diamond",
color: [ 255, 128, 45 ], // autocasts as new Color()
outline: { // autocasts as new SimpleLineSymbol()
style: "dash-dot",
color: [ 255, 128, 45 ] // Again, no need for specifying new Color()
}
};
4. useIdentiy: false
Let's make a map!
Building Ambitious Web Applications Integrated with ArcGIS Online / Portal
Maps
Tom Wayson
@tomwayson
slides: https://bit.ly/2H3143h