Search code examples
javascriptmapboxgeojsonmapbox-gl-jsmapbox-api-tilequery

What is the difference between Source, Layer and Tileset in MapBox?

I'm currently going over a piece of code which uses MapBox GL JS and has an addSource() function which looks like this

this.mapAdapter.map.addSource(`${this.asset.uuid}-data`, {
        type: 'geojson',
        data: this.getMapboxGeometry(),
      })

And another addLayer() function which looks like this

this.mapAdapter.map.addLayer({
        id: `${this.asset.uuid}-polygon`,
        type: 'fill',
        source: `${this.asset.uuid}-data`,
        filter: ['==', '$type', 'Polygon'],
        }

I want to know what the difference between source and layer is. I can't seem to find a proper clear definition fo it.

The code for feature collection is as follows

 type: 'FeatureCollection',
  features: [
    {
      type: 'Feature',
      properties: {},
      geometry: {
        type: 'Polygon',
      ...}

Are layers related to the feature collection in some way?

Are tilesets another name for sources or are they entirely different?

Solution

  • I want to know what the difference between source and layer is. I can't seem to find a proper clear definition fo it.

    I had a super similar struggle in trying to understand the differences between sources, layers, datesets, tilesets, styles, etc when I started to learn Mapbox. It is fantastic how much Mapbox offers and how many docs they have, but it is easy to get lost in the noise.

    I think of a sources as a mini data store for my map and layers as the visual representation of a source. Adding the source tells Mapbox that "hey, this is a data store that contains or more layers that could get added to the map". When you add a layer to a map, you then point it at the source and tell Mapbox how to represent the source on the map.

    Once you add a source to a map, you can create any number of layers using it. For instance, if I added a source that contained city parks, I could create the following three layers from that single source.

    • a fill layer that represents the park boundaries as shaded polygons
    • a line layer that represents the boundaries as an outline
    • a symbol layer that displays the park names as text labels

    I wrote a Mapbox and React Deep Dives series that covers this in more depth. Here are some posts that are super relevant to your questions.