Commit 988704b7 authored by Naoeltanuki's avatar Naoeltanuki
Browse files

ajout légende et différentes couleurs de marqueurs mais...

il arrive pas à trouver les images des marqueurs et ej sais pas pourquoi.
j'ai fait un if else pour afficher la carte uniquement si les coordonnées sont pas 0,0
parent bdaa0c57
......@@ -29,29 +29,83 @@
<a class="btn btn-dark bg-steel" href="/carte">Retour à la carte</a>
</div>
<div class="column_langue">
<!--leaflet-->
<div id="mapid" style="height: 400px; width: 400px;"></div>
<script>
/*si les coordonnées ne sont pas 0,0 on affiche une carte*/
{% if langue.geolat != 0 %}
/*setView(lat et lng du centre, combien de zoom - 1 = minimum qui affiche carte en entier)*/
var mymap = L.map('mapid').setView(['{{langue.geolat}}','{{langue.geolng}}'], 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: 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>',
id: 'mapbox/streets-v11',
tileSize: 512,
zoomOffset: -1
}).addTo(mymap);
//création classe marqueur avec taille etc pour éviter répétition de code
var MapIcon = L.Icon.extend({
options: {
iconSize: [25, 41],
iconAnchor: [12, 41],
popupAnchor: [1, -34],
shadowSize: [41, 41]
}
});
//instanciation des variantes de marqueurs (différentes couleurs)
var blueIcon = new MapIcon({iconUrl:'static/img/marker/marker-icon-blue.png' }),
redIcon = new MapIcon({iconUrl: 'static/img/marker/marker-icon-red.png'}),
greenIcon = new MapIcon({iconUrl: 'static/img/marker/marker-icon-green.png'}),
greyIcon = new MapIcon({iconUrl: 'static/img/marker/marker-icon-grey.png'});
L.marker(['{{langue.geolat}}','{{langue.geolng}}'],
//test pour savoir s'il existe un audio
{% if sounds.first() is not none %}
//langue principale
{% if langue.varpron == 0 %}
{icon: greenIcon}
//variante de prononciation
{% elif langue.varpron == 1 %}
{icon: blueIcon}
//dialecte
{% elif langue.varpron == 2 %}
{icon: redIcon}
{% endif %}
{% else %}
// les langues sans enregistrements en gris
{icon: greyIcon}
{% endif %}
).addTo(mymap).bindPopup( '{{langue.french}}');
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>';
}
/*setView(lat et lng du centre, combien de zoom - 1 = minimum qui affiche carte en entier)*/
var mymap = L.map('mapid').setView(['{{langue.geolat}}','{{langue.geolng}}'], 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: 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>',
id: 'mapbox/streets-v11',
tileSize: 512,
zoomOffset: -1
}).addTo(mymap);
L.marker(['{{langue.geolat}}','{{langue.geolng}}']).addTo(mymap).bindPopup( '{{langue.french}}');
return div;
};
legend.addTo(mymap);
/* pour l'instant ce else ne fonctionne pas mais au moins ça affiche pas la carte*/
{% elif langue.geolat == 0 %}
'<p> Pas de localisation disponible pour cette langue </p>' +
{% endif %}
</script>
</div>
</div>
......
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