AnsweredAssumed Answered

passing values to infowindow of corresponding marker

Question asked by Syeda_Samina on Feb 22, 2016
Latest reply on Feb 25, 2016 by processing...

Hi, im totally new to ArcGIS. I've been spending some time with the JavaScript API, i'm stuck on this one. i have a json string. and reading values from that string i add markers to my map using loop. i want to pass values to each marker. i have added a click event to display my passed values to info window. but thats showing the values saved in last itertion onclick of each marker. i know there s solution to this problem but im unable to find one.

I want to find out the way that each marker pop up displays its own city name using this json string.

 

<!DOCTYPE html>
<html>
<head>
  <title>Create a Map</title>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no">
  <link rel="stylesheet" href="https://js.arcgis.com/3.15/dijit/themes/claro/claro.css">
  <link rel="stylesheet" href="https://js.arcgis.com/3.15/esri/css/esri.css">
  <style>
    html, body, #mapDiv{
      padding: 0;
      margin: 0;
      height: 100%;
    }
  </style>
  <script src="https://js.arcgis.com/3.15/"></script>
  <script>
    var map;
    require(["esri/map",
    "esri/graphic",
    "esri/symbols/PictureMarkerSymbol",
    "esri/symbols/TextSymbol",
    "esri/geometry/Point",
    "esri/SpatialReference",
    "esri/tasks/ProjectParameters",
    "esri/tasks/GeometryService",
    "dojo/on",
    "dojo/domReady!"
        ], function setupmap(Map, Graphic, PictureMarkerSymbol, TextSymbol, Point, SpatialReference, ProjectParameters, GeometryService, on) {
      map = new Map("mapDiv", {
        center: [70.45, 30.75],
        zoom: 6,
        basemap: "streets"
      });
  var jsonString = { locations: [{ latitude: 28.75, longitude: 69.45, CityName: 'Lahore' ,total:1100}, { latitude: 33.75, longitude: 69.45, CityName: 'PSC' ,total:2100},{ latitude: 30.75, longitude: 70.45, CityName: 'rwp' ,total:90}] };
            jsonString = jsonString.locations;
            picSymbol = new PictureMarkerSymbol('http://static.arcgis.com/images/Symbols/Shapes/BluePin1LargeB.png', 80, 80);
            map.on("load", function (evt) {
                for (var i = 0; i < jsonString.length; i++) {
                    var geometryPoint = new Point(jsonString[i].longitude, jsonString[i].latitude, new SpatialReference(4326));
                    textSymbol = new TextSymbol(jsonString[i].CityName).setOffset(0, -4);
                    var CityName =jsonString[i].CityName;
                    map.graphics.add(new Graphic(geometryPoint, picSymbol));
                       map.graphics.add(new Graphic(geometryPoint, textSymbol));
                    map.graphics.on("click",function show(evt){map.infoWindow.setTitle("Coordinates");
                      map.infoWindow.setContent("City Name is :"+ CityName);
                      map.infoWindow.show(evt.screenPoint,map.getInfoWindowAnchor(evt.screenPoint));});
               
                }
   
            });
           
                });

  </script>
</head>
<body class="claro">
  <div id="mapDiv"></div>
</body>
</html>

Outcomes