I want to display a seperate info on hoifor different coordinates in a map

BhaskarPathak · ‎08-19-2015

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.

RobertScheitlin__GISP · ‎08-19-2015

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>

View solution in original post

RobertScheitlin__GISP · ‎08-19-2015

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>

BhaskarPathak · ‎08-19-2015

Thanks,

Working fine.