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?

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?

• javascript
• mapbox
• geojson
• mapbox-gl-js
• mapbox-api-tilequery

2 Answers 2

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.

• A Complete Guide to Sources and Layers in React and Mapbox GL JS
• Tilesets & Datasets: Managing Data in Mapbox Studio
• The Mapbox Developer's Handbook

Sources and layers are defined in the Mapbox-GL Style Spec: https://docs.mapbox.com/mapbox-gl-js/style-spec/

In short: sources define where the data comes from, layers define how sources are displayed.

Are layers related to the feature collection in some way?

Not really.

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

Vector tilesets are one type of source. GeoJSON sources (like what you are using here) are another.