ArcGIS Javascript api SimpleMarkerSymbol click event

BeakalGobena · ‎07-20-2014

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

ReneWoy · ‎07-21-2014

the marker is part of a layer
all layer have a on click event
a graphics includes methods
to add attributes and info templates

For a live example show her

KenBuja · ‎07-21-2014

The SimpleMarkerSymbol gets added to a GraphicsLayer (either its own layer or the map.graphics layer), which has a click event.

Here's an example of adding an attribute to a graphic (adapting the Create Circles sample)

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
    <title></title>
    <link rel="stylesheet" href="https://community.esri.com//js.arcgis.com/3.10/js/esri/css/esri.css">
    <link rel="stylesheet" href="http://js.arcgis.com/3.10/js/dojo/dijit/themes/tundra/tundra.css">
    <style>
        html, body, #map {
            height: 100%;
            width: 100%;
            margin: 0;
            padding: 0;
        }

        #controls {
            background: #fff;
            box-shadow: 0 6px 6px -6px #999;
            color: #444;
            font-family: sans-serif;
            height: auto;
            left: 1em;
            padding: 1em;
            position: absolute;
            top: 1em;
            width: auto;
            z-index: 40;
        }

            #controls div {
                padding: 0 0 1em 0;
            }
    </style>

    <script src="//js.arcgis.com/3.10/"></script>
    <script>
        var map, recordID = 0, mapClickEvent;

        require([
          "esri/map", "esri/geometry/Circle", "esri/symbols/SimpleFillSymbol",
          "esri/graphic", "esri/layers/GraphicsLayer",
          "dojo/dom", "dojo/dom-attr", "dijit/registry", "dojo/on", "dojo/parser", "dijit/form/Button", "dojo/domReady!"
        ], function (
          Map, Circle, SimpleFillSymbol,
          Graphic, GraphicsLayer,
          dom, domAttr, registry, on, parser, Button
        ) {

            var button = new Button({
                onClick: function () {
                    on.once(map, "click", function (e) {
                        var radius = map.extent.getWidth() / 10;
                        var circle = new Circle({
                            center: e.mapPoint,
                            geodesic: domAttr.get(geodesic, "checked"),
                            radius: radius
                        });
                        var attribute = { "RecordID": recordID }
                        var graphic = new Graphic(circle, symbol, attribute);
                        gl.add(graphic);
                        recordID += 1;
                    });
                }
            }, btnClick).startup();
              map = new Map("map", {
                basemap: "streets",
                center: [-120.741, 56.39],
                slider: false,
                zoom: 6
            });
            var symbol = new SimpleFillSymbol().setColor(null).outline.setColor("blue");
            var gl = new GraphicsLayer({ id: "circles" });
            var geodesic = dom.byId("geodesic");
            map.addLayer(gl);


            gl.on("click", function (evt) {
                console.log("Record ID: " + evt.graphic.attributes.RecordID);
            });
        });
    </script>
</head>
<body class="tundra">
    <div id="map"></div>
    <div id="controls">
        <button data-dojo-type="dijit/form/Button" type="button" id="btnClick">Add Graphic</button>
        <input type="checkbox" id="geodesic">
        <label for="geodesic">Geodesic?</label>
    </div>
</body>
</html>

NicholasHaney · ‎07-21-2014

No, symbols do not have click events or methods but graphics do. A symbol only sets the appearance of a graphic. You can set the click event of a graphic as follows:

<your graphic>.on("click", function(evt) { <your function>});

If you want to access the attributes of a selected graphic within your click event function you could use:

evt.target.attributes.<desired attribute>

It is also possible to set the attributes of a graphic using JSON strings.

<your graphic>.attributes = {"name1":"value1", "name2":"value2", "name3":value3", etc.};

However, graphics are often created from either geoprocessing tasks or queries where a hosted map or feature service is accessed and returns a deferred object that you must display using graphics. You can limit what attributes are assigned to your graphic by setting which outfields you want returned like so:

query.outFields = [<enter the fields you want returned>];