Leaflet HTML Overlay
Make zoomable websites !
This Leaflet extension implements HTML "stickers", fixed on the map and zoomable with it.
You may use it as an overlay above a geographical map, or just skip the map and hack Leaflet's zoomable UI to build crazy zoomable websites !
Come on, zoom-in !
Take gps coordinates, and add HTML content with a simple line of Javascript, as you would do for an Image Overlay :
L.htmlOverlay(
'<h1 style="background:yellow;">Oh!</h1>',
[48.11825489819488, -1.7042487859725954],
{ zoom: 17 }
).addTo(map);
Or use the included jQuery extension to pick an existing bloc of your webpage, and inject it inside the map !
// html
<div id="elmt1">
<h3>Yes !</h3>
<p>I'm gonna be injected
inside the map !</p>
</div>
// javascript
$('#elmt1').htmlOverlay(
[48.11833010461414, -1.7030149698257449],
{ zoom: 18 }
).addTo(map);
You may even simplify your Javascript by settings coordinates directly in HTML attributes :
// html
<div id="elmt2" data-pos="48.11759952331,
-1.7035943269729616" data-zoom="17">
<h3>Here I come from pure HTML,
even for my coordinates !</h3>
<p>Nice...</p>
</div>
// javascript
$('#elmt2').htmlOverlay().addTo(map);
Or even better...
Create a batch of contents in HTML, style it with CSS, and when ready, inject all of it inside the map with one line of Javascript !
If you select more than one object with jQuery, you will get a Leaflet layerGroup containing all the layers that where just created :
// html
<div class="groupe2">
<article data-pos="48.11410763094504,
-1.7040395736694338" data-zoom="15">
...</article>
<article data-pos="48.11470932778303,
-1.7004990577697756" data-zoom="14">
...</article>
<article data-pos="48.11410763094504,
-1.6970014572143557" data-zoom="15">
...</article>
</div>
// javascript
var myGroup = $('.groupe2 article')
.htmlOverlay().addTo(map);
The "zoom" option :
It sets the zoom level where your content will be rendered at its original scale.
If you don't set it, the current zoom level will be selected automatically.
You can either set it in Javascript, or in the data-zoom HTML attribute.
Note on CSS and blocs' widths :
Do to technical necessity, every injected HTML code will be set to position:absolute, resulting in the loss of HTML bloc's natural width.
So you will want to specify the width of your blocs in CSS to get a nice display.