SlideShare a Scribd company logo
1 of 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

More Related Content

What's hot (20)

Introduction to ajax
Introduction to ajaxIntroduction to ajax
Introduction to ajax
 
Web Servers: Architecture and Security
Web Servers: Architecture and SecurityWeb Servers: Architecture and Security
Web Servers: Architecture and Security
 
GeoServer 기초
GeoServer 기초GeoServer 기초
GeoServer 기초
 
Web ,app and db server presentation
Web ,app and db server presentationWeb ,app and db server presentation
Web ,app and db server presentation
 
Sequelize
SequelizeSequelize
Sequelize
 
Asynchronous JavaScript & XML (AJAX)
Asynchronous JavaScript & XML (AJAX)Asynchronous JavaScript & XML (AJAX)
Asynchronous JavaScript & XML (AJAX)
 
PostGIS 시작하기
PostGIS 시작하기PostGIS 시작하기
PostGIS 시작하기
 
Spring annotation
Spring annotationSpring annotation
Spring annotation
 
Java script
Java scriptJava script
Java script
 
Node Architecture and Getting Started with Express
Node Architecture and Getting Started with ExpressNode Architecture and Getting Started with Express
Node Architecture and Getting Started with Express
 
REST vs GraphQL
REST vs GraphQLREST vs GraphQL
REST vs GraphQL
 
GisCloud
GisCloudGisCloud
GisCloud
 
GraphQL Fundamentals
GraphQL FundamentalsGraphQL Fundamentals
GraphQL Fundamentals
 
Ajax
AjaxAjax
Ajax
 
Expressjs
ExpressjsExpressjs
Expressjs
 
Jsp
JspJsp
Jsp
 
Django Girls Tutorial
Django Girls TutorialDjango Girls Tutorial
Django Girls Tutorial
 
공간정보연구원 PostGIS 강의교재
공간정보연구원 PostGIS 강의교재공간정보연구원 PostGIS 강의교재
공간정보연구원 PostGIS 강의교재
 
GraphQL API Gateway and microservices
GraphQL API Gateway and microservicesGraphQL API Gateway and microservices
GraphQL API Gateway and microservices
 
Fragment
Fragment Fragment
Fragment
 

Similar to 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 to 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
 

Recently uploaded

Factors to Consider When Choosing Accounts Payable Services Providers.pptx
Factors to Consider When Choosing Accounts Payable Services Providers.pptxFactors to Consider When Choosing Accounts Payable Services Providers.pptx
Factors to Consider When Choosing Accounts Payable Services Providers.pptxKatpro Technologies
 
Raspberry Pi 5: Challenges and Solutions in Bringing up an OpenGL/Vulkan Driv...
Raspberry Pi 5: Challenges and Solutions in Bringing up an OpenGL/Vulkan Driv...Raspberry Pi 5: Challenges and Solutions in Bringing up an OpenGL/Vulkan Driv...
Raspberry Pi 5: Challenges and Solutions in Bringing up an OpenGL/Vulkan Driv...Igalia
 
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
 
Slack Application Development 101 Slides
Slack Application Development 101 SlidesSlack Application Development 101 Slides
Slack Application Development 101 Slidespraypatel2
 
A Call to Action for Generative AI in 2024
A Call to Action for Generative AI in 2024A Call to Action for Generative AI in 2024
A Call to Action for Generative AI in 2024Results
 
EIS-Webinar-Prompt-Knowledge-Eng-2024-04-08.pptx
EIS-Webinar-Prompt-Knowledge-Eng-2024-04-08.pptxEIS-Webinar-Prompt-Knowledge-Eng-2024-04-08.pptx
EIS-Webinar-Prompt-Knowledge-Eng-2024-04-08.pptxEarley Information Science
 
Tata AIG General Insurance Company - Insurer Innovation Award 2024
Tata AIG General Insurance Company - Insurer Innovation Award 2024Tata AIG General Insurance Company - Insurer Innovation Award 2024
Tata AIG General Insurance Company - Insurer Innovation Award 2024The Digital Insurer
 
Histor y of HAM Radio presentation slide
Histor y of HAM Radio presentation slideHistor y of HAM Radio presentation slide
Histor y of HAM Radio presentation slidevu2urc
 
