SlideShare une entreprise Scribd logo
1  sur  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

Contenu connexe

Tendances

Web app presentation
Web app presentationWeb app presentation
Web app presentationzahid6
 
ArcGIS for Server, Portal for ArcGIS and the Road Ahead - Esri norsk BK 2014
ArcGIS for Server, Portal for ArcGIS and the Road Ahead - Esri norsk BK 2014ArcGIS for Server, Portal for ArcGIS and the Road Ahead - Esri norsk BK 2014
ArcGIS for Server, Portal for ArcGIS and the Road Ahead - Esri norsk BK 2014Geodata AS
 
Fundamentals of Web Development For Non-Developers
Fundamentals of Web Development For Non-DevelopersFundamentals of Web Development For Non-Developers
Fundamentals of Web Development For Non-DevelopersLemi Orhan Ergin
 
Web Development Ppt
Web Development PptWeb Development Ppt
Web Development PptBruce Tucker
 
Software engineering project(srs)!!
Software engineering project(srs)!!Software engineering project(srs)!!
Software engineering project(srs)!!sourav verma
 
Architecting the ArcGIS Platform
Architecting the ArcGIS PlatformArchitecting the ArcGIS Platform
Architecting the ArcGIS PlatformEsri UK
 
Android Mobile App Development Proposal PowerPoint Presentation Slides
Android Mobile App Development Proposal PowerPoint Presentation SlidesAndroid Mobile App Development Proposal PowerPoint Presentation Slides
Android Mobile App Development Proposal PowerPoint Presentation SlidesSlideTeam
 
Why Progressive Web App is what you need for your Business
Why Progressive Web App is what you need for your BusinessWhy Progressive Web App is what you need for your Business
Why Progressive Web App is what you need for your BusinessLets Grow Business
 
Introdução ao ASP .NET Web API
Introdução ao ASP .NET Web APIIntrodução ao ASP .NET Web API
Introdução ao ASP .NET Web APIVinicius Mussak
 
AppSheet Overview -- DIY Mobile App Platform
AppSheet Overview -- DIY Mobile App PlatformAppSheet Overview -- DIY Mobile App Platform
AppSheet Overview -- DIY Mobile App Platformpravse
 
Web Application Performance
Web Application PerformanceWeb Application Performance
Web Application PerformanceCodeFireTech
 
IOS Mobile App Development Proposal PowerPoint Presentation Slides
IOS Mobile App Development Proposal PowerPoint Presentation SlidesIOS Mobile App Development Proposal PowerPoint Presentation Slides
IOS Mobile App Development Proposal PowerPoint Presentation SlidesSlideTeam
 
Web development presentation
Web development presentationWeb development presentation
Web development presentationVaishnavi8950
 

Tendances (20)

MVC
MVCMVC
MVC
 
Modern JS with ES6
Modern JS with ES6Modern JS with ES6
Modern JS with ES6
 
Web app presentation
Web app presentationWeb app presentation
Web app presentation
 
ArcGIS for Server, Portal for ArcGIS and the Road Ahead - Esri norsk BK 2014
ArcGIS for Server, Portal for ArcGIS and the Road Ahead - Esri norsk BK 2014ArcGIS for Server, Portal for ArcGIS and the Road Ahead - Esri norsk BK 2014
ArcGIS for Server, Portal for ArcGIS and the Road Ahead - Esri norsk BK 2014
 
Fundamentals of Web Development For Non-Developers
Fundamentals of Web Development For Non-DevelopersFundamentals of Web Development For Non-Developers
Fundamentals of Web Development For Non-Developers
 
Web Development Ppt
Web Development PptWeb Development Ppt
Web Development Ppt
 
Progressive Web Apps(PWA)
Progressive Web Apps(PWA)Progressive Web Apps(PWA)
Progressive Web Apps(PWA)
 
Software engineering project(srs)!!
Software engineering project(srs)!!Software engineering project(srs)!!
Software engineering project(srs)!!
 
Architecting the ArcGIS Platform
Architecting the ArcGIS PlatformArchitecting the ArcGIS Platform
Architecting the ArcGIS Platform
 
