Commit 2ee06278 authored by Naoeltanuki's avatar Naoeltanuki
Browse files

Update carte.html

parent 34671f61
......@@ -9,7 +9,7 @@
<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,
......@@ -21,7 +21,7 @@
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],
......@@ -30,12 +30,13 @@
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'});
//parcourir toutes les langues de la base de données pour placer chaque marqueur
{% for langue in prince_language %}
var lat = {{ langue.geolat|tojson }};
var lng = {{ langue.geolng|tojson }};
......@@ -43,35 +44,47 @@
var text = {{ langue.text|tojson|safe }};
var imgtext = {{ langue.imgtext|tojson }};
var iso = {{ langue.iso|tojson }};
//var audioplayerJS = '';
var audioplayerJS = '';
//boucle pour aller chercher audio pour chaque langue
{% for sound in sounds %}
{% if sound.language == langue.iso %}
{% set audioplayer = sound.filename %}
var audioplayerJS = {{ audioplayer|tojson }};
{% endif %}
{% endfor %}
//test pour définir audioplayer si pas d'audio (pour marqueur gris)
{% if audioplayer is none %}
{% set audioplayer = '' %}
{% endif %}
L.marker([lat,lng],
//langue principale
{% if langue.varpron == 0 %}
{icon: greenIcon}
//variante de prononciation
{% elif langue.varpron == 1 %}
{icon: blueIcon}
//dialecte
{% elif langue.varpron == 2 %}
{icon: redIcon}
{% elif audioplayer != '' %} //ici j'aimerais mettre en gris les langues sans enregistrements
//ici j'aimerais mettre en gris les langues sans enregistrements
{% elif audioplayer == '' %}
{icon: greyIcon}
{% endif %}
).addTo(mymap).bindPopup('<b>' + french + '</b><br>' +
//s'il existe au moins un audio, on met le premier(ou le dernier?), se lance automatiquement quand on clique dessus
{% if audioplayer != '' %}
'<audio controls src="{{ url_for('static', filename='audio/') }}' + audioplayerJS + '" autoplay = "autoplay"> Your browser does not support the <code>audio</code> element.</audio>' +
{% endif %}
//s'il y a un texte on l'affiche
{% if langue.text != '' %}
text +
{% endif %}
//s'il y a une image on l'affiche en petit
{% if langue.imgtext != '' %}
'<img src="{{ url_for('static', filename='img/') }}{{langue.imgtext}}" style="width: 100%;" alt="Texte du Petit Prince en {{langue.french}}">' +
{% endif %}
//lien pour aller sur la page langue et tout voir en grand et écouter d'autres audios
'<a href="/langue/{{langue.french}}">Voir la page : {{langue.french}}</a>');
{% endfor %}
......
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