Overlaying a text box on a leaflet.js map
I know this is old, but here's some sample code, CSS as necessary:
L.Control.textbox = L.Control.extend({
onAdd: function(map) {
var text = L.DomUtil.create('div');
text.id = "info_text";
text.innerHTML = "<strong>text here</strong>"
return text;
},
onRemove: function(map) {
// Nothing to do here
}
});
L.control.textbox = function(opts) { return new L.Control.textbox(opts);}
L.control.textbox({ position: 'bottomleft' }).addTo(map);
You have two simple options, extend a new L.Control
and place it in one of the four corners of the map window with content created inside the onAdd
method, or place a L.DivIcon
anywhere on the map alongside a L.Marker
, by either geographical coordinates or coordinates based upon the dimensions of the container.Making it "box" like would just include a small bit of CSS as you see fit, like some padding
,background-color
, etc.