CODEWITHSUNDEEP
htmlweb-applicationsmapboxmapbox-gl-jsmapbox-gl
Fabio Andres Zabala
Fabio Andres Zabala

Reputation: 51

Adding a Tileset from mapbox into my map

I'm new working with mapbox, and recently I want to create a web map. I uploaded a shape into mapbox tilseset cloud, but when I try to add it into a map it doesn't display. This is the code funtion that I'm using:

        map.on('load', function() {
        map.addLayer({
            'id' : 'Resguardos',
            'type' : 'fill',
            "source" : {
                'type' : 'vector',
                'url' : 'mapbox://fabiofz1990.9lhgml6c',
            },
            'layout' : {},
            'paint' : {
                'fill-color' : '#0044b2',
                'fill-opacity' : 1
            }
        });

    });

Thank you

Upvotes: 5

Views: 3533

Answers (3)

hoogw
hoogw

Reputation: 5525

---- Updated 2023 ---- :

Add a raster tile source (mapbox official example)

https://docs.mapbox.com/mapbox-gl-js/example/map-tiles/

This is my working example. You will need:

step 1) add tile source

step 2) add tile layer based off the tile source you just created.

enter image description here

---- Original 2019 ---- :

you can NOT directly add mapbox TileSet into your browser client.

You have to create a new mapbox style, which use your tileSet.

This is working sample

https://transparentgov.net/cleargov1/766/new-2019-world-press-freedom-ranking-map-180-countries

https://transparentgov.net/json2tree/datahub.io/international/press-freedom-2019-mapbox-style.html

Upvotes: 0

Muhammad Imran Siddique
Muhammad Imran Siddique

Reputation: 509

You can add tilesets directly from the Mapbox studio.

  1. Copy tileset URL.List item
  2. Add URL like this. url: "mapbox://+tilesetid"
map.addSource('tileset_data', {
    "url": "mapbox://abcqqq123.cklxcyxew1b9421lpb8shxf4x-2ikvs",
    "type": "vector"
});
  1. Add the source name from above source name "tileset_data" in your layer and get source-layer from above picture.
       map.addLayer({
           'id': 'circles',
           'type': 'circle',
           'source': 'tileset_data',
           'source-layer': 'children_obesity',
           'paint': {
               'circle-color': '#7F3121',
               'circle-opacity': 0.75,
               'circle-radius': 5
           }
       });

Then you good to go.

Upvotes: 7

Andi-lo
Andi-lo

Reputation: 2312

I think to display it you would need to add the tileset data to the style that your are using.

There is an option for that in your mapbox account at: https://www.mapbox.com/studio/tilesets/

enter image description here

Upvotes: 2

Related Questions