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

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.


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.

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).

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.


Below you can see some layer class.

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)


Demo

ArcGISTiledMapServiceLayer

var tiledMapServiceLayer;
tiledMapServiceLayer = new esri.layers.ArcGISTiledMapServiceLayer(url);
map.addLayer(tiledMapServiceLayer);

The code above add a tiled cached map (return a static map).

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).

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 }
);

The code above perform a query on a DynamicLayer (return a dynamic map).

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));

The code above perform a query on a FutureLayer.
You can perform operation as: query, create, update, delete (are interactive).

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.


You can download the demo code at this link: http://sdrv.ms/UGlW0p

There is also a video on YouTube: http://youtu.be/2IV29O0dW2M

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

Related slideshows

More Related Content

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