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

La actualidad más candente

Introduction of Html/css/js
Introduction of Html/css/jsIntroduction of Html/css/js
Introduction of Html/css/jsKnoldus Inc.
 
What are razor pages?
What are razor pages?What are razor pages?
What are razor pages?Mindfire LLC
 
Training report on web developing
Training report on web developingTraining report on web developing
Training report on web developingJawhar Ali
 
Node.js Express
Node.js  ExpressNode.js  Express
Node.js ExpressEyal Vardi
 
Next.js vs React | what to choose for frontend development_
Next.js vs React | what to choose for frontend development_Next.js vs React | what to choose for frontend development_
Next.js vs React | what to choose for frontend development_ForceBolt
 
목적에 맞게 Angular, React, Vue
목적에 맞게 Angular, React, Vue목적에 맞게 Angular, React, Vue
목적에 맞게 Angular, React, VueGunhee Lee
 
Reactjs workshop
Reactjs workshop Reactjs workshop
Reactjs workshop Ahmed rebai
 
Build RESTful API Using Express JS
Build RESTful API Using Express JSBuild RESTful API Using Express JS
Build RESTful API Using Express JSCakra Danu Sedayu
 
Praveen_4Years Dot Net Resume
Praveen_4Years Dot Net ResumePraveen_4Years Dot Net Resume
Praveen_4Years Dot Net ResumePraveen Mudiraj
 

La actualidad más candente (20)

AutoMapper
AutoMapperAutoMapper
AutoMapper
 
ONLINE PHOTO GALLERY
ONLINE PHOTO GALLERYONLINE PHOTO GALLERY
ONLINE PHOTO GALLERY
 
Express js
Express jsExpress js
Express js
 
Introduction of Html/css/js
Introduction of Html/css/jsIntroduction of Html/css/js
Introduction of Html/css/js
 
Intro to Wordpress
Intro to WordpressIntro to Wordpress
Intro to Wordpress
 
What are razor pages?
What are razor pages?What are razor pages?
What are razor pages?
 
Web developnment
Web developnment Web developnment
Web developnment
 
MongoDB and Node.js
MongoDB and Node.jsMongoDB and Node.js
MongoDB and Node.js
 
Training report on web developing
Training report on web developingTraining report on web developing
Training report on web developing
 
Node.js Express
Node.js  ExpressNode.js  Express
Node.js Express
 
Next.js vs React | what to choose for frontend development_
Next.js vs React | what to choose for frontend development_Next.js vs React | what to choose for frontend development_
Next.js vs React | what to choose for frontend development_
 
Introduction Node.js
Introduction Node.jsIntroduction Node.js
Introduction Node.js
 
Restful api
Restful apiRestful api
Restful api
 
목적에 맞게 Angular, React, Vue
목적에 맞게 Angular, React, Vue목적에 맞게 Angular, React, Vue
목적에 맞게 Angular, React, Vue
 
Learning typescript
Learning typescriptLearning typescript
Learning typescript
 
NodeJS for Beginner
NodeJS for BeginnerNodeJS for Beginner
NodeJS for Beginner
 
REST & RESTful Web Services
REST & RESTful Web ServicesREST & RESTful Web Services
REST & RESTful Web Services
 
Reactjs workshop
Reactjs workshop Reactjs workshop
Reactjs workshop
 
Build RESTful API Using Express JS
Build RESTful API Using Express JSBuild RESTful API Using Express JS
Build RESTful API Using Express JS
 
Praveen_4Years Dot Net Resume
Praveen_4Years Dot Net ResumePraveen_4Years Dot Net Resume
Praveen_4Years Dot Net Resume
 

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

ArcGIS API for Javascript Tutorial
ArcGIS API for Javascript TutorialArcGIS API for Javascript Tutorial
ArcGIS API for Javascript TutorialMohammed Mahmoud
 
