Présence autochtone V (Javascript)

Comme on a déjà plus ou moins épuisé la région de l’Estrie, David, Thomas et moi avons convenu d’élargir le projet à d’autres régions. Notre carte va donc maintenant couvrir pratiquement tout le Québec. Aussi, j’ai pensé qu’il serait bon d’ajouter une liste déroulante (ou, comme on dit en France: une dropddown list [avec l’accent svp!]) qui nous permettrait de zoomer sur les différentes régions. Cet ajout implique du Javascript. On le sait, Leaflet, c’est du Javascript. Mais Javascript est beaucoup plus que Leaflet. Il est avec Python parmi les trois langages les plus utilisés dans le monde de la programmation. Il permet de rendre un site web interactif, en «écoutant» les événements créés par l’utilisateur (ici la sélection d’une zone) et en y réagissant en exécutant une fonction (ici zoomer sur la zone). J’ai lu cet hiver ce livre qui est une très bonne introduction aux concepts de base en Javascript:

Mais malgré cette lecture, j’ai passé une journée et demi à essayer différents codes, sans qu’aucun ne fonctionne. Je me suis donc résolu à demander conseil à Joshua. Je dis «résolu» parce qu’en général je préfère me casser la tête et trouver par moi-même. Autrement, c’est comme essayer d’apprendre une langue mais faire appel à un interprète chaque fois qu’on a l’occasion de pratiquer. Ce n’est pas une façon d’apprendre. La solution apportée par Joshua fonctionne parfaitement, qui offre la possibilité de sélectionner une zone.

Une liste déroulante présente les différentes zones.

Et quand on en sélectionne une, la carte est recentrée sur la zone sélectionnée. Voyons donc le code en question.

//On aurait pu créer un objet html, mais Leaflet offre la possibilité de personnaliser le Leaflet Control, ce que j'avais pu faire par moi-même avec la documentation trouvée en ligne.

var legend = L.control({position: 'topright'});
  legend.onAdd = function (map) {
      var div = L.DomUtil.create('div', 'info legend');
      div.innerHTML = '<select id="liste" onchange="voir()"><option value="0">CHOISIR...</option><option value="1">Ancienne Lorette</option><option value="2">Cap-Rouge-Sillery</option><option value="3">Centre-du-Québec</option><option value="4">Chaudière-Appalaches</option><option value="5">Estrie</option><option value="6">Montérégie</option><option value="7">Montréal</option><option value="8">Outaouais</option><option value="9">Sherbrooke</option><option value="10">Ville de Québec</option><option value="11">Wendake</option><option value="12">Où suis-je?</option></select>';
      div.firstChild.onmousedown = div.firstChild.ondblclick = L.DomEvent.stopPropagation;
      return div;
  };
 legend.addTo(map);

//On a maintenant une liste, mais on doit encore associer aux choix une action. C'est ici que je f***ais le chien. La solution de Josh fait, entre autres, appel à une fonction que je ne connaissais pas parseInt, qui transforme une chaîne de caractères en nombres entiers.

function voir(){
  var choix = parseInt(document.getElementById('liste').value)
  switch(choix) {

//Ancienne Lorette
    case 1:
            map.setView([46.80651,-71.3570567], 13);
            break;

//la fonction suivie des paramètres, soit les coordonnées et la force du zoom.

//Cap-Rouge-Sillery
    case 2:
           map.setView([46.763963,-71.2668617], 15);
           break;

//Centre-du-Quebec
    case 3:
            map.setView([46.101791,-72.4971437], 9);
            break;

//Chaudière-Appalaches
    case 4:
            map.setView([46.587183,-70.827128], 9);
            break;

//Estrie
    case 5:
            map.setView([45.440726,-71.8978827], 9);
            break;

//Montérégie
    case 6:
            map.setView([45.5492,-73.1935], 9);
            break;

//Montréal
    case 7:
            map.setView([45.533912,-73.652851], 11);
            break;

//Outaouais
    case 8:
            map.setView([45.4302,-75.7135], 11);
            break;
//Sherbrooke
    case 9:
            map.setView([45.440726,-71.8978827], 11);
            break;
//Ville de Qc
    case 10:
            map.setView([46.812678, -71.226149], 13);
            break;

//Wendake
    case 11:
            map.setView([46.856103,-71.3572587], 14);
            break;

//Ou suis-je?
    case 12:
            map.locate({setView: true, maxZoom: 12});
            break;

Le dernier choix fait appel à une autre fonction pour laquelle il faut avoir un site https, comme je l’expliquais dans mon billet précédent. Quand on sélectionne cette option, la carte est centrée et zoomée sur ma position.