Using getContent() to access specific element.

[LucasBrito]

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

[LucasBrito]

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

[TimWitt2]

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

[LucasBrito]

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.