[GIS] Using mapbox gl js offline

geojsonmapbox-gl-jsvector-tiles

Im just wanting to understand my options for producing an offline map using Mapbox gl js. I have investigated several option with little signs of progress.

First, I have tried using Studio by uploading geojson and styling and then downloading said style as json meeting Mapbox GL Style Specification.

I am unsure of what to do with this json?

Secondly, without success I have tried supplying the original geojson to the data parameter and as expected receive cors errors. 

map.on('load', function () {
    map.addSource("markers", {
        "type": "geojson",
        "data": 'wpi.geojson'
    });

    map.addLayer({
        "id": "markers",
        "type": "symbol",
        "source": "markers",
        "layout": {
            "icon-image": "{marker-symbol}-15",
            "text-field": "{title}",
            "text-font": ["Open Sans Semibold", "Arial Unicode MS Bold"],
            "text-offset": [0, 0.6],
            "text-anchor": "top"
        }
    });
});

Error

XMLHttpRequest cannot load file:///C:/Project/wpi.geojson. Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https, chrome-extension-resource.

Is this possible with the Mapbox.gl API?

It seems as tho the documentation is limited in directions for this.

Best Answer

Im just wanting to understand my options for producing an offline map using Mapbox gl js.

Mapbox GL JS is a library for rendering vector tiles as Mabox PBF files served over HTTP. In order to use it "offline", you'd have to come up with some way serving those files "offline". I'm using quotes because it depends a bit what you mean. If you just mean disconnected from the internet, you could run a local HTTP server. If you mean "a browser with no access to any servers", then you'll be limited to using non-vector-tile sources, such as GeoJSON, or creating data dynamically in the browser.

First, I have tried using Studio by uploading geojson and styling and then downloading said style as json meeting Mapbox GL Style Specification.

I am unsure of what to do with this json?

That JSON is a Mapbox Studio style, which explains how to style the data, but obviously doesn't include the data. The main thing to do with it is to pass it to MapboxGLJS, so it can render your data, which typically will be stored on Mapbox's servers.

Secondly, without success I have tried supplying the original geojson to the data parameter and as expected receive cors errors.

That's because you're loading your file through the file:// protocol. You need to run a local HTTP server to make this work.

Related Question