1

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 I am following

I want to get email addresses of pointers after selection. Here is a fiddle to start with.

Code Snippet from the fiddle:

 var map;

  require([
    "esri/map", 
    "esri/geometry/Point",
    "esri/symbols/SimpleMarkerSymbol",
    "esri/graphic", 
    "esri/layers/GraphicsLayer",
    "dojo/domReady!"
  ], function(
    Map, Point, SimpleMarkerSymbol, Graphic, GraphicsLayer
  ) {
    map = new Map("map", {
      basemap: "streets",
      center: [-88.21,42.21],
      zoom: 10
    });
    map.on("load", function() {
      var content = 'email@address.com';
      var gl = new GraphicsLayer();
      var p = new Point(-88.380801, 42.10560);
      var s = new SimpleMarkerSymbol().setSize(20);
      var g = new Graphic(p, s,{ 'title': 'Title', 'content': content }, new esri.InfoTemplate('${title}', '${content}'));
      gl.add(g);
      map.addLayer(gl);
    });
  });
  • Welcome to GIS SE! As a new user please take the Tour which leads you to help pages describing the need for you to include your code attempt within your question in order to receive programming assistance. – PolyGeo Oct 19 '15 at 8:55
  • The author has already put a fiddle with the example...This is an interesting issue which I am also facing. Anyone have any ideas? – AshesToAshes Oct 21 '15 at 5:33
  • @PolyGeo I am adding another fiddle which explain things better, now the only problem is that I am unable to capture all pointers, it only catches the last pointer. jsfiddle.net/t9h513c7/19 – Danish Adeel Oct 21 '15 at 5:54
  • I am not a developer, except in Python, but my understanding is that there should always be code included in programming questions here, even if you also provide a jsfiddle link as optional background: meta.stackexchange.com/questions/192255/… If you disagree feel free to discuss it at Meta GIS SE. – PolyGeo Oct 21 '15 at 6:16
  • PolyGeo - the entire code is wrapped inside a jsfiddle - that is the code. It is not optional background. – AshesToAshes Oct 21 '15 at 6:21
0

Here is my solution (see also this fiddle)

var map;
var gl;
var highlightSymbol;
var s;

require([
    "esri/map",
    "esri/geometry/Point",
    "esri/symbols/SimpleMarkerSymbol",
    "esri/graphic",
    "esri/layers/GraphicsLayer",
    "esri/toolbars/draw",
    "dojo/domReady!"], function (
Map, Point, SimpleMarkerSymbol, Graphic, GraphicsLayer) {
    map = new Map("map", {
        basemap: "streets",
        center: [-88.21, 42.21],
        zoom: 10
    });
    map.on("load", function () {
        highlightSymbol = new SimpleMarkerSymbol().setSize(20);
        highlightSymbol.setColor('green');
        //add drawing tool
        var tb = new esri.toolbars.Draw(map);
        //set drawing mode to extent
        tb.activate(esri.toolbars.Draw.EXTENT);
        //find points in Extent when user completes drawing extent
        tb.on("draw-end", findPointsInExtent);


        var content = 'email@address.com';
        var content1 = 'email1@address.com';
        gl = new GraphicsLayer();
        var p = new Point(-88.380801, 42.10560);
        var p1 = new Point(-88.390801, 42.11560);
        s = new SimpleMarkerSymbol().setSize(20);
        var g = new Graphic(p, s, {
            'title': 'Title',
            'content': content
        }, new esri.InfoTemplate('${title}', '${content}'));
        var g1 = new Graphic(p1, s, {
            'title': 'Title',
            'content': content1
        }, new esri.InfoTemplate('${title}', '${content}'));
        gl.add(g);
        gl.add(g1);
        map.addLayer(gl);


    });
    //find all points within argument extent
    function findPointsInExtent(extent) {
        var results = [];

        for (i = 0; i < gl.graphics.length; i++) {
            if (extent.geometry.contains(gl.graphics[i].geometry)) {
                gl.graphics[i].setSymbol(highlightSymbol);
                results.push(gl.graphics[i].getContent());
            }
            //else if point was previously highlighted, reset its symbology
            else if (gl.graphics[i].symbol == highlightSymbol) {
                gl.graphics[i].setSymbol(s);
            }
        }

        //display list of emails in extent
        document.getElementById("result").innerHTML = "<table><tbody>" + results.join("\n") + "</tbody></table>";
    }
});

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.