SlideShare ist ein Scribd-Unternehmen logo
1 von 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

Weitere ähnliche Inhalte

Was ist angesagt?

Sitecore JSS & Helix principles in a real project
Sitecore JSS & Helix principles in a real projectSitecore JSS & Helix principles in a real project
Sitecore JSS & Helix principles in a real projectValiantsin Shendzerau
 
DATABASE & WEBGIS - GIS BOOTCAMP
DATABASE & WEBGIS - GIS BOOTCAMPDATABASE & WEBGIS - GIS BOOTCAMP
DATABASE & WEBGIS - GIS BOOTCAMPKevin Ng'eno
 
IBM Maximo Product Roadmap 2016
IBM Maximo Product Roadmap 2016IBM Maximo Product Roadmap 2016
IBM Maximo Product Roadmap 2016Helen Fisher
 
Introdução ao GeoServer 2.0
Introdução ao GeoServer 2.0Introdução ao GeoServer 2.0
Introdução ao GeoServer 2.0Fernando Quadro
 
Web development presentation
Web development presentationWeb development presentation
Web development presentationVaishnavi8950
 
Content management system
Content management systemContent management system
Content management systemAdhoura Academy
 
Elk devops
Elk devopsElk devops
Elk devopsIdeato
 
Front-End Frameworks: a quick overview
Front-End Frameworks: a quick overviewFront-End Frameworks: a quick overview
Front-End Frameworks: a quick overviewDiacode
 
Developing Efficient Web-based GIS Applications
Developing Efficient Web-based GIS ApplicationsDeveloping Efficient Web-based GIS Applications
Developing Efficient Web-based GIS ApplicationsSwetha A
 
Open Source GIS
Open Source GISOpen Source GIS
Open Source GISJoe Larson
 
Introduction to WebGIS- Esri norsk BK 2014
Introduction to WebGIS- Esri norsk BK 2014Introduction to WebGIS- Esri norsk BK 2014
Introduction to WebGIS- Esri norsk BK 2014Geodata AS
 
Understanding MicroSERVICE Architecture with Java & Spring Boot
Understanding MicroSERVICE Architecture with Java & Spring BootUnderstanding MicroSERVICE Architecture with Java & Spring Boot
Understanding MicroSERVICE Architecture with Java & Spring BootKashif Ali Siddiqui
 
Hands on With Advanced Data Grid
Hands on With Advanced Data GridHands on With Advanced Data Grid
Hands on With Advanced Data GridOutSystems
 
Crossrail - Big Maps for a Big Project - Smart Infrastructure - Esri UK Annua...
Crossrail - Big Maps for a Big Project - Smart Infrastructure - Esri UK Annua...Crossrail - Big Maps for a Big Project - Smart Infrastructure - Esri UK Annua...
Crossrail - Big Maps for a Big Project - Smart Infrastructure - Esri UK Annua...Esri UK
 
Working with arcgis online
Working with arcgis onlineWorking with arcgis online
Working with arcgis onlinezmmin383
 

Was ist angesagt? (20)

Sitecore JSS & Helix principles in a real project
Sitecore JSS & Helix principles in a real projectSitecore JSS & Helix principles in a real project
Sitecore JSS & Helix principles in a real project
 
DATABASE & WEBGIS - GIS BOOTCAMP
DATABASE & WEBGIS - GIS BOOTCAMPDATABASE & WEBGIS - GIS BOOTCAMP
DATABASE & WEBGIS - GIS BOOTCAMP
 
Prometheus with Grafana - AddWeb Solution
Prometheus with Grafana - AddWeb SolutionPrometheus with Grafana - AddWeb Solution
Prometheus with Grafana - AddWeb Solution
 
Web GIS using Google Map and QGIS
Web GIS using Google Map and QGISWeb GIS using Google Map and QGIS
Web GIS using Google Map and QGIS
 
IBM Maximo Product Roadmap 2016
IBM Maximo Product Roadmap 2016IBM Maximo Product Roadmap 2016
IBM Maximo Product Roadmap 2016
 
Introdução ao GeoServer 2.0
Introdução ao GeoServer 2.0Introdução ao GeoServer 2.0
Introdução ao GeoServer 2.0
 
Web development presentation
Web development presentationWeb development presentation
Web development presentation
 
Map design in GIS
Map design in GISMap design in GIS
Map design in GIS
 
Content management system
Content management systemContent management system
Content management system
 
Elk devops
Elk devopsElk devops
Elk devops
 
Front-End Frameworks: a quick overview
Front-End Frameworks: a quick overviewFront-End Frameworks: a quick overview
Front-End Frameworks: a quick overview
 
Developing Efficient Web-based GIS Applications
Developing Efficient Web-based GIS ApplicationsDeveloping Efficient Web-based GIS Applications
Developing Efficient Web-based GIS Applications
 
Open Source GIS
Open Source GISOpen Source GIS
Open Source GIS
 
What is GIS?
What is GIS?What is GIS?
What is GIS?
 
