{% extends "layout.html" %}
{% block content %}

  <h1>Carte</h1>


<!--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: 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'});

//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 }};
    var french = {{ langue.french|tojson }};
    var text = {{ langue.text|tojson|safe }};
    var imgtext = {{ langue.imgtext|tojson }};
    var iso = {{ langue.iso|tojson }};
    var audioplayerJS = '';
    //array audios, après on testera si vide ou pas
    {% set audioplayerList = [] %}

    //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}};
        {% do audioplayerList.append(audioplayer) %}
      {% endif %}
    {% endfor %}



    L.marker([lat,lng],
    //test pour savoir s'il existe un audio
    {% if audioplayerList|length %}
      //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('<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 audioplayerList|length %}
        '<audio controls src="{{ url_for('static', filename='audio/') }}' + audioplayerJS + '" autoplay = "autoplay">  Your browser does not support the <code>audio</code> element.</audio><p>' +
    {% else %}
      '<p> Pas d\'enregistrement disponible </p>' +
    {% 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 %}

 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">

</div>

{% endblock content %}