Android Mobile App Development Proposal PowerPoint Presentation Slides
Android Mobile App Development Proposal PowerPoint Presentation SlidesAndroid Mobile App Development Proposal PowerPoint Presentation Slides
Android Mobile App Development Proposal PowerPoint Presentation Slides
 
Why Progressive Web App is what you need for your Business
Why Progressive Web App is what you need for your BusinessWhy Progressive Web App is what you need for your Business
Why Progressive Web App is what you need for your Business
 
Web programming
Web programmingWeb programming
Web programming
 
Introdução ao ASP .NET Web API
Introdução ao ASP .NET Web APIIntrodução ao ASP .NET Web API
Introdução ao ASP .NET Web API
 
AppSheet Overview -- DIY Mobile App Platform
AppSheet Overview -- DIY Mobile App PlatformAppSheet Overview -- DIY Mobile App Platform
AppSheet Overview -- DIY Mobile App Platform
 
Intern presentation based on Flutter Lawyer App.
Intern presentation based on Flutter Lawyer App.  Intern presentation based on Flutter Lawyer App.
Intern presentation based on Flutter Lawyer App.
 
WordPress plugins
WordPress pluginsWordPress plugins
WordPress plugins
 
Web Application Performance
Web Application PerformanceWeb Application Performance
Web Application Performance
 
IOS Mobile App Development Proposal PowerPoint Presentation Slides
IOS Mobile App Development Proposal PowerPoint Presentation SlidesIOS Mobile App Development Proposal PowerPoint Presentation Slides
IOS Mobile App Development Proposal PowerPoint Presentation Slides
 
Progressive Web App
Progressive Web AppProgressive Web App
Progressive Web App
 
Web development presentation
Web development presentationWeb development presentation
Web development presentation
 

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

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
 
iOS Reactive Cocoa Pipeline
iOS Reactive Cocoa PipelineiOS Reactive Cocoa Pipeline
iOS Reactive Cocoa PipelineIvan Trifonov
 

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

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
 
iOS Reactive Cocoa Pipeline
iOS Reactive Cocoa PipelineiOS Reactive Cocoa Pipeline
iOS Reactive Cocoa Pipeline
 

Dernier

Modular Monolith - a Practical Alternative to Microservices @ Devoxx UK 2024
Modular Monolith - a Practical Alternative to Microservices @ Devoxx UK 2024Modular Monolith - a Practical Alternative to Microservices @ Devoxx UK 2024
Modular Monolith - a Practical Alternative to Microservices @ Devoxx UK 2024Victor Rentea
 
Repurposing LNG terminals for Hydrogen Ammonia: Feasibility and Cost Saving
Repurposing LNG terminals for Hydrogen Ammonia: Feasibility and Cost SavingRepurposing LNG terminals for Hydrogen Ammonia: Feasibility and Cost Saving
Repurposing LNG terminals for Hydrogen Ammonia: Feasibility and Cost SavingEdi Saputra
 
Finding Java's Hidden Performance Traps @ DevoxxUK 2024
Finding Java's Hidden Performance Traps @ DevoxxUK 2024Finding Java's Hidden Performance Traps @ DevoxxUK 2024
Finding Java's Hidden Performance Traps @ DevoxxUK 2024Victor Rentea
 
Architecting Cloud Native Applications
Architecting Cloud Native ApplicationsArchitecting Cloud Native Applications
Architecting Cloud Native ApplicationsWSO2
 
DEV meet-up UiPath Document Understanding May 7 2024 Amsterdam
DEV meet-up UiPath Document Understanding May 7 2024 AmsterdamDEV meet-up UiPath Document Understanding May 7 2024 Amsterdam
DEV meet-up UiPath Document Understanding May 7 2024 AmsterdamUiPathCommunity
 
Apidays New York 2024 - Accelerating FinTech Innovation by Vasa Krishnan, Fin...
Apidays New York 2024 - Accelerating FinTech Innovation by Vasa Krishnan, Fin...Apidays New York 2024 - Accelerating FinTech Innovation by Vasa Krishnan, Fin...
Apidays New York 2024 - Accelerating FinTech Innovation by Vasa Krishnan, Fin...apidays
 
Biography Of Angeliki Cooney | Senior Vice President Life Sciences | Albany, ...
Biography Of Angeliki Cooney | Senior Vice President Life Sciences | Albany, ...Biography Of Angeliki Cooney | Senior Vice President Life Sciences | Albany, ...
Biography Of Angeliki Cooney | Senior Vice President Life Sciences | Albany, ...Angeliki Cooney
 
