[GIS] LEAFLET – geojson properties in bounding box

extentsgeojsonleaflet

Is there a way to show geojson properties which are located in current bounding box?

something like this http://turbo87.github.io/leaflet-sidebar/examples/listing-markers.html
with geojson and its props

Best Answer

The following example does just that, using Mapbox.js

https://www.mapbox.com/mapbox.js/example/v1.0.0/listing-markers/

In this case, the properties consist of a title, composed of the markers lat lng coordinates

<script>
L.mapbox.accessToken = '<your access token here>';
var map = L.mapbox.map('map', 'mapbox.light');
var myLayer = L.mapbox.featureLayer().addTo(map);
var features = [];

for (var x = -120; x < 120; x += 20) {
    for (var y = -80; y < 80; y += 10) {
        features.push({
            type: 'Feature',
            geometry: {
                type: 'Point',
                coordinates: [x, y]
            },
            properties: {
                'marker-color': '#000',
                'marker-symbol': 'star-stroked',
                title: [x, y].join(',')
            }
        });
    }
}

myLayer.setGeoJSON({
    type: 'FeatureCollection',
    features: features
});

map.on('move', function() {
    // Construct an empty list to fill with onscreen markers.
    var inBounds = [],
    // Get the map bounds - the top-left and bottom-right locations.
        bounds = map.getBounds();

    // For each marker, consider whether it is currently visible by comparing
    // with the current map bounds.
    myLayer.eachLayer(function(marker) {
        if (bounds.contains(marker.getLatLng())) {
            inBounds.push(marker.options.title);
        }
    });

    // Display a list of markers.
    document.getElementById('coordinates').innerHTML = inBounds.join('\n');
});

map.setView([37, -77], 5);
</script>
Related Question