SlideShare una empresa de Scribd logo
1 de 16
ArcGis API for JavaScript
 Welcome to "ArcGIS API for JavaScript" demo application
ArcGIS API for JavaScript



The ArcGIS api for JavaScript is a browser based api for developing high
performance mapping applications and the api allows you to easily embed
maps in your web pages. An ArcGIS application utilizes a layer-based
geographic information model for characterizing and describing our world.
ArcGIS API for JavaScript
ArcGIS API for JavaScript


The geodatabase is the common data storage and management
framework for ArcGIS. It combines "geo" (spatial-data) with "database"
(data-repository) to create a central data repository for spatial data
storage and management.
ArcGIS API for JavaScript
The ArcGIS Server is the primary platform to create, manage, and distribute
maps and capabilities. An ArcGIS application asks what it need, through a
rest service.

                     http://sampleserver1.arcgisonline.com/
  http://.../ArcGIS/rest/services/Demographics/ESRI_Population_World/MapServer

If you put the url into the browser, you can see the service documentation.
When the javascript api call this url, it add additional parameters .

 /ArcGIS/rest/services/Demographics/ESRI_Population_World/MapServer?
 f=json&dpi=96&transparent=true&format=png8&callback=dojo.io.script.jsonp_dojoI
 oScript6._jsonpCallback HTTP/1.1

The service can return an image or json data (it depends from the service
type and the class type used).
ArcGIS API for JavaScript
The ArcGIS JavaScript API, sits directly on top of Dojo framework,
providing developers with access to Dojo user interface widgets and all the
other benefits of Dojo core.
ArcGIS API for JavaScript

Below you can see some layer class.
ArcGIS API for JavaScript
ArcGISTiledMapServiceLayer: ArcGIS Server cached map service, hosting
a set of map image tiles (are not interactive).

ArcGISDynamicMapServiceLayer: ArcGIS Server non-cached map service,
that generates map images on the fly (are not interactive).

FeatureLayer: Feature layers represent layers that contain features
(geometry and attributes). Feature layers are a special type of Graphics
layer that allow you to display features. Differ from tiled and dynamic layers
because feature layers bring geometry information across to the client
computer to be drawn by the web browser. You can perform operation as:
query, create, update, delete (are interactive).

               Geodatabase (geometry, attributes and more)
ArcGIS API for JavaScript



       Demo
ArcGIS API for JavaScript
                  ArcGISTiledMapServiceLayer


var tiledMapServiceLayer;
tiledMapServiceLayer = new esri.layers.ArcGISTiledMapServiceLayer(url);
map.addLayer(tiledMapServiceLayer);




       The code above add a tiled cached map (return a static map).
ArcGIS API for JavaScript
             ArcGISDynamicMapServiceLayer / 1


 var lvisible = [0];
 var param = { "transparent": true };
 var layer = new esri.layers.ArcGISDynamicMapServiceLayer(url, param);
 layer.setVisibleLayers(lvisible);
 map.addLayer(layer);




The code above perform a query on a DynamicLayer (return a dynamic map).
ArcGIS API for JavaScript
            ArcGISDynamicMapServiceLayer / 2
var layerDefs = [];
layerDefs3[5] = "STATE_NAME='Kansas'";
layerDefs3[4] = "STATE_NAME='Kansas' and POP2007>10000";
layerDefs3[3] = "STATE_NAME='Kansas' and POP2007>10000";
var imageParam = new esri.layers.ImageParameters();
imageParam.layerDefinitions = layerDefs;
imageParam.layerIds = [5, 4, 3];
imageParam.transparent = true;
var layer = new sri.layers.ArcGISDynamicMapServiceLayer(url,
   {"imageParameters": imageParam }
);
map.addLayer(layer);

The code above perform a query on a DynamicLayer (return a dynamic map).
ArcGIS API for JavaScript
                              FeatureLayer


var layer = new esri.layers.FeatureLayer( url , {
   mode: esri.layers.FeatureLayer.MODE_SNAPSHOT,
   outFields: ["NAME", "POP2000", "POP2007", "POP00_SQMI", "POP07_SQMI"]
});
layer.setDefinitionExpression("STATE_NAME = 'Kansas'");
layer.setRenderer(new esri.renderer.SimpleRenderer(symbol));
map.addLayer(layer);


            The code above perform a query on a FutureLayer.
