Client Side Data Join

This map shows how to join data to a vector tile layer on the map. The JoinedData component takes an array of records and joins them using the provided idCol to the source at run time. These can then be accessed in styling using the ['feature-state', colName] syntax.
This should work on PMTiles, MVT and GeoJSON sources.
Ensure that you use promoteId to indicated which column to use to get the id of the feature in the source that you are trying to target, and provide a sourceLayer if you are trying to join to PMTiles or MVT tiles.

Showing data set 0

svelte

<MapLibre
  style="https://basemaps.cartocdn.com/gl/positron-gl-style/style.json"
  class={mapClasses}
  standardControls
  center={[-87.622088, 41.778781]}
  zoom={10}
>
  <VectorTileSource
    url={'pmtiles://https://r2-public.protomaps.com/protomaps-sample-datasets/cb_2018_us_zcta510_500k.pmtiles'}
    promoteId={'GEOID10'}
  >
    <FillLayer
      paint={{
        'fill-opacity': hoverStateFilter(0.7, 0.4),
        'fill-color': ['coalesce', ['feature-state', 'color'], '#102020'],
      }}
      sourceLayer={'zcta'}
      manageHoverState
    />
    <JoinedData
      data={dataSet === 0
        ? [
            {
              color: '#ff0000',
              geoid: 60628,
            },
            {
              color: '#00fF00',
              geoid: 60608,
            },
          ]
        : [
            {
              color: '#ff0000',
              geoid: 60628,
            },
          ]}
      idCol="geoid"
      sourceLayer="zcta"
    />
  </VectorTileSource>
</MapLibre>

Back to Examples

Github