How to implement mapbox expression inside Marker?

Question

How can I add Mapbox expressions inside mapboxgl.Marker() like this one:

"icon-size": ['interpolate', ['linear'], ['zoom'], 10, 1, 15, 0.5]

(I copied this expression from here: https://stackoverflow.com/a/61036364/5220885)

Answer 1

Markers don't support expressions. They are HTML elements, and behave completely differently.

You would have to fake it, along these lines:

1. Add a handler to the map's zoom event so you can update as the map zooms in and out.
2. Calculate a size, using regular old JavaScript.
3. Apply that size using CSS.

Something like this:

map.on('zoom', () => {
    const scalePercent = 1 + (map.getZoom() - 8)  * 0.4;
    const svgElement = marker.getElement().children[0];
    svgElement.style.transform = `scale(${scalePercent})`;
    svgElement.style.transformOrigin = 'bottom';
});

Codepen here: https://codepen.io/stevebennett/pen/MWyXjmR?editors=1001

Answer 2

As @SteveBennett sayed:

Markers don't support expressions. They are HTML elements, and behave completely differently.

assuming you are using html native elements as markers, to have some classes and using them in styling markers, you can use this code after adding markers to map:

      for (const el of yourMarkerElements) {
        let lat = ...;
        let long = ...;

        new Marker({ element: el, anchor: 'bottom-right' })
          .setLngLat(new LngLat(long, lat))
          .addTo(map);
      }

      // use following:
      const that = this;
      map.on('zoom', () => {
        const zoom = map.getZoom();
        for (const el of yourMarkerElements) {
          if (zoom <= 10) { el.classList.remove('zoom-10'); } else { el.classList.add('zoom-10'); }
          if (zoom <= 11) { el.classList.remove('zoom-11'); } else { el.classList.add('zoom-11'); }
          if (zoom <= 12) { el.classList.remove('zoom-12'); } else { el.classList.add('zoom-12'); }
          if (zoom <= 13) { el.classList.remove('zoom-13'); } else { el.classList.add('zoom-13'); }
          if (zoom <= 14) { el.classList.remove('zoom-14'); } else { el.classList.add('zoom-14'); }
          if (zoom <= 15) { el.classList.remove('zoom-15'); } else { el.classList.add('zoom-15'); }
          if (zoom <= 16) { el.classList.remove('zoom-16'); } else { el.classList.add('zoom-16'); }
        }
      });