1

I have certain documents residing on within my database. Currently i am able to display their Geojson on the map by drawing a polyogon within a certain area and then clicking on a button but i want to be able to do this whole process in such a way that if user creates a polygon on the map for query, it automatically returns the result without any button involved in between. which event handler should i be using for that?

JS code

angular.extend($scope, {
  center: {
    lat: 51.505,
    lng: 10.09,
    zoom: 3
  },
  controls: {
    scale:true,
    draw: {}

  },

  layers: {
    baselayers: {
      mapbox_light: {
        name: 'Mapbox Streets',
        url: 'https://api.mapbox.com/styles/v1/mapbox/streets-v10/tiles/256/{z}/{x}/{y}?access_token=pk.eyJ1IjoicmVoYW5zNTE2IiwiYSI6ImNpeWxjcWNkODAwNGwzM3FxamR6a2gxOXkifQ.PuUfs90MyfmVGYVqx0AoUw',
        type: 'xyz',
        layerOptions: {
          apikey: 'pk.eyJ1IjoicmVoYW5zNTE2IiwiYSI6ImNpeWxjcWNkODAwNGwzM3FxamR6a2gxOXkifQ.PuUfs90MyfmVGYVqx0AoUw',
          mapid: 'mapbox.streets',
          format: '@2x.png'
        },
        layerParams: {
          showOnSelector: false
        }
      }
    },
    overlays: {
      draw: {
        name: 'draw',
        type: 'group',
        visible: true,
        layerParams: {
          showOnSelector: false
        }
      }
    }
  }
});


leafletData.getMap().then(function(map) {

  leafletData.getLayers().then(function(baselayers) {
    var drawnItems = baselayers.overlays.draw;

    map.on('draw:created', function (e) {
      var layer = e.layer;

      drawnItems.addLayer(layer);

      console.log(JSON.stringify(layer.toGeoJSON()));
      coordinates_selected = layer.toGeoJSON();
    });
  });
});

function fetching data from server

function callingspatialsearch(){
  console.log('calling spatial search');
  var deferred = $q.defer();
  httpRequests.
  spatialsearch(coordinates_selected)
    .then(cb1)
    .catch(errorHandler);
  return deferred.promise;


  function cb1(response){
    $log.debug('result of search2: %o', response);
    var t= response.data.hits.hits;
    var c=[];
    for (var x in t){
      c.push(t[x]._source.metadata.o2r.spatial.geometry);
    }
    console.log(c,'response array');
    deferred.resolve(response);
    angular.extend($scope, {
      geojson: {
        data: c,
        style: {
          fillColor: "green",
          weight: 2,
          opacity: 1,
          color: 'white',
          dashArray: '3',
          fillOpacity: 0.7
        }
      }
    });
  }

  function errorHandler(e){
    $log.debug('search error: %o', e);
    deferred.resolve(e);
  }

}
6
  • How are you letting users draw polygons? Leaflet.draw, Leaflet.editable, something else? – IvanSanchez May 26 '17 at 11:47
  • @IvanSanchez leaflet.draw – Rehan May 26 '17 at 14:09
  • And have you read leaflet.github.io/Leaflet.draw/docs/… ? – IvanSanchez May 27 '17 at 14:58
  • @IvanSanchez yes i have gone through the docs. i am using draw:created currently in my code which i have added into the question but i am still not sure how to fetch the data automatically from server without any buttons invloved? i cannot figure out how and which event should be used for that? – Rehan May 29 '17 at 8:13
  • You just fetch the data from the server inside the handler for the draw:created event. – IvanSanchez May 29 '17 at 9:00
2

Judging by the architecture of your code, the approach would be to call

httpRequests.spatialsearch(coordinates_selected)

inside the handler for the draw:created event, making sure that the coordinates are passed and ultimately used in the HTTP request, e.g.:

map.on('draw:created', function (ev) {
  httpRequests.spatialsearch(ev.layer.toGeoJson())
  .then(function(data){
    ...
  })

  ...
});

The way your code is written now makes it impossible to know the data that httpRequests.spatialsearch() expects as an input. Does it expect a GeoJSON Feature? A GeoJSON Geometry? Coordinates in a plain array? Pairs of coordinates in a nested array? A Feature is not a Geometry which is not a set of coordinates, and you should note (hint: use comments in your code) what each function expects as an input.

1
  • got it solved by just calling the function in draw:created handler. – Rehan May 29 '17 at 13:01

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.