Introduction to WebGIS- Esri norsk BK 2014
Introduction to WebGIS- Esri norsk BK 2014Introduction to WebGIS- Esri norsk BK 2014
Introduction to WebGIS- Esri norsk BK 2014
 
Understanding MicroSERVICE Architecture with Java & Spring Boot
Understanding MicroSERVICE Architecture with Java & Spring BootUnderstanding MicroSERVICE Architecture with Java & Spring Boot
Understanding MicroSERVICE Architecture with Java & Spring Boot
 
Hands on With Advanced Data Grid
Hands on With Advanced Data GridHands on With Advanced Data Grid
Hands on With Advanced Data Grid
 
1 QGIS intro
1 QGIS intro1 QGIS intro
1 QGIS intro
 
Crossrail - Big Maps for a Big Project - Smart Infrastructure - Esri UK Annua...
Crossrail - Big Maps for a Big Project - Smart Infrastructure - Esri UK Annua...Crossrail - Big Maps for a Big Project - Smart Infrastructure - Esri UK Annua...
Crossrail - Big Maps for a Big Project - Smart Infrastructure - Esri UK Annua...
 
Working with arcgis online
Working with arcgis onlineWorking with arcgis online
Working with arcgis online
 

Ähnlich wie 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
 

Ähnlich wie 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
 

Kürzlich hochgeladen

Dev Dives: Streamline document processing with UiPath Studio Web
Dev Dives: Streamline document processing with UiPath Studio WebDev Dives: Streamline document processing with UiPath Studio Web
Dev Dives: Streamline document processing with UiPath Studio WebUiPathCommunity
 
Tampa BSides - Chef's Tour of Microsoft Security Adoption Framework (SAF)
Tampa BSides - Chef's Tour of Microsoft Security Adoption Framework (SAF)Tampa BSides - Chef's Tour of Microsoft Security Adoption Framework (SAF)
Tampa BSides - Chef's Tour of Microsoft Security Adoption Framework (SAF)Mark Simos
 
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
 
Ensuring Technical Readiness For Copilot in Microsoft 365
Ensuring Technical Readiness For Copilot in Microsoft 365Ensuring Technical Readiness For Copilot in Microsoft 365
Ensuring Technical Readiness For Copilot in Microsoft 3652toLead Limited
 
Scanning the Internet for External Cloud Exposures via SSL Certs
Scanning the Internet for External Cloud Exposures via SSL CertsScanning the Internet for External Cloud Exposures via SSL Certs
Scanning the Internet for External Cloud Exposures via SSL CertsRizwan Syed
 
Advanced Computer Architecture – An Introduction
Advanced Computer Architecture – An IntroductionAdvanced Computer Architecture – An Introduction
Advanced Computer Architecture – An IntroductionDilum Bandara
 
DevEX - reference for building teams, processes, and platforms
DevEX - reference for building teams, processes, and platformsDevEX - reference for building teams, processes, and platforms
DevEX - reference for building teams, processes, and platformsSergiu Bodiu
 
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
 
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
 
From Family Reminiscence to Scholarly Archive .
From Family Reminiscence to Scholarly Archive .From Family Reminiscence to Scholarly Archive .
From Family Reminiscence to Scholarly Archive .Alan Dix
 
Connect Wave/ connectwave Pitch Deck Presentation
Connect Wave/ connectwave Pitch Deck PresentationConnect Wave/ connectwave Pitch Deck Presentation
Connect Wave/ connectwave Pitch Deck PresentationSlibray Presentation
 
New from BookNet Canada for 2024: BNC CataList - Tech Forum 2024
New from BookNet Canada for 2024: BNC CataList - Tech Forum 2024New from BookNet Canada for 2024: BNC CataList - Tech Forum 2024
New from BookNet Canada for 2024: BNC CataList - Tech Forum 2024BookNet Canada
 
DevoxxFR 2024 Reproducible Builds with Apache Maven
DevoxxFR 2024 Reproducible Builds with Apache MavenDevoxxFR 2024 Reproducible Builds with Apache Maven
DevoxxFR 2024 Reproducible Builds with Apache MavenHervé Boutemy
 
Commit 2024 - Secret Management made easy
Commit 2024 - Secret Management made easyCommit 2024 - Secret Management made easy
Commit 2024 - Secret Management made easyAlfredo García Lavilla
 
Take control of your SAP testing with UiPath Test Suite
Take control of your SAP testing with UiPath Test SuiteTake control of your SAP testing with UiPath Test Suite
Take control of your SAP testing with UiPath Test SuiteDianaGray10
 
Developer Data Modeling Mistakes: From Postgres to NoSQL
Developer Data Modeling Mistakes: From Postgres to NoSQLDeveloper Data Modeling Mistakes: From Postgres to NoSQL
Developer Data Modeling Mistakes: From Postgres to NoSQLScyllaDB
 
DSPy a system for AI to Write Prompts and Do Fine Tuning
DSPy a system for AI to Write Prompts and Do Fine TuningDSPy a system for AI to Write Prompts and Do Fine Tuning
DSPy a system for AI to Write Prompts and Do Fine TuningLars Bell
 
