dojo.connect(crimeGraphicsLayer, "onClick", function(evt){ // create lits of graphics from attribute array var graphics = []; if (evt.graphic.attributes.length != undefined && evt.graphic.attributes.length > 0) { for(var i=0;i < evt.graphic.attributes.length; i++) { graphics.push(new esri.Graphic(evt.graphic.geometry, evt.graphic.symbol, evt.graphic.attributes, popupTemplate)); } } else { graphics.push(evt.graphic); } map.infoWindow.show(graphics[0].geometry); map.infoWindow.setFeatures(graphics); });
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <meta http-equiv="X-UA-Compatible" content="IE=7,IE=9" /> <!--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>QueryTask with geometry, results as an InfoWindow onClick</title> <link rel="stylesheet" type="text/css" href="http://serverapi.arcgisonline.com/jsapi/arcgis/2.8/js/dojo/dijit/themes/claro/claro.css"> <link rel="stylesheet" type="text/css" href="http://serverapi.arcgisonline.com/jsapi/arcgis/2.8/js/esri/dijit/css/Popup.css"/> <script type="text/javascript" src="http://serverapi.arcgisonline.com/jsapi/arcgis/?v=2.8"></script> <script type="text/javascript" language="Javascript"> dojo.require("esri.map"); dojo.require("esri.tasks.query"); dojo.require("esri.dijit.Popup"); var map; var cityLayer, portLayer; var infoTemplate; function init() { var startExtent = new esri.geometry.Extent({"xmin":-8513951.985121,"ymin":4786968.660565,"xmax":-8248256.864588,"ymax":4996406.126118,"spatialReference":{"wkid":102100}}); //create a popup to replace the map's info window var popup = new esri.dijit.Popup(null, dojo.create("div")); //create map map = new esri.Map("mapDiv",{ extent:startExtent, infoWindow: popup }); //create and add new layer var layer = new esri.layers.ArcGISTiledMapServiceLayer("http://server.arcgisonline.com/ArcGIS/rest/services/World_Street_Map/MapServer"); map.addLayer(layer); //build query task var GCqueryTask = new esri.tasks.QueryTask("http://gis.dvrpc.org/ArcGIS/rest/services/DVRPC_Freight/MapServer/0"); //build query filter var GCquery = new esri.tasks.Query(); GCquery.returnGeometry = true; GCquery.outFields = ["NAME_GC","GC_Id","Name","Owner","Operators","Cargo","Report","StrView","Sview","LAT","LONG"]; GCquery.where = "Name <>'*'"; GCquery.outSpatialReference = {"wkid":102100}; GCqueryTask.execute(GCquery,addGCFeatureSetToMap); var queryTask = new esri.tasks.QueryTask("http://gis.dvrpc.org/ArcGIS/rest/services/DVRPC_Freight/MapServer/1"); //build query filter var query = new esri.tasks.Query(); query.returnGeometry = true; query.outFields = ["NAME_GC","GC_Id","Name","Owner","Operators","Cargo","Report","StrView","Sview","LAT","LONG"]; query.where = "Name <>'*'"; query.outSpatialReference = {"wkid":102100}; queryTask.execute(query,addPortFeatureSetToMap); } // Initialize function function addGCFeatureSetToMap(featureSet) { var symbol = new esri.symbol.PictureMarkerSymbol({ "angle": 0,"xoffset": 0,"yoffset": 0,"type": "esriPMS","url": "http://www.dvrpc.org/webmaps/KML/images/RailCrossing.png","contentType": "image/png","width": 24,"height": 24 }); //Create graphics layer for cities cityLayer = new esri.layers.GraphicsLayer({id:'cityLayer'}); map.addLayer(cityLayer); var infoTemplate = new esri.InfoTemplate("${Name}","${*}"); //Add cities to the graphics layer dojo.forEach(featureSet.features, function(feature) { cityLayer.add(feature.setSymbol(symbol).setInfoTemplate(infoTemplate)); }); } // Initialize function function addPortFeatureSetToMap(featureSet) { var symbol = new esri.symbol.PictureMarkerSymbol({ "angle": 0,"xoffset": 0,"yoffset": 0,"type": "esriPMS","url": "http://www.dvrpc.org/webmaps/KML/images/Ferry.png","contentType": "image/png","width": 24,"height": 24 }); //Create graphics layer for cities portLayer = new esri.layers.GraphicsLayer({id:'portLayer'}); map.addLayer(portLayer); var infoTemplate = new esri.InfoTemplate("${NAME}","${*}"); //Add cities to the graphics layer dojo.forEach(featureSet.features, function(feature) { portLayer.add(feature.setSymbol(symbol).setInfoTemplate(infoTemplate)); }); } dojo.addOnLoad(init); </script> </head> <body class="claro"> Single click a county in South Carolina to get more information. <div id="mapDiv" style="width:900px; height:600px; border:1px solid #000;"></div> </body> </html>
Is your map.infoWindow an instance of the popup? If so, use setFeatures instead of show.
attributes = []; for (var j = 0; j < dataPoints[key].length; j++) { attributes.push({ "Address": dataPoints[key].Address, "Date": dataPoints[key] .Date, "ID": dataPoints[key] .ID, "Legend": dataPoints[key] .Legend, "X": dataPoints[key] .X, "Y": dataPoints[key] .Y }); } //- Add symbol graphic graphic = new esri.Graphic(geometry, symbol, attributes); graphicsLayer.add(graphic);
Aaron,
Any way that you could post more of your *almost* working sample?
I've been trying to re-work some of my projects/samples and have been running into some issue dealing with multiple graphic layers.
My sample has two query tasks retuning 2 different graphic layers with different attributes.
What I'd love to do is return ALL results of the graphics layers that are found at the 'clicked' location.
Same functionality as the Identify popup on a dynamic may service layer but on my diiferent graphics layers.
Here's my bare bones sample that I have so far. Any help/advice would be great.<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <meta http-equiv="X-UA-Compatible" content="IE=7,IE=9" /> <!--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>QueryTask with geometry, results as an InfoWindow onClick</title> <link rel="stylesheet" type="text/css" href="http://serverapi.arcgisonline.com/jsapi/arcgis/2.8/js/dojo/dijit/themes/claro/claro.css"> <link rel="stylesheet" type="text/css" href="http://serverapi.arcgisonline.com/jsapi/arcgis/2.8/js/esri/dijit/css/Popup.css"/> <script type="text/javascript" src="http://serverapi.arcgisonline.com/jsapi/arcgis/?v=2.8"></script> <script type="text/javascript" language="Javascript"> dojo.require("esri.map"); dojo.require("esri.tasks.query"); dojo.require("esri.dijit.Popup"); var map; var cityLayer, portLayer; var infoTemplate; function init() { var startExtent = new esri.geometry.Extent({"xmin":-8513951.985121,"ymin":4786968.660565,"xmax":-8248256.864588,"ymax":4996406.126118,"spatialReference":{"wkid":102100}}); //create a popup to replace the map's info window var popup = new esri.dijit.Popup(null, dojo.create("div")); //create map map = new esri.Map("mapDiv",{ extent:startExtent, infoWindow: popup }); //create and add new layer var layer = new esri.layers.ArcGISTiledMapServiceLayer("http://server.arcgisonline.com/ArcGIS/rest/services/World_Street_Map/MapServer"); map.addLayer(layer); //build query task var GCqueryTask = new esri.tasks.QueryTask("http://gis.dvrpc.org/ArcGIS/rest/services/DVRPC_Freight/MapServer/0"); //build query filter var GCquery = new esri.tasks.Query(); GCquery.returnGeometry = true; GCquery.outFields = ["NAME_GC","GC_Id","Name","Owner","Operators","Cargo","Report","StrView","Sview","LAT","LONG"]; GCquery.where = "Name <>'*'"; GCquery.outSpatialReference = {"wkid":102100}; GCqueryTask.execute(GCquery,addGCFeatureSetToMap); var queryTask = new esri.tasks.QueryTask("http://gis.dvrpc.org/ArcGIS/rest/services/DVRPC_Freight/MapServer/1"); //build query filter var query = new esri.tasks.Query(); query.returnGeometry = true; query.outFields = ["NAME_GC","GC_Id","Name","Owner","Operators","Cargo","Report","StrView","Sview","LAT","LONG"]; query.where = "Name <>'*'"; query.outSpatialReference = {"wkid":102100}; queryTask.execute(query,addPortFeatureSetToMap); } // Initialize function function addGCFeatureSetToMap(featureSet) { var symbol = new esri.symbol.PictureMarkerSymbol({ "angle": 0,"xoffset": 0,"yoffset": 0,"type": "esriPMS","url": "http://www.dvrpc.org/webmaps/KML/images/RailCrossing.png","contentType": "image/png","width": 24,"height": 24 }); //Create graphics layer for cities cityLayer = new esri.layers.GraphicsLayer({id:'cityLayer'}); map.addLayer(cityLayer); var infoTemplate = new esri.InfoTemplate("${Name}","${*}"); //Add cities to the graphics layer dojo.forEach(featureSet.features, function(feature) { cityLayer.add(feature.setSymbol(symbol).setInfoTemplate(infoTemplate)); }); } // Initialize function function addPortFeatureSetToMap(featureSet) { var symbol = new esri.symbol.PictureMarkerSymbol({ "angle": 0,"xoffset": 0,"yoffset": 0,"type": "esriPMS","url": "http://www.dvrpc.org/webmaps/KML/images/Ferry.png","contentType": "image/png","width": 24,"height": 24 }); //Create graphics layer for cities portLayer = new esri.layers.GraphicsLayer({id:'portLayer'}); map.addLayer(portLayer); var infoTemplate = new esri.InfoTemplate("${NAME}","${*}"); //Add cities to the graphics layer dojo.forEach(featureSet.features, function(feature) { portLayer.add(feature.setSymbol(symbol).setInfoTemplate(infoTemplate)); }); } dojo.addOnLoad(init); </script> </head> <body class="claro"> Single click a county in South Carolina to get more information. <div id="mapDiv" style="width:900px; height:600px; border:1px solid #000;"></div> </body> </html>
Thanks,
Chris