require([
"esri/map",
"esri/dijit/Geocoder",
"esri/graphic",
"esri/symbols/SimpleMarkerSymbol",
"esri/geometry/screenUtils",
"esri/geometry/Point",
"esri/SpatialReference",
"esri/InfoTemplate",
"dojo/dom",
"dojo/dom-construct",
"dojo/query",
"dojo/_base/Color",
"dojo/domReady!"
], function(
Map, Geocoder, Graphic, SimpleMarkerSymbol, screenUtils,
Point,SpatialReference, Infotemplate, dom, domConstruct, query, Color
) {
// create a map and instance of the geocoder widget here
var map = new Map("map", {
basemap: "streets",
center: [ -100, 40 ],
zoom: 10
});
var geocoder = new Geocoder({
arcgisGeocoder: {
placeholder: "Find a place"
},
autoComplete: true,
map: map
}, dom.byId("search"));
map.on("load", enableSpotlight);
map.on("click",manualPickAddress);
geocoder.on("select", showLocation);
geocoder.on("clear", removeSpotlight);
function showLocation(evt) {
map.graphics.clear();
var point = evt.result.feature.geometry;
//window.alert(point);
var symbol = new SimpleMarkerSymbol().setStyle(
SimpleMarkerSymbol.STYLE_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);
var spotlight = map.on("extent-change", function(extentChange) {
var geom = screenUtils.toScreenGeometry(map.extent, map.width, map.height, extentChange.extent);
var width = geom.xmax - geom.xmin;
var height = geom.ymin - geom.ymax;
var max = height;
if ( width > height ) {
max = width;
}
var margin = '-' + Math.floor(max/2) + 'px 0 0 -' + Math.floor(max/2) + 'px';
query(".spotlight").addClass("spotlight-active").style({
width: max + "px",
height: max + "px",
margin: margin
});
spotlight.remove();
});
}
function enableSpotlight() {
var html = "<div id='spotlight' class='spotlight'></div>"
domConstruct.place(html, dom.byId("map_container"), "first");
}
function removeSpotlight() {
query(".spotlight").removeClass("spotlight-active");
map.infoWindow.hide();
map.graphics.clear();
}
function manualPickAddress(evt){
//window.alert(evt.x+' ' +evt.y);
map.graphics.clear();
//var point = evt.mapPoint;
//var point = new Point( {"x": evt.x, "y": evt.y, "spatialReference": {"wkid": 4326 } });
var point = new Point([evt.x,evt.y],new SpatialReference({ wkid:4326 }));
window.alert(point.x+ ' ' + point.y);
// window.alert(point);
var symbol = new SimpleMarkerSymbol().setStyle(
SimpleMarkerSymbol.STYLE_SQUARE).setColor(
new Color([255,0,0,0.5])
);
var attributes = {"Xcoord":evt.mapPoint.x,"Ycoord":evt.mapPoint.y};
var infoTemplate = new InfoTemplate("Latitude: ${Ycoord} <br/> Longitude: ${Xcoord} ");
var graphic = new Graphic(point,symbol,attributes,infoTemplate);
// var graphic = new Graphic(point,symbol);
map.graphics.add(graphic);
map.infoWindow.setTitle("Search Result");
map.infoWindow.setContent(evt.x+'<br />'+evt.y);
//window.alert(evt.x+ ' '+evt.y);
/*
var spotlight = map.on("extent-change", function(extentChange) {
var geom = screenUtils.toScreenGeometry(map.extent, map.width, map.height, extentChange.extent);
var width = geom.xmax - geom.xmin;
var height = geom.ymin - geom.ymax;
var max = height;
if ( width > height ) {
max = width;
}
var margin = '-' + Math.floor(max/2) + 'px 0 0 -' + Math.floor(max/2) + 'px';
query(".spotlight").addClass("spotlight-active").style({
width: max + "px",
height: max + "px",
margin: margin
});
spotlight.remove();
});*/
}
});
When I manually pick an address the manualPickAddress() run
Point works ok but no graphic display (symbol) on the screen.
Any suggestion?
