Embed Size (px)
Citation preview
Portal ArcGIS
http://services.arcgisonline.com/.../World_Topo_Map/MapServer
http://js.arcgis.com
http://www.cityOf.... /propertytaxes
http://portal.metro... /e911_locator/GeocodeServer
http://geo.cityOf../Parcels/FeatureServer
http://geo.cityOf../Parcels/MapServer
YOU YOUR USERS
ArcGIS
http://geo.cityOf../Parcels/FeatureServer
http://services.arcgisonline.com/.../World_Topo_Map/MapServer
http://js.arcgis.com
http://www.cityOf.... /propertytaxes
http://portal.metro... /e911_locator/GeocodeServer
http://geo.cityOf../Parcels/MapServer
YOU
868 Granville St, Vancouver, BC V6Z 1K
YOUR USERS
Portal
ArcGIS
http://geo.cityOf../Parcels/FeatureServer
http://services.arcgisonline.com/.../World_Topo_Map/MapServer
http://js.arcgis.com
http://www.cityOf.... /propertytaxes
TRADITIONALAPPROACH
http://gis.metro... /e911_locator/GeocodeServer
http://geo.cityOf../Parcels/MapServer
DEVELOPMENT OPTIONS
ArcGISArcGIS
http://services.arcgisonline.com/.../World_Topo_Map/MapServer
http://js.arcgis.com
http://www.cityOf.... /propertytaxes
USE WEB MAP
http://geo.cityOf../Parcels/FeatureServer
http://geo.cityOf../Parcels/MapServer
http://gis.metro... /e911_locator/GeocodeServer
Portal
Web Map
DEVELOPMENT OPTIONS
ArcGISArcGIS
http://services.arcgisonline.com/.../World_Topo_Map/MapServer
http://js.arcgis.com
http://www.cityOf.... /propertytaxes
USE WEB MAP
http://geo.cityOf../Parcels/FeatureServer
http://geo.cityOf../Parcels/MapServer
http://gis.metro... /e911_locator/GeocodeServer
Web Map
DEVELOPMENT OPTIONS
ArcGIS
http://services.arcgisonline.com/.../World_Topo_Map/MapServer
http://js.arcgis.com
http://www.cityOf.... /propertytaxes
USE WEB MAP
http://geo.cityOf../Parcels/FeatureServer
http://geo.cityOf../Parcels/MapServer
868 Granville St, Vancouver, BC V6Z 1K
http://gis.metro... /e911_locator/GeocodeServer
Web Map
DEVELOPMENT OPTIONS
ArcGISArcGIS
http://services.arcgisonline.com/.../World_Topo_Map/MapServer
USEWEB MAP IN TEMPLATE-BASEDAPP
http://geo.cityOf../Parcels/FeatureServer
http://geo.cityOf../Parcels/MapServer
http://gis.metro... /e911_locator/GeocodeServer
Portal
Template
Web Map
DEVELOPMENT OPTIONS
ArcGISArcGIS
http://services.arcgisonline.com/.../World_Topo_Map/MapServer
USEWEB MAP INAPP BUILT BY THEWEB APPBUILDER(WAB)
http://geo.cityOf../Parcels/FeatureServer
http://geo.cityOf../Parcels/MapServer
http://gis.metro... /e911_locator/GeocodeServer
Portal
WAB-built
Web Map
DEVELOPMENT OPTIONS
• 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?
Building Applications Using the ArcGIS API for JavaScript 11
Basic JavaScript and the API (with AMD syntax)
require();
require();
map.jsmap.js
Building Applications Using the ArcGIS API for JavaScript 12
Basic JavaScript and the API (with AMD syntax)
require([]);
require([]);
map.jsmap.js
array
Building Applications Using the ArcGIS API for JavaScript 13
Basic JavaScript and the API (with AMD syntax)
require([], function(){...});
require([], function(){...});
map.jsmap.js
array the callback function
Building Applications Using the ArcGIS API for JavaScript 14
Basic JavaScript and the API (with AMD syntax)
require( [],
function(){
});
require( [],
function(){
});
map.jsmap.js
Building Applications Using the ArcGIS API for JavaScript 15
require( ["esri/map"],
function(Map){
var myMap = new Map("divMap");
});
require( ["esri/map"],
function(Map){
var myMap = new Map("divMap");
});
map.jsmap.js
Basic JavaScript and the API (with AMD syntax)
A constructor statement
API module
alias
object<div id="div
Map"> index.htmlindex.html
Building Applications Using the ArcGIS API for JavaScript 16
require( ["esri/map", "esri/layers/ArcGISDynamicMapServiceLayer"],
function(Map, ArcGISDynamicMapServiceLayer){
var myMap = new Map("divMap");
var lyrUSA = new ArcGISDynamicMapServiceLayer("..."); myMap.addLayer(lyrUSA); });
require( ["esri/map", "esri/layers/ArcGISDynamicMapServiceLayer"],
function(Map, ArcGISDynamicMapServiceLayer){
var myMap = new Map("divMap");
var lyrUSA = new ArcGISDynamicMapServiceLayer("..."); myMap.addLayer(lyrUSA); });
map.jsmap.js
Basic JavaScript and the API (with AMD syntax)
Building Applications Using the ArcGIS API for JavaScript 17
require( ["esri/map", "esri/layers/ArcGISDynamicMapServiceLayer", "dijit/layout/BorderContainer", "dijit/layout/ContentPane", "dojo/domReady!" ], function(Map, ArcGISDynamicMapServiceLayer, BorderContainer, ContentPane){
var myMap = new Map("divMap");
var lyrUSA = new ArcGISDynamicMapServiceLayer("..."); myMap.addLayer(lyrUSA); });
require( ["esri/map", "esri/layers/ArcGISDynamicMapServiceLayer", "dijit/layout/BorderContainer", "dijit/layout/ContentPane", "dojo/domReady!" ], function(Map, ArcGISDynamicMapServiceLayer, BorderContainer, ContentPane){
var myMap = new Map("divMap");
var lyrUSA = new ArcGISDynamicMapServiceLayer("..."); myMap.addLayer(lyrUSA); });
map.jsmap.js
Basic JavaScript and the API (with AMD syntax)
Building Applications Using the ArcGIS API for JavaScript 19
require( ["esri/map", "esri/layers/ArcGISDynamicMapServiceLayer", "dijit/layout/BorderContainer", "dijit/layout/ContentPane", "dojo/domReady!" ], function(Map, ArcGISDynamicMapServiceLayer, BorderContainer, ContentPane){
var myMap = new Map("divMap", { basemap : "streets", center : [-76.59, 39.29], zoom : 12 }); var lyrUSA = new ArcGISDynamicMapServiceLayer("...");
});
require( ["esri/map", "esri/layers/ArcGISDynamicMapServiceLayer", "dijit/layout/BorderContainer", "dijit/layout/ContentPane", "dojo/domReady!" ], function(Map, ArcGISDynamicMapServiceLayer, BorderContainer, ContentPane){
var myMap = new Map("divMap", { basemap : "streets", center : [-76.59, 39.29], zoom : 12 }); var lyrUSA = new ArcGISDynamicMapServiceLayer("...");
});
map.jsmap.js
Basic JavaScript and the API (with AMD syntax)
JSON object
