Mapbox-gl-js: Add a parameter to Popup that allows users to add CSS classes

Created on 9 Jul 2016 · 5Comments · Source: mapbox/mapbox-gl-js

how do I append a class along with class mapboxgl-popup. Thanks

Source

infacq

👍1

Most helpful comment

Instead of adding a class to the mapboxgl-popup div, supply your own HTML content (using setHTML or setDOMContent that contains a div with the desired class.

I down voted this because it is a child of the popup container which includes the popup tip, hence with this approach it seems you can't control the style of the popup tip.

Adding CSS classes to the root popup container would address that.

andrewharvey on 27 Feb 2017

👍14 ❤1

All 5 comments

This functionality is not currently supported in GL JS. I have repurposed this ticket to track that functionality. I encourage you to submit a PR adding it! Here is the relevant line: http://github.com/mapbox/mapbox-gl-js/blob/66a567cfb7b566f672f7e77399c6607ad86701ce/js/ui/popup.js#L174-L175

lucaswoj on 11 Jul 2016

👍1

Instead of adding a class to the mapboxgl-popup div, supply your own HTML content (using setHTML or setDOMContent that contains a div with the desired class.

jfirebaugh on 12 Jul 2016

👎9

Instead of adding a class to the mapboxgl-popup div, supply your own HTML content (using setHTML or setDOMContent that contains a div with the desired class.

I down voted this because it is a child of the popup container which includes the popup tip, hence with this approach it seems you can't control the style of the popup tip.

Adding CSS classes to the root popup container would address that.

andrewharvey on 27 Feb 2017

👍14 ❤1

Here my "brute-force" solution for changing background of popup belonging to marker.

Double use of parentNode to access main element, append className and create appropriate styles for tip. In the same manner u can play with border length to change tip length or override any styles u need without replacing default Mapbox styles.

var popup = new mapboxgl.Popup();
var content = document.createElement('div');

content.innerHTML = '<p>some html</p>';
popup.setLngLat([-118.705, 34.142])
                .addTo(map)
                .setDOMContent(content);

content.parentNode.parentNode.className += ' mapboxgl-popup--blue';'

Then you can write CSS:

.mapboxgl-popup.mapboxgl-popup--blue {
/*any styles u wish*/
}

.mapboxgl-popup--blue .mapboxgl-popup-content{
    background-color: rgb(66,111,175);
    padding:20px;
    color: white;
    max-width:none;
}
.mapboxgl-popup--blue.mapboxgl-popup-anchor-bottom .mapboxgl-popup-tip{
    border-top-color: rgb(66,111,175);
}
.mapboxgl-popup--blue.mapboxgl-popup-anchor-top .mapboxgl-popup-tip{
    border-bottom-color: rgb(66,111,175);
}
.mapboxgl-popup--blue.mapboxgl-popup-anchor-left .mapboxgl-popup-tip{
    border-right-color: rgb(66,111,175);
}
.mapboxgl-popup--blue.mapboxgl-popup-anchor-right .mapboxgl-popup-tip{
    border-left-color: rgb(66,111,175);
}

.mapboxgl-popup--blue.mapboxgl-popup-anchor-top-left .mapboxgl-popup-tip{
    border-bottom-color: rgb(66,111,175);
}
.mapboxgl-popup--blue.mapboxgl-popup-anchor-top-right .mapboxgl-popup-tip{
    border-bottom-color: rgb(66,111,175);
}
.mapboxgl-popup--blue.mapboxgl-popup-anchor-bottom-left .mapboxgl-popup-tip{
    border-top-color: rgb(66,111,175);
}
.mapboxgl-popup--blue.mapboxgl-popup-anchor-bottom-right .mapboxgl-popup-tip{
    border-top-color: rgb(66,111,175);
}