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. Whit this ArcGIS you can build a html5/javascript mapping applications and the api allows you to easily embed maps in your web pages. An ArcGIS application utilizes a layer-based (TiledLayer, DynamicLayer, FeatureLayer, etc...) geographic information model for characterizing and describing our world. An ArcGIS application asks what it need, through a http/rest service (the service will return images or json data - for example) hosted on the ArcGIS server. In this simple html5/javascript demo project (http://sdrv.ms/UGlW0p) you can find five examples that show the basic functionality of the mapping framework "ArcGIS API for JavaScript" (will be shown the basic functionality of the ArcGIS classes layer). You can download the demo code at this link: http://sdrv.ms/UGlW0p - There is also a video on YouTube: http://youtu.be/2IV29O0dW2M
React Native vs Ionic - The Best Mobile App Framework
ArcGIS JavaScript API (build a web layer-based map application with html5 and javascript)
1. ArcGis API for JavaScript
Welcome to "ArcGIS API for JavaScript" demo application
2. ArcGIS API for JavaScript
The ArcGIS api for JavaScript is a browser based api for developing high
performance mapping applications and the api allows you to easily embed
maps in your web pages. An ArcGIS application utilizes a layer-based
geographic information model for characterizing and describing our world.
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)
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.
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