Building Web Apps with the Esri-Leaflet Plugin - Dubai DevSummit 2013
Building Web Apps with the Esri-Leaflet Plugin - Dubai DevSummit 2013Building Web Apps with the Esri-Leaflet Plugin - Dubai DevSummit 2013
Building Web Apps with the Esri-Leaflet Plugin - Dubai DevSummit 2013Aaron Parecki
 
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
 

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

ArcGIS API for Javascript Tutorial
ArcGIS API for Javascript TutorialArcGIS API for Javascript Tutorial
ArcGIS API for Javascript Tutorial
 
Building Web Apps with the Esri-Leaflet Plugin - Dubai DevSummit 2013
Building Web Apps with the Esri-Leaflet Plugin - Dubai DevSummit 2013Building Web Apps with the Esri-Leaflet Plugin - Dubai DevSummit 2013
Building Web Apps with the Esri-Leaflet Plugin - Dubai DevSummit 2013
 
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
 

Último

Connector Corner: Accelerate revenue generation using UiPath API-centric busi...
Connector Corner: Accelerate revenue generation using UiPath API-centric busi...Connector Corner: Accelerate revenue generation using UiPath API-centric busi...
Connector Corner: Accelerate revenue generation using UiPath API-centric busi...DianaGray10
 
Exploring the Future Potential of AI-Enabled Smartphone Processors
Exploring the Future Potential of AI-Enabled Smartphone ProcessorsExploring the Future Potential of AI-Enabled Smartphone Processors
Exploring the Future Potential of AI-Enabled Smartphone Processorsdebabhi2
 
Manulife - Insurer Innovation Award 2024
Manulife - Insurer Innovation Award 2024Manulife - Insurer Innovation Award 2024
Manulife - Insurer Innovation Award 2024The Digital Insurer
 
Axa Assurance Maroc - Insurer Innovation Award 2024
Axa Assurance Maroc - Insurer Innovation Award 2024Axa Assurance Maroc - Insurer Innovation Award 2024
Axa Assurance Maroc - Insurer Innovation Award 2024The Digital Insurer
 
Polkadot JAM Slides - Token2049 - By Dr. Gavin Wood
Polkadot JAM Slides - Token2049 - By Dr. Gavin WoodPolkadot JAM Slides - Token2049 - By Dr. Gavin Wood
Polkadot JAM Slides - Token2049 - By Dr. Gavin WoodJuan lago vázquez
 
Powerful Google developer tools for immediate impact! (2023-24 C)
Powerful Google developer tools for immediate impact! (2023-24 C)Powerful Google developer tools for immediate impact! (2023-24 C)
Powerful Google developer tools for immediate impact! (2023-24 C)wesley chun
 
Artificial Intelligence Chap.5 : Uncertainty
Artificial Intelligence Chap.5 : UncertaintyArtificial Intelligence Chap.5 : Uncertainty
Artificial Intelligence Chap.5 : UncertaintyKhushali Kathiriya
 
Deploy with confidence: VMware Cloud Foundation 5.1 on next gen Dell PowerEdg...
Deploy with confidence: VMware Cloud Foundation 5.1 on next gen Dell PowerEdg...Deploy with confidence: VMware Cloud Foundation 5.1 on next gen Dell PowerEdg...
Deploy with confidence: VMware Cloud Foundation 5.1 on next gen Dell PowerEdg...Principled Technologies
 
Cloud Frontiers: A Deep Dive into Serverless Spatial Data and FME
Cloud Frontiers:  A Deep Dive into Serverless Spatial Data and FMECloud Frontiers:  A Deep Dive into Serverless Spatial Data and FME
Cloud Frontiers: A Deep Dive into Serverless Spatial Data and FMESafe Software
 
Automating Google Workspace (GWS) & more with Apps Script
Automating Google Workspace (GWS) & more with Apps ScriptAutomating Google Workspace (GWS) & more with Apps Script
Automating Google Workspace (GWS) & more with Apps Scriptwesley chun
 
