Download presentation
Presentation is loading. Please wait.
1
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 YOUYOUR USERS
2
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
3
ArcGIS http://services.arcgisonline.com/.../World_Topo_Map/MapServer http://js.arcgis.com http://www.cityOf.... /propertytaxes TRADITIONAL APPROACH http://gis.metro... /e911_locator/GeocodeServer http://geo.cityOf../Parcels/FeatureServer http://geo.cityOf../Parcels/MapServer DEVELOPMENT OPTIONS
4
ArcGIS http://geo.cityOf../Parcels/FeatureServer http://services.arcgisonline.com/.../World_Topo_Map/MapServer http://js.arcgis.com http://www.cityOf.... /propertytaxes TRADITIONAL APPROACH http://gis.metro... /e911_locator/GeocodeServer http://geo.cityOf../Parcels/MapServer DEVELOPMENT OPTIONS
5
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 http://gis.metro... /e911_locator/GeocodeServer Portal Web Map DEVELOPMENT OPTIONS
6
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 http://gis.metro... /e911_locator/GeocodeServer Web Map DEVELOPMENT OPTIONS
7
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
8
ArcGIS http://services.arcgisonline.com/.../World_Topo_Map/MapServer USE WEB MAP IN TEMPLATE- BASED APP http://geo.cityOf../Parcels/FeatureServer http://geo.cityOf../Parcels/MapServer http://gis.metro... /e911_locator/GeocodeServer Portal Template Web Map DEVELOPMENT OPTIONS
9
ArcGIS http://services.arcgisonline.com/.../World_Topo_Map/MapServer USE WEB MAP IN APP BUILT BY THE WEB 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
10
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?
11
Building Applications Using the ArcGIS API for JavaScript11 Basic JavaScript and the API (with AMD syntax) require(); require(); map.js
12
Building Applications Using the ArcGIS API for JavaScript12 Basic JavaScript and the API (with AMD syntax) require([]); require([]); map.js array
![Building Applications Using the ArcGIS API for JavaScript12 Basic JavaScript and the API (with AMD syntax) require([]); require([]); map.js array](http://images.slideplayer.com/25/7685152/slides/slide_12.jpg "Building Applications Using the ArcGIS API for JavaScript12 Basic JavaScript and the API (with AMD syntax) require([]); require([]); map.js array")
13
Building Applications Using the ArcGIS API for JavaScript13 Basic JavaScript and the API (with AMD syntax) require([], function(){...}); require([], function(){...}); map.js array the callback function
![Building Applications Using the ArcGIS API for JavaScript13 Basic JavaScript and the API (with AMD syntax) require([], function(){...}); require([], function(){...}); map.js array the callback function](http://images.slideplayer.com/25/7685152/slides/slide_13.jpg "Building Applications Using the ArcGIS API for JavaScript13 Basic JavaScript and the API (with AMD syntax) require([], function(){...}); require([], function(){...}); map.js array the callback function")
14
Building Applications Using the ArcGIS API for JavaScript14 Basic JavaScript and the API (with AMD syntax) require( [], function(){ } ); require( [], function(){ } ); map.js
![Building Applications Using the ArcGIS API for JavaScript14 Basic JavaScript and the API (with AMD syntax) require( [], function(){ } ); require( [], function(){ } ); map.js](http://images.slideplayer.com/25/7685152/slides/slide_14.jpg "Building Applications Using the ArcGIS API for JavaScript14 Basic JavaScript and the API (with AMD syntax) require( [], function(){ } ); require( [], function(){ } ); map.js")
15
Building Applications Using the ArcGIS API for JavaScript15 require( ["esri/map"], function(Map){ var myMap = new Map("divMap"); } ); require( ["esri/map"], function(Map){ var myMap = new Map("divMap"); } ); map.js Basic JavaScript and the API (with AMD syntax) A constructor statement API module alias object index.html
![Building Applications Using the ArcGIS API for JavaScript15 require( [ esri/map ], function(Map){ var myMap = new Map( divMap ); } ); require( [ esri/map ], function(Map){ var myMap = new Map( divMap ); } ); map.js Basic JavaScript and the API (with AMD syntax) A constructor statement API module alias object index.html](http://images.slideplayer.com/25/7685152/slides/slide_15.jpg "Building Applications Using the ArcGIS API for JavaScript15 require( [ esri/map ], function(Map){ var myMap = new Map( divMap ); } ); require( [ esri/map ], function(Map){ var myMap = new Map( divMap ); } ); map.js Basic JavaScript and the API (with AMD syntax) A constructor statement API module alias object index.html")
16
Building Applications Using the ArcGIS API for JavaScript16 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.js Basic JavaScript and the API (with AMD syntax)
![Building Applications Using the ArcGIS API for JavaScript16 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.js Basic JavaScript and the API (with AMD syntax)](http://images.slideplayer.com/25/7685152/slides/slide_16.jpg "Building Applications Using the ArcGIS API for JavaScript16 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.js Basic JavaScript and the API (with AMD syntax)")
17
Building Applications Using the ArcGIS API for JavaScript17 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.js Basic JavaScript and the API (with AMD syntax)
![Building Applications Using the ArcGIS API for JavaScript17 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.js Basic JavaScript and the API (with AMD syntax)](http://images.slideplayer.com/25/7685152/slides/slide_17.jpg "Building Applications Using the ArcGIS API for JavaScript17 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.js Basic JavaScript and the API (with AMD syntax)")
18
Building Applications Using the ArcGIS API for JavaScript18 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.js Basic JavaScript and the API (with AMD syntax)
![Building Applications Using the ArcGIS API for JavaScript18 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.js Basic JavaScript and the API (with AMD syntax)](http://images.slideplayer.com/25/7685152/slides/slide_18.jpg "Building Applications Using the ArcGIS API for JavaScript18 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.js Basic JavaScript and the API (with AMD syntax)")
19
Building Applications Using the ArcGIS API for JavaScript19 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.js Basic JavaScript and the API (with AMD syntax) JSON object
![Building Applications Using the ArcGIS API for JavaScript19 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.js Basic JavaScript and the API (with AMD syntax) JSON object](http://images.slideplayer.com/25/7685152/slides/slide_19.jpg "Building Applications Using the ArcGIS API for JavaScript19 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.js Basic JavaScript and the API (with AMD syntax) JSON object")
Similar presentations
