I have created a postcode search that that highlights a polygon and zooms in. but I would like it to display a infoTemplate box with having to click in it. I want it to show when the function runs.
My function
function updateExtent(){
require([
"esri/geometry/Multipoint"
], function(Multipoint) {
if (document.getElementById('optionsRadios2').checked) {
document.getElementById("mysearchGrid").style.visibility = "visible";
document.getElementById('mysearchGrid').style.height = '450px';
var points;
$.ajax({
url: 'http://api.uk/api/street?street=' + document.getElementById('txtAddSearch').value ,
type: 'GET',
dataType: 'json',
beforeSend: function(){$('#txtAddSearch').addClass('loadinggif');},
complete: function(){$('#txtAddSearch').removeClass('loadinggif');},
success: function (data) {
street_callback(data);
},
});
} else {
var postcode = document.getElementById('txtAddSearch').value;
jQuery.support.cors = true;
$.ajax({
url: 'http://webapi.uk/api/coordinates?postcode=' + postcode,
type: 'GET',
dataType: 'json',
success: function (data) {
try {
if (data.length === 0) {
throw new NoSearchResException("Postcode cannot be found. Please ensure you have a space in your postcode eg. HU17 9BA");
} else {
myMap.graphics.clear();
var points = data.map(function(x){
return [x.MapEast, x.MapNorth];
});
for (i=0; i<points.length;i++){
var myPoint = {"geometry":{"x":points[i][0],"y":points[i][1], "spatialReference":{"wkid":27700}},"attributes":{"XCoord":points[i][0], "YCoord":points[i][1],"Plant":"Mesa Mint"},"symbol":{"url":"red-marker-black-border-hi.png", "height":16, "width":10, "type":"esriPMS", "angle": 0, "xoffset":0, "yoffset":0}, "infoTemplate":{"title":"Vernal Pool Locations","content":"Latitude: ${YCoord} <br/> Longitude: ${XCoord} <br/> Plant Name:${Plant}"}};
var gra = new esri.Graphic(myPoint);
myMap.graphics.add(gra);
}
var point = esri.graphicsExtent(myMap.graphics.graphics).getCenter();
var myPoint = {"geometry":{"x":point.x,"y":point.y, "spatialReference":{"wkid":27700}},"attributes":{"XCoord":point.x, "YCoord":point.y,"Plant":"Mesa Mint"},"symbol":{"url":"red-marker-black-border-hi.png", "height":0, "width":0, "type":"esriPMS", "angle": 0, "xoffset":0, "yoffset":0}, "infoTemplate":{"title":"Vernal Pool Locations","content":"Latitude: ${YCoord} <br/> Longitude: ${XCoord} <br/> Plant Name:${Plant}"}};
var gra = new esri.Graphic(myPoint);
myMap.graphics.add(gra);
//build query task
queryTask1 = new esri.tasks.QueryTask("http://t????????????????/MapServer/0");
//build query filter
query1 = new esri.tasks.Query();
query1.returnGeometry = true;
query1.outFields = ["POSTCODE", "code"];
query1.where = "1=1";
infoTemplate1 = new esri.InfoTemplate("${POSTCODE}", "THIS IS TEST DATA <br/>Phase: ${code} <br/>URL: <a href='http://www.google.co.uk/'>URL</a>");
symbol1 = new esri.symbol.SimpleFillSymbol(esri.symbol.SimpleFillSymbol.STYLE_SOLID, new esri.symbol.SimpleLineSymbol(esri.symbol.SimpleLineSymbol.STYLE_DASHDOT, new dojo.Color([255,0,0]), 2), new dojo.Color([255,255,0,0.5]));
//onClick event returns the evt point where the user clicked on the map.
//This is contains the mapPoint (esri.geometry.point) and the screenPoint (pixel xy where the user clicked).
//set query geometry = to evt.mapPoint Geometry
query1.geometry = point;
//Execute task and call showResults on completion
queryTask1.execute(query1, showResults);
function showResults(featureSet) {
//remove all graphics on the maps graphics layer
myMap.graphics.clear();
//QueryTask returns a featureSet. Loop through features in the featureSet and add them to the map.
dojo.forEach(featureSet.features,function(feature){
var graphic1 = feature;
graphic1.setSymbol(symbol1);
//Set the infoTemplate.
graphic1.setInfoTemplate(infoTemplate1);
graphic1.setInfoTemplate;
//Add graphic to the map graphics layer.
myMap.graphics.add(graphic1);
});
}
I have taken the code from esri website and just taken the on click event. This does highlight the poloygon but you still havr to click shape to get the infoTemplate to appear.
Best Answer