Re: Adding a legend title

[Stefan Jelkovich]

Hi Gianluca,

still need an answer?

You just have to add the title to div.innerHTML in the legend.onAdd function:

legend.onAdd = function (map) { var div = L.DomUtil.create('div', 'info legend'), grades = [0, 10, 20, 50, 100, 200, 500, 1000], labels = [];

div.innerHTML += '<b>Legend Title</b><br>' // don't forget the break tag

// loop through our density intervals and generate a label with a colored square for each interval for (var i = 0; i < grades.length; i++) { div.innerHTML += '<i style="background:' + getColor(grades[i] + 1) + '"></i> ' + grades[i] + (grades[i + 1] ? '&ndash;' + grades[i + 1] + '<br>' : '+'); } return div; };

Cheers

Stefan

Am Donnerstag, 23. Januar 2014 11:35:46 UTC+1 schrieb gianlu...@gmail.com:

Hello All,

I am new to Leaflet and I am currently struggling with tutorials. So far I managed to create an interactive clorophet map, like in the example.

I have a question: is it possible to add a title (simple text, not dynamic) to the legged located on the bottomright of the page? Could anyone tell me how, by just referring to the linked example?

Many thanks,
Gianluca


 

[aston...@gmail.com]

Hey Stefan and Gianluca. If I understand correctly, I think there's an easier way to do what you want to do. Basically at the very top of the map, after the map <div> statement but before the script calls, code like the following will create a hotlinked image in the upper right corner of a full page map...

    <div id="map" style="width:100%; height:100%; z-index: 1;"></div>
    <a href="http://www.yourURL"><img style="position:absolute; top:0px; left:0; border:0; max-width: 100%; height: auto; z-index: 3;" src="http://www.yourimageURL" alt="Your logo"></a>
    <script src="http://cdn.leafletjs.com/leaflet-0.6.4/leaflet.js"></script>