12

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>

Improve this question

2 Answers 2

Reset to default
14

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

Improve this answer
1
  • you can use closeButton:false to not create the close button ass opposed to hide it in the CSS: mapboxgl.Popup({closeOnClick:false,closeButton:false})
    – Cris
    Commented May 12, 2021 at 17:16
12

Mapbox GL JS:

If you need even more control over the styling of the popup (e.g. set background color for different types of popups), you can set a custom classname directly on the top level of the popup with:

JS:

new mapboxgl.Popup({ className: "apple-popup" })

new mapboxgl.Popup({ className: "banana-popup and-another-css-class" })

CSS:

/* change background and tip color to green */
.apple-popup .mapboxgl-popup-content {
  background-color: green;
}
.apple-popup .mapboxgl-popup-tip {
  border-top-color: green;
}

/* change background and tip color to yellow */
.banana-popup .mapboxgl-popup-content {
  background-color: yellow;
}
.banana-popup .mapboxgl-popup-tip {
  border-top-color: yellow;
}
Improve this answer
2
  • This approach should be accepted answer. Thank you!
    – berkayoruc
    Commented Jun 30, 2022 at 8:24
  • This was insanely helpful - thank you!!
    – Carlo Nyte
    Commented Dec 29, 2023 at 5:28

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.