3

I've been playing a lot with mapbox for mapping some data of mine. I have created a map that is heavily borrowed from the original mapbox sweetgreen tutorial here. However, now that I am almost finished, I am finding that my popups are not lining up well with my points. They are offset fairly heavily from them. I've played around with the CSS a bit but to no avail. Ideas?

Code related to popups:

CSS:

.mapboxgl-popup-close-button {
  display: none;
}

.mapboxgl-popup-content {
  font: 400 15px/22px 'Source Sans Pro', 'Helvetica Neue', Sans-serif;
  padding: 0;
  width: 180px;
}

.mapboxgl-popup-content-wrapper {
  padding: 1%;
}

.mapboxgl-popup-content h3 {
  background: #91c949;
  color: #fff;
  margin: 0;
  display: block;
  padding: 10px;
  border-radius: 3px 3px 0 0;
  font-weight: 700;
  margin-top: -15px;
}

.mapboxgl-popup-content h4 {
  margin: 0;
  display: block;
  padding: 10px;
  font-weight: 400;
}

.mapboxgl-popup-content div {
  padding: 10px;
}

.mapboxgl-container .leaflet-marker-icon {
  cursor: pointer;
}

.mapboxgl-popup-anchor-top > .mapboxgl-popup-content {
  margin-top: 0px;
}

.mapboxgl-popup-anchor-top > .mapboxgl-popup-tip {
  border-bottom-color: #91c949;
}

Script:

 function createPopUp(currentFeature) {
    var popUps = document.getElementsByClassName('mapboxgl-popup');
    if (popUps[0]) popUps[0].remove();


    var popup = new mapboxgl.Popup({closeOnClick: false})
      .setLngLat(currentFeature.geometry.coordinates)
      .setHTML('<h3><a href=' + currentFeature.properties.URL + '>' + currentFeature.properties.Company + '</a></h4>'+ currentFeature.properties.City + ", " + currentFeature.properties.State + '</p>' + "Phone: " + currentFeature.properties.Phone + '</p>')
      .addTo(map);
  }

Image of offset problem

4
  • I think the option you are looking for is the popup's "anchor". Mapbox is based on Leaflet, so you might get some ideas from Leaflet documentation as well.
    – cmrRose
    Apr 18, 2018 at 15:39
  • Or possibly the "offset" option, as used in that Store Locator tutorial like this: new mapboxgl.Marker(el, {offset: [0, -23]}) .setLngLat(marker.geometry.coordinates) .addTo(map);
    – cmrRose
    Apr 18, 2018 at 15:53
  • @cmrRose the is using Mapbox GL JS, which isn't based on Leaflet, looking at the Leaflet documentation might just make them more confused. Apr 19, 2018 at 1:24
  • 1
    @StupidQuestionGuy could you post a jsbin, etc of your code? Apr 19, 2018 at 1:26

1 Answer 1

3

You need to add an 'offset' value on the first line of the popup variable like so:

var popup = new mapboxgl.Popup({offset: [20, 0]})

Or if you need to add more properties, such as 'closeOnClick':

var popup = new mapboxgl.Popup({closeOnClick: true, offset: [20, 0]})
0

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.