I am new to Javascript API. I am working on a project that maps my SQL table Lat, Long locations (I used the Flickr JSON Flickr example:Feature collection | ArcGIS API for JavaScript). I had everything working fine and then decided to add the Geocoder Widget. I can't get the geocoder to add a symbol to the map and zoom to it. Below is the code I have so far. Any help would be greatly appreicated. Thanks
<!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;
}
#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.12/"></script>
<script>
var map, geocoder, grid;
require([
"esri/map",
"esri/InfoTemplate",
"esri/dijit/Geocoder",
"esri/graphic",
"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",
"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, SimpleMarkerSymbol,
Measurement,
FeatureLayer,
PopupTemplate,
esriRequest,
Query,
Point,
Graphic,
PictureMarkerSymbol,
on,
array,
Grid, Selection, Memory,
Button,
parser, declare, dom
) {
parser.parse();
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
});
//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;
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>
</body>
</html>
