Search code examples
javascriptjsonarcgisesri

Arcgis Esri Map: Collect pictureMarkerSymbols info on area select


I am trying to create a map where I can create a selection area, and get info of all graphic pointers under it, I tried to modify with following example, but they are using web service and queries, and I want it with json or array.

Thats the example http://developers.arcgis.com/javascript/samples/graphics_extent_query/ I am following

I want to get email addresses of pointers after selection. Here is a fiddle http://bit.ly/1jwLazp to start with.


Solution

  • I combined your fiddle with the sample to produce the following:

    https://jsfiddle.net/gary4620/t9h513c7/17/

    var map;
    var s;
    var gl;
    var highlightSymbol;
    
    require([
        "esri/map",
        "esri/geometry/Point",
        "esri/symbols/SimpleMarkerSymbol",
        "esri/graphic",
        "esri/layers/GraphicsLayer",
        "esri/toolbars/draw",
        "esri/symbols/SimpleMarkerSymbol",
        "esri/InfoTemplate",
        "dojo/domReady!"], function (
    Map, Point, SimpleMarkerSymbol, Graphic, GraphicsLayer, Draw, SimpleMarkerSymbol, InfoTemplate) {
        function initToolbar(map) {
            var tb = new Draw(map);
            tb.on("draw-end", findPointsInExtent);
            tb.activate(Draw.EXTENT);
        }
    
        function findPointsInExtent(result) {
            var extent = result.geometry;
            var results = [];
            require(["dojo/_base/array"], function (array) {
                array.forEach(gl.graphics, function (graphic) {
                    if (extent.contains(graphic.geometry)) {
                        graphic.setSymbol(highlightSymbol);
                        results.push(graphic.getContent());
                    }
                    //else if point was previously highlighted, reset its symbology
                    else if (graphic.symbol == highlightSymbol) {
                        graphic.setSymbol(s);
                    }
                });
    
                //TODO use results as needed; here we just print to console
                console.log("There are " + results.length + " results:");
                console.log(results.join(""));
            });
        }
    
        map = new Map("map", {
            basemap: "streets",
            center: [-88.21, 42.21],
            zoom: 10
        });
        map.on("load", function () {
            var content = 'email@address.com';
            gl = new GraphicsLayer();
            var p = new Point(-88.380801, 42.10560);
            s = new SimpleMarkerSymbol().setSize(20);
            var g = new Graphic(p, s, {
                'title': 'Title',
                'content': content
            }, new InfoTemplate('${title}', '${content}'));
            gl.add(g);
            map.addLayer(gl);
    
            initToolbar(this);
        });
        highlightSymbol = new SimpleMarkerSymbol().setColor(new dojo.Color([255,0,0]));
    });