Using getContent() to access specific element.

2058
12
Jump to solution
10-06-2014 07:18 AM
LucasBrito
New Contributor

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' );

            }

0 Kudos
1 Solution

Accepted Solutions
TimWitt2
MVP Alum

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

View solution in original post

0 Kudos
12 Replies
PaulCrickard1
Occasional Contributor II

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).

0 Kudos
LucasBrito
New Contributor

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.

0 Kudos
TimWitt2
MVP Alum

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

0 Kudos
LucasBrito
New Contributor

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

0 Kudos
TimWitt2
MVP Alum

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);

0 Kudos
LucasBrito
New Contributor

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.

0 Kudos
TimWitt2
MVP Alum

Is it possible for you to post the whole code? Or the website of your app?

0 Kudos
TimWitt2
MVP Alum

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

0 Kudos
KenBuja
MVP Esteemed Contributor

But isn't it "evt.graphic.attributes" that is undefined?

0 Kudos