topic Re: Using getContent() to access specific element. in ArcGIS JavaScript Maps SDK Questions

Using getContent() to access specific element.

LucasBrito — Mon, 06 Oct 2014 14:18:21 GMT

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

Re: Using getContent() to access specific element.

PaulCrickard1 — Mon, 06 Oct 2014 14:58:31 GMT

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

Re: Using getContent() to access specific element.

LucasBrito — Mon, 06 Oct 2014 15:02:39 GMT

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.

Re: Using getContent() to access specific element.

TimWitt2 — Mon, 06 Oct 2014 15:15:05 GMT

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

Re: Using getContent() to access specific element.

LucasBrito — Mon, 06 Oct 2014 15:19:39 GMT

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

Re: Using getContent() to access specific element.

TimWitt2 — Mon, 06 Oct 2014 15:26:39 GMT

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

Re: Using getContent() to access specific element.

LucasBrito — Mon, 06 Oct 2014 15:35:16 GMT

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.

Re: Using getContent() to access specific element.

TimWitt2 — Mon, 06 Oct 2014 15:43:31 GMT

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

Re: Using getContent() to access specific element.

TimWitt2 — Mon, 06 Oct 2014 15:44:39 GMT

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

Re: Using getContent() to access specific element.

KenBuja — Mon, 06 Oct 2014 15:48:30 GMT

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

Re: Using getContent() to access specific element.

LucasBrito — Mon, 06 Oct 2014 16:02:23 GMT

Tim, the capitalization was a typo when typing the question. In the code it was as you suggested but the error remained. Unfortunately I cannot share the application since it is internal to the company, but here is a code snippet.

<script type="text/javascript">
        $( document ).bind( "ready", function( ) {
            $( document ).delegate( "path", "click", function( ) {
                console.log( $( this ) );
            } );   
        } );
       
        require(["esri/map", "esri/geometry/Point", "esri/symbols/SimpleMarkerSymbol", "esri/graphic", "dojo/_base/array", "dojo/dom-style", "dojox/widget/ColorPicker", "esri/InfoTemplate", "esri/Color", "dojo/dom", "dojo/domReady!"],
        function( Map, Point,SimpleMarkerSymbol, Graphic, arrayUtils, domStyle, ColorPicker, InfoTemplate, Color, dom) {
            map = new Map("mapDiv", {
                center  : [-98.35, 35.50],
                zoom    : 5,
                basemap : "gray"
                //basemap types: "satellite", "hybrid", "topo", "gray", "oceans", "osm", "national-geographic"
            } );

            map.on( "load", pinMaps);

           
            function pinMaps( ) {
                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(evt)
                        {
                            var str = evt.graphic.attributes.id;
                            console.log(str+"end");
                        });
                    } );
                }, 'json' );
            }

            function createSymbol( path, color ) {
                var markerSymbol = new esri.symbol.SimpleMarkerSymbol( );
                markerSymbol.setPath( path );
                markerSymbol.setColor( new dojo.Color( color ) );
                markerSymbol.setOutline( null );
                return markerSymbol;
            }
        } );
    </script>

<?php

class DefaultController extends Controller {
    public function indexAction( ) {
        return $this->render( 'MapBundle:default:test.html.twig', array( "name" => "Map", "title" => "Map", "subTitle" => "Test" ) );
    }
    
    public function pointAction( ) {
        $points = array( );
        
        $conn   = DriverManager::getConnection( array( 
            'driver' => '___',
            'dbname' => '___',
            'user'   => $this->container->getParameter( 'database_user' ),
            'password'   => $this->container->getParameter( 'database_password' )
        ) );
        
        
        $stmt = $conn->prepare( "SELECT * FROM test");
        $stmt->execute( ); 
        
        while( $row = $stmt->fetch( ) ) {
            $points[] = array( "id" => $row['markerID'],
                               "x" => $row['x'], 
                               "pincoords" => array( $row[ 'siteLon' ], $row[ 'siteLat' ] ),
                               "coords" => array( $row[ 'pinLon' ], $row[ 'pinLat' ] ) );
        }
        
        return new JsonResponse( array(  
            "points" => $points
        ) );
    }
}

Re: Using getContent() to access specific element.

TimWitt2 — Mon, 06 Oct 2014 17:07:37 GMT

Lucas,

I dont see why the attributes method wouldn't work. You can always open your developer tools in your browser (I use chrome), put a break after the click line and inspect the evt.graphic object and look where the attributes are.

Tim

Re: Using getContent() to access specific element.

LucasBrito — Tue, 07 Oct 2014 16:30:35 GMT

Tim, we tried all of the options but still did not get it to work. We ended up returning a string and trimming it with delimeters to isolate the value we needed in a variable.

Thank you for the assistance.