Leaflet Custom menu links

Question

I have an issue where leaflet when embedded in Drupal will not allow the user to click on the map as the Y coordinates have a decimal on for some reason. As a quick fix, I am thinking to put the map into full screen mode outside of Drupal. However I would like to place a link/button on the map that points back to my Drupal site. Any suggestions on placing custom buttons on the map?

Answer 1

You can implement a custom control to easily add a button on your map with something like that:

var myButton = L.control({ position: 'bottomleft' });

myButton.onAdd = function (map) {
    this._div = L.DomUtil.create('div', 'myButton-css-class');
    this._div.innerHTML = '<a href="urlToGoBackToDrupal">Return to Drupal</a>';
    return this._div;
};

myButton.addTo(map);

Etienne