Load data from an external GeoJSON file

Add a GeoJSONSource using a URL and show the data on a map. See the example: https://docs.mapbox.com//mapbox-gl-js/example/external-geojson/

by Nikolay Petrov

HTML

<script src="https://api.mapbox.com/mapbox-gl-js/v2.6.1/mapbox-gl.js"></script>
<link rel="stylesheet" href="https://api.mapbox.com/mapbox-gl-js/v2.6.1/mapbox-gl.css">

<div id="map"></div>

CSS

body { margin: 0; padding: 0; }
#map { position: absolute; top: 0; bottom: 0; width: 100%; }

JavaScript

mapboxgl.accessToken = 'pk.eyJ1IjoicGV0cm92bm4iLCJhIjoiVHJkcXROMCJ9.hzniKblVA-O0YJSvCfwztg';
    const map = new mapboxgl.Map({
        container: 'map', // container ID
        style: 'mapbox://styles/mapbox/satellite-v9', // style URL
        zoom: 7, // starting zoom
        center: [27.580, 53.878] // starting center
    });

    map.on('load', () => {
        map.addSource('earthquakes', {
            type: 'geojson',
            // Use a URL for the value for the `data` property.
            data: 'https://petrovnn.com/map/botany.geojson'
        });

        map.addLayer({
            'id': 'earthquakes-layer',
            'type': 'circle',
            'source': 'earthquakes',
            'paint': {
                'circle-radius': 8,
                'circle-stroke-width': 2,
                'circle-color': 'red',
                'circle-stroke-color': 'white'
            }
        });
    });