08448380779 Call Girls In Diplomatic Enclave Women Seeking Men
08448380779 Call Girls In Diplomatic Enclave Women Seeking Men08448380779 Call Girls In Diplomatic Enclave Women Seeking Men
08448380779 Call Girls In Diplomatic Enclave Women Seeking MenDelhi Call girls
 
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
 
Partners Life - Insurer Innovation Award 2024
Partners Life - Insurer Innovation Award 2024Partners Life - Insurer Innovation Award 2024
Partners Life - Insurer Innovation Award 2024The Digital Insurer
 
Presentation on how to chat with PDF using ChatGPT code interpreter
Presentation on how to chat with PDF using ChatGPT code interpreterPresentation on how to chat with PDF using ChatGPT code interpreter
Presentation on how to chat with PDF using ChatGPT code interpreternaman860154
 
The Codex of Business Writing Software for Real-World Solutions 2.pptx
The Codex of Business Writing Software for Real-World Solutions 2.pptxThe Codex of Business Writing Software for Real-World Solutions 2.pptx
The Codex of Business Writing Software for Real-World Solutions 2.pptxMalak Abu Hammad
 
08448380779 Call Girls In Friends Colony Women Seeking Men
08448380779 Call Girls In Friends Colony Women Seeking Men08448380779 Call Girls In Friends Colony Women Seeking Men
08448380779 Call Girls In Friends Colony Women Seeking MenDelhi Call girls
 
Breaking the Kubernetes Kill Chain: Host Path Mount
Breaking the Kubernetes Kill Chain: Host Path MountBreaking the Kubernetes Kill Chain: Host Path Mount
Breaking the Kubernetes Kill Chain: Host Path MountPuma Security, LLC
 
[2024]Digital Global Overview Report 2024 Meltwater.pdf
[2024]Digital Global Overview Report 2024 Meltwater.pdf[2024]Digital Global Overview Report 2024 Meltwater.pdf
[2024]Digital Global Overview Report 2024 Meltwater.pdfhans926745
 
From Event to Action: Accelerate Your Decision Making with Real-Time Automation
From Event to Action: Accelerate Your Decision Making with Real-Time AutomationFrom Event to Action: Accelerate Your Decision Making with Real-Time Automation
From Event to Action: Accelerate Your Decision Making with Real-Time AutomationSafe Software
 
Neo4j - How KGs are shaping the future of Generative AI at AWS Summit London ...
Neo4j - How KGs are shaping the future of Generative AI at AWS Summit London ...Neo4j - How KGs are shaping the future of Generative AI at AWS Summit London ...
Neo4j - How KGs are shaping the future of Generative AI at AWS Summit London ...Neo4j
 
GenCyber Cyber Security Day Presentation
GenCyber Cyber Security Day PresentationGenCyber Cyber Security Day Presentation
GenCyber Cyber Security Day PresentationMichael W. Hawkins
 
Strategies for Unlocking Knowledge Management in Microsoft 365 in the Copilot...
Strategies for Unlocking Knowledge Management in Microsoft 365 in the Copilot...Strategies for Unlocking Knowledge Management in Microsoft 365 in the Copilot...
Strategies for Unlocking Knowledge Management in Microsoft 365 in the Copilot...Drew Madelung
 

Recently uploaded (20)

Factors to Consider When Choosing Accounts Payable Services Providers.pptx
Factors to Consider When Choosing Accounts Payable Services Providers.pptxFactors to Consider When Choosing Accounts Payable Services Providers.pptx
Factors to Consider When Choosing Accounts Payable Services Providers.pptx
 
Raspberry Pi 5: Challenges and Solutions in Bringing up an OpenGL/Vulkan Driv...
Raspberry Pi 5: Challenges and Solutions in Bringing up an OpenGL/Vulkan Driv...Raspberry Pi 5: Challenges and Solutions in Bringing up an OpenGL/Vulkan Driv...
Raspberry Pi 5: Challenges and Solutions in Bringing up an OpenGL/Vulkan Driv...
 
A Domino Admins Adventures (Engage 2024)
A Domino Admins Adventures (Engage 2024)A Domino Admins Adventures (Engage 2024)
A Domino Admins Adventures (Engage 2024)
 
