passing values to infowindow of corresponding marker

2414
6
Jump to solution
02-22-2016 10:42 PM
SyedaSamina
New Contributor

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.longitude, jsonString.latitude, new SpatialReference(4326));
                    textSymbol = new TextSymbol(jsonString.CityName).setOffset(0, -4);
                    var CityName =jsonString.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>
0 Kudos
1 Solution

Accepted Solutions
TyroneBiggums
Occasional Contributor III

The click event occurs after your loop is complete. By the time you click the graphic, the city name that you set for the infoWindow will always be the city name of the last iteration of the loop, 'rwp'.

View solution in original post

0 Kudos
6 Replies
TyroneBiggums
Occasional Contributor III

The click event occurs after your loop is complete. By the time you click the graphic, the city name that you set for the infoWindow will always be the city name of the last iteration of the loop, 'rwp'.

0 Kudos
SyedaSamina
New Contributor

Yes it is, then how can i get the right name displayed ? Tyrone Biggums

0 Kudos
TyroneBiggums
Occasional Contributor III

There are a few ways around it. Here is one http://stackoverflow.com/questions/7530678/javascript-variable-scope-issue-with-jquery-click-event

But, what you'll want to googles is javascript event scope issues to get more information on it.

0 Kudos
AjySha
by
New Contributor

Hi , have you find out solution of problem ?

Can you share it please ?

0 Kudos
AjySha
by
New Contributor

Hi, 

Greetings!!!

Have you find out solution of this issue ?

Please let me know

Best Regards.

 

0 Kudos
AjySha
by
New Contributor

I have found solution of it. Thanks

If anybody want contact me. 

Regards.

0 Kudos