Using a custom Mapbox Style's internal GeoJSON data as a source

Question

I'm currently trying to render a map, with data coming from shapefiles (transformed into GeoJSON), upon uploading to Mapbox's servers.

My demo output can be viewed at: https://ciatph.github.io/amia-lowres-hover.html

I would like to inquire if I have rendered the map efficiently, as used in the demo page. So far, I have:

Uploaded a GeoJSON Dataset
Exported the Dataset into a Tileset
Added the Tileset into a Style
Used the Style to load an initial base map
Used the uploaded Dataset as a data source for another Layer (on top of the initial map). This Layer listens and responds to mouse hover and click events
Used the uploaded Dataset as a data source for another Layer with Filters to color the hovered region differently for the created Layer in step #5.

Screenshot of relevant Mapbox script

My questions for this approach are:

Is there a way to use the Style's internal (GeoJSON) Dataset for the map.addSource() part, such that it doesn't need to be re-loaded or redefined again for creating interactive Layers? I'm concerned of network activity if its being re-downloaded again at this point. I'm also interested to know if this is possible, because we have large GeoJSON data that are almost 100MB in size. This gets automatically converted into Tileset upon moving from Amazon S3 temporary servers to mapbox, and there are no Dataset created to play with the map.addSource() part
I can use Mapbox's default styles for basemap, (i.e., mapbox://styles/mapbox/streets-v9), and omit step #4. If I go for this approach, will the Dataset loading (for step #5) be efficient and fast enough for large data, as opposed if its used or loaded via Style?

I hope you can help me with my queries and enlighten me of more salable and efficient approaches. Thank you.

Steve Bennett Steve Bennett · Accepted Answer · 2017-08-20T04:14:30

Let's start by clarifying your current situation:

Your style contains a vector tileset with id ciatph.cj64in9zo1ksx32mr7ke3g7vb-93srz, referred to in your style as amia-lowres-tileset within the composite vector tile source.
It is also accessible as a dataset through the ID ciatph/cj64in9zo1ksx32mr7ke3g7vb, since you uploaded it as a dataset.
Your script is loading the dataset at runtime.

I don't see any reason you need to refer to the dataset instead of the tileset. So, remove the code that adds the dataset, and update the two styles to refer to the tileset (source: "composite") instead.

    // Only used for coloring hover effect. Data informatiion be retrieved from styles alone
    /*      
    map.addSource("dataSource", {
        "type": "geojson",
        'data': 'https://api.mapbox.com/datasets/v1/ciatph/cj64in9zo1ksx32mr7ke3g7vb/features?access_token=pk.eyJ1IjoiY2lhdHBoIiwiYSI6ImNqNXcyeTNhcTA5MzEycHFpdG90enFxMG8ifQ.gwZ6uo6pvx4-RZ1lHODcBQ'
    });    
    */

    // add layer to color the raw source data
    map.addLayer({
        'id': 'municipalities',
        "type": "fill",
        "source": "composite",
        "source-layer": "amia-lowres-tileset",
        "layout": {},
        "paint": {
            "fill-color": "#627BC1",
            "fill-opacity": 0.5
        }
    });

    // add a conditional layer to play over the source data on hover event
    map.addLayer({
        "id": "state-fills-hover",
        "type": "fill",
        "source": "composite",
        "source-layer": "amia-lowres-tileset",
        "layout": {},
        "paint": {
            "fill-color": "#ff4",
            "fill-opacity": 1
         },
         "filter": ["==", "MUNI_CITY", ""]
    });

https://codepen.io/stevebennett/pen/OjvMWO

Using a custom Mapbox Style's internal GeoJSON data as a source

1 Answers