ArcGIS API for Javascript Tutorial

ArcGIS API for JavaScript
Mohammed Mahmoud


ArcGIS API for Javascript
 ArcGIS API for Javascript is a comprehensive
application programming interface with classes
designed for Web GIS purposes, many of
which are built on Dojo.


Adding a Map to the Web
Application


Adding a Map to the Web
Application
 Every application that you create with the API for
JavaScript will need to follow each of these steps.
 The creation of a map and adding layers to the map
is part of this fundamental process of creating an
application.
 create an instance of the Map class, add layers of
data to the map, and display this information on a
web page.
 When creating a Map you can supply various
parameters that control the initial extent of the
display, the spatial reference, levels of detail, and
others.


Step 1
 Create Basic HTML page
<!DOCTYPE html>
<html>
<head>
<title> Display Map </title>
</head>
<body>
</body>
</html


Step 2
 Reference the ArcGIS Server API for JavaScript.
 Within head tag add the following code:
<head>
<title> Display Map </title>
<link rel="stylesheet"
href="https://js.arcgis.com/3.14/esri/css/esri.css">
<script src="https://js.arcgis.com/3.14/"></script>
</head>


Step 3
 Create a container for your map.
 Within body tag add div element.
<body>
<div id="map" width="600" height="400"></div>
</body>


Step 4
 Create an initialization script that creates an instance
of Map.
 Within head tag Create script tag and inside script tag
create the map recourse.
<script type="text/javascript">
dojo.require("esri.map");
</script>


Step 5
 Create initialize function.
 Within initialize function create map object.
 Call the initialize function on page load dojo.addOnLoad()
or dojo.ready().
function init()
{
map = new esri.Map("mapDiv");
}
dojo.addOnLoad(init);
</script>


Step 6
 Add layers to the map object.
 Create dynamic map layer .
 Add created layer to the map object.
function init()
{
layer = new esri.layers.ArcGISDynamicMapServiceLayer
("http://localhost:6080/arcgis/rest/services/MyServices/FileGeodatabaseMap/MapServer");
map.addLayer(layer);
}

ArcGIS API for Javascript Tutorial


Install ArcGIS API for
JavaScript locally
 Most organizations don't allow Internet access on their
servers for security reasons, they run everything off
the intranet.
 In this case, the online mode for JavaScript API
development will not be of use. There is a way to
download the ArcGIS JavaScript API library and
reference it on your websites;


Install ArcGIS API for
JavaScript locally
 Before you start, make sure you install web server
program for example IIS.
 You can download ArcGIS API for Javascript from
ArcGIS for Developer Website. This require an ESRI
account.
 Extract all the files from compressed file, and Copy the
folder arcgis_js_api to c:inetpubwwwroot, follow the
installation steps than included with library.
 then open your text editor and write the same code you
used in online mode. We will make a slight change to the
reference: we will point to the library we just copied to
our web server.

<!DOCTYPE html>
<html>
<head>
<title> DISPLAY MAP </title>
href="http://localhost/arcgis_js_api/library/3.14/3.14/esri/css/esri.css"/>
<script type="text/javascript"
src="http://localhost/arcgis_js_api/library/3.14/3.14/init.js">
</script>
var map ;
var layer ;
function init()
{
layer = new esri.layers.ArcGISDynamicMapServiceLayer
("http://localhost:6080/arcgis/rest/services/FileGDBMap/MapServer");
}
</script>
</head>
<body>
<div id="mapDiv" width="600" height="400"></div>
</body>
</html>


Map Service Layer


Working with Map Service Layer
 There are two primary types of map services
that provide data layers that can be added to
your map: dynamic map service layers and tiled
map service layers.


Dynamic Map Service Layer
 Dynamic map service layers reference map
services that create a map image on the fly
and then return the image to the application.
 This type of map service may be composed of
one or more layers of information.
 https://sampleserver6.arcgisonline.com/arcg
is/rest/services


Tiled Map Service Layer
 The easiest way to understand the concept of
tiled map services is to think about a grid that
has been draped across the surface of a map.
 Each cell within the grid has the same size and
will be used to cut the map into individual
image files called tiles.
 The individual tiles are stored as image files
on a server and retrieved as necessary
depending upon the map extent and scale.


Tiled Map Service Layer
 These tiled, or cached, map layers are often used
as base maps including imagery, street maps,
topographic maps, and others.
 Tiled map services tend to display somewhat
