Стили всплывающих окон по-разному в зависимости от слоя, на который вы нажали, с помощью Mapbox GL JS - PullRequest
Новая
       72

Стили всплывающих окон по-разному в зависимости от слоя, на который вы нажали, с помощью Mapbox GL JS

0 голосов
/ 10 июня 2018

В настоящее время я пытаюсь дать своим всплывающим окнам другой фон в зависимости от слоя, в котором они находятся (т. Е. У меня есть слой под названием «Местные сайты», где я хотел бы, чтобы фон всплывающего окна отличался от других слоев).

Я попытался дать всплывающему окну className, но я не уверен, как правильно вызвать его в CSS.

Ниже приведен пример всплывающего скрипта в моем html-документе (скрипт для всплывающих окон с двумя разными слоями): 

// popup for the Other European Sites layer 
map.on('click', 'Other European Sites', function (e) {
new mapboxgl.Popup()
    .setLngLat(e.lngLat)
    .setHTML('<h2>' + 'European Site' + '</h2>' + 
        '<p>' + e.features[0].properties.placeName + '</p>' + 
        '<h2>' + 'Story' + '</h2>' + 
        '<p>' + e.features[0].properties.Story + '</p>' + 
        '<h2>' + 'Latitude' + '</h2>' + 
        '<p>' + e.features[0].properties.latitude + '</p>'  + 
        '<h2>' + 'Longitude' + '</h2>' + 
        '<p>' + e.features[0].properties.longitude + '</p>')
    .addTo(map);
});

// popup for the Other Indigenous Sites layer
map.on('click', 'Other Indigenous Sites', function (e) {
new mapboxgl.Popup({className: 'popupCustom'})
    .setLngLat(e.lngLat)
    .setHTML('<h2>' + 'Indigenous Site' + '</h2>' + 
        '<p>' + e.features[0].properties.placeName + '</p>' + 
        '<h2>' + 'Story' + '</h2>' + 
        '<p>' + e.features[0].properties.Story + '</p>' + 
        '<h2>' + 'Latitude' + '</h2>' + 
        '<p>' + e.features[0].properties.latitude + '</p>'  + 
        '<h2>' + 'Longitude' + '</h2>' + 
        '<p>' + e.features[0].properties.longitude + '</p>')
    .addTo(map);
});

Вот мой текущий CSS, который дает всем моим всплывающим окнам одинаковый фон: 

.mapboxgl-popup-content {
overflow-y: scroll;
background-color: #000000;
}

Как бы я назначил всплывающим окнам разные имена классов и назвал их в CSS, чтобы у меня были разные фоны для каждого слоя?

Большое спасибо за любой вклад!

1 Ответ

0 голосов
/ 12 июня 2018

className - это имя класса CSS, которое будет применено к всплывающему контейнеру (который содержит элемент «mapboxgl-popup-content»).Поэтому, если вы хотите, чтобы слой «Другие коренные сайты» имел, скажем, желтые всплывающие окна, вы можете сделать это: 

.mapboxgl-popup-content {
    overflow-y: scroll;
    background-color: #000000;
}

.popupCustom .mapboxgl-popup-content {
    background-color: yellow;
}

Обратите внимание, однако, что эта функция была только очень недавно добавлена ​​ иЯ не думаю, что это было выпущено еще.(Это не в опубликованных документах ).

...