0

I am trying to determine if a set of points are within the bounds of a grid layer (specifically what rectangular cells are those points in) so I can highlight just those grid cells (or add a popup for that grid cell). Using MongodB or a spatial database query is not an option; the solution needs to be within the realm of javascript and Leaflet. I've looked at the leaflet-pip plugin, but I don't see why using .getBounds().contains() to do this won't work using the grid layer instead of the whole view. In the code below, I have created an empty var for the grid (var = L.geoJson();) which should act as a global variable once it is filled through the $.getJSON request (I am not including that part). I am then using it within my ajax request to get the point data. I am currently getting a leaflet-src.js:1873 Uncaught TypeError: Cannot read property 'lat' of undefined error, but I think I am just doing something simple wrong. Any ideas of how I could correct this to get it to work?

$.ajax({
    type: 'GET',
    url: "<url>",
    timeout: 8000,
    crossDomain: true,
    dataType: 'json',
    data: {},
    headers: {
        "VMUser": "user"
    },
    //Renders data to view
    success: function (data) {
      console.log(data);
        data.forEach(function (value) {
            var jobName = value.name;
            var createdBy = value.createdby;
            var latitude = value.latitude;
            var longitude = value.longitude;
            var id = value.jobid;
            var status = value.status;
            var provider = value.provider;

            var marker = L.marker([value.latitude,value.longitude]).addTo(map);

            var circle = L.circle([value.latitude, value.longitude], 500, {
             color: 'red',
             fillColor: '#f03',
             fillOpacity: 1.5 }).addTo(map);

            *if(grid.getBounds().contains(marker.getLatLng())){console.log('marker detected')}*

            grid.bindPopup("<b>Job Name: "+jobName+"</b><br>Created By: "+createdBy+"<br>Latitude: "+latitude+"<br>Longitude: "+longitude+"<br>Status: "+status+"<br>Provider: "+provider+".");
            grid.on('mouseover', function (e) {
            this.openPopup();
            });
            grid.on('mouseout', function (e) {
            this.closePopup();
            });

        });
    },

  });
});
  • Simple check for calling the correct property - does getBounds.contains([value.latitude, value.longitude]) work? – Barrett Aug 9 '16 at 20:01
  • Thus far, that doesn't seem to work. I tried making a global "Jobs" variable where Jobs = data" and then getting the value.lat/lng for each job to use in the .contains(lat, lng)` but there is still an issue. I am now trying to create a global variable for the position of the marker using pos = marker.getLatLng(); Thus far, it just returns the value for the last Job, not every Job. – gwydion93 Aug 10 '16 at 18:34

Your Answer

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

Browse other questions tagged or ask your own question.