faster since they don’t have the overhead of
creating images on the fly each time there is a
request for a map.
 Operational layers are then draped on top of the
tiled base maps and these are often dynamic
layers. While they can be somewhat slower in
terms of performance, dynamic map service layers
have the advantage of being able to define their
appearance on the fly.


OpenStreetMap
 The VETiledLayer and OpenMapStreetLayer
classes are used to load a Bing Maps or Open
Street Map layers respectively.
 The tilesets for these layers are not pulled
from an ArcGIS Server instance but rather
servers hosted by Microsoft and Open Street
Map.
 The Map.addLayer() method takes an instance
of a layer (ArcGISDynamicMapServiceLayer
or ArcGISTiledMapServiceLayer) as
parameter.

<!DOCTYPE html>
<html>
<head>
</script>
var map ;
var layer ;
function init()
{
osmLayer = new esri.layers.OpenStreetMapLayer();
map.addLayer(osmLayer);
}
</script>
</head>
<body>
</body>
</html>


Getting and Setting the Map
Extent
 One of the first things you’ll want to master is
getting and setting the map extent.
 By default the initial extent of a map within your
application is the extent of the map when it was
last saved in the map document file (.mxd) used to
create the map service.
 In some cases this may be exactly what you want,
but in the event that you need to set a map extent
other than the default you have several options.
The first and easiest method of setting the initial
map extent is to specify the coordinates directly
in the constructor for the Map object.


Extent
 To set the initial extent in the constructor you
simply specify an extent and use this extent
as an option in the Map constructor.
function init()
{
var initExtent = new esri.geometry.Extent({
"xmin": 30, "ymin": 14,
"xmax": 32,"ymax":16});
map = new esri.Map("mapDiv", {extent:initExtent});
}


Extent
 Rather than setting the initial extent through
the constructor you could use the
Map.setExtent method seen in the code
example below.
function init()
{
"xmin": 30, "ymin": 14,
"xmax": 32,"ymax":16});
map.setExtent(initExtent);
}


Setting the Visible Layers from
a Map Service
 You can control the visibility of individual
layers within a dynamic map service layer using
the setVisibleLayers() method.
 This only applies to dynamic map service
layers, not tiled map service layers. This
method takes an array of integers
corresponding to the data layers in the map
service.


Setting the Visible Layers from
a Map Service
 This array is 0 based, so the first layer in the
map service occupies position 0.
osmLayer.setVisibleLayers([0,1]);


Setting a Definition Expression
 In ArcGIS Desktop you can use a Definition Expression
to limit the features in a data layer that will be
displayed.
 A definition expression is simply a SQL query against
the columns and rows in a layer.
 Only the features whose attributes meet the query are
displayed. For example, if you only wanted to display
cities with a population greater than 1 million the
expression would be something like “Total_Pop >
1000000”.
 The ArcGIS Server API for JavaScript contains a
setLayerDefinitions( ) method that accepts an array of
definitions that can be applied against
ArcGISDynamicMapServiceLayer to control the display
of features in the resulting map.


Setting a Definition Expression
 In ArcGIS Desktop you can use a Definition
Expression to limit the features in a data layer
that will be displayed.
var layerDefinition = [];
layerDefinition[0] = "Total_Pop > 500000";
layer.setLayerDefinitions(layerDefinition);


Handling Events
ArcGIS API for Java Script


Handling Events
 events are actions that take place within an
application. Normally these events are
triggered by the end user and can include
things like mouse clicks, mouse drags,
keyboard actions, and others, but can also
include the sending and receiving of data,
component modification, and others.
 The dojo.connect() method is used to connect
events that happen in your application to the
code that will run in response to these events.


Connecting Events to Handlers
 As you’ll recall, the ArcGIS Server JavaScript
API is built on top of Dojo. With Dojo, events
are registered to handlers through the
dojo.connect() method.
 This method takes three parameters. Let’s
take a look at the code below to get a better
understanding of how events are registered.


Connecting Events to Handlers
 We call the dojo.connect() method with
parameters including ‘map’, ‘onMouseMove’, and
‘showCoordinates’.
 The first two parameters indicate the object and
the event that we would like to register.
 In this case that means we are registering the
‘onMouseMove’ event found on the Map object.
 This event is fired every time the mouse moves
within the confines of the map.
 The final parameter, ‘showCoordinates’, indicates
the listener that we are registering this event
with.


Passing Information to an Event
 Information is passed into the events in the
