I am new to Javascript API. I have a project where I am trying to get the drawing toolbar with buffer to work exactly like this Geometry Service - Buffer | ArcGIS API for JavaScript in my project. I got the buttons added and thought I added all the functions, but when I click on the buttons, nothing is happening. I am sure I am missing something simple, but I haven't been able to figure it out. I would greatly appreciate any help.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<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;
}
#rightPane {
color: #000;
width: 250px;
padding-bottom: 15px;
}
.details {
font-size: 14px;
font-weight: 600;
padding-bottom: 20px;
}
button1 {
margin: 2px;
cursor: pointer;
}
#search {
display: block;
position: absolute;
z-index: 2;
top: 20px;
left: 60px;
}
.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;
}
#titlePane {
width: 240px;
}
.claro .dijitTitlePaneTitle {
background: #fff;
font-weight: 600;
border: none;
border-bottom: solid 1px #29201A;
border-top: solid 1px #29201A;
}
.claro .dijitTitlePaneTitleHover {
background: #eee;
}
.claro .dijitTitlePaneTitleActive {
background: #808775;
}
.claro .dijitTitlePaneContentOuter {
border-right: none;
border-bottom: none;
border-left: none;
}
</style>
<!--<script>
var dojoConfig = {
parseOnLoad: true
};
</script>-->
<script src="http://js.arcgis.com/3.14/"></script>
<script>
var map, geocoder, grid, tb;
require([
"esri/map",
"esri/InfoTemplate",
"esri/dijit/Geocoder",
"esri/graphic",
"dojo/query",
"esri/config",
"esri/geometry/normalizeUtils",
"esri/tasks/GeometryService",
"esri/tasks/BufferParameters",
"esri/toolbars/draw",
"esri/symbols/SimpleLineSymbol",
"esri/symbols/SimpleFillSymbol",
"esri/symbols/SimpleMarkerSymbol",
"esri/dijit/Measurement",
"esri/layers/FeatureLayer",
"esri/dijit/PopupTemplate",
"esri/request",
"esri/tasks/query",
"esri/geometry/Point",
"esri/graphic",
"esri/symbols/PictureMarkerSymbol",
"dojo/on",
"esri/Color",
"dojo/_base/array",
"dgrid/OnDemandGrid", "dgrid/Selection", "dojo/store/Memory",
"dijit/form/Button",
"dojo/parser", "dojo/_base/declare", "dojo/dom",
"dijit/TitlePane", "dijit/layout/BorderContainer", "dijit/layout/ContentPane",
"dojo/domReady!"
], function (
Map,
InfoTemplate,
Geocoder,
Graphic, query, esriConfig, normalizeUtils, GeometryService, BufferParameters, Draw, SimpleLineSymbol, SimpleFillSymbol, SimpleMarkerSymbol,
Measurement,
FeatureLayer,
PopupTemplate,
esriRequest,
Query,
Point,
Graphic,
PictureMarkerSymbol,
on,
Color,
array,
Grid, Selection, Memory,
Button,
parser, declare, dom
) {
parser.parse();
esriConfig.defaults.geometryService = new GeometryService("http://tasks.arcgisonline.com/ArcGIS/rest/services/Geometry/GeometryServer");
esriConfig.defaults.io.proxyUrl = "/proxy/";
esriConfig.defaults.io.alwaysUseProxy = false;
//Setup button click handlers
on(dom.byId("clearGraphics"), "click", function () {
if (map) {
map.graphics.clear();
}
});
//click handler for the draw tool buttons
query(".tool").on("click", function (evt) {
if (tb) {
tb.activate(evt.target.id);
}
});
var featureLayer;
map = new Map("map", {
basemap: "streets",
center: [-46.807, 32.553],
zoom: 3
});
map.on("load", initOperationalLayer);
function initOperationalLayer() {
//Layer that is in Lat, Long Spatial reference 102100
var infoTemplate = new InfoTemplate();
var hydrant = new FeatureLayer("http://services1.arcgis.com/ziLNoRgqnICUM0q1/arcgis/rest/services/Hydrants/FeatureServer/0", {
mode: FeatureLayer.MODE_ONDEMAND,
outFields: ["*"],
infoTemplate: infoTemplate
});
map.on("load", initToolbar);
function initToolbar(evtObj) {
tb = new Draw(evtObj.map);
tb.on("draw-end", doBuffer);
}
function doBuffer(evtObj) {
tb.deactivate();
var geometry = evtObj.geometry,
symbol;
switch (geometry.type) {
case "point":
symbol = new SimpleMarkerSymbol(SimpleMarkerSymbol.STYLE_SQUARE, 10, new SimpleLineSymbol(SimpleLineSymbol.STYLE_SOLID, new Color([255, 0, 0]), 1), new Color([0, 255, 0, 0.25]));
break;
case "polyline":
symbol = new SimpleLineSymbol(SimpleLineSymbol.STYLE_DASH, new Color([255, 0, 0]), 1);
break;
case "polygon":
symbol = new SimpleFillSymbol(SimpleFillSymbol.STYLE_NONE, new SimpleLineSymbol(SimpleLineSymbol.STYLE_DASHDOT, new Color([255, 0, 0]), 2), new Color([255, 255, 0, 0.25]));
break;
}
var graphic = new Graphic(geometry, symbol);
map.graphics.add(graphic);
//setup the buffer parameters
var params = new BufferParameters();
params.distances = [dom.byId("distance").value];
params.outSpatialReference = map.spatialReference;
params.unit = GeometryService[dom.byId("unit").value];
//normalize the geometry
normalizeUtils.normalizeCentralMeridian([geometry]).then(function (normalizedGeometries) {
var normalizedGeometry = normalizedGeometries[0];
if (normalizedGeometry.type === "polygon") {
//if geometry is a polygon then simplify polygon. This will make the user drawn polygon topologically correct.
esriConfig.defaults.geometryService.simplify([normalizedGeometry], function (geometries) {
params.geometries = geometries;
esriConfig.defaults.geometryService.buffer(params, showBuffer);
});
} else {
params.geometries = [normalizedGeometry];
esriConfig.defaults.geometryService.buffer(params, showBuffer);
}
});
}
function showBuffer(bufferedGeometries) {
var symbol = new SimpleFillSymbol(
SimpleFillSymbol.STYLE_SOLID,
new SimpleLineSymbol(
SimpleLineSymbol.STYLE_SOLID,
new Color([255, 0, 0, 0.65]), 2
),
new Color([255, 0, 0, 0.35])
);
array.forEach(bufferedGeometries, function (geometry) {
var graphic = new Graphic(geometry, symbol);
map.graphics.add(graphic);
});
}
//Layer that is NAD83 / UTM zone 15 N Spatial Reference 26915
var parcel = new FeatureLayer("http://gis.hennepin.us/ArcGIS/rest/services/Maps/NATURALRESOURCES/MapServer/2", {
mode: FeatureLayer.MODE_ONDEMAND,
outFields: ["*"],
infoTemplate: infoTemplate
});
var outline = new esri.symbol.SimpleLineSymbol()
.setColor(dojo.colorFromHex('#fff'));
var sym = new esri.symbol.SimpleFillSymbol()
.setColor(new dojo.Color([212, 212, 210, 0.3]))
.setOutline(outline);
var renderer = new esri.renderer.SimpleRenderer(sym);
parcel.setRenderer(renderer);
hydrant.maxScale = 1000;
hydrant.minScale = 10000;
parcel.maxScale = 1000;
parcel.minScale = 10000;
map.addLayer(hydrant);
map.addLayer(parcel);
}
//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/circle_red.png",
"contentType": "image/png",
"width": 15,
"height": 15
}
}
},
"fields": [{
"name": "ObjectID",
"alias": "ObjectID",
"type": "esriFieldTypeOID"
}, {
"name": "description",
"alias": "description",
"type": "esriFieldTypeString"
}, {
"name": "title",
"alias": "Title",
"type": "esriFieldTypeString"
}, {
"name": "description",
"alias": "description",
"type": "esriFieldTypeString"
}, {
"name": "ID1",
"alias": "ID1",
"type": "esriFieldTypeInteger"
}, {
"name": "Date1",
"alias": "Date1",
"type": "esriFieldTypeString"
}]
};
//define a popup template
var popupTemplate = new esri.dijit.PopupTemplate({
title: "{title}",
fieldInfos: [
{
fieldName: "author",
visible: true,
label: "author"
},
{
fieldName: "tags",
visible: true,
label: "tags"
},
{
fieldName: "ID1",
visible: true,
label: "ID1"
},
{
fieldName: "description",
visible: true,
label: "description"
},
{
fieldName: "test",
visible: true,
label: "test"
},
{
fieldName: "Date1",
visible: true,
label: "Date1"
}
],
showAttachments: true
});
//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://localhost:15095/Service1.svc/getAllFlickr",
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.GetAllFlickrResult, function (item, index) {
var attr = {};
attr["Date1"] = item.Date1;
attr["tags"] = item.tags;
attr["ID1"] = item.ID1;
attr["description"] = item.description;
attr["test"] = "https://maps.google.com/maps?q=" + item.latitude + "," + item.longitude + "&output=classic&dg=brw"
var geometry = new Point(item);
var graphic = new Graphic(geometry);
if (index == response.GetAllFlickrResult.length - 1) {
var symbol = new PictureMarkerSymbol({
"type": "esriPMS",
"url": "images/circle_green.png",
"contentType": "image/png",
"width": 20,
"height": 20
});
graphic.setSymbol(symbol);
}
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: "Date1",
field: "Date1"
}];
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/magnifier13.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, 13);
}
});
}
var measurement = new Measurement({
map: map
}, dom.byId("measurementDiv"));
measurement.startup();
geocoder = new Geocoder({
autoComplete: true,
map: map
}, "search");
geocoder.startup();
geocoder.on("select", showLocation);
function showLocation(evt) {
map.graphics.clear();
var point = evt.result.feature.geometry;
var symbol = new SimpleMarkerSymbol()
.setStyle("square")
.setColor(new Color([255, 0, 0, 0.5]));
var graphic = new Graphic(point, symbol);
map.graphics.add(graphic);
map.infoWindow.setTitle("Search Result");
map.infoWindow.setContent(evt.result.name);
map.infoWindow.show(evt.result.feature.geometry);
}
});
</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 style="position:absolute; right:20px; top:10px; z-Index:999;">
<div id="titlePane" data-dojo-type="dijit/TitlePane" data-dojo-props="title:'Measurement', closable:'false', open:'false'">
<div id="measurementDiv"></div>
<span style="font-size:smaller;padding:5px 5px;">Press <b>CTRL</b> to enable snapping.</span>
</div>
</div>
<div id="search"> </div>
</div>
<div data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region:'left'" style="width:275px">
<div id="grid"></div>
</div>
<div id="rightPane" data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region:'right'">
<div class="details">Pick a tool and draw on the map. The drawn graphic will be buffered based on the specified parameters.</div>
<button type="button" class="tool" id="line">Line</button>
<button type="button" class="tool" id="polyline">Polyline</button>
<button type="button" class="tool" id="freehandpolyline">Freehand Polyline</button>
<br />
<button type="button" class="tool" id="polygon">Polygon</button>
<button type="button" class="tool" id="freehandpolygon">Freehand Polygon</button>
<br />
<hr />
<div><b>Buffer Parameters</b></div>
Distance:
<input type="text" id="distance" size="5" value="25" />
<select id="unit" style="width:100px;">
<option value="UNIT_STATUTE_MILE">Miles</option>
<option value="UNIT_FOOT">Feet</option>
<option value="UNIT_KILOMETER">Kilometers</option>
<option value="UNIT_METER">Meters</option>
<option value="UNIT_NAUTICAL_MILE">Nautical Miles</option>
<option value="UNIT_US_NAUTICAL_MILE">US Nautical Miles</option>
<option value="UNIT_DEGREE">Degrees</option>
</select>
<br />
<button type="button" id="clearGraphics">Clear Graphics</button>
</div>
</div>
</body>
</html>Message was edited by: Robert Scheitlin, GISP
