ArcGIS Javascript api SimpleMarkerSymbol click event

Question

The application that am currently working on makes a request to an API which returns Lat,Long pair along with some record id. After successful response from the API, the application pins the LatLong on a base map using SimpleMarkerSymbol and is expected to attach the record id with the marker.

At the time of clicking the markers, the app should retrieves the id from the selected marker to make further requests. Currently I'm able to pin the markers succesfuly where as the following key question still to be answered

Is there any way to capture SimpleMarkerSymbol click event?
Is there any way to attach data attribures to the marker that will be used while the click event is dispatched?

Thanks, Beakal

Kate · Accepted Answer · 2014-07-21 10:21:40Z

I'm assuming that the external API you mention isn't an ArcGIS feature service and so you are then manually creating graphics to represent the features - if that's not the case can you expand the question a bit. Assuming it is the case you can achieve both of your requirements.

You can add attributes to a graphic using the setAttributes method or by passing in the attributes object when you create the graphic. The attributes object is just an object you create with a property for each attribute. Here is an example of the former, assuming g is the graphic you've just created:

g.setAttributes({
    id: 1,
    name: "London"
});

This adds an object with the properties id and name set to the specified values.

There are several places that you can listen for clicks, for example, on the map itself or on a particular graphics layer. Here is an example using the map:

map.on("click", function (evt) {
    console.log(evt.graphic.attributes.name);
});

As you can see, the click event is passed a property which I've called evt. This property has a reference to the graphic that was clicked (evt.graphic) and the graphic of course has the collection of attributes you set (evt.graphic.attributes). You can access each attribute individually by it's property of the attributes object, as shown with .name above. You'd probably want to do some checking, i.e. checking the evt contains a graphic before trying to access it and so on down the chain.

Hope this helps.

Thanks Simon. Yes the API is an external service not anything related to ESRI.

Manish Goyal · Accepted Answer · 2021-11-08 04:11:27Z

Here is my working code

 $points[] = array("point" => array(
                    $longitude,
                    $latitude
                ), 
                "color" => $color, 
                "site_name" => $account_namme
            );

Above is points array format

<script type="text/javascript">
        
            var map;
            require([
                "esri/map", "esri/geometry/Point", 
                "esri/symbols/SimpleMarkerSymbol", 
                "esri/graphic",
                "dojo/_base/array", "dojo/dom-style", 
                "dojo/domReady!"
            ], function(
                Map, Point,
                SimpleMarkerSymbol, Graphic,
                arrayUtils, domStyle
            ) {
                map = new Map("map",{
                    basemap: "streets",
                    center :[{$SITE_LONG}, {$SITE_LAT}],
                    zoom: 4,
                    minZoom: 0
                });
                
                map.on("load", mapLoaded);
                
                map.on("click", function (evt) {
                    
                    if(typeof evt.graphic.attributes !== 'undefined'){
                        console.log(evt.graphic.attributes.site_name);
                        var title = "Site Details";
                        var content =  "Site Name : " + evt.graphic.attributes.site_name;
    
                        map.infoWindow.setTitle(title);
                        map.infoWindow.setContent(content);
                        map.infoWindow.show(evt.mapPoint);
                    }
                    
                });
                function mapLoaded(){
                    
                    var points = {$POINTS|@json_encode};
                    arrayUtils.forEach(points, function(point) {
                        var graphic = new Graphic(new Point(point['point']), createSymbol(point['color']));
                        graphic.setAttributes({
                            site_name: point['site_name'],
                        });
                        map.graphics.add(graphic);
                    });
                }
                
                function createSymbol(color){
                    var markerSymbol = new esri.symbol.SimpleMarkerSymbol(SimpleMarkerSymbol.STYLE_CIRCLE, 10);
                    markerSymbol.setColor(new dojo.Color(color));
                    markerSymbol.setOutline(null);
                    
                    return markerSymbol;
                }
            });
        
    </script>

Collectives™ on Stack Overflow

ArcGIS Javascript api SimpleMarkerSymbol click event

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related