1

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

  • 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 '18 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 '18 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. – AndrewHarvey Apr 19 '18 at 1:24
  • 1
    @StupidQuestionGuy could you post a jsbin, etc of your code? – AndrewHarvey Apr 19 '18 at 1:26
1

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]})
| improve this answer | |

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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