I was originally going to just post a few bites of code, and skip over the basics of the API. But I realized that my demo app isn't overly complicated, and can double as a tutorial on the ArcGIS JS API. So here you go: a little more complicated than Hello World, but a little more functional than "just use an ArcGIS Online application template"
Getting Started
If you're not familiar with it, you'll want to read up on the ArcGIS JavaScript API documentation. It's a surprisingly functional API, with access to a lot of cool services such as ESRI's geocoder, ESRI's elevation service, arbitrary ArcGIS geoprocessing endpoints, some good basemaps, etc.
Your basic map would come in these two parts, an HTML file and a JavaScript file. The code below covers version 3.8 of the API, which is current as of January 2014. 3.8 makes some minor changes from 3.7, most notably to dojo.require -- it now accepts the whole list of dependencies, and runs a callback after they're loaded.
The HTML
<!DOCTYPE HTML>
<html>
<head>
<!-- ArcGIS JS API and related CSS -->
<link rel="stylesheet" href="http://js.arcgis.com/3.8/js/dojo/dijit/themes/claro/claro.css">
<link rel="stylesheet" type="text/css" href="http://js.arcgis.com/3.8/js/esri/css/esri.css">
<script src="//js.arcgis.com/3.8/"></script>
<!-- some minor styling, and our JavaScript code -->
<script type="text/javascript" src="index.js"></script>
<style type="text/css">
#map {
width:5in;
height:5in;
border:1px solid black;
margin:0 auto 0 auto;
}
</style>
</head>
<body class="claro">
<div id="map"></div>
</body>
</html>
The JavaScript (index.js)
var MAP;
var START_W = -106.88042;
var START_E = -106.79802;
var START_S = 39.16306;
var START_N = 39.22692;
var ARCGIS_URL = "http://205.170.51.182/arcgis/rest/services/PitkinBase/Trails/MapServer";
var LAYERID_TRAILS = 0;
require([
"esri/map",
"dojo/domReady!"
], function() {
// the basic map, with a global reference of course
MAP = new esri.Map("map", {
extent: new esri.geometry.Extent({xmin:START_W,ymin:START_S,xmax:START_E,ymax:START_N,spatialReference:{wkid:4326}}),
basemap: "streets"
});
// add the trails overlay to the map
OVERLAY_TRAILS = new esri.layers.ArcGISDynamicMapServiceLayer(ARCGIS_URL);
OVERLAY_TRAILS.setVisibleLayers([ LAYERID_TRAILS ]);
MAP.addLayer(OVERLAY_TRAILS);
});
This is pretty minimal: load up Dojo and have it load its dependencies, and when that's done the callback will create a new esri.Map bound to the DIV with id="map", with a specific starting zoom area (the extent).
It does go one extra step, though, and add a layer above the basemap. In this case, it's an ArcGIS REST service which will display hiking trails in the same area to which the map is zoomed. Just these two pieces, and you have your very first ArcGIS API map.
What? That's it?
I hate Hello World type applications, which claim to walk you through the API but which just hand you a working map and nothing else to go on. But you know what, in this case that really is it... for now. The next posting covers click events and the Identify task.
No comments:
Post a Comment
Note: Only a member of this blog may post a comment.