Rising Above_ Dubai Floods and the Fortitude of Dubai International Airport.pdf
Rising Above_ Dubai Floods and the Fortitude of Dubai International Airport.pdfRising Above_ Dubai Floods and the Fortitude of Dubai International Airport.pdf
Rising Above_ Dubai Floods and the Fortitude of Dubai International Airport.pdfOrbitshub
 
Navigating the Deluge_ Dubai Floods and the Resilience of Dubai International...
Navigating the Deluge_ Dubai Floods and the Resilience of Dubai International...Navigating the Deluge_ Dubai Floods and the Resilience of Dubai International...
Navigating the Deluge_ Dubai Floods and the Resilience of Dubai International...Orbitshub
 
MINDCTI Revenue Release Quarter One 2024
MINDCTI Revenue Release Quarter One 2024MINDCTI Revenue Release Quarter One 2024
MINDCTI Revenue Release Quarter One 2024MIND CTI
 
Apidays New York 2024 - The value of a flexible API Management solution for O...
Apidays New York 2024 - The value of a flexible API Management solution for O...Apidays New York 2024 - The value of a flexible API Management solution for O...
Apidays New York 2024 - The value of a flexible API Management solution for O...apidays
 
Platformless Horizons for Digital Adaptability
Platformless Horizons for Digital AdaptabilityPlatformless Horizons for Digital Adaptability
Platformless Horizons for Digital AdaptabilityWSO2
 
FWD Group - Insurer Innovation Award 2024
FWD Group - Insurer Innovation Award 2024FWD Group - Insurer Innovation Award 2024
FWD Group - Insurer Innovation Award 2024The Digital Insurer
 
How to Troubleshoot Apps for the Modern Connected Worker
How to Troubleshoot Apps for the Modern Connected WorkerHow to Troubleshoot Apps for the Modern Connected Worker
How to Troubleshoot Apps for the Modern Connected WorkerThousandEyes
 
TrustArc Webinar - Unlock the Power of AI-Driven Data Discovery
TrustArc Webinar - Unlock the Power of AI-Driven Data DiscoveryTrustArc Webinar - Unlock the Power of AI-Driven Data Discovery
TrustArc Webinar - Unlock the Power of AI-Driven Data DiscoveryTrustArc
 
presentation ICT roal in 21st century education
presentation ICT roal in 21st century educationpresentation ICT roal in 21st century education
presentation ICT roal in 21st century educationjfdjdjcjdnsjd
 
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
 
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
 
Apidays New York 2024 - The Good, the Bad and the Governed by David O'Neill, ...
Apidays New York 2024 - The Good, the Bad and the Governed by David O'Neill, ...Apidays New York 2024 - The Good, the Bad and the Governed by David O'Neill, ...
Apidays New York 2024 - The Good, the Bad and the Governed by David O'Neill, ...apidays
 

Dernier (20)

Modular Monolith - a Practical Alternative to Microservices @ Devoxx UK 2024
Modular Monolith - a Practical Alternative to Microservices @ Devoxx UK 2024Modular Monolith - a Practical Alternative to Microservices @ Devoxx UK 2024
Modular Monolith - a Practical Alternative to Microservices @ Devoxx UK 2024
 
Repurposing LNG terminals for Hydrogen Ammonia: Feasibility and Cost Saving
Repurposing LNG terminals for Hydrogen Ammonia: Feasibility and Cost SavingRepurposing LNG terminals for Hydrogen Ammonia: Feasibility and Cost Saving
Repurposing LNG terminals for Hydrogen Ammonia: Feasibility and Cost Saving
 
Finding Java's Hidden Performance Traps @ DevoxxUK 2024
Finding Java's Hidden Performance Traps @ DevoxxUK 2024Finding Java's Hidden Performance Traps @ DevoxxUK 2024
Finding Java's Hidden Performance Traps @ DevoxxUK 2024
 
Architecting Cloud Native Applications
Architecting Cloud Native ApplicationsArchitecting Cloud Native Applications
Architecting Cloud Native Applications
 
