170 likes | 191 Views
http ://services.arcgisonline.com/.../ World_Topo_Map / MapServer. CSS. CSS. JS. JS. HTML. HTML. http://js.arcgis.com. Portal. http ://portal.metro ... /e911_locator/ GeocodeServer. YOU. YOUR USERS. ArcGIS. http://geo.cityOf../Parcels/FeatureServer.
E N D
http://services.arcgisonline.com/.../World_Topo_Map/MapServerhttp://services.arcgisonline.com/.../World_Topo_Map/MapServer CSS CSS JS JS HTML HTML http://js.arcgis.com Portal http://portal.metro... /e911_locator/GeocodeServer YOU YOUR USERS ArcGIS http://geo.cityOf../Parcels/FeatureServer http://geo.cityOf../Parcels/MapServer http://www.cityOf.... /propertytaxes
http://services.arcgisonline.com/.../World_Topo_Map/MapServerhttp://services.arcgisonline.com/.../World_Topo_Map/MapServer CSS CSS CSS CSS JS JS JS JS HTML HTML HTML HTML http://js.arcgis.com YOU Portal http://portal.metro... /e911_locator/GeocodeServer YOUR USERS ArcGIS http://geo.cityOf../Parcels/FeatureServer http://geo.cityOf../Parcels/MapServer 868 Granville St, Vancouver, BC V6Z 1K http://www.cityOf.... /propertytaxes
DEVELOPMENTOptions http://services.arcgisonline.com/.../World_Topo_Map/MapServer CSS CSS CSS CSS JS JS JS JS HTML HTML HTML HTML http://js.arcgis.com TRADITIONALAPPROACH http://gis.metro... /e911_locator/GeocodeServer ArcGIS http://geo.cityOf../Parcels/FeatureServer http://geo.cityOf../Parcels/MapServer http://www.cityOf.... /propertytaxes
DEVELOPMENTOptions http://services.arcgisonline.com/.../World_Topo_Map/MapServer CSS CSS JS JS HTML HTML http://js.arcgis.com Use WEB MAP Web Map http://gis.metro... /e911_locator/GeocodeServer Portal ArcGIS ArcGIS http://geo.cityOf../Parcels/FeatureServer http://geo.cityOf../Parcels/MapServer http://www.cityOf.... /propertytaxes
DEVELOPMENTOptions http://services.arcgisonline.com/.../World_Topo_Map/MapServer CSS CSS JS JS HTML HTML http://js.arcgis.com Use WEB MAP Web Map http://gis.metro... /e911_locator/GeocodeServer ArcGIS ArcGIS http://geo.cityOf../Parcels/FeatureServer http://geo.cityOf../Parcels/MapServer http://www.cityOf.... /propertytaxes
DEVELOPMENTOptions http://services.arcgisonline.com/.../World_Topo_Map/MapServer CSS CSS JS JS HTML HTML http://js.arcgis.com Use WEB MAP Web Map http://gis.metro... /e911_locator/GeocodeServer ArcGIS http://geo.cityOf../Parcels/FeatureServer http://geo.cityOf../Parcels/MapServer 868 Granville St, Vancouver, BC V6Z 1K http://www.cityOf.... /propertytaxes
DEVELOPMENTOptions http://services.arcgisonline.com/.../World_Topo_Map/MapServer UseWEB MAP IN TEMPLATE-BASEDAPP Web Map http://gis.metro... /e911_locator/GeocodeServer Template Portal ArcGIS ArcGIS http://geo.cityOf../Parcels/FeatureServer http://geo.cityOf../Parcels/MapServer
DEVELOPMENTOptions http://services.arcgisonline.com/.../World_Topo_Map/MapServer UseWEB MAP INAPP BUILT BY THEWEB APPBUILDER(WAB) Web Map http://gis.metro... /e911_locator/GeocodeServer WAB-built Portal ArcGIS ArcGIS http://geo.cityOf../Parcels/FeatureServer http://geo.cityOf../Parcels/MapServer
Hosted on portal: • Easy to discover • Featured content and galleries • Access control • oAuth 2.0 authentication • Lots of content • Combines basemap and operational layers • Set/override layer symbology • Configure pop-ups • Add bookmarks • Add labeling • Control Legend content • Perform analysis WHAT IS A WEB MAP?
Basic JavaScript and the API (with AMD syntax) map.js require();
Basic JavaScript and the API (with AMD syntax) map.js require([]); array
Basic JavaScript and the API (with AMD syntax) map.js require([], function(){...}); array the callback function
Basic JavaScript and the API (with AMD syntax) map.js require( [], function(){ } );
Basic JavaScript and the API (with AMD syntax) map.js require( ["esri/map"], function(Map){ varmyMap = new Map("divMap"); } ); A constructor statement API module alias <div id="divMap"> object index.html
Basic JavaScript and the API (with AMD syntax) map.js require( ["esri/map", "esri/layers/ArcGISDynamicMapServiceLayer"], function(Map, ArcGISDynamicMapServiceLayer){ varmyMap = new Map("divMap"); varlyrUSA = new ArcGISDynamicMapServiceLayer("..."); myMap.addLayer(lyrUSA); } );
Basic JavaScript and the API (with AMD syntax) map.js require( ["esri/map", "esri/layers/ArcGISDynamicMapServiceLayer", "dijit/layout/BorderContainer", "dijit/layout/ContentPane", "dojo/domReady!" ], function(Map, ArcGISDynamicMapServiceLayer, BorderContainer, ContentPane){ varmyMap = new Map("divMap"); varlyrUSA = new ArcGISDynamicMapServiceLayer("..."); myMap.addLayer(lyrUSA); } );
Basic JavaScript and the API (with AMD syntax) map.js require( ["esri/map", "esri/layers/ArcGISDynamicMapServiceLayer", "dijit/layout/BorderContainer", "dijit/layout/ContentPane", "dojo/domReady!" ], function(Map, ArcGISDynamicMapServiceLayer, BorderContainer, ContentPane){ varmyMap = new Map("divMap", { basemap : "streets", center : [-76.59, 39.29], zoom : 12 }); varlyrUSA = new ArcGISDynamicMapServiceLayer("..."); } ); JSON object