I am trying to create a map where I can draw a selection area, and get info of all graphic pointers under it, I tried to modify ArcGis example but the problem now is that I can only able to select only last pointer and its data.
Below is my code, You can check the fiddle as well.
var gl;var highlightSymbol;var defaultSymbol;var jsn = [{"Name" : "Wessam AlDahin","Email" : "email@address.com","City" : "Dubai","Latitude" : 23.408847304,"Longitude" : 54.41760682,}, {"Name" : "Danish Adeel","Email" : "email_2@address.com","City" : "Sharjah","Latitude" : 23.325462417,"Longitude" : 54.390645617,}, {"Name" : "Kashif Makhdoom","Email" : "email_3@address.com","City" : "Dubai","Latitude" : 23.27369932,"Longitude" : 54.285749593,}];require([ "esri/map", "esri/geometry/Point", "esri/symbols/SimpleMarkerSymbol", "esri/graphic", "esri/layers/GraphicsLayer", "esri/toolbars/draw", "esri/symbols/PictureMarkerSymbol", "esri/InfoTemplate", "dojo/domReady!"], function (Map, Point, SimpleMarkerSymbol, Graphic, GraphicsLayer, Draw, PictureMarkerSymbol, InfoTemplate) { function initToolbar(map) { var tb = new Draw(map); tb.on("draw-end", findPointsInExtent); tb.activate(Draw.EXTENT); } function findPointsInExtent(result) { var extent = result.geometry; var results = []; require(["dojo/_base/array"], function (array) { array.forEach(gl.graphics, function (graphic) { if (extent.contains(graphic.geometry)) { graphic.setSymbol(highlightSymbol); results.push(graphic.getContent()); } //else if point was previously highlighted, reset its symbology else if (graphic.symbol == highlightSymbol) { graphic.setSymbol(defaultSymbol); } }); }); //display number of points in extent dojo.byId("inextent").innerHTML = results.length; //display list of points in extent dojo.byId("results").innerHTML = "" + results.join("") + ""; } map = new Map("map", { basemap : "streets", center : [54.285749593, 23.27369932], zoom : 10 }); map.on("load", function () { $.each(jsn, function (key, val) { gl = new GraphicsLayer(); name = this.Name; email = this.Email; content = '' + email + '
' + this.City + '
' + status + '
'; pointVal = new Point(this.Longitude, this.Latitude); symbolVal = new PictureMarkerSymbol({ "url" : 'https://webdesign.danols.com/static/template/images/icons/light/pin_map_icon&48.png', "height" : 20, "width" : 20 }); g = new Graphic(pointVal, symbolVal, { 'title' : name, 'content' : content }, new esri.InfoTemplate('${title}', '${content}')); gl.add(g); map.addLayer(gl); }); initToolbar(this); }); highlightSymbol = new SimpleMarkerSymbol().setColor(new dojo.Color([255, 0, 0])); defaultSymbol = new PictureMarkerSymbol({"url" : 'https://webdesign.danols.com/static/template/images/icons/light/pin_map_icon&48.png',"height" : 20,"width" : 20});});
أكثر...
Below is my code, You can check the fiddle as well.
var gl;var highlightSymbol;var defaultSymbol;var jsn = [{"Name" : "Wessam AlDahin","Email" : "email@address.com","City" : "Dubai","Latitude" : 23.408847304,"Longitude" : 54.41760682,}, {"Name" : "Danish Adeel","Email" : "email_2@address.com","City" : "Sharjah","Latitude" : 23.325462417,"Longitude" : 54.390645617,}, {"Name" : "Kashif Makhdoom","Email" : "email_3@address.com","City" : "Dubai","Latitude" : 23.27369932,"Longitude" : 54.285749593,}];require([ "esri/map", "esri/geometry/Point", "esri/symbols/SimpleMarkerSymbol", "esri/graphic", "esri/layers/GraphicsLayer", "esri/toolbars/draw", "esri/symbols/PictureMarkerSymbol", "esri/InfoTemplate", "dojo/domReady!"], function (Map, Point, SimpleMarkerSymbol, Graphic, GraphicsLayer, Draw, PictureMarkerSymbol, InfoTemplate) { function initToolbar(map) { var tb = new Draw(map); tb.on("draw-end", findPointsInExtent); tb.activate(Draw.EXTENT); } function findPointsInExtent(result) { var extent = result.geometry; var results = []; require(["dojo/_base/array"], function (array) { array.forEach(gl.graphics, function (graphic) { if (extent.contains(graphic.geometry)) { graphic.setSymbol(highlightSymbol); results.push(graphic.getContent()); } //else if point was previously highlighted, reset its symbology else if (graphic.symbol == highlightSymbol) { graphic.setSymbol(defaultSymbol); } }); }); //display number of points in extent dojo.byId("inextent").innerHTML = results.length; //display list of points in extent dojo.byId("results").innerHTML = "" + results.join("") + ""; } map = new Map("map", { basemap : "streets", center : [54.285749593, 23.27369932], zoom : 10 }); map.on("load", function () { $.each(jsn, function (key, val) { gl = new GraphicsLayer(); name = this.Name; email = this.Email; content = '' + email + '
' + this.City + '
' + status + '
'; pointVal = new Point(this.Longitude, this.Latitude); symbolVal = new PictureMarkerSymbol({ "url" : 'https://webdesign.danols.com/static/template/images/icons/light/pin_map_icon&48.png', "height" : 20, "width" : 20 }); g = new Graphic(pointVal, symbolVal, { 'title' : name, 'content' : content }, new esri.InfoTemplate('${title}', '${content}')); gl.add(g); map.addLayer(gl); }); initToolbar(this); }); highlightSymbol = new SimpleMarkerSymbol().setColor(new dojo.Color([255, 0, 0])); defaultSymbol = new PictureMarkerSymbol({"url" : 'https://webdesign.danols.com/static/template/images/icons/light/pin_map_icon&48.png',"height" : 20,"width" : 20});});
أكثر...