How to Use China GeoJSON in Mapbox GL JS

Host the data on your own server

Place china.geojson where your web application can request it over HTTP(S). Mapbox GL JS can load that URL as a GeoJSON source. You will need your own Mapbox access token, and the browser must be allowed to fetch the file.

Minimal Mapbox GL JS layer example

map.on('load', () => {
  map.addSource('china-boundary', {
    type: 'geojson',
    data: '/china.geojson'
  });
  map.addLayer({
    id: 'china-outline',
    type: 'line',
    source: 'china-boundary',
    paint: {
      'line-color': '#d93025',
      'line-width': 1.5
    }
  });
});

This snippet assumes an initialized Mapbox GL JS map instance and a correctly served GeoJSON file. Review Mapbox licensing and usage limits for your deployment.

Check before you ship

Inspect geometry size, rendering performance, longitude/latitude order, alignment with the chosen basemap and rights to use the data. If you need province-by-province interactivity, first check whether your dataset actually contains distinct provincial polygons.

Explore the dataset →