New StackOverflow Question: Mapbox - How to change popup information's position

[stacko...@mg.bodar.com]

Mapbox - How to change popup information's position

Asked by ju perez on 2017-02-23T16:31:10Z

Reply on StackOverflow

I'm rubbish when it comes to coding, but I've been learning Mapbox in the last few days and coming at a dead-end here.

How can I have the popup information appear like on this website (when a marker is clicked, it shows on the right)?

This is what I have:

// Popup
map.on('click', function(e) {
  var features = map.queryRenderedFeatures(e.point, {
    layers: ['us-chapters-20170213-1600']
  });

  if (!features.length) {
    return;
  }

  var feature = features[0];

  var popup = new mapboxgl.Popup({ offset: [0, -15] })
    .setLngLat(feature.geometry.coordinates)
    .setHTML(
      '<div id="mapinfo">' +
      '<div id="profileimg">' +
      '<img src="images/profileimg/' + feature.properties.profileimg + '" />' +
      '</div>' +
      '<div id="text">' +
      '<h3>' + feature.properties.chapter + '</h3>' +
      '<p>' + feature.properties.city + ',&nbsp;' + feature.properties.state + '</p>' +
      '<p>' + feature.properties.members + '&nbsp;members' + '</p>' +
      '<p>' + '<strong>Contact:&nbsp;</strong>' +
      '<a href="mailto:' + feature.properties.email + '">' + feature.properties.contactname + '</a>' + '</p>' +
      '<p>' + '<a href="' + feature.properties.website + '">' + 'Website' + '</a>' + '&nbsp;' + '|' + '&nbsp;' +
      '<a href="' + feature.properties.facebook + '">' + 'Facebook' + '</a>' + '</p>' +
      '</div>' +
      '</div>'
    )
    .setLngLat(feature.geometry.coordinates)
    .addTo(map);
});

My map where you can view the rest of the source too: http://tyronesmith.ca/spydertest/_mapboxtest/

Thanks in advance!

Reply on StackOverflow