I am trying to insert the measurement widget to a project I am working on. Below is my project code from another example. How do I get the measurement tool added to the map? I have followed the example here:Measurement | ArcGIS API for JavaScript , but I must be doing something wrong since the tool doesn't load. Sorry I am a new to arcgis javascript and I am probably missing something basic. Thanks
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<!--The viewport meta tag is used to improve the presentation and behavior of the
samples on iOS devices-->
<meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no">
<title>Flickr</title>
<link rel="stylesheet" href="http://js.arcgis.com/3.12/dojo/resources/dojo.css">
<link rel="stylesheet" href="http://js.arcgis.com/3.12/dijit/themes/claro/claro.css">
<link rel="stylesheet" href="http://js.arcgis.com/3.12/dgrid/css/dgrid.css">
<link rel="stylesheet" href="http://js.arcgis.com/3.12/esri/css/esri.css">
<style>
html, body, #map {
height:100%;
width:100%;
margin:0;
padding:0;
}
.esriScalebar{
padding: 20px 20px;
}
#map{
padding:0;
}
.dgrid { border: none; height: 100%; }
.dgrid-column-0 {
width: 35px;
}
.dgrid-row-odd {
background: #FFFDF3;
}
td div img:hover {
cursor: pointer;
}
</style>
<script>var dojoConfig = { parseOnLoad: true };</script>
<script src="http://js.arcgis.com/3.12/"></script>
<script>
var map, grid;
require([
"esri/map",
"esri/layers/FeatureLayer",
"esri/dijit/PopupTemplate",
"esri/request",
"esri/tasks/query",
"esri/geometry/Point",
"esri/graphic",
"dojo/on",
"dojo/_base/array",
"dgrid/OnDemandGrid", "dgrid/Selection", "dojo/store/Memory",
"dijit/form/Button",
"dojo/parser", "dojo/_base/declare",
"dijit/layout/BorderContainer", "dijit/layout/ContentPane",
"dojo/domReady!"
], function(
Map,
FeatureLayer,
PopupTemplate,
esriRequest,
Query,
Point,
Graphic,
on,
array,
Grid, Selection, Memory,
Button,
parser, declare
) {
var featureLayer;
map = new Map("map", {
basemap: "satellite",
center: [-46.807, 32.553],
zoom: 3
});
//create a feature collection for the flickr photos
var featureCollection = {
"layerDefinition": null,
"featureSet": {
"features": [],
"geometryType": "esriGeometryPoint"
}
};
featureCollection.layerDefinition = {
"geometryType": "esriGeometryPoint",
"objectIdField": "ObjectID",
"drawingInfo": {
"renderer": {
"type": "simple",
"symbol": {
"type": "esriPMS",
"url": "images/flickr.png",
"contentType": "image/png",
"width": 15,
"height": 15
}
}
},
"fields": [{
"name": "ObjectID",
"alias": "ObjectID",
"type": "esriFieldTypeOID"
}, {
"name": "title",
"alias": "Title",
"type": "esriFieldTypeString"
}]
};
//define a popup template
var popupTemplate = new PopupTemplate({
title: "{title}",
description: "{description}"
});
//create a feature layer based on the feature collection
featureLayer = new FeatureLayer(featureCollection, {
id: 'flickrLayer',
outFields: ["*"],
infoTemplate: popupTemplate
});
//associate the features with the popup on click
featureLayer.on("click", function(evt) {
map.infoWindow.setFeatures([evt.graphic]);
});
map.on("layers-add-result", function(evt) {
requestPhotos();
});
//add the feature layer that contains the flickr photos to the map
map.addLayers([featureLayer]);
function requestPhotos() {
//get geotagged photos from flickr
//tags=flower&tagmode=all
var requestHandle = esriRequest({
url: "http://api.flickr.com/services/feeds/geo?&format=json",
callbackParamName: "jsoncallback"
});
requestHandle.then(requestSucceeded, requestFailed);
}
function requestSucceeded(response, io) {
//loop through the items and add to the feature layer
var features = [];
array.forEach(response.items, function(item) {
var attr = {};
attr["description"] = item.description;
attr["title"] = item.title ? item.title : "Flickr Photo";
var geometry = new Point(item);
var graphic = new Graphic(geometry);
graphic.setAttributes(attr);
features.push(graphic);
});
var items = array.map(features, function(feature) {
return feature.attributes;
});
featureLayer.applyEdits(features, null, null, function(){
var dataGrid = declare([Grid, Selection]);
var columns = [{
label: "", //wasn't able to inject an HTML <div> with image here
field: "ObjectID",
formatter: makeZoomButton
}, {
label: "Title",
field: "title"
}];
grid = new dataGrid({
bufferRows: Infinity,
columns: columns
}, "grid");
var memStore = new Memory({
data: items,
idProperty: "ObjectID"
});
window.grid.set("store", memStore);
window.grid.set("sort", "ObjectID");
grid.on(".field-ObjectID:click", function(e) {
//retrieve the ObjectId when someone clicks on the magnifying glass
if (e.target.alt) {
zoomRow(e.target.alt);
}
});
});
}
function requestFailed(error) {
console.log('failed');
}
function makeZoomButton(id) {
var zBtn = "<div data-dojo-type='dijit/form/Button'><img src='images/zoom.png' alt='" + id + "'";
zBtn = zBtn + " width='18' height='18'></div>";
return zBtn;
}
function zoomRow(id) {
featureLayer.clearSelection();
var query = new Query();
query.objectIds = [id];
featureLayer.selectFeatures(query, FeatureLayer.SELECTION_NEW, function(features) {
//zoom to the selected feature
if(features && features.length > 0){
var feature = features[0]; //get the first feature
map.centerAndZoom(feature.geometry, 10);
}
});
}
});
</script>
</head>
<body class="claro">
<div data-dojo-type="dijit/layout/BorderContainer" data-dojo-props="design:'headline'" style="width:100%; height:100%;">
<div id="map" data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region:'center'" >
</div>
<div data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region:'left'" style="width:275px">
<div id="grid"></div>
</div>
</div>
</body>
</html>