TrustArc Webinar - Stay Ahead of US State Data Privacy Law Developments
TrustArc Webinar - Stay Ahead of US State Data Privacy Law DevelopmentsTrustArc Webinar - Stay Ahead of US State Data Privacy Law Developments
TrustArc Webinar - Stay Ahead of US State Data Privacy Law DevelopmentsTrustArc
 
A Domino Admins Adventures (Engage 2024)
A Domino Admins Adventures (Engage 2024)A Domino Admins Adventures (Engage 2024)
A Domino Admins Adventures (Engage 2024)Gabriella Davis
 
Real Time Object Detection Using Open CV
Real Time Object Detection Using Open CVReal Time Object Detection Using Open CV
Real Time Object Detection Using Open CVKhem
 
Strategies for Landing an Oracle DBA Job as a Fresher
Strategies for Landing an Oracle DBA Job as a FresherStrategies for Landing an Oracle DBA Job as a Fresher
Strategies for Landing an Oracle DBA Job as a FresherRemote DBA Services
 
ProductAnonymous-April2024-WinProductDiscovery-MelissaKlemke
ProductAnonymous-April2024-WinProductDiscovery-MelissaKlemkeProductAnonymous-April2024-WinProductDiscovery-MelissaKlemke
ProductAnonymous-April2024-WinProductDiscovery-MelissaKlemkeProduct Anonymous
 
2024: Domino Containers - The Next Step. News from the Domino Container commu...
2024: Domino Containers - The Next Step. News from the Domino Container commu...2024: Domino Containers - The Next Step. News from the Domino Container commu...
2024: Domino Containers - The Next Step. News from the Domino Container commu...Martijn de Jong
 
Boost PC performance: How more available memory can improve productivity
Boost PC performance: How more available memory can improve productivityBoost PC performance: How more available memory can improve productivity
Boost PC performance: How more available memory can improve productivityPrincipled Technologies
 
MINDCTI Revenue Release Quarter One 2024
MINDCTI Revenue Release Quarter One 2024MINDCTI Revenue Release Quarter One 2024
MINDCTI Revenue Release Quarter One 2024MIND CTI
 
🐬 The future of MySQL is Postgres 🐘
🐬  The future of MySQL is Postgres   🐘🐬  The future of MySQL is Postgres   🐘
🐬 The future of MySQL is Postgres 🐘RTylerCroy
 
GenAI Risks & Security Meetup 01052024.pdf
GenAI Risks & Security Meetup 01052024.pdfGenAI Risks & Security Meetup 01052024.pdf
GenAI Risks & Security Meetup 01052024.pdflior mazor
 

Último (20)

Connector Corner: Accelerate revenue generation using UiPath API-centric busi...
Connector Corner: Accelerate revenue generation using UiPath API-centric busi...Connector Corner: Accelerate revenue generation using UiPath API-centric busi...
Connector Corner: Accelerate revenue generation using UiPath API-centric busi...
 
Exploring the Future Potential of AI-Enabled Smartphone Processors
Exploring the Future Potential of AI-Enabled Smartphone ProcessorsExploring the Future Potential of AI-Enabled Smartphone Processors
Exploring the Future Potential of AI-Enabled Smartphone Processors
 
Manulife - Insurer Innovation Award 2024
Manulife - Insurer Innovation Award 2024Manulife - Insurer Innovation Award 2024
Manulife - Insurer Innovation Award 2024
 
Axa Assurance Maroc - Insurer Innovation Award 2024
Axa Assurance Maroc - Insurer Innovation Award 2024Axa Assurance Maroc - Insurer Innovation Award 2024
Axa Assurance Maroc - Insurer Innovation Award 2024
 
Polkadot JAM Slides - Token2049 - By Dr. Gavin Wood
Polkadot JAM Slides - Token2049 - By Dr. Gavin WoodPolkadot JAM Slides - Token2049 - By Dr. Gavin Wood
Polkadot JAM Slides - Token2049 - By Dr. Gavin Wood
 
