0

I am in the middle of a project which involves managing geospatial data via JavaScript. The data is extracted from a .geojson file and it comprises of geographical coordinates for various countries.

I am attempting to integrate a 2000km radius for each country, but I've noticed a peculiar situation where Russia's radius intersects with its neighboring countries

image 1

image 2

The geojson appears fine with a 0km buffer, but the problem starts cropping up as soon as the buffer is increased.

Below is a simplified snippet of the code I've been working with:

var map = new mapboxgl.Map({
    container: 'map',
    style: 'mapbox://styles/mapbox/streets-v12',
    center: [0, 0],
    zoom: 0,
    pitch: 0,
    bearing: 0,
    antialias: true,
    renderWorldCopies: false,
    projection: 'globe'
});

map.on('load', function () {
    fetch('./countries.geojson')
        .then(response => response.json())
        .then(data => {
            var russiaFeature;

            // Locate Russia feature and manage antimeridian line
            for (var i = 0; i < data.features.length; i++) {
                if (data.features[i].properties.name === "Russia") {
                    var bbox = [-180, -85, 180, 85];
                    russiaFeature = turf.bboxClip(data.features[i], bbox);
                    break;
                }
            }

            // Establish a 2000 km buffer around Russia
            var buffered = turf.buffer(russiaFeature, 2000, { units: 'kilometers' });

            map.addSource('russia-buffer', {
                type: 'geojson',
                data: buffered
            });

            map.addLayer({
                'id': 'russia-buffer-layer',
                'type': 'fill',
                'source': 'russia-buffer',
                'layout': {},
                'paint': {
                    'fill-color': '#088',
                    'fill-opacity': 0.8
                }
            });
        });
});

I've tested this both on Mapbox and Leaflet, however, the problem persists. My ultimate goal is to export these ranges and utilize them for a static map. Please suggest if there are other methods to accomplish this task.

I've tested this both on Mapbox and Leaflet, however, the problem persists. My ultimate goal is to export these ranges and utilize them for a static map. Please suggest if there are other methods to accomplish this task.

James Z
  • 12,209
  • 10
  • 24
  • 44

0 Answers0