Slack Application Development 101 Slides
Slack Application Development 101 SlidesSlack Application Development 101 Slides
Slack Application Development 101 Slides
 
A Call to Action for Generative AI in 2024
A Call to Action for Generative AI in 2024A Call to Action for Generative AI in 2024
A Call to Action for Generative AI in 2024
 
EIS-Webinar-Prompt-Knowledge-Eng-2024-04-08.pptx
EIS-Webinar-Prompt-Knowledge-Eng-2024-04-08.pptxEIS-Webinar-Prompt-Knowledge-Eng-2024-04-08.pptx
EIS-Webinar-Prompt-Knowledge-Eng-2024-04-08.pptx
 
Tata AIG General Insurance Company - Insurer Innovation Award 2024
Tata AIG General Insurance Company - Insurer Innovation Award 2024Tata AIG General Insurance Company - Insurer Innovation Award 2024
Tata AIG General Insurance Company - Insurer Innovation Award 2024
 
Histor y of HAM Radio presentation slide
Histor y of HAM Radio presentation slideHistor y of HAM Radio presentation slide
Histor y of HAM Radio presentation slide
 
08448380779 Call Girls In Diplomatic Enclave Women Seeking Men
08448380779 Call Girls In Diplomatic Enclave Women Seeking Men08448380779 Call Girls In Diplomatic Enclave Women Seeking Men
08448380779 Call Girls In Diplomatic Enclave Women Seeking Men
 
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
 
Partners Life - Insurer Innovation Award 2024
Partners Life - Insurer Innovation Award 2024Partners Life - Insurer Innovation Award 2024
Partners Life - Insurer Innovation Award 2024
 
Presentation on how to chat with PDF using ChatGPT code interpreter
Presentation on how to chat with PDF using ChatGPT code interpreterPresentation on how to chat with PDF using ChatGPT code interpreter
Presentation on how to chat with PDF using ChatGPT code interpreter
 
The Codex of Business Writing Software for Real-World Solutions 2.pptx
The Codex of Business Writing Software for Real-World Solutions 2.pptxThe Codex of Business Writing Software for Real-World Solutions 2.pptx
The Codex of Business Writing Software for Real-World Solutions 2.pptx
 
08448380779 Call Girls In Friends Colony Women Seeking Men
08448380779 Call Girls In Friends Colony Women Seeking Men08448380779 Call Girls In Friends Colony Women Seeking Men
08448380779 Call Girls In Friends Colony Women Seeking Men
 
Breaking the Kubernetes Kill Chain: Host Path Mount
Breaking the Kubernetes Kill Chain: Host Path MountBreaking the Kubernetes Kill Chain: Host Path Mount
Breaking the Kubernetes Kill Chain: Host Path Mount
 
[2024]Digital Global Overview Report 2024 Meltwater.pdf
[2024]Digital Global Overview Report 2024 Meltwater.pdf[2024]Digital Global Overview Report 2024 Meltwater.pdf
[2024]Digital Global Overview Report 2024 Meltwater.pdf
 
From Event to Action: Accelerate Your Decision Making with Real-Time Automation
From Event to Action: Accelerate Your Decision Making with Real-Time AutomationFrom Event to Action: Accelerate Your Decision Making with Real-Time Automation
From Event to Action: Accelerate Your Decision Making with Real-Time Automation
 
Neo4j - How KGs are shaping the future of Generative AI at AWS Summit London ...
Neo4j - How KGs are shaping the future of Generative AI at AWS Summit London ...Neo4j - How KGs are shaping the future of Generative AI at AWS Summit London ...
Neo4j - How KGs are shaping the future of Generative AI at AWS Summit London ...
 
GenCyber Cyber Security Day Presentation
GenCyber Cyber Security Day PresentationGenCyber Cyber Security Day Presentation
GenCyber Cyber Security Day Presentation
 
Strategies for Unlocking Knowledge Management in Microsoft 365 in the Copilot...
Strategies for Unlocking Knowledge Management in Microsoft 365 in the Copilot...Strategies for Unlocking Knowledge Management in Microsoft 365 in the Copilot...
Strategies for Unlocking Knowledge Management in Microsoft 365 in the Copilot...
 

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