Adding popup after Geocoding search result - popup

Question

I've been figuring out how to add the popup after geocding search result.
Currently, i am using below documentation to try out. In the documentation, it only shows how to search using your own dataset and the marker will appear when the search is completed.
However, i would like to add the popup when the marker is clicked.
I've read up other documentation on Mapbox on "popup". However, i cannot seem to be able to implement in this code.
here is the documentation that i am currently trying for geocoding: https://docs.mapbox.com/mapbox-gl-js/example/forward-geocode-custom-data/

Answer 1

Welcome! I had this problem long ago. I had polygons where I needed a popup to appear onclick. My polygons were areas of the ocean where hazardous seas were (a warning for ships, etc). Here, I have a function that activates onclick. It then makes sure the popup appears in the correct order on the screen, and optionally will change the style of the mouse cursor.
I would explain more in detail but I think the code is self-explanatory for the most part. It is difficult to find good examples in documentation sometimes (although Mapbox is making great strides lately in the documentation side of things.)
Check the solution below and feel free to accept it if it works for you, otherwise I can help with questions as well if you need. I have commented it for you.
map.on('click', 'HazardousSeasWarning', function (e) {
var coordinates = e.features[0].geometry.coordinates[0][0].slice();
var description = e.features[0].properties.description;
// Ensure that if the map is zoomed out such that multiple
// copies of the feature are visible, the popup appears
// over the copy being pointed to.
while (Math.abs(e.lngLat.lng - coordinates[0]) > 180) {
coordinates[0] += e.lngLat.lng > coordinates[0] ? 360 : -360;
}
new mapboxgl.Popup()
.setLngLat(coordinates)
.setHTML(description)
.addTo(map);
});
// Change the cursor to a pointer when the mouse is over the places layer.
map.on('mouseenter', 'HazardousSeasWarning', function () {
map.getCanvas().style.cursor = 'pointer';
});
// Change it back to a pointer when it leaves.
map.on('mouseleave', 'HazardousSeasWarning', function () {
map.getCanvas().style.cursor = '';
});