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>