You can perform operation as: query, create, update, delete (are interactive).
ArcGIS API for JavaScript
                             QueryTask


var queryTask = new esri.tasks.QueryTask(url);
var query = new esri.tasks.Query();
query.outSpatialReference = { wkid: 102100 };
query.outFields = ["STATE_NAME", "CITY_NAME“, "MALES", "FEMALES"];
query.where = "STATE_NAME =‘California’ ";
queryTask.execute(query, callback);



           A QueryTask perform a query and return json data.
ArcGIS API for JavaScript



       Demo
ArcGIS API for JavaScript



You can download the demo code at this link: http://sdrv.ms/UGlW0p

 There is also a video on YouTube: http://youtu.be/2IV29O0dW2M

Más contenido relacionado

Similar a ArcGIS JavaScript API (build a web layer-based map application with html5 and javascript)

ESRI Dev Meetup: Building Distributed JavaScript Map Widgets
ESRI Dev Meetup: Building Distributed JavaScript Map WidgetsESRI Dev Meetup: Building Distributed JavaScript Map Widgets
ESRI Dev Meetup: Building Distributed JavaScript Map WidgetsAllan Glen
 
Introduction to ArcGIS for Developers, Esri, Charles van der Put, Jim Barry
Introduction toArcGIS for Developers, Esri, Charles van der Put, Jim BarryIntroduction toArcGIS for Developers, Esri, Charles van der Put, Jim Barry
Introduction to ArcGIS for Developers, Esri, Charles van der Put, Jim BarryEsri Nederland
 
Adding where to your ruby apps
Adding where to your ruby appsAdding where to your ruby apps
Adding where to your ruby appsRoberto Pepato
 
ArcGIS Server Javascript API
ArcGIS Server Javascript APIArcGIS Server Javascript API
ArcGIS Server Javascript APIewug
 
FOSS4G 2011: Mixing It Up with OpenLayers, ArcGIS Server and JavaScript Widgets
FOSS4G 2011: Mixing It Up with OpenLayers, ArcGIS Server and JavaScript WidgetsFOSS4G 2011: Mixing It Up with OpenLayers, ArcGIS Server and JavaScript Widgets
FOSS4G 2011: Mixing It Up with OpenLayers, ArcGIS Server and JavaScript WidgetsAllan Glen
 
Single Page Applications on JavaScript and ASP.NET MVC4
Single Page Applications on JavaScript and ASP.NET MVC4Single Page Applications on JavaScript and ASP.NET MVC4
Single Page Applications on JavaScript and ASP.NET MVC4Yuriy Shapovalov
 
Building ArcGIS Mobile Solutions in the Cloud
Building ArcGIS Mobile Solutions in the CloudBuilding ArcGIS Mobile Solutions in the Cloud
Building ArcGIS Mobile Solutions in the CloudAllan Laframboise
 
Building a ArcGIS mobile, cloud, checkin app in 75 minutes - zero to hero
Building a ArcGIS mobile, cloud, checkin app in 75 minutes - zero to heroBuilding a ArcGIS mobile, cloud, checkin app in 75 minutes - zero to hero
Building a ArcGIS mobile, cloud, checkin app in 75 minutes - zero to heroAllan Laframboise
 
Building a mobile, cloud, checkin app in 75 minutes - zero to hero.
Building a mobile, cloud, checkin app in 75 minutes -  zero to hero.Building a mobile, cloud, checkin app in 75 minutes -  zero to hero.
Building a mobile, cloud, checkin app in 75 minutes - zero to hero.OReillyWhere20
 
What's New for Cartography in ArcGIS 10.2
What's New for Cartography in ArcGIS 10.2What's New for Cartography in ArcGIS 10.2
What's New for Cartography in ArcGIS 10.2Aileen Buckley
 
BK2011 Utvikling av rike webapplikasjoner i microsoft silverlight
BK2011 Utvikling av rike webapplikasjoner i microsoft silverlightBK2011 Utvikling av rike webapplikasjoner i microsoft silverlight
BK2011 Utvikling av rike webapplikasjoner i microsoft silverlightGeodata AS
 
Quick and Easy Development with Node.js and Couchbase Server
Quick and Easy Development with Node.js and Couchbase ServerQuick and Easy Development with Node.js and Couchbase Server
Quick and Easy Development with Node.js and Couchbase ServerNic Raboy
 
Intro to Spark and Spark SQL
Intro to Spark and Spark SQLIntro to Spark and Spark SQL
Intro to Spark and Spark SQLjeykottalam
 
iOS Reactive Cocoa Pipeline
iOS Reactive Cocoa PipelineiOS Reactive Cocoa Pipeline
iOS Reactive Cocoa PipelineIvan Trifonov
 

Similar a ArcGIS JavaScript API (build a web layer-based map application with html5 and javascript) (20)

ESRI Dev Meetup: Building Distributed JavaScript Map Widgets
ESRI Dev Meetup: Building Distributed JavaScript Map WidgetsESRI Dev Meetup: Building Distributed JavaScript Map Widgets
ESRI Dev Meetup: Building Distributed JavaScript Map Widgets
 
Introduction to ArcGIS for Developers, Esri, Charles van der Put, Jim Barry
Introduction toArcGIS for Developers, Esri, Charles van der Put, Jim BarryIntroduction toArcGIS for Developers, Esri, Charles van der Put, Jim Barry
Introduction to ArcGIS for Developers, Esri, Charles van der Put, Jim Barry
 
Esri Map App Builders
Esri Map App BuildersEsri Map App Builders
Esri Map App Builders
 
Adding where to your ruby apps
Adding where to your ruby appsAdding where to your ruby apps
Adding where to your ruby apps
 
Arc objects library reference
Arc objects library referenceArc objects library reference
Arc objects library reference
 
ArcGIS Server Javascript API
ArcGIS Server Javascript APIArcGIS Server Javascript API
ArcGIS Server Javascript API
 
Tools Of The Geospatial Web
Tools Of The Geospatial WebTools Of The Geospatial Web
Tools Of The Geospatial Web
 
FOSS4G 2011: Mixing It Up with OpenLayers, ArcGIS Server and JavaScript Widgets
FOSS4G 2011: Mixing It Up with OpenLayers, ArcGIS Server and JavaScript WidgetsFOSS4G 2011: Mixing It Up with OpenLayers, ArcGIS Server and JavaScript Widgets
FOSS4G 2011: Mixing It Up with OpenLayers, ArcGIS Server and JavaScript Widgets
 
Single Page Applications on JavaScript and ASP.NET MVC4
Single Page Applications on JavaScript and ASP.NET MVC4Single Page Applications on JavaScript and ASP.NET MVC4
Single Page Applications on JavaScript and ASP.NET MVC4
 
51811680 open layers
51811680 open layers51811680 open layers
51811680 open layers
 
Building ArcGIS Mobile Solutions in the Cloud
Building ArcGIS Mobile Solutions in the CloudBuilding ArcGIS Mobile Solutions in the Cloud
Building ArcGIS Mobile Solutions in the Cloud
 
Building a ArcGIS mobile, cloud, checkin app in 75 minutes - zero to hero
Building a ArcGIS mobile, cloud, checkin app in 75 minutes - zero to heroBuilding a ArcGIS mobile, cloud, checkin app in 75 minutes - zero to hero
Building a ArcGIS mobile, cloud, checkin app in 75 minutes - zero to hero
 
Building a mobile, cloud, checkin app in 75 minutes - zero to hero.
Building a mobile, cloud, checkin app in 75 minutes -  zero to hero.Building a mobile, cloud, checkin app in 75 minutes -  zero to hero.
Building a mobile, cloud, checkin app in 75 minutes - zero to hero.
 
What's New for Cartography in ArcGIS 10.2
What's New for Cartography in ArcGIS 10.2What's New for Cartography in ArcGIS 10.2
What's New for Cartography in ArcGIS 10.2
 
Making Use of Query Layers & Spatial Views
Making Use of Query Layers & Spatial ViewsMaking Use of Query Layers & Spatial Views
Making Use of Query Layers & Spatial Views
 
BK2011 Utvikling av rike webapplikasjoner i microsoft silverlight
BK2011 Utvikling av rike webapplikasjoner i microsoft silverlightBK2011 Utvikling av rike webapplikasjoner i microsoft silverlight
BK2011 Utvikling av rike webapplikasjoner i microsoft silverlight
 
Quick and Easy Development with Node.js and Couchbase Server
Quick and Easy Development with Node.js and Couchbase ServerQuick and Easy Development with Node.js and Couchbase Server
Quick and Easy Development with Node.js and Couchbase Server
 
Intro to Spark and Spark SQL
Intro to Spark and Spark SQLIntro to Spark and Spark SQL
Intro to Spark and Spark SQL
 
iOS Reactive Cocoa Pipeline
iOS Reactive Cocoa PipelineiOS Reactive Cocoa Pipeline
iOS Reactive Cocoa Pipeline
 
netbeans
netbeansnetbeans
netbeans
 

Último

Passkey Providers and Enabling Portability: FIDO Paris Seminar.pptx
Passkey Providers and Enabling Portability: FIDO Paris Seminar.pptxPasskey Providers and Enabling Portability: FIDO Paris Seminar.pptx
Passkey Providers and Enabling Portability: FIDO Paris Seminar.pptxLoriGlavin3
 
Moving Beyond Passwords: FIDO Paris Seminar.pdf
Moving Beyond Passwords: FIDO Paris Seminar.pdfMoving Beyond Passwords: FIDO Paris Seminar.pdf
Moving Beyond Passwords: FIDO Paris Seminar.pdfLoriGlavin3
 
How to write a Business Continuity Plan
How to write a Business Continuity PlanHow to write a Business Continuity Plan
How to write a Business Continuity PlanDatabarracks
 
QCon London: Mastering long-running processes in modern architectures
QCon London: Mastering long-running processes in modern architecturesQCon London: Mastering long-running processes in modern architectures
QCon London: Mastering long-running processes in modern architecturesBernd Ruecker
 
The Ultimate Guide to Choosing WordPress Pros and Cons
The Ultimate Guide to Choosing WordPress Pros and ConsThe Ultimate Guide to Choosing WordPress Pros and Cons
The Ultimate Guide to Choosing WordPress Pros and ConsPixlogix Infotech
 
Modern Roaming for Notes and Nomad – Cheaper Faster Better Stronger
Modern Roaming for Notes and Nomad – Cheaper Faster Better StrongerModern Roaming for Notes and Nomad – Cheaper Faster Better Stronger
Modern Roaming for Notes and Nomad – Cheaper Faster Better Strongerpanagenda
 
Merck Moving Beyond Passwords: FIDO Paris Seminar.pptx
Merck Moving Beyond Passwords: FIDO Paris Seminar.pptxMerck Moving Beyond Passwords: FIDO Paris Seminar.pptx
Merck Moving Beyond Passwords: FIDO Paris Seminar.pptxLoriGlavin3
 
Top 10 Hubspot Development Companies in 2024
Top 10 Hubspot Development Companies in 2024Top 10 Hubspot Development Companies in 2024
Top 10 Hubspot Development Companies in 2024TopCSSGallery
 
The Fit for Passkeys for Employee and Consumer Sign-ins: FIDO Paris Seminar.pptx
The Fit for Passkeys for Employee and Consumer Sign-ins: FIDO Paris Seminar.pptxThe Fit for Passkeys for Employee and Consumer Sign-ins: FIDO Paris Seminar.pptx
The Fit for Passkeys for Employee and Consumer Sign-ins: FIDO Paris Seminar.pptxLoriGlavin3
 
New from BookNet Canada for 2024: Loan Stars - Tech Forum 2024
New from BookNet Canada for 2024: Loan Stars - Tech Forum 2024New from BookNet Canada for 2024: Loan Stars - Tech Forum 2024
New from BookNet Canada for 2024: Loan Stars - Tech Forum 2024BookNet Canada
 
Microsoft 365 Copilot: How to boost your productivity with AI – Part one: Ado...
Microsoft 365 Copilot: How to boost your productivity with AI – Part one: Ado...Microsoft 365 Copilot: How to boost your productivity with AI – Part one: Ado...
Microsoft 365 Copilot: How to boost your productivity with AI – Part one: Ado...Nikki Chapple
 
Varsha Sewlal- Cyber Attacks on Critical Critical Infrastructure
Varsha Sewlal- Cyber Attacks on Critical Critical InfrastructureVarsha Sewlal- Cyber Attacks on Critical Critical Infrastructure
Varsha Sewlal- Cyber Attacks on Critical Critical Infrastructureitnewsafrica
 
Generative AI - Gitex v1Generative AI - Gitex v1.pptx
Generative AI - Gitex v1Generative AI - Gitex v1.pptxGenerative AI - Gitex v1Generative AI - Gitex v1.pptx
Generative AI - Gitex v1Generative AI - Gitex v1.pptxfnnc6jmgwh
 
Emixa Mendix Meetup 11 April 2024 about Mendix Native development
Emixa Mendix Meetup 11 April 2024 about Mendix Native developmentEmixa Mendix Meetup 11 April 2024 about Mendix Native development
Emixa Mendix Meetup 11 April 2024 about Mendix Native developmentPim van der Noll
 
The Role of FIDO in a Cyber Secure Netherlands: FIDO Paris Seminar.pptx
The Role of FIDO in a Cyber Secure Netherlands: FIDO Paris Seminar.pptxThe Role of FIDO in a Cyber Secure Netherlands: FIDO Paris Seminar.pptx
The Role of FIDO in a Cyber Secure Netherlands: FIDO Paris Seminar.pptxLoriGlavin3
 
A Framework for Development in the AI Age
A Framework for Development in the AI AgeA Framework for Development in the AI Age
A Framework for Development in the AI AgeCprime
 
Abdul Kader Baba- Managing Cybersecurity Risks and Compliance Requirements i...
Abdul Kader Baba- Managing Cybersecurity Risks  and Compliance Requirements i...Abdul Kader Baba- Managing Cybersecurity Risks  and Compliance Requirements i...
Abdul Kader Baba- Managing Cybersecurity Risks and Compliance Requirements i...itnewsafrica
 
The State of Passkeys with FIDO Alliance.pptx
The State of Passkeys with FIDO Alliance.pptxThe State of Passkeys with FIDO Alliance.pptx
The State of Passkeys with FIDO Alliance.pptxLoriGlavin3
 
Generative Artificial Intelligence: How generative AI works.pdf
Generative Artificial Intelligence: How generative AI works.pdfGenerative Artificial Intelligence: How generative AI works.pdf
Generative Artificial Intelligence: How generative AI works.pdfIngrid Airi González
 
React Native vs Ionic - The Best Mobile App Framework
React Native vs Ionic - The Best Mobile App FrameworkReact Native vs Ionic - The Best Mobile App Framework
React Native vs Ionic - The Best Mobile App FrameworkPixlogix Infotech
 

Último (20)

Passkey Providers and Enabling Portability: FIDO Paris Seminar.pptx
Passkey Providers and Enabling Portability: FIDO Paris Seminar.pptxPasskey Providers and Enabling Portability: FIDO Paris Seminar.pptx
Passkey Providers and Enabling Portability: FIDO Paris Seminar.pptx
 
Moving Beyond Passwords: FIDO Paris Seminar.pdf
Moving Beyond Passwords: FIDO Paris Seminar.pdfMoving Beyond Passwords: FIDO Paris Seminar.pdf
Moving Beyond Passwords: FIDO Paris Seminar.pdf
 
How to write a Business Continuity Plan
How to write a Business Continuity PlanHow to write a Business Continuity Plan
How to write a Business Continuity Plan
 
QCon London: Mastering long-running processes in modern architectures
QCon London: Mastering long-running processes in modern architecturesQCon London: Mastering long-running processes in modern architectures
QCon London: Mastering long-running processes in modern architectures
 
The Ultimate Guide to Choosing WordPress Pros and Cons
The Ultimate Guide to Choosing WordPress Pros and ConsThe Ultimate Guide to Choosing WordPress Pros and Cons
The Ultimate Guide to Choosing WordPress Pros and Cons
 
Modern Roaming for Notes and Nomad – Cheaper Faster Better Stronger
Modern Roaming for Notes and Nomad – Cheaper Faster Better StrongerModern Roaming for Notes and Nomad – Cheaper Faster Better Stronger
Modern Roaming for Notes and Nomad – Cheaper Faster Better Stronger
 
Merck Moving Beyond Passwords: FIDO Paris Seminar.pptx
Merck Moving Beyond Passwords: FIDO Paris Seminar.pptxMerck Moving Beyond Passwords: FIDO Paris Seminar.pptx
Merck Moving Beyond Passwords: FIDO Paris Seminar.pptx
 
Top 10 Hubspot Development Companies in 2024
Top 10 Hubspot Development Companies in 2024Top 10 Hubspot Development Companies in 2024
Top 10 Hubspot Development Companies in 2024
 
The Fit for Passkeys for Employee and Consumer Sign-ins: FIDO Paris Seminar.pptx
The Fit for Passkeys for Employee and Consumer Sign-ins: FIDO Paris Seminar.pptxThe Fit for Passkeys for Employee and Consumer Sign-ins: FIDO Paris Seminar.pptx
The Fit for Passkeys for Employee and Consumer Sign-ins: FIDO Paris Seminar.pptx
 
New from BookNet Canada for 2024: Loan Stars - Tech Forum 2024
New from BookNet Canada for 2024: Loan Stars - Tech Forum 2024New from BookNet Canada for 2024: Loan Stars - Tech Forum 2024
New from BookNet Canada for 2024: Loan Stars - Tech Forum 2024
 
Microsoft 365 Copilot: How to boost your productivity with AI – Part one: Ado...
Microsoft 365 Copilot: How to boost your productivity with AI – Part one: Ado...Microsoft 365 Copilot: How to boost your productivity with AI – Part one: Ado...
Microsoft 365 Copilot: How to boost your productivity with AI – Part one: Ado...
 
Varsha Sewlal- Cyber Attacks on Critical Critical Infrastructure
Varsha Sewlal- Cyber Attacks on Critical Critical InfrastructureVarsha Sewlal- Cyber Attacks on Critical Critical Infrastructure
Varsha Sewlal- Cyber Attacks on Critical Critical Infrastructure
 
Generative AI - Gitex v1Generative AI - Gitex v1.pptx
Generative AI - Gitex v1Generative AI - Gitex v1.pptxGenerative AI - Gitex v1Generative AI - Gitex v1.pptx
Generative AI - Gitex v1Generative AI - Gitex v1.pptx
 
Emixa Mendix Meetup 11 April 2024 about Mendix Native development
Emixa Mendix Meetup 11 April 2024 about Mendix Native developmentEmixa Mendix Meetup 11 April 2024 about Mendix Native development
Emixa Mendix Meetup 11 April 2024 about Mendix Native development
 
The Role of FIDO in a Cyber Secure Netherlands: FIDO Paris Seminar.pptx
The Role of FIDO in a Cyber Secure Netherlands: FIDO Paris Seminar.pptxThe Role of FIDO in a Cyber Secure Netherlands: FIDO Paris Seminar.pptx
The Role of FIDO in a Cyber Secure Netherlands: FIDO Paris Seminar.pptx
 
A Framework for Development in the AI Age
A Framework for Development in the AI AgeA Framework for Development in the AI Age
A Framework for Development in the AI Age
 
Abdul Kader Baba- Managing Cybersecurity Risks and Compliance Requirements i...
Abdul Kader Baba- Managing Cybersecurity Risks  and Compliance Requirements i...Abdul Kader Baba- Managing Cybersecurity Risks  and Compliance Requirements i...
Abdul Kader Baba- Managing Cybersecurity Risks and Compliance Requirements i...
 
The State of Passkeys with FIDO Alliance.pptx
The State of Passkeys with FIDO Alliance.pptxThe State of Passkeys with FIDO Alliance.pptx
The State of Passkeys with FIDO Alliance.pptx
 
Generative Artificial Intelligence: How generative AI works.pdf
Generative Artificial Intelligence: How generative AI works.pdfGenerative Artificial Intelligence: How generative AI works.pdf
Generative Artificial Intelligence: How generative AI works.pdf
 
React Native vs Ionic - The Best Mobile App Framework
React Native vs Ionic - The Best Mobile App FrameworkReact Native vs Ionic - The Best Mobile App Framework
React Native vs Ionic - The Best Mobile App Framework
 

ArcGIS JavaScript API (build a web layer-based map application with html5 and javascript)

  • 1. ArcGis API for JavaScript Welcome to "ArcGIS API for JavaScript" demo application
  • 2. ArcGIS API for JavaScript The ArcGIS api for JavaScript is a browser based api for developing high performance mapping applications and the api allows you to easily embed maps in your web pages. An ArcGIS application utilizes a layer-based geographic information model for characterizing and describing our world.
  • 3. ArcGIS API for JavaScript
  • 4. ArcGIS API for JavaScript The geodatabase is the common data storage and management framework for ArcGIS. It combines "geo" (spatial-data) with "database" (data-repository) to create a central data repository for spatial data storage and management.
  • 5. ArcGIS API for JavaScript The ArcGIS Server is the primary platform to create, manage, and distribute maps and capabilities. An ArcGIS application asks what it need, through a rest service. http://sampleserver1.arcgisonline.com/ http://.../ArcGIS/rest/services/Demographics/ESRI_Population_World/MapServer If you put the url into the browser, you can see the service documentation. When the javascript api call this url, it add additional parameters . /ArcGIS/rest/services/Demographics/ESRI_Population_World/MapServer? f=json&dpi=96&transparent=true&format=png8&callback=dojo.io.script.jsonp_dojoI oScript6._jsonpCallback HTTP/1.1 The service can return an image or json data (it depends from the service type and the class type used).
  • 6. ArcGIS API for JavaScript The ArcGIS JavaScript API, sits directly on top of Dojo framework, providing developers with access to Dojo user interface widgets and all the other benefits of Dojo core.
  • 7. ArcGIS API for JavaScript Below you can see some layer class.
  • 8. ArcGIS API for JavaScript ArcGISTiledMapServiceLayer: ArcGIS Server cached map service, hosting a set of map image tiles (are not interactive). ArcGISDynamicMapServiceLayer: ArcGIS Server non-cached map service, that generates map images on the fly (are not interactive). FeatureLayer: Feature layers represent layers that contain features (geometry and attributes). Feature layers are a special type of Graphics layer that allow you to display features. Differ from tiled and dynamic layers because feature layers bring geometry information across to the client computer to be drawn by the web browser. You can perform operation as: query, create, update, delete (are interactive). Geodatabase (geometry, attributes and more)
  • 9. ArcGIS API for JavaScript Demo
  • 10. ArcGIS API for JavaScript ArcGISTiledMapServiceLayer var tiledMapServiceLayer; tiledMapServiceLayer = new esri.layers.ArcGISTiledMapServiceLayer(url); map.addLayer(tiledMapServiceLayer); The code above add a tiled cached map (return a static map).
  • 11. ArcGIS API for JavaScript ArcGISDynamicMapServiceLayer / 1 var lvisible = [0]; var param = { "transparent": true }; var layer = new esri.layers.ArcGISDynamicMapServiceLayer(url, param); layer.setVisibleLayers(lvisible); map.addLayer(layer); The code above perform a query on a DynamicLayer (return a dynamic map).
  • 12. ArcGIS API for JavaScript ArcGISDynamicMapServiceLayer / 2 var layerDefs = []; layerDefs3[5] = "STATE_NAME='Kansas'"; layerDefs3[4] = "STATE_NAME='Kansas' and POP2007>10000"; layerDefs3[3] = "STATE_NAME='Kansas' and POP2007>10000"; var imageParam = new esri.layers.ImageParameters(); imageParam.layerDefinitions = layerDefs; imageParam.layerIds = [5, 4, 3]; imageParam.transparent = true; var layer = new sri.layers.ArcGISDynamicMapServiceLayer(url, {"imageParameters": imageParam } ); map.addLayer(layer); The code above perform a query on a DynamicLayer (return a dynamic map).
  • 13. ArcGIS API for JavaScript FeatureLayer var layer = new esri.layers.FeatureLayer( url , { mode: esri.layers.FeatureLayer.MODE_SNAPSHOT, outFields: ["NAME", "POP2000", "POP2007", "POP00_SQMI", "POP07_SQMI"] }); layer.setDefinitionExpression("STATE_NAME = 'Kansas'"); layer.setRenderer(new esri.renderer.SimpleRenderer(symbol)); map.addLayer(layer); The code above perform a query on a FutureLayer. You can perform operation as: query, create, update, delete (are interactive).
  • 14. ArcGIS API for JavaScript QueryTask var queryTask = new esri.tasks.QueryTask(url); var query = new esri.tasks.Query(); query.outSpatialReference = { wkid: 102100 }; query.outFields = ["STATE_NAME", "CITY_NAME“, "MALES", "FEMALES"]; query.where = "STATE_NAME =‘California’ "; queryTask.execute(query, callback); A QueryTask perform a query and return json data.
  • 15. ArcGIS API for JavaScript Demo
  • 16. ArcGIS API for JavaScript You can download the demo code at this link: http://sdrv.ms/UGlW0p There is also a video on YouTube: http://youtu.be/2IV29O0dW2M