Load data from an external GeoJSON file
This example adds GeoJSON data from an external file and uses it in a layer on the map.
Upon loading the map, it uses addSource
to add the GeoJSONSource
to the map, using a URL string as the value for data
. Then it uses addLayer
to create a circle
layer that references the source.
<!DOCTYPE html><html><head><meta charset="utf-8"><title>Load data from an external GeoJSON file</title><meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no"><link href="https://api.mapbox.com/mapbox-gl-js/v3.0.1/mapbox-gl.css" rel="stylesheet"><script src="https://api.mapbox.com/mapbox-gl-js/v3.0.1/mapbox-gl.js"></script><style>body { margin: 0; padding: 0; }#map { position: absolute; top: 0; bottom: 0; width: 100%; }</style></head><body><div id="map"></div> <script> // TO MAKE THE MAP APPEAR YOU MUST // ADD YOUR ACCESS TOKEN FROM // https://account.mapbox.com mapboxgl.accessToken = 'YOUR_MAPBOX_ACCESS_TOKEN';const map = new mapboxgl.Map({container: 'map', // container ID// Choose from Mapbox's core styles, or make your own style with Mapbox Studiostyle: 'mapbox://styles/mapbox/satellite-v9', // style URLprojection: 'globe', // Display the map as a globe, since satellite-v9 defaults to Mercatorzoom: 2, // starting zoomcenter: [108, 4] // // starting center in [lng, lat]}); map.on('style.load', () => {map.setFog({}); // Set the default atmosphere style}); map.on('load', () => {map.addSource('earthquakes', {type: 'geojson',// Use a URL for the value for the `data` property.data: 'https://docs.mapbox.com/mapbox-gl-js/assets/earthquakes.geojson'}); map.addLayer({'id': 'earthquakes-layer','type': 'circle','source': 'earthquakes','paint': {'circle-radius': 4,'circle-stroke-width': 2,'circle-color': 'red','circle-stroke-color': 'white'}});});</script> </body></html>
Was this example helpful?