3.6. Les données vectorielles dans Leaflet

Exercice 4. Ouvrez dans un éditeur de texte le fichier data/webmapping/3_leaflet/data/point_legend_1724.json pour visualiser la structure du fichier avec les indentations. Copiez le contenu du fichier dans le presse-papier.

Ouvrez la console JavaScript de Firefox (touche <F12>) et tapez : "var datageo = ", suivi du contenu du fichier GeoJSON (collez le contenu), suivi de <Entrée>.

Puis, toujours dans la console, tapez :

datageo.features[0].properties.libelle
datageo.features[1].geometry.coordinates

Quelle commande JavaScript permettrait de définir une nouvelle variable test_lat avec la latitude de la 3ème entité du fichier GeoJSON ?

Voir la solution

TP Plan de Montpellier en 1724 (1/3)

Dans Visual Studio Code, ouvrez le fichier modele_leaflet.html et enregistrez une copie sous le nom tp_montp1724.html. La page affiche une carte Leaflet centrée sur Montpellier.

Ouvrez la page dans le navigateur : http://localhost/3_leaflet/tp_montp1724.html

Dans l'entête de la page, changez le titre :

<title>Plan de Montpellier</title>

Ajoutez une référence à l'API jQuery :

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

Dans le corps de la page, changez le contenu de la page :

<h4>Plan de la ville et citadelle de Montpellier, 1724</h4>
<p>Ce  plan à l’échelle du 1/3600, avec voies et édifices principaux 
repérés par des numéros renvoyant à la légende, a été réalisé à l’encre 
et aquarelle en 1724. Il est signé d’Antoine Niquet, directeur des 
fortifications de Provence et du Languedoc, et directeur des travaux 
publics du Languedoc. Il encadre trois projets d’aménagement urbain 
impliquant directement cet ingénieur militaire.</p>

Dans le code JavaScript, vous allez ajouter une couche avec le plan de Montpellier en 1724. Utilisez les tuiles générées dans la partie 3.4 dans le répertoire ~/data/mon_travail/3_leaflet/tiles/M1724.

// ajout tuiles Montpellier 1724 (localhost)
L.tileLayer('http://localhost/3_leaflet/tiles/M1724/{z}/{x}/{y}.png', {
    tms: true, opacity: 0.8, attribution: "", minZoom: 14, maxZoom: 18
}).addTo(ma_carte);

Enregistrez le fichier HTML et rechargez la page dans le navigateur.

Vous allez maintenant charger les données GeoJSON des lieux remarquables (points), et de l'occupation du sol (polygones). Utilisez getJSON avec une fonction de callback qui ajoute la donnée à la carte.

var url_points = "http://localhost/3_leaflet/data/point_legend_1724.geojson"
var url_occsol = "http://localhost/3_leaflet/data/occsol_1724.geojson"
$.getJSON(url_points, function(data){
    L.geoJson(data).addTo(ma_carte);
});
$.getJSON(url_occsol, function(data){
    L.geoJson(data).addTo(ma_carte);
});

Enregistrez le fichier HTML et rechargez la page dans le navigateur.

TP Plan de Montpellier en 1724 (2/3)

Vous allez modifier la couche des points remarquables, de manière à ce qu'un clic sur un marqueur affiche le numéro et le libellé du point.

Tout d'abord, définissez une fonction JavaScript qui associe aux marqueurs une popup avec le numéro et le libellé :

function associerPopup(feature, marker) {
    var popup_message = "<strong>" + feature.properties.numero + "</strong>. " + feature.properties.libelle;
    marker.bindPopup(popup_message);
}

Remarquez les 2 paramètres de cette fonction "maison" : l'entité (feature) et le marqueur (marker).

Il faut appeler cette fonction associerPopup pour chaque entité des données GeoJSON. Modifiez l'appel à la fonction L.geoJson qui ajoute les marqueurs à la carte :

$.getJSON(url_points, function(data){
    L.geoJson(data, {
        onEachFeature: associerPopup
    }).addTo(ma_carte);
});

Enregistrez et rechargez la page dans le navigateur.

TP Plan de Montpellier en 1724 (3/3)

1ère étape : affichez les polygones d'occupation du sol avec un contour gris sombre et un remplissage jaune.

var symbole_unique = {
    color: "#232323",
    fillColor: "#d9e278",
    weight: 1,
    fillOpacity: 0.8
};

$.getJSON(url_occsol, function(data){
    L.geoJson(data, {
        style: symbole_unique
    }).addTo(ma_carte);
});

Enregistrez et rechargez la page dans le navigateur.

2nde étape : remplacez le symbole unique par une couleur associée à chaque type d'occupation du sol. Voici un tableau des couleurs à associer aux libellés.

Vous devez définir une fonction qui renvoie un symbole avec une couleur de remplissage différente selon la propriété libelle, et associer cette fonction à l'option style :

function definirStyle(feature) {
    var prop_graph = { color: "#232323", weight: 1, fillOpacity: 0.8 };
    switch (feature.properties.libelle) {
        case 'bâti': prop_graph.fillColor = "#ea6e7f"; break;
        case 'culture': prop_graph.fillColor = "#d9e278"; break;
        case 'friche': prop_graph.fillColor = "#eebc46"; break;
        case 'vigne': prop_graph.fillColor = "#ac7aec"; break;
        case 'potager': prop_graph.fillColor = "#22da12"; break;
        default: prop_graph.fillColor = "#1687ea";
    }
    return prop_graph;
}

$.getJSON(url_occsol, function(data){
    L.geoJson(data, {
        style: definirStyle
    }).addTo(ma_carte);
});

Comment cela fonctionne t-il ?

Notre fonction definirStyle renvoie un objet prop_graph différent selon le paramètre feature (l'entité en entrée). Ce qui ne change pas : l'objet prop_graph renvoyé a toujours la même couleur de contour (color) avec la même épaisseur (weight), et la même opacité de remplissage (fillOpacity). Ce qui change : la couleur de remplissage (fillColor), selon la propriété libelle de l'entité.

Cette fonction definirStyle est appliquée à chaque entité de la couche geoJson qui est ajoutée à la carte dans la foulée.