最新消息:雨落星辰是一个专注网站SEO优化、网站SEO诊断、搜索引擎研究、网络营销推广、网站策划运营及站长类的自媒体原创博客

javascript - How to implement mapbox expression inside Marker? - Stack Overflow

programmeradmin2浏览0评论

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: )

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./a/61036364/5220885)

Share Improve this question asked Sep 13, 2020 at 11:40 n00bn00b 3361 gold badge5 silver badges13 bronze badges
Add a ment  | 

3 Answers 3

Reset to default 8

Markers don't support expressions. They are HTML elements, and behave pletely 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

As @SteveBennett sayed:

Markers don't support expressions. They are HTML elements, and behave pletely 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'); }
        }
      });

Adding up on @afruzan answer, if you have a list of mapboxgl.Markers, you can get the HTMLElement like this:

      for (const el of markers.current) {
    if (zoom <= 10) { el.getElement().classList.remove('zoom-10'); } else { el.getElement().classList.add('zoom-10'); }
    if (zoom <= 11) { el.getElement().classList.remove('zoom-11'); } else { el.getElement().classList.add('zoom-11'); }
    if (zoom <= 12) { el.getElement().classList.remove('zoom-12'); } else { el.getElement().classList.add('zoom-12'); }
    if (zoom <= 13) { el.getElement().classList.remove('zoom-13'); } else { el.getElement().classList.add('zoom-13'); }
    if (zoom <= 14) { el.getElement().classList.remove('zoom-14'); } else { el.getElement().classList.add('zoom-14'); }
    if (zoom <= 15) { el.getElement().classList.remove('zoom-15'); } else { el.getElement().classList.add('zoom-15'); }
    if (zoom <= 16) { el.getElement().classList.remove('zoom-16'); } else { el.getElement().classList.add('zoom-16'); }
  }
});

As you dont have the html element in the el variable, you have to user getElemet() to get the respective element

发布评论

评论列表(0)

  1. 暂无评论