1// Fix blurry mapbox popups due to transforms on non-even height & width element
2// 1. Add class to popup when set with marker
3new mapboxgl.Marker()
4 .setLngLat([obj.lng,obj.lat])
5 .setPopup(new mapboxgl.Popup({
6 offset: 25, maxWidth: '240px', className: 'makeMeEven'
7 })
8 .setHTML(html)
9 .addTo(map);
10
11// 2. Using JQuery to make height & width even on map's mouseup event
12map.on('mouseup', function(e) {
13 setTimeout(function(){ // Slight delay to allow popup to be added to DOM
14 $(".makeMeEven").each(function(){
15 $(this).width(Math.round($(this).width()/2)*2);
16 $(this).height(Math.round($(this).height()/2)*2);
17 });
18 }, 1);
19});