form of parameters. For instance, the
Map.onClick(event) event is passed an Event
object which contains information specific to
the event that has occurred.
 These Event objects are dynamic in that they
contain different information depending upon
the event that was fired. For instance, the
Event object passed into Map.onClick()
contains information about the x , y location of
the point that was clicked on the map.

<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="http://localhost/arcgis_js_api/library/3.14/3.14/init.js">
</script>
function init()
{
"xmin": 30, "ymin": 14,"xmax": 32,"ymax":16});
map = new esri.Map("mapDiv" , {logo:false});
map.setExtent(initExtent);
dojo.connect(map , "onMouseMove" , showCoordinate);
}
function showCoordinate(evt)
{
dojo.byId("coord").innerHTML = evt.mapPoint.x + " __ " + evt.mapPoint.y;
}
</script>
</head>
<body>
<div id="coord" width="600" height="400"></div>
</body>
</html>


Common ArcGIS Server API for
JavaScript Events
 Map.onLoad and Map.onUnload: The Map.onLoad() event
is fired after an initial layer has been added to the map.
 Map Events Related to Clicking the Map: The
Map.onClick() and Map.onDblClick() events are fired when
the user clicks or double clicks the map
 Map Events Related to Layers: Events related to layers
include Map.onLayerAdd(), Map.onLayerRemove(),
Map.onLayerReorder(), Map.onLayersRemoved(), and a few
others.
 Map Events Related to the Mouse: the more commonly
used mouse events include onMouseDown, onMouseUp,
onMouseOver, onMouseDrag, onMouseWheel, and several
others.
 Zoom and Pan Events: These events include
onExtentChange(), onPanStart(), onPan(), onPanEnd(),
onZoomStart(), onZoom(), and onZoomEnd().


Feature Layer


 The ArcGIS API for JavaScript offers a feature
layer for working with client-side graphic
features.
 The feature layer inherits from the graphics
layer, but offers additional capabilities such as
the ability to perform queries and selections.
Feature layers are also used for Web editing.
 Feature layers differ from tiled and dynamic map
service layers because feature layers bring
geometry information down to the client computer
to be drawn by the Web browser.
Feature Layer


 Using a feature layer, you can access related
tables, perform queries, display time slices, work
with feature attachments, and do various other
useful things.
 Feature layers are especially appropriate for
layers that respond to user interaction, such as a
mouse click or hover.
Feature Layer


 The initial creation of a feature layer
also requires that a display mode be
selected.
 Display modes include snapshot
mode, on-demand mode, and selection
only mode. The mode specifies how
and when features are transported
from the server to the client
browser.
Selection Mode


 Snapshot mode retrieves all features from the layer
when it is added to the map so you need to carefully
consider the size of your layer before using this mode.
 Generally you will want to use this mode only with small
datasets.
 Large datasets in snapshot mode can significantly
degrade the performance of your application.
 The benefit of snapshot mode is that since all
features from the layer are returned to the client
there is no need to return to the server for additional
data.
Snapshot


 On demand mode retrieves features only as
needed.
 Essentially this means that only the features in
the current map extent are returned to the
client.
 As the user navigates to other areas through
zoom or pan operations a new set of features is
retrieved from the server and streamed to the
client.
On Demand


 Selection only mode does not initially retrieve
features from the server. Instead, features are
returned only when a selection is made on the
client.
 Selected features are streamed to the client
from the server when features are selected.
These selected features are then held on the
client.
Selection Mode


 The constructor for FeatureLayer accepts two
parameters layer Url and options such as the
display mode, output fields, info template, and
others.
Create Feature Layer
var fLayer = new esri.layers.FeatureLayer(layer_url , {options});

<html>
<head>
<title> FEATURE LAYER </title>
<link rel="stylesheet" href="http://localhost/arcgis_js_api/library/3.14/3.14/esri/css/esri.css"/>
</script>
function init()
{
osm = new esri.layers.ArcGISDynamicMapServiceLayer(
"https://sampleserver6.arcgisonline.com/arcgis/rest/services/911CallsHotspot/MapServer");
map.addLayer(osm);
var info_contents = "DATE:${Date}";
var info = new esri.InfoTemplate("${CALL_TYPE}" , info_contents);
var fLayer = new esri.layers.FeatureLayer(
"https://sampleserver6.arcgisonline.com/arcgis/rest/services/911CallsHotspot/MapServer/1" ,
{
mode:esri.layers.FeatureLayer.MODE_ONDEMAND,
outFields:["*"], infoTemplate: info
});
map.addLayer(fLayer);
}
</script>
</head>
<body>
<div id="mapDiv" width="100%" height="400"></div>
</body>
</html>


 Add the Localities layer to your map as
