We are trying to plot a point on map based on the click of a different marker, meaning we have two different sets of lat and long values. Once the map is loaded, we have all markers displayed, but when one marker is clicked, we should pin a new marker that contains the second location of the ID.
To do so we are using the getContent() function, but once a marker is clicked, the function retrieves the all of the values in the view as a string, not just the values associated to the marker that is clicked. Is there a way to retrieve just the values that are clicked?
map.on( "load", pinMap);
function pinMap( ) {
var iconPath = "M16,3.5c-4.142,0-7.5,3.358-7.5,7.5c0,4.143,7.5,18.121,7.5,18.121S23.5,15.143,23.5,11C23.5,6.858,20.143,3.5,16,3.5z M16,14.584c-1.979,0-3.584-1.604-3.584-3.584S14.021,7.416,16,7.416S19.584,9.021,19.584,11S17.979,14.584,16,14.584z";
var infoContent = "<b>Id</b>: ${Id} <br /><b>x</b>: ${x}";
var infoTemplate = new InfoTemplate(" Information",infoContent);
$.post( '{{ path( 'points' ) }}', {}, function( r ) {
arrayUtils.forEach( r.points, function( point ) {
if (point.x==1) {
var initColor = "#CF3A3A";
}
else {
var initColor = "#FF9900";
}
var attr = {"Id":point.id,"x":point.x};
var graphic = new Graphic( new Point( point.coords ), createSymbol( iconPath, initColor ), attr, infoTemplate);
map.graphics.add( graphic );
map.graphics.on("click",function()
{
var str = graphic.getContent();
console.log(str);
});
} );
}, 'json' );
}
Solved! Go to Solution.
Lucas,
try and replace
map.graphics.on("click", function()
with:
map.graphics.on("click", function(evt)
then the evt.graphic.getContent() should get the attributes of just that one graphic.
Tim
You should be able to just split the string and grab what you need. Maybe you could use toJSON() on the graphic then call the x and y properties of the object (JSON makes it a JavaScript Object).
Paul Crickard, one of the issues with splitting the string is that when we select a marker, instead only the information for the particular marker that was clicked, we get the information for all of the markers that are displayed on the map. Sorry if this is a trivial question, but we are new with ArcGIS and the API.
Lucas,
try and replace
map.graphics.on("click", function()
with:
map.graphics.on("click", function(evt)
then the evt.graphic.getContent() should get the attributes of just that one graphic.
Tim
Tim,
Thank you for the suggestion. That solved the problem!!
If I may ask one follow up question, now that we can retrieve just the string for the marker that is clicked, is it possible to access a specific element of that string? I.e. our string returns id and x. Is it possible to retrieve only the ID?
Thank you
What if you try and use the following instead of getContent:
var str = evt.graphic.attributes.Id;
console.log(str);
Let me know if that works.
or since it is an array you might have to use:
var str = evt.graphic.attributes[0];
console.log(str);
Tim, this time it did not work. The errors are below.
var str = evt.graphic.attributes.Id; -> Uncaught TypeError: Cannot read property 'id' of undefined
var str = evt.graphic.attributes[0]; -> Undefined.
Is it possible for you to post the whole code? Or the website of your app?
Also make sure the i of Id is capitalized, since your error message comes back with lower case i : Uncaught TypeError: Cannot read property 'id' of undefined
But isn't it "evt.graphic.attributes" that is undefined?