[GIS] Clipping GeoJSON in leaflet

clipgeojsonleaflet

I am using leaflet 1.0.0 to display the GeoJSON. The GeoJSON contains data for the whole bounding box but I want to display the feature in some location only.

Is it possible to clip the GeoJSON with another GeoJSON or something like that to display on the leaflet map?

Best Answer

Yes, it's possible, but it's not something that Leaflet can (or should) do.

Instead, research into other tools specialized in geoprocessing, like e.g. turf.js's bboxClip().

Related Solutions

[GIS] Leaflet Geojson Styling

First try drawing the layer without specifying a style, does it draw with the default styling ? This will help determine if the problem lies with the style definition or the data itself.

What geometry type is the data ? The style example you have given will symbolise polylines and polygons only.

For point data this will be by default loaded as the default markers. If you wish to edit the style of point data in this way you can use the pointToLayer example given ;

var geojsonMarkerOptions = {
    radius: 8,
    fillColor: "#ff7800",
    color: "#000",
    weight: 1,
    opacity: 1,
    fillOpacity: 0.8
};

L.geoJson(someGeojsonFeature, {
    pointToLayer: function (feature, latlng) {
        return L.circleMarker(latlng, geojsonMarkerOptions);
    }
}).addTo(map);

[GIS] LEAFLET – geojson properties in bounding box

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>

Best Answer

Related Solutions

[GIS] Leaflet Geojson Styling

[GIS] LEAFLET – geojson properties in bounding box

Related Question