FeatureLayer.
 Show the Loc_Eng and Total_Pop in InfoTemplate
Exercise


Graphic Layer


Graphic Layer
 In addition to traditional map service layers exposed by
ArcGIS Server an application can also draw point, line,
and polygon graphics in a separate layer on the map.
This layer, called a GraphicsLayer, stores all graphics
associated with your map.
 Graphics are displayed on top of any other layers that
are present in an application. These graphics can be
created by users or drawn by the application as results
of tasks that have been submitted to ArcGIS Server.
 Many ArcGIS Server tasks return their results as
graphics. The Query Task can perform both attribute
and spatial queries. The results of a query are then
returned to the application in the form of a FeatureSet
object which is simply an array of graphics.


The Four Parts of a Graphic
 The Four Parts of a Graphic


Creating Geometry for Graphics
 Graphics will almost always have a geometry
component which is necessary for placement on the
map.
 These geometry objects can be points, multi-
points, polylines, polygons.
 Before creating any of these geometry types the
esri.geometry resource needs to be imported.
 The geometry resource contains classes for
Geometry, Point, Multipoint, Polyline, Polygon, and
Extent.
dojo.require("esri.geometry");

osm = new esri.layers.OpenStreetMapLayer();
map.addLayer(osm);
var myPoint = new esri.geometry.Point(32 , 16);


Symbolizing Graphics
 Each graphic that you create can be symbolized through
one of the various symbol classes found in the API.
Point graphics are symbolized by the
SimpleMarkerSymbol class and the available shapes
include circle, cross, diamond, square, and X.
 It is also possible to symbolize your points through the
PictureMarkerSymbol class which uses an image to
display the graphic.
 Linear features are symbolized through the
SimpleLineSymbol class and can include solid lines,
dashes, dots, or a combination.
 Polygons are symbolized through the SimpleFillSymbol
class and can be solid, transparent, or cross hatch.

map.addLayer(osm);
var sym = new esri.symbol.SimpleMarkerSymbol();
sym.setSize(25);
sym.setColor(new dojo.Color([200 , 0 , 0 , 0.5]));


Assigning Attributes to Graphics
 The attributes of a graphic are the name value pairs
that describe that object.
 to assign the attributes in your code using the
