mapbox blurry popup code example

Example: mapbox blurry popup

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