CODEWITHSUNDEEP
mapboxgeojsonmapbox-gl
zitscher
zitscher

Reputation: 147

Applying Mapbox line-gradient to the entire Feature Collection instead of each step

I'm trying to apply a line-gradient to my FeatureCollection like this:

const progress = 0.5 // for simplification  

map.setPaintProperty(
    'track',
    "line-gradient",
    [
        "step",
        ["line-progress"],
        "rgba(255, 255, 255, 1)",
        progress,
        "rgba(0, 0, 0, 0)"
    ]
)

My FeatureCollection consists of several features which are displayed on the map as one long track. My goal is to show/hide programmatically a part of the whole track. Instead, Mapbox GL applies progress to all features instead of the whole track (see picture).

Not cool, not cool

What am I missing?

Thanks for your help

Upvotes: 3

Views: 376

Answers (1)

Polarcode
Polarcode

Reputation: 504

This might work for you; To achieve the same effect of showing/hiding a part of the entire track programmatically, you'll need to handle the styling dynamically using a combination of Mapbox GL JavaScript API and data manipulation.

e.g. (Assuming you have a FeatureCollection called trackCollection)

// Merge all features into one MultiLineString feature
const turf = require('@turf/turf');
const mergedTrack = turf.combine(trackCollection);

// Calculate the cut-off point distance
const totalDistance = turf.length(mergedTrack);
const cutOffDistance = totalDistance * progress;

// Style the layer with data-driven properties
map.addLayer({
  id: 'track-layer',
  type: 'line',
  source: {
    type: 'geojson',
    data: mergedTrack,
  },
  paint: {
    'line-width': 2,
    'line-gradient': [
      'interpolate',
      ['linear'],
      ['line-progress'],
      0, 'rgba(255, 255, 255, 1)', // Start of the track, full color
      cutOffDistance, 'rgba(255, 255, 255, 1)', // Up to the cut-off point, full color
      cutOffDistance + 0.1, 'rgba(0, 0, 0, 0)', // A bit after the cut-off point, transparent
      1, 'rgba(0, 0, 0, 0)', // Rest of the track, transparent
    ],
  },
});

It simply calculate the cutOffDistance based on the progress value and then use a data-driven property for the "line-gradient", where you create a gradient from the start of the track to the cut-off point and then make the rest of the track transparent.

Upvotes: 0

Related Questions