Graphic.setAttributes() method.
sym.setSize(25);
graphic1 = new esri.Graphic(myPoint , sym);
graphic1.setAttributes({"NAME":"My Point", "DATE":“2016"});


Displaying Graphic Attributes in an
InfoTemplate
 In addition to attributes a graphic can also have an
InfoTemplate that defines how the attribute data is
displayed in a pop-up window, also known as an Info
Window.
graphic1.setAttributes({"NAME":"My Point", "DATE":"2016"});
var info = new esri.InfoTemplate("GeoCad");
graphic1.setInfoTemplate(info);
map.graphics.add(graphic1);

<!DOCTYPE html>
<html>
<head>
<title> GRAPHIC LAYER </title>
</script>
function init()
{
map.addLayer(osm);
sym.setSize(25);
graphic1.setAttributes({"NAME":"My Point", "DATE":"18-8-2016"});
var info = new esri.InfoTemplate("GeoCad");
graphic1.setInfoTemplate(info);
}
</script>
</head>
<body>
</body>
</html>

<!DOCTYPE html>
<html>
<head>
</script>
function init()
{
map.addLayer(osm);
var point1 = new esri.geometry.Point(22 , 16);
var point2 = new esri.geometry.Point(32 , 17);
var line = new esri.geometry.Polyline();
line.addPath([point1, point2]);
var lineSymbol = new esri.symbol.SimpleLineSymbol(new dojo.Color([255,0,0, 0.5]));
graphic1 = new esri.Graphic(line , lineSymbol);
}
</script>
</head>
<body>
</body>
</html>

<!DOCTYPE html>
<html>
<head>
</script>
function init()
{
map.addLayer(osm);
var polygon = new esri.geometry.Polygon();
var ring = [[0 , 0] , [0 , 5] , [5 , 5]];
polygon.addRing(ring);
var fillSymbol = new esri.symbol.SimpleFillSymbol();
fillSymbol.setColor(new dojo.Color([255 , 0 , 0 , 0.5]));
graphic1 = new esri.Graphic(polygon , fillSymbol);
}
</script>
</head>
<body>
</body>
</html>


Convert between webMercator and
Geographic Coordinates System
 ArcGIS API for JavaScript provide two Class
to convert between Geographic and Web
Mercator Coordinate System.
 geographicToWebMercator(): To convert from
Geographic To WebMercator.
 webMercatorToGeographic():To convert from
WebMercator to Geographic.
esri.geometry.webMercatorToGeographic();
esri.geometry.geographicToWebMercator();


 Create web page to display OpenStreetMap.
 Add event on map click “onClick”, since graphic
element added to the map when you click on the
map.
 Hint: it may be needed to use coordinate system
conversion.
Exercise


Toolbars


 As a GIS web application developer you want to
focus on building functionality specific to the
application you are constructing.
 Spending valuable time and effort adding basic
GIS functions such as zooming and panning to your
application detract from what should be your
primary focus.
 The ArcGIS API for JavaScript includes helper
classes for adding navigation and drawing toolbars
to your application.
Toolbars


 The ArcGIS API for JavaScript provides a
toolbar helper class called esri.toolbars.Navigation to
assist with accomplishing this task.
 In addition, the API also provides a class called
esri.toolbars.Draw to handle drawing tasks such
as lines and polygons.
Toolbars


 Create CSS style for buttons.
 Create toolbar.
 Create the button inside the toolbar.
 Define functionality for each button.
 Create instance of esri.toolbars.Navigation.
Create Navigation Toolbars


 The Navigation class contains a number of
constants and methods as seen bel ow.
Create Navigation Toolbars

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="Tutorial05_tools.css" />
src="http://localhost/arcgis_js_api/library/3.14/3.14/init.js"></script>
dojo.require("esri.toolbars.navigation");
var map ;
var navToolBar ;
function init()
{
map.addLayer(osm);
navToolBar = new esri.toolbars.Navigation(map);
}
</script>
</head>

<body>
<div id="tools" width="600" height="100">
<button id="full" onclick="navToolBar.zoomToFullExtent();">
Full Extent</button>
<button id="next" onclick="navToolBar.zoomToNextExtent();">
NEXT</button>
<button id="prev" onclick="navToolBar.zoomToPrevExtent();">
PREVIOUS</button>
<button id="zin" onclick=
"navToolBar.activate(esri.toolbars.Navigation.ZOOM_IN);">
Zoom In </button>
<button id="zout" onclick=
"navToolBar.activate(esri.toolbars.Navigation.ZOOM_OUT);">
Zoom OUT </button>
<button id="pan" onclick=
"navToolBar.activate(esri.toolbars.Navigation.PAN);">
PAN</button>
</div>
</body>
</html>


 The Draw class makes it equally easy to support
the drawing of geometries such as points, lines,
and polygons within a similar toolbar.
 The Drawing toolbar requires the use of the
esri.toolbars.draw resource which you’d import
into your application through the use of
dojo.require().
Create Draw Toolbars
dojo.require("esri.toolbars.draw");


 To create a new instance of the Drawing toolbar
simply call the constructor, passing in the map
that it will be associated with.
 The toolbar can then be activated with specific
mouse behavior for drawing features.
drawToolBar = new esri.toolbars.Draw(map);


 The activate() method on the toolbar accepts a
geometry type as well as various options.
 Only a single geometry type is passed in to the
activate() method each time the toolbar is
activated. Geometry types can include the
following:
drawToolBar.activate(esri.toolbars.Draw.POINT);

<!DOCTYPE html>
<html>
<head>
<title> DRAW TOOLBAR </title>
<link rel="stylesheet" href="Tutorial05_tools.css" />
dojo.require("esri.toolbars.draw");
var map ;
var drawToolBar ;
function init()
{
map.addLayer(osm);
drawToolBar = new esri.toolbars.Draw(map);
dojo.connect(drawToolBar , "onDrawEnd" , addToMap);
}

function addToMap(evt)
{
switch(evt.geometry.type)
{
case "polygon":
sym = new esri.symbol.SimpleFillSymbol();
break;
case "polyline":
sym = new esri.symbol.SimpleLineSymbol();
break;
default:
sym = new esri.symbol.SimpleMarkerSymbol();
}
map.graphics.add(new esri.Graphic(evt.geometry , sym));
}
</script>
</head>
<body>
<div id="tools">
<button id="point" onclick=
"drawToolBar.activate(esri.toolbars.Draw.POINT);">
POINT</button>
</div>
</body>
</html>


Widgets


 The API for JavaScript comes with several out of
the box widgets that you can drop into your
application for enhanced productivity. Included
are the BasemapGallery, Legend, Scalebar,
OverviewMap, Measure and Bookmarks widgets.
Widgets


 The Legend widget displays a label and symbols
for some or all layers in the map. It does have
the ability to respect scale dependencies so that
as you zoom in or out in the application the legend
updates to reflect layer visibility at various scale
ranges. The Legend widget supports
ArcGISDynamicMapServiceLayer,
ArcGISTiledMapServiceLayer, and FeatureLayer.
Map Legend Widget

<!DOCTYPE html>
<html>
<head>
<title> Legend </title>
href="Tutorial05_legend.css" />
</script>
dojo.require("esri.dijit.Legend");
function init()
{
vlayer = new esri.layers.ArcGISDynamicMapServiceLayer(
"http://localhost:6080/arcgis/rest/services/MyServices/FileGeodatabaseMap/MapServer");
map.addLayer(vlayer);
var fss = [] ;
fss.push({layer: vlayer, title: "LEGEND"});
legendDijit = new esri.dijit.Legend({map: map,layerInfos: fss}, "legendDiv");
legendDijit.startup();
}

</script>
</head>
<body>
<div id="page">
<div id="mapDiv"></div>
<div id="legendDiv"></div>
</div>
</body>
</html>


 The Legend widget displays a label and symbols
for some or all layers in the map. It does have
the ability to respect scale dependencies so that
as you zoom in or out in the application the legend
updates to reflect layer visibility at various scale
ranges. The Legend widget supports
ArcGISDynamicMapServiceLayer,
ArcGISTiledMapServiceLayer, and FeatureLayer.
LayerList Widget

<!DOCTYPE html>
<html>
<head>
<title> Legend </title>
<link
href="http://localhost/arcgis_js_api/library/3.18/3.18/dijit/themes/cla
ro/claro.css" rel="stylesheet" />
</script>
dojo.require("esri.dijit.LayerList");
function init(){
"http://sampleserver6.arcgisonline.com/arcgis/rest/services/SampleWorldCities/MapServer");
map.addLayers([vlayer]);
legendDijit = new esri.dijit.LayerList({
map: map,
showLegend:true,
showSubLayers: false,
showOpacitySlider: true}, "legendDiv");
}
dojo.ready(init);


 The Scalebar widget is used to add a scalebar to
the map or a specific HTML node. The scalebar
displays units in either english or metric values.
You can also control scalebar positioning through
the ‘attachTo’ parameter. By default, the
scalebar is positioned in the bottom left hand
corner of the map.
Scale bar Widget

<!DOCTYPE html>
<html>
<head>
<title> Scalebar </title>
href="http://localhost/arcgis_js_api/library/3.14//3.14/dijit/themes/claro/claro.css">
</script>
dojo.require("esri.dijit.Scalebar");
function init()
{
var scale = new esri.dijit.Scalebar({map: map,scalebarUnit:'english'});
scale.startup();
}

</script>
</head>
<body>
<div id="page">
</div>
</body>
</html>


 The Measurement widget can be used to measure
area and length as well as report the geographic
location of the cursor. Dropping this widget into
your application is very simple just like the other
widgets. You can also define custom symbols for
the lines and polygons that are drawn on the
screen during the process as well as custom
picture symbols for the points.
The Measurement Widget

<!DOCTYPE html>
<html>
<head>
<title> Measurement </title>
href="http://localhost/arcgis_js_api/library/3.14//3.14/dijit/themes/claro/claro.css">
</script>
dojo.require("esri.dijit.Measurement");
function init()
{
var fss = [] ;
fss.push({layer: vlayer, title: "LEGEND"});
var legendDijit = new esri.dijit.Measurement({map: map}, “measureDiv");
}

</script>
</head>
<body>
<div id="page">
<div id="measureDiv"></div>
</div>
</body>
</html>


Editing


 Simple feature editing is supported by the AGIS
API for JavaScript when working against data
stored in an enterprise geodatabase format.
What this means is that your data needs to be
stored in an enterprise geodatabase managed by
ArcSDE.
 Editing in a web application that uses the
JavaScript API works on the concept of 'last in
wins'
Editing Data


 The ArcGIS API for JavaScript provides widgets to make it
easier for you to add editing to your Web applications. The
following editing widgets are available.
Editing Data


 The API for JavaScript provides several user
interface widgets that make it easier to add
editing functionality to your application. These
widgets include the Editor, TemplatePicker,
AttributeInspector, and AttachmentEditor.
 The Editor is the default editing interface and
includes everything you need to edit a layer and
also allows you to choose the number and types of
tools available.
Editing Data

<html>
<head>
<title> OSM </title>
href="http://localhost/arcgis_js_api/library/3.14/3.14/esri/css/esri.css" />
href="http://localhost/arcgis_js_api/library/3.14/3.14/dijit/themes/claro/claro.css">
</script>
dojo.require("esri.dijit.editing.Editor");
dojo.require("esri.layers.FeatureLayer");
dojo.require("esri.tasks.GeometryService");
var geom ;
var map ;
var fLayer ;
function init()
{
layer = new esri.layers.OpenStreetMapLayer();
geom = new esri.tasks.GeometryService(
"http://sampleserver6.arcgisonline.com/arcgis/rest/services/Utilities/Geometry/GeometryServer");

dojo.connect(map , "onLayerAddResult" , initEditor);
fLayer = new esri.layers.FeatureLayer(
"http://sampleserver6.arcgisonline.com/arcgis/rest/services/Wildfire/FeatureServer/0" ,
{
outFields: ["*"],
editable: true
});
map.addLayer(fLayer);
}
function initEditor(results)
{
var fss = [] ;
fss.push({'featureLayer': fLayer});
var settings = {
map: map, geometryService: geom ,layerInfos:fss
};
var params = {settings: settings};
var editorWidget = new esri.dijit.editing.Editor(params,'editorDiv');
editorWidget.startup();
map.enableSnapping();
}
</script>
</head>
<body>
<div id="editorDiv" width="400" height="200"></div>
</body>
</html>


Query

 There are many types of tasks that can be
performed with the ArcGIS API for JavaScript.
 Tasks give you the ability to perform spatial and
attribute queries, find features based on text
searches, geocode addresses, identify features,
and perform various geometry operations including
buffering and distance measurements.
 All tasks are accessed through the esri.tasks
resource which can be specified through
dojo.require( ).
Intro to Tasks


 once you’ve worked with one or more tasks for any
length of time. The following diagram is a diagram
of task process:
Intro to Tasks


 An input object is used to supply input parameters
to the task. Using these input parameters, the
task performs a specific function and then an
output object is returned containing the results
of the task.
Intro to Tasks

 With the ArcGIS Query Task you can perform
attribute and spatial queries against data layers in a
map service.
 You can also combine these query types to perform a
combination attribute and spatial query.
 Example:
 An attribute query might search for all land parcels with
a valuation of greater than $100,000.
 A spatial query could be used to find all land parcels that
intersect a 100 year floodplain.
 A combination query might search for all land parcels
with a valuation of greater than $100,000 and whose
geometry intersects the 100 year floodplain.
Spatial & Attribute Query Task


 queries are performed using a sequence of
objects that typically include input to the tasks,
execution of the tasks, and a result set returned
from the operation.
Spatial & Attribute Query Task


 The input for your query is
stored in a Query object
which contains various
parameters that can be set
for the query.
Query Object

 The QueryTask object executes the task using the
input provided in the Query object, and the result set
is stored in a FeatureSet object which contains an
array of Graphic features.
 A Query object is used as input to a QueryTask and is
defined by properties such as geometry, where, and
text.
 The geometry property is used to input a geometry
that will be used in a spatial query and will be a point,
line, or polygon geometry.
 The ‘where’ property is used to define an attribute
query, and the ‘text’ property is used to perform a
‘where’ clause containing a ‘like’ modifier.
QueryTask Object


 Once you’ve defined the input properties in a
Query object you can then use QueryTask to
execute the query on a layer.
 we use the execute( ) method on QueryTask to
perform the query.
 Execute returns a FeatureSet object that
contains the results of the query and these
features are processed through a callback
function called ‘showResults’ which is specified in
the execute( ) method.
QueryTask Object


 the results of a query are stored in a FeatureSet
object which is simply an array of Feature
graphics which you can then plot on your map if
you wish.
 Each feature in the array can contain geometry,
attributes, symbology, and an InfoTemplate.
Typically these features are plotted on the map as
graphics.
FeatureSet Object

<!DOCTYPE html>
<html>
<head>
<title> QUERY </title>
dojo.require("esri.tasks.query");
var map , query , queryTask ;
function init()
{
layer = new esri.layers.ArcGISDynamicMapServiceLayer(
query = new esri.tasks.Query();
query.returnGeometry = true ;
query.outFields = ["*"];
queryTask = new esri.tasks.QueryTask(
"http://localhost:6080/arcgis/rest/services/MyServices/FileGeodatabaseMap/MapServer/2");
}
function find()
{
query.text = dojo.byId("searchText").value;
queryTask.execute(query , showResult);
}

function showResult(fSet)
{
graphic1 = fSet.features[0];
graphic1.setSymbol(new esri.symbol.SimpleFillSymbol());
graphic1.setInfoTemplate(new esri.InfoTemplate());
}
dojo.ready(init);
</script>
</head>
<body>
<div id="header">
<input type="text" id="searchText"
placeholder="Search ..." />
<input type="button" value="Search"
onclick="find();"/>
</div>
<div id="mapDiv" width="600" height="400">
</div>
</body>
</html>


Network Analysis


 Network analysis services allow you to perform
analyses on street networks such as:
 finding the best route from one address to
another.
 finding the closest school.
 identifying a service area around a location, or
responding to a set of orders with a fleet of
service vehicles.
 The services can be accessed using their REST
endpoints.
Network Analysis


 Routing in the API for JavaScript allows you to
use a RouteTask object to find routes between
two or more locations and optionally get driving
directions.
 The RouteTask object uses network analysis
services to calculate the routes
Route Task


 As with the other tasks we have examined in this class, routing is
accomplished through a series of objects including
RouteParameters, RouteTask, and RouteResult.
 The following diagram illustrates the three route objects:
Route Task


 The RouteParameters object serves as an input to the RouteTask
object and can include stop and barrier locations, impedance,
whether or not to return driving directions and routes, and many
others.
 The RouteTask object executes a routing operation using the input
parameters supplied by RouteParameters. The constructor for
RouteTask takes a pointer to a URL that identifies the network
service to use for the analysis. Calling the solve() method on
RouteTask executes a routing task against the network analysis
service.
 A RouteResult object is returned from the network analysis
service to a callback function provided by RouteTask. The callback
function then handles the data by displaying it to the user.
Route Task

<!DOCTYPE html>
<html>
<head>
<title> ROUTE ANALYSIS </title>
<link rel="stylesheet" href="http://localhost/arcgis_js_api/library/3.14/3.14/esri/css/esri.css" />
</script>
dojo.require("esri.tasks.FindTask");
dojo.require("esri.layers.FeatureLayer");
dojo.require("esri.tasks.FeatureSet");
dojo.require("esri.tasks.RouteTask");
dojo.require("esri.tasks.RouteParameters");
var geom ;
var map ;
var fLayer ;
function init()
{
layer = new esri.layers.ArcGISDynamicMapServiceLayer(
"http://sampleserver6.arcgisonline.com/arcgis/rest/services/NetworkAnalysis/SanDiego/MapServer");
dojo.connect(map , "onClick" , addStop);
routeTask = new esri.tasks.RouteTask(
"http://sampleserver6.arcgisonline.com/arcgis/rest/services/NetworkAnalysis/SanDiego/NAServer/Route");
routeParams = new esri.tasks.RouteParameters();
routeParams.stops = new esri.tasks.FeatureSet();
dojo.connect(routeTask, "onSolveComplete", showRoute);
dojo.connect(routeTask, "onError", showError);
}


Geoprocessing


 Geoprocessing refers to the automation and
chaining of GIS operations in a logical fashion to
accomplish some sort of GIS task.
 The Geoprocessor class in the ArcGIS API for
JavaScript represents a GP task resource, which
is a single task in a geoprocessing service. Input
parameters are passed into the Geoprocessor
class through a call to either Geoprocessor.
execute() or Geoprocessor.submitJob().
Geoprocessing


 Once you have an understanding of the
geoprocessing models and tools available to you
for an ArcGIS Server instance as well as the
input and output parameters, you can begin writing
the code that will execute the task.
Geoprocessing

ArcGIS API for Javascript Tutorial

Recommended

More Related Content

What's hot (20)

Similar to ArcGIS API for Javascript Tutorial (20)

Recently uploaded (20)

ArcGIS API for Javascript Tutorial