Mapbox GL – How to Add CSS Styling in Mapbox GL Popups

cartocssmapboxmapbox-glmapbox-gl-jsweb-mapping

I am aware this is similar to many other questions, but I have been unable to determine how to add the correct code to style my popups in mapbox-gl. I'm very new to CSS, Mapbox-gl, and coding in general. I would like to be able to add banners, change the colors and fonts of different sections, and other additions. I've read this and several posts on SE, which pointed me in the right direction, however I have still been unable to make this work.

Here is a sample of my code – I think I know where I am doing something wrong but I am not sure what to do right.

<html>
  <head>
<meta charset='utf-8' />
<title>Points on a map</title>
<meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' />
<script src='https://api.tiles.mapbox.com/mapbox-gl-js/v0.31.0/mapbox-gl.js'></script>
<link href='https://api.tiles.mapbox.com/mapbox-gl-js/v0.31.0/mapbox-gl.css' rel='stylesheet' />
<style>
  body {
    margin: 0;
    padding: 0;
  }

  #map {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 100%;
  }
</style>
  </head>
  <body>
    <div id='map'></div>
    <script>
   mapboxgl.accessToken = 'pk.eyJ1IjoiY2RpY2tpbnNvbjExIiwiYSI6ImNqZThwZGg1dDAyMngzM3Fsdmp0dm82YTcifQ.bjVqusaDZqdZVWunQ0xS7A'; // replace this with your access token
    var map = new mapboxgl.Map({
  container: 'map',
  style: 'mapbox://styles/cdickinson11/cjfv618mp9uur2rohbhbp1yiy'
});

    map.on('click', function(e) {
  var features = map.queryRenderedFeatures(e.point, {
    layers: ['masterdirectory-qc-v3'] // replace this with the name of the layer

});

  if (!features.length) {  return;

}

 var feature = features[0];

  var popup = new mapboxgl.Popup({ offset: [0, -15] })
.setLngLat(feature.geometry.coordinates)
.setHTML('<h3>' + feature.properties.Company + '</h3><p>' + feature.properties.City + '</p>' + feature.properties.URL + '</p>')
.setLngLat(feature.geometry.coordinates)

setContent(Popup.content {
color: #F3F3DD;
background-color: #F3F3DD;
border-color: #228B22;
max-width: 250px;
box-shadow: 3px 3px 2px #8B5D33;
font-family: 'Oswald';

})

.addTo(map);

});

</script>

Best Answer

I've read this and several posts on SE, which pointed me in the right direction

Your link is pointing to the docs about mapbox.js which is different from mapbox-gl.js.

Docs for Mapbox GL JS: https://www.mapbox.com/mapbox-gl-js/api/#popup

There is an official Mapbox tutorial which shows also how to style a Mapbox GL JS popup using CSS: https://www.mapbox.com/help/building-a-store-locator/

The following screenshot is taken from there:

enter image description here

Related Question