Unleash Your Potential - Namagunga Girls Coding Club
Unleash Your Potential - Namagunga Girls Coding ClubUnleash Your Potential - Namagunga Girls Coding Club
Unleash Your Potential - Namagunga Girls Coding ClubKalema Edgar
 
A Deep Dive on Passkeys: FIDO Paris Seminar.pptx
A Deep Dive on Passkeys: FIDO Paris Seminar.pptxA Deep Dive on Passkeys: FIDO Paris Seminar.pptx
A Deep Dive on Passkeys: FIDO Paris Seminar.pptxLoriGlavin3
 

Kürzlich hochgeladen (20)

Dev Dives: Streamline document processing with UiPath Studio Web
Dev Dives: Streamline document processing with UiPath Studio WebDev Dives: Streamline document processing with UiPath Studio Web
Dev Dives: Streamline document processing with UiPath Studio Web
 
Tampa BSides - Chef's Tour of Microsoft Security Adoption Framework (SAF)
Tampa BSides - Chef's Tour of Microsoft Security Adoption Framework (SAF)Tampa BSides - Chef's Tour of Microsoft Security Adoption Framework (SAF)
Tampa BSides - Chef's Tour of Microsoft Security Adoption Framework (SAF)
 
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
 
Ensuring Technical Readiness For Copilot in Microsoft 365
Ensuring Technical Readiness For Copilot in Microsoft 365Ensuring Technical Readiness For Copilot in Microsoft 365
Ensuring Technical Readiness For Copilot in Microsoft 365
 
Scanning the Internet for External Cloud Exposures via SSL Certs
Scanning the Internet for External Cloud Exposures via SSL CertsScanning the Internet for External Cloud Exposures via SSL Certs
Scanning the Internet for External Cloud Exposures via SSL Certs
 
Advanced Computer Architecture – An Introduction
Advanced Computer Architecture – An IntroductionAdvanced Computer Architecture – An Introduction
Advanced Computer Architecture – An Introduction
 
DevEX - reference for building teams, processes, and platforms
DevEX - reference for building teams, processes, and platformsDevEX - reference for building teams, processes, and platforms
DevEX - reference for building teams, processes, and platforms
 
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
 
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
 
From Family Reminiscence to Scholarly Archive .
From Family Reminiscence to Scholarly Archive .From Family Reminiscence to Scholarly Archive .
From Family Reminiscence to Scholarly Archive .
 
Connect Wave/ connectwave Pitch Deck Presentation
Connect Wave/ connectwave Pitch Deck PresentationConnect Wave/ connectwave Pitch Deck Presentation
Connect Wave/ connectwave Pitch Deck Presentation
 
New from BookNet Canada for 2024: BNC CataList - Tech Forum 2024
New from BookNet Canada for 2024: BNC CataList - Tech Forum 2024New from BookNet Canada for 2024: BNC CataList - Tech Forum 2024
New from BookNet Canada for 2024: BNC CataList - Tech Forum 2024
 
DevoxxFR 2024 Reproducible Builds with Apache Maven
DevoxxFR 2024 Reproducible Builds with Apache MavenDevoxxFR 2024 Reproducible Builds with Apache Maven
DevoxxFR 2024 Reproducible Builds with Apache Maven
 
Commit 2024 - Secret Management made easy
Commit 2024 - Secret Management made easyCommit 2024 - Secret Management made easy
Commit 2024 - Secret Management made easy
 
Take control of your SAP testing with UiPath Test Suite
Take control of your SAP testing with UiPath Test SuiteTake control of your SAP testing with UiPath Test Suite
Take control of your SAP testing with UiPath Test Suite
 
DMCC Future of Trade Web3 - Special Edition
DMCC Future of Trade Web3 - Special EditionDMCC Future of Trade Web3 - Special Edition
DMCC Future of Trade Web3 - Special Edition
 
Developer Data Modeling Mistakes: From Postgres to NoSQL
Developer Data Modeling Mistakes: From Postgres to NoSQLDeveloper Data Modeling Mistakes: From Postgres to NoSQL
Developer Data Modeling Mistakes: From Postgres to NoSQL
 
DSPy a system for AI to Write Prompts and Do Fine Tuning
DSPy a system for AI to Write Prompts and Do Fine TuningDSPy a system for AI to Write Prompts and Do Fine Tuning
DSPy a system for AI to Write Prompts and Do Fine Tuning
 
Unleash Your Potential - Namagunga Girls Coding Club
Unleash Your Potential - Namagunga Girls Coding ClubUnleash Your Potential - Namagunga Girls Coding Club
Unleash Your Potential - Namagunga Girls Coding Club
 
A Deep Dive on Passkeys: FIDO Paris Seminar.pptx
A Deep Dive on Passkeys: FIDO Paris Seminar.pptxA Deep Dive on Passkeys: FIDO Paris Seminar.pptx
A Deep Dive on Passkeys: FIDO Paris Seminar.pptx
 

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