0

I'm confused on how to add my GeoJSON tileset to an existing map built with a default style. Do I add the GeoJSON by ID or by style? Here is what I'm working with now.l

Added .geojson to Tilesets as FCC_States2_4326-7v9iga ID = mmcinnis.crxr86ot

style made with tileset: mapbox://styles/mmcinnis/cjtroguqv0t8s1fqjo9o5rwvy

    <script>
    mapboxgl.accessToken = 'pk.eyJ1IjoibW1ja...';
    var map = new mapboxgl.Map({
        container: 'map',
        style: 'mapbox://styles/mapbox/light-v10',
        //style: 'mapbox://styles/mmcinnis/cjtroguqv0t8s1fqjo9o5rwvy',
        center: [-99.9, 41.5],
        zoom: 1
    });

    map.on('load', function () {
        map.addSource("fcc-states2-4326", {
            type: "geojson",
            data: "mapbox://styles/mmcinnis/cjtroguqv0t8s1fqjo9o5rwvy"
        })

        map.addLayer({
            'id': 'example',
            'type': 'fill',
            'source': "fcc-states2-4326",
            'layout': {},
            'paint': {
                'fill-color': '#088',
                'fill-opacity': 0.8
            }
        });
    });
    </script>
  • OK, I found some documentation and I think I'm close but the debugger shows 422 (Unknown) map.addSource("fcc-states2-4326", { type: "vector", url: "api.mapbox.com/datasets/v1/mmcinnis/…..." }) – user2084255 Mar 28 at 18:28
  • Had to add source-layer... map.addLayer({ 'id': 'mmcinnis.crxr86ot', 'type': 'fill', 'source': "fcc-states2-4326", "source-layer": "fcc-states2-4326", 'layout': {}, 'paint': { 'fill-color': '#088', 'fill-opacity': 0.8 } }); – user2084255 Mar 28 at 18:30
0

If you're added the data to your custom style in Mapbox Studio, ie. 'mapbox://styles/mmcinnis/cjtroguqv0t8s1fqjo9o5rwvy' then you can just skip addSource and addLayer and use your custom style as the style in the map initialisation.

Otherwise if you want to programatically add a new source and layer to your map, then addSource should be set type: "vector" if you're using a Mapbox Tileset ID, or if you want to use type: "geojson" you need to pass it either a URL to your GeoJSON file or the JSON object itself.

  • I will need the syntax for the addSource addLayer method as my next step in development is to data-join the GeoJSON with SQL query data. docs.mapbox.com/mapbox-gl-js/example/data-join – user2084255 Mar 28 at 17:10
  • I only see the 'id' on the mapbox tileset page, what points at the tileset? map.on('load', function () { map.addSource("fcc-states2-4326", { type: "vector", data: "What goes here???" }) map.addLayer({ 'id': 'mmcinnis.crxr86ot', 'type': 'fill', 'source': "fcc-states2-4326", 'layout': {}, 'paint': { 'fill-color': '#088', 'fill-opacity': 0.8 } }); }); – user2084255 Mar 28 at 17:17
  • Simply, in .addSource after type: "vector" what do you use to point to the tileset? All I see is the id? map.addSource("fcc-states2-4326", { type: "vector", data: "mmcinnis.crxr86ot" }) – user2084255 Mar 28 at 17:28
  • Where is the URL defined to the GeoJSON tileset? – user2084255 Mar 28 at 17:32
0

Here is the code I ultimately got to work, Thanks to all.

    <!DOCTYPE html>
    <html>
    <head>
<meta charset='utf-8' />
<title>Join local JSON data with vector tile geometries</title>
<meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' />
<script src='https://api.tiles.mapbox.com/mapbox-gl-js/v0.53.1/mapbox-gl.js'></script>
<link href='https://api.tiles.mapbox.com/mapbox-gl-js/v0.53.1/mapbox-gl.css' rel='stylesheet' />
<style>
    body {
        margin: 0;
        padding: 0;
    }

    #map {
        position: absolute;
        top: 0;
        bottom: 0;
        width: 100%;
    }
</style>

mapboxgl.accessToken = 'pk.eyJ1IjoibW1...'; var map = new mapboxgl.Map({ container: 'map', style: 'mapbox://styles/mapbox/light-v10', //style: 'mapbox://styles/mmcinnis/cjtroguqv0t8s1fqjo9o5rwvy', center: [-99.9, 41.5], zoom: 1 });

    map.on('load', function () { 
        map.addSource("FCC_States2_4326-7v9iga", {
            type: "vector", 
            url: "mapbox://mmcinnis.crxr86ot"
        })
        map.addLayer({ 
            'id': 'fcc-states2-4326', 
            'type': 'fill', 
            'source': "FCC_States2_4326-7v9iga", 
            "source-layer": "FCC_States2_4326-7v9iga",
            'layout': {},
            'paint': { 
                'fill-color': '#088', 
                'fill-opacity': 0.8 
        } 
    }); 
    });
</script>
    </body>
    </html>

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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