Powerful Google developer tools for immediate impact! (2023-24 C)
Powerful Google developer tools for immediate impact! (2023-24 C)Powerful Google developer tools for immediate impact! (2023-24 C)
Powerful Google developer tools for immediate impact! (2023-24 C)
 
Artificial Intelligence Chap.5 : Uncertainty
Artificial Intelligence Chap.5 : UncertaintyArtificial Intelligence Chap.5 : Uncertainty
Artificial Intelligence Chap.5 : Uncertainty
 
Deploy with confidence: VMware Cloud Foundation 5.1 on next gen Dell PowerEdg...
Deploy with confidence: VMware Cloud Foundation 5.1 on next gen Dell PowerEdg...Deploy with confidence: VMware Cloud Foundation 5.1 on next gen Dell PowerEdg...
Deploy with confidence: VMware Cloud Foundation 5.1 on next gen Dell PowerEdg...
 
Cloud Frontiers: A Deep Dive into Serverless Spatial Data and FME
Cloud Frontiers:  A Deep Dive into Serverless Spatial Data and FMECloud Frontiers:  A Deep Dive into Serverless Spatial Data and FME
Cloud Frontiers: A Deep Dive into Serverless Spatial Data and FME
 
Automating Google Workspace (GWS) & more with Apps Script
Automating Google Workspace (GWS) & more with Apps ScriptAutomating Google Workspace (GWS) & more with Apps Script
Automating Google Workspace (GWS) & more with Apps Script
 
TrustArc Webinar - Stay Ahead of US State Data Privacy Law Developments
TrustArc Webinar - Stay Ahead of US State Data Privacy Law DevelopmentsTrustArc Webinar - Stay Ahead of US State Data Privacy Law Developments
TrustArc Webinar - Stay Ahead of US State Data Privacy Law Developments
 
A Domino Admins Adventures (Engage 2024)
A Domino Admins Adventures (Engage 2024)A Domino Admins Adventures (Engage 2024)
A Domino Admins Adventures (Engage 2024)
 
Real Time Object Detection Using Open CV
Real Time Object Detection Using Open CVReal Time Object Detection Using Open CV
Real Time Object Detection Using Open CV
 
Strategies for Landing an Oracle DBA Job as a Fresher
Strategies for Landing an Oracle DBA Job as a FresherStrategies for Landing an Oracle DBA Job as a Fresher
Strategies for Landing an Oracle DBA Job as a Fresher
 
ProductAnonymous-April2024-WinProductDiscovery-MelissaKlemke
ProductAnonymous-April2024-WinProductDiscovery-MelissaKlemkeProductAnonymous-April2024-WinProductDiscovery-MelissaKlemke
ProductAnonymous-April2024-WinProductDiscovery-MelissaKlemke
 
2024: Domino Containers - The Next Step. News from the Domino Container commu...
2024: Domino Containers - The Next Step. News from the Domino Container commu...2024: Domino Containers - The Next Step. News from the Domino Container commu...
2024: Domino Containers - The Next Step. News from the Domino Container commu...
 
Boost PC performance: How more available memory can improve productivity
Boost PC performance: How more available memory can improve productivityBoost PC performance: How more available memory can improve productivity
Boost PC performance: How more available memory can improve productivity
 
MINDCTI Revenue Release Quarter One 2024
MINDCTI Revenue Release Quarter One 2024MINDCTI Revenue Release Quarter One 2024
MINDCTI Revenue Release Quarter One 2024
 
🐬 The future of MySQL is Postgres 🐘
🐬  The future of MySQL is Postgres   🐘🐬  The future of MySQL is Postgres   🐘
🐬 The future of MySQL is Postgres 🐘
 
GenAI Risks & Security Meetup 01052024.pdf
GenAI Risks & Security Meetup 01052024.pdfGenAI Risks & Security Meetup 01052024.pdf
GenAI Risks & Security Meetup 01052024.pdf
 

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