Commit 3c4068c6 authored by Naoeltanuki's avatar Naoeltanuki
Browse files

ajout légende + css légende

ajout d'une légende assez basique.
à faire: corriger le zoom de la carte (ça zoom trop d'un coup avec la souris alors c'est pas très agréable à utiliser)
parent 252c9cc5
......@@ -91,3 +91,20 @@ div.column {
/*carte*/
#mapid { height: 180px; }
.info-legend {
line-height: 18px;
color: #555;
padding: 6px 8px;
font: 14px/16px Arial, Helvetica, sans-serif;
background: white; background: rgba(255,255,255,0.8);
box-shadow: 0 0 15px rgba(0,0,0,0.2);
border-radius: 5px;
}
.info-legend i {
width: 18px;
height: 18px;
float: left;
margin-right: 8px;
opacity: 0.7;
}
......@@ -7,12 +7,16 @@
<!--leaflet-->
<div id="mapid" style="height: 800px;"></div>
<script>
/*setView(lat et lng du centre, combien de zoom - 1 = minimum qui affiche carte en entier)*/
var mymap = L.map('mapid').setView([42.783307, 31.514282], 3);
//instanciation couche carte avec paramètres zoom
L.tileLayer('https://api.mapbox.com/styles/v1/{id}/tiles/{z}/{x}/{y}?access_token=pk.eyJ1IjoibWFwYm94IiwiYSI6ImNpejY4NXVycTA2emYycXBndHRqcmZ3N3gifQ.rJcFIG214AriISLbB6B5aw', {
maxZoom: 10,
minZoom: 1,
maxZoom: 8,
maxNativeZoom: 8,
minZoom: 2,
wheelPxPerZoomLevel: 100,
panBy: 10,
attribution: 'Map data &copy; <a href="https://www.openstreetmap.org/">OpenStreetMap</a> contributors, ' +
'<a href="https://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, ' +
'Imagery © <a href="https://www.mapbox.com/">Mapbox</a>',
......@@ -97,6 +101,23 @@
'<a href="/langue/{{langue.french}}">Voir la page : {{langue.french}}</a>');
{% endfor %}
var legend = L.control({position: 'bottomleft'});
legend.onAdd = function (mymap) {
var div = L.DomUtil.create('div', 'info-legend'),
types = ['sans enregistrement sonore', 'langue', 'variante de prononciation', 'dialecte'],
markers = ['static/img/marker/marker-icon-grey.png', 'static/img/marker/marker-icon-green.png','static/img/marker/marker-icon-blue.png', 'static/img/marker/marker-icon-red.png'];
for (var i = 0; i < types.length; i++) {
div.innerHTML +=
("<img src=" + markers[i] + " height='30' width='20'>") + types[i] + '<br>';
}
return div;
};
legend.addTo(mymap);
</script>
<div class="padding-footer" style= "padding:50px">
......
Supports Markdown
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment