4

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.

1 Answer 1

1

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.

3
  • Few corrections: 1) You are not limited to non-vector-tile sources, you can download or produce them yourself 2) You can make all work without http server, using only file://, but you need to download all resources locally. Oct 11, 2016 at 7:32
  • Thanks - Mapbox-gl-js's support for non-vector-tile sources has greatly improved. Yeah, you can load and display whole GeoJSON files locally. Oct 14, 2016 at 2:59
  • Or you can go with .mvt Oct 14, 2016 at 11:32

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.