Mapbox - добавление всплывающего события в слой

Question

Я использую mapbox-gl-js API и имею 2 слоя с id: 'A' и id: 'B' на моей карте.

map.addLayer({
    id: 'A',
    type: 'symbol',
...../*My code*/
});
map.addLayer({
    id: 'B',
    type: 'symbol',
...../*My code*/
});

Я хочу добавить всплывающее окно, когда я нажимаю на слой с id: 'B'

Как я могу это сделать?

Answer 1

Вместо того, чтобы делать это встроенным, как указано выше, вы также можете сделать следующее. В зависимости от того, что вы делаете, этот метод может быть более полезным:

var popup = new mapboxgl.Popup()
  .setHTML('</br>Property Marker 1');

var marker = new mapboxgl.Marker()
  .setLngLat([-79.367196, 44.2197703])
  .addTo(map)
  .setPopup(popup);

Этот метод также автоматически создает событие click вместо необходимости делать это с Jquery, при использовании «setPopup» на маркере при нажатии автоматически отображается HTML-содержимое всплывающего окна.

Answer 2

Что-то вроде

map.on('click', 'B', function (e) {
    new mapboxgl.Popup()
        .setLngLat(e.lngLat)
        .setHTML("POPUP!")
        .addTo(map);
});