DEV meet-up UiPath Document Understanding May 7 2024 Amsterdam
DEV meet-up UiPath Document Understanding May 7 2024 AmsterdamDEV meet-up UiPath Document Understanding May 7 2024 Amsterdam
DEV meet-up UiPath Document Understanding May 7 2024 Amsterdam
 
+971581248768>> SAFE AND ORIGINAL ABORTION PILLS FOR SALE IN DUBAI AND ABUDHA...
+971581248768>> SAFE AND ORIGINAL ABORTION PILLS FOR SALE IN DUBAI AND ABUDHA...+971581248768>> SAFE AND ORIGINAL ABORTION PILLS FOR SALE IN DUBAI AND ABUDHA...
+971581248768>> SAFE AND ORIGINAL ABORTION PILLS FOR SALE IN DUBAI AND ABUDHA...
 
Apidays New York 2024 - Accelerating FinTech Innovation by Vasa Krishnan, Fin...
Apidays New York 2024 - Accelerating FinTech Innovation by Vasa Krishnan, Fin...Apidays New York 2024 - Accelerating FinTech Innovation by Vasa Krishnan, Fin...
Apidays New York 2024 - Accelerating FinTech Innovation by Vasa Krishnan, Fin...
 
Biography Of Angeliki Cooney | Senior Vice President Life Sciences | Albany, ...
Biography Of Angeliki Cooney | Senior Vice President Life Sciences | Albany, ...Biography Of Angeliki Cooney | Senior Vice President Life Sciences | Albany, ...
Biography Of Angeliki Cooney | Senior Vice President Life Sciences | Albany, ...
 
Rising Above_ Dubai Floods and the Fortitude of Dubai International Airport.pdf
Rising Above_ Dubai Floods and the Fortitude of Dubai International Airport.pdfRising Above_ Dubai Floods and the Fortitude of Dubai International Airport.pdf
Rising Above_ Dubai Floods and the Fortitude of Dubai International Airport.pdf
 
Navigating the Deluge_ Dubai Floods and the Resilience of Dubai International...
Navigating the Deluge_ Dubai Floods and the Resilience of Dubai International...Navigating the Deluge_ Dubai Floods and the Resilience of Dubai International...
Navigating the Deluge_ Dubai Floods and the Resilience of Dubai International...
 
MINDCTI Revenue Release Quarter One 2024
MINDCTI Revenue Release Quarter One 2024MINDCTI Revenue Release Quarter One 2024
MINDCTI Revenue Release Quarter One 2024
 
Apidays New York 2024 - The value of a flexible API Management solution for O...
Apidays New York 2024 - The value of a flexible API Management solution for O...Apidays New York 2024 - The value of a flexible API Management solution for O...
Apidays New York 2024 - The value of a flexible API Management solution for O...
 
Platformless Horizons for Digital Adaptability
Platformless Horizons for Digital AdaptabilityPlatformless Horizons for Digital Adaptability
Platformless Horizons for Digital Adaptability
 
FWD Group - Insurer Innovation Award 2024
FWD Group - Insurer Innovation Award 2024FWD Group - Insurer Innovation Award 2024
FWD Group - Insurer Innovation Award 2024
 
How to Troubleshoot Apps for the Modern Connected Worker
How to Troubleshoot Apps for the Modern Connected WorkerHow to Troubleshoot Apps for the Modern Connected Worker
How to Troubleshoot Apps for the Modern Connected Worker
 
TrustArc Webinar - Unlock the Power of AI-Driven Data Discovery
TrustArc Webinar - Unlock the Power of AI-Driven Data DiscoveryTrustArc Webinar - Unlock the Power of AI-Driven Data Discovery
TrustArc Webinar - Unlock the Power of AI-Driven Data Discovery
 
presentation ICT roal in 21st century education
presentation ICT roal in 21st century educationpresentation ICT roal in 21st century education
presentation ICT roal in 21st century education
 
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
 
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...
 
Apidays New York 2024 - The Good, the Bad and the Governed by David O'Neill, ...
Apidays New York 2024 - The Good, the Bad and the Governed by David O'Neill, ...Apidays New York 2024 - The Good, the Bad and the Governed by David O'Neill, ...
Apidays New York 2024 - The Good, the Bad and the Governed by David O'Neill, ...
 

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