I am able to place multiple coordinates in Map but i am not able to display seperate info for the individual coordinates.
Here i am attaching my piece of code which displays same info for all the coordinates.
Can you please fix it.
Note: Replace BINGSKEY.
Bhaskar,
You will have to add attributes to the graphics you create.
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1"> <title>Insert title here</title> <link rel="stylesheet" href="http://js.arcgis.com/3.14/dijit/themes/claro/claro.css"> <link rel="stylesheet" href="http://js.arcgis.com/3.14/esri/css/esri.css"> <title>Create Map and add a dynamic layer</title> <style> html, body, #mapDiv { padding: 0; margin: 0; height: 100%; } </style> <script src="http://js.arcgis.com/3.14/"></script> <script> var map; require([ "esri/map", "esri/layers/ArcGISDynamicMapServiceLayer", "esri/layers/ImageParameters", "esri/symbols/PictureMarkerSymbol", "esri/graphic", "esri/virtualearth/VETiledLayer", "esri/geometry/Polygon", "esri/geometry/Point", "esri/layers/GraphicsLayer", "esri/renderers/SimpleRenderer", "esri/symbols/SimpleFillSymbol", "esri/symbols/SimpleLineSymbol", "esri/Color", "esri/geometry/webMercatorUtils", "dojo/domReady!" ], function ( Map, ArcGISDynamicMapServiceLayer, ImageParameters, PictureMarkerSymbol, Graphic, VETiledLayer, Polygon, Point, GraphicsLayer, SimpleRenderer, SimpleFillSymbol, SimpleLineSymbol, Color, webMercatorUtils) { map = new Map("mapDiv", { sliderOrientation: "horizontal" }); var baseMapLayer = new VETiledLayer({ bingMapsKey: 'YOUR BING KEY', mapStyle: VETiledLayer.MAP_STYLE_AERIAL_WITH_LABELS, id: 'bingMapLayerId' }); map.addLayer(baseMapLayer); var points = new Array(); var polygon = new Polygon(); var point; point = webMercatorUtils.xyToLngLat(-8303533.953231358, 4917717.3663619868); points[0] = new Point(point[0], point[1]); point = webMercatorUtils.xyToLngLat(-8303533.7143373974, 4917697.7793284087); points[1] = new Point(point[0], point[1]); point = webMercatorUtils.xyToLngLat(-8303602.0299349511, 4917698.4960196903); points[2] = new Point(point[0], point[1]); point = webMercatorUtils.xyToLngLat(-8303602.2688289117, 4917717.6051774034); points[3] = new Point(point[0], point[1]); point = webMercatorUtils.xyToLngLat(-8303533.953231358, 4917717.3663619868); points[4] = new esri.geometry.Point(point[0], point[1]); polygon.addRing(points); //console.log(polygon); var locationLayer = new GraphicsLayer(); map.infoWindow.resize(245, 125); var symbol = new SimpleFillSymbol(SimpleFillSymbol.STYLE_NULL, new SimpleLineSymbol(SimpleLineSymbol.STYLE_SOLID, new Color([255, 0, 0]), 2), new Color([255, 255, 0, 0.25]) ); locationLayer.add(new Graphic(polygon, symbol)); var psymbol = new PictureMarkerSymbol({ "angle": 0, "xoffset": 0, "yoffset": 11, "type": "esriPMS", "url": "http://static.arcgis.com/images/Symbols/Shapes/BluePin1LargeB.png", "contentType": "image/png", "width": 28, "height": 28 }); //console.log(symbol); var array = ['driver1', 'driver2']; for (var i in array) { //Add attributes to the graphics if (array == 'driver1') { locationLayer.add(new Graphic(new Point(-74.6162653, 40.3452031), psymbol, {"driver": "Dwell Time -50mins"})); } else { locationLayer.add(new Graphic(new Point(-74.6062653, 40.3452031), psymbol, {"driver": "Dwell2 Time -30mins"})); } } locationLayer.on("mouse-over", function (event) { map.graphics.clear(); //use the maps graphics layer as the highlight layer var graphic = event.graphic; console.info(event.graphic.attributes); //set the map info content based on the graphics attribute map.infoWindow.setContent(event.graphic.attributes.driver); map.infoWindow.setTitle("CBHU Driver"); map.infoWindow.show(event.screenPoint, map.getInfoWindowAnchor(event.screenPoint)); }); //listen for when map.graphics mouse-out event is fired //and then clear the highlight graphic //and hide the info window locationLayer.on("mouse-out", function () { map.graphics.clear(); map.infoWindow.hide(); }); map.addLayer(locationLayer); var renderer = new SimpleRenderer(symbol); //console.log(polygon.getCentroid()); map.centerAndZoom(polygon.getCentroid(), 20); }); </script> </head> <body> <div id="mapDiv"></div> </body> </html>
Thanks,
Working fine.
Aangemelde leden kunnen berichten plaatsen, updates volgen en meer. Nieuw hier? Registreer een gratis account.
Find useful guides, FAQs, and documents to help you navigate and make the most of Esri Community.
