Une carte OSM pour afficher les lieux de naissance des ancêtres
Je suis parti des infos de ce "Pas à pas – Insérer une carte OpenStreetMap sur votre site" (publié le 01/05/2018). Je n’y ai inclus pour l’instant que les lieux de naissance et de décès des 5 premières générations des MaLiBeLe.
Voici le lien pour visualiser le résultat :
Penser à maintenir la touche [CTRL] (ou [SHIFT]) enfoncée pour ouvrir dans un nouvel onglet (une nouvelle fenêtre) avant de cliquer sur le lien pour rester sur cette page (ou utiliser le "retour à la page précédente" si le clic a déjà lancé la procédure).
Réalisation
- Utilisation de la bibliothèque Leaflet
- Un drapeau personnalisé : un arbre [1] était presque évident pour une généalogie.
- regroupement des repères lorsque le zoom de l’affichage ne permet pas de les distinguer.
- un clic sur le curseur-repère affiche le nom de la commune.
- automatisation du choix du bon zoom à l’ouverture pour afficher tous les repères utilisés.
Ce ne devrait pas être trop difficile puisque c’est expliqué sur la page de référence. - lien dans la bulle d’information affichée au clic sur le repère vers le lieu dans l’arbre en ligne.
Des améliorations restent encore à apporter
- liste des lieux sous la carte (ou à côté)
- page "responsive" (ou au moins davantage)
- intégrer cet affichage dans mon site personnel [2].
- Lier l’affichage à un tableau des données (villes, longitude, latitude). Actuellement, c’est codé en dur.
- rendre l’intégration de la carte possible dans toute page de mon site (ça, je crois que ce n’est pas pour tout de suite).
- ...
Au début, les plus grosses difficultés ont été de trouver les coordonnées suffisamment précises des lieux (c’est OpenStreetMap qui me donne dorénavant ces informations avec l’utilisation des "noeuds"), le codage des données et le contenu de la bulle d’information.
Historique
- 27/08/2019 : mise en ligne de la version "generation3" https://lorand.org/carte/carteosm-malibele avec les lieux des 3 premières générations
- 28/08/2019 mise en ligne de la version "generation4" https://lorand.org/carte/carteosm-malibele
- lieux (naissances) des 4 premières générations
- bulle d’information avec lien vers le site malibele.org
- 28/08/2019 mise en ligne de la version "generation5" https://lorand.org/carte/carteosm-malibele
- lieux (naissances et décès) des 5 premières générations soit 22 lieux
- modification de la présentation globale (titre, source)
- réduction de la hauteur (passage de 800px à 600px) pour affichage sur la plupart des écrans
- définition de la largeur à 600px
Problèmes rencontrés
- remplacer la virgule des coordonnées par un point sinon pas de carte !
- les espaces doivent être codées %20 sinon pas de carte !
- l’icône des marqueurs était référencée en local ! Toutes mes excuses chers visiteurs. Maintenant ce devrait être corrigé.
- ...
Les pages en ligne de mes sources
- Pas à pas – Insérer une carte OpenStreetMap sur votre site
- Des cartes sur votre site avec Leaflet
- Créer une carte web interactive avec Leaflet et des données Geojson externes
La page html HTML HyperText Markup Language (langage de balisage qui permet d’écrire de l’hypertexte) qui fait le boulot
Comme écrit en début d’article, cette page est très fortement inspirée par "Pas à pas – Insérer une carte OpenStreetMap sur votre site" (publié le 01/05/2018).
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<!-- Chargement des fichiers CDN de Leaflet. Le CSS AVANT le JS -->
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.3.1/dist/leaflet.css" integrity="sha512-Rksm5RenBEKSKFjgI3a41vrjkw4EVPlJ3+OiI65vTjIdo9brlAacEuKOiQ5OFh7cOI1bkDwLqdLw3Zg0cRJAAQ==" crossorigin="" />
<link rel="stylesheet" type="text/css" href="https://unpkg.com/leaflet.markercluster@1.3.0/dist/MarkerCluster.css" />
<link rel="stylesheet" type="text/css" href="https://unpkg.com/leaflet.markercluster@1.3.0/dist/MarkerCluster.Default.css" />
<style type="text/css">
#map{ /* la carte DOIT avoir une hauteur sinon elle n'apparaît pas */
height:600px;
width: 600px;
}
</style>
<title>Carte OSM et généalogie</title>
</head>
<body>
<h2>Lieux des évènements (naissance & décès) des <a href="http://malibele.org" title="Généalogie des MaLiBeLe">MaLiBeLe</a> et de leurs ancêtres pour les cinq premières générations. </h2>
<div id="map"><!-- Ici s'affichera la carte --></div>
<!-- Ici pourrait s'afficher la liste des lieux -->
Source : <a href="https://nouvelle-techno.fr/actualites/2018/05/11/pas-a-pas-inserer-une-carte-openstreetmap-sur-votre-site">Pas à pas – Insérer une carte OpenStreetMap sur votre site</a> <!-- Il est toujours bien de laisser le lien vers la source des données -->
<!-- Fichiers Javascript -->
<script src="https://unpkg.com/leaflet@1.3.1/dist/leaflet.js" integrity="sha512-/Nsx9X4HebavoBvEBuyp3I7od5tA0UzAxs+j83KgC8PU0kgB4XiK4Lfe4y4cgBtaRJQEIFCW+oC506aPT2L1zw==" crossorigin=""></script>
<script type='text/javascript' src='https://unpkg.com/leaflet.markercluster@1.3.0/dist/leaflet.markercluster.js'></script>
<script type="text/javascript">
// Initialisation de la latitude et de la longitude de Nouan-le-Fuzelier (centre de la carte ET chez moi !)
var lat = 47.5447188;
var lon = 2.0300175;
// site de base
var lien = 'http://malibele-local/';
var macarte = null;
// stockage des groupes de marqueurs
var markerClusters;
// liste de marqueurs => commune {lat lon code dep reg pays}
var villes = {
//"Broche": { "lat": 44.8957075, "lon": 1.7253297, "code": 46058, "dep": 'Lot', "reg": 'Occitanie', "pays": 'France' },
"Carennac": { "lat": 44.9173176, "lon": 1.7320776, "code": 46058, "dep": 'Lot', "reg": 'Occitanie', "pays": 'France' },
"Chalon-sur-Saône": { "lat": 46.7888997, "lon": 4.8529605, "code": 71076, "dep": 'Saône-et-Loire', "reg": 'Bourgogne-Franche-Comté', "pays": 'France' },
"Clessé": { "lat": 46.4162920, "lon": 4.8140269, "code": 71135, "dep": 'Saône-et-Loire', "reg": 'Bourgogne-Franche-Comté', "pays": 'France' },
"Fréteval": { "lat": 47.8878347, "lon": 1.2077876, "code": 41095, "dep": 'Loir-et-Cher', "reg": 'Centre-Val-de-Loire', "pays": 'France' },
"Gourdon": { "lat": 46.6414367, "lon": 4.4461818, "code": 71222, "dep": 'Saône-et-Loire', "reg": 'Bourgogne-Franche-Comté', "pays": 'France' },
"Gramat": { "lat": 44.7789948, "lon": 1.7233940, "code": 46128, "dep": 'Lot', "reg": 'Occitanie', "pays": 'France' },
"Huilly-sur-Seille": { "lat": 46.5916450, "lon": 5.0517230, "code": 71234, "dep": 'Saône-et-Loire', "reg": 'Bourgogne-Franche-Comté', "pays": 'France' },
"la%20Ville-aux-Clercs": { "lat": 47.9190399, "lon": 1.0869814, "code": 41275, "dep": 'Loir-et-Cher', "reg": 'Centre-Val-de-Loire', "pays": 'France' },
"Lancé": { "lat": 47.6932779, "lon": 1.0670215, "code": 41107, "dep": 'Loir-et-Cher', "reg": 'Centre-Val-de-Loire', "pays": 'France' },
"Lisle": { "lat": 47.8523600, "lon": 1.1158100, "code": 41116, "dep": 'Loir-et-Cher', "reg": 'Centre-Val-de-Loire', "pays": 'France' },
"Lyon": { "lat": 45.7794340, "lon": 4.8330488, "code": 69123, "dep": 'Rhône', "reg": 'Auvergne-Rhône-Alpes', "pays": 'France' },
"Mâcon": { "lat": 46.3052567, "lon": 4.8354487, "code": 71270, "dep": 'Saône-et-Loire', "reg": 'Bourgogne-Franche-Comté', "pays": 'France' },
"Messey-sur-Grosne": { "lat": 46.6437472, "lon": 4.7437590, "code": 71296, "dep": 'Saône-et-Loire', "reg": 'Bourgogne-Franche-Comté', "pays": 'France' },
"Miers": { "lat": 44.8531456, "lon": 1.7077967, "code": 46193, "dep": 'Lot', "reg": 'Occitanie', "pays": 'France' },
"Naveil": { "lat": 47.7943319, "lon": 1.0297469, "code": 41158, "dep": 'Loir-et-Cher', "reg": 'Centre-Val-de-Loire', "pays": 'France' },
"Nouan-le-Fuzelier": { "lat": 47.5447188, "lon": 2.0300175, "code": 41161, "dep": 'Loir-et-Cher', "reg": 'Centre-Val-de-Loire', "pays": 'France' },
"Rocamadour": { "lat": 44.7991877, "lon": 1.6183521, "code": 46240, "dep": 'Lot', "reg": 'Occitanie', "pays": 'France' },
"Saint-Boil": { "lat": 46.6553061, "lon": 4.6834745, "code": 71392, "dep": 'Saône-et-Loire', "reg": 'Bourgogne-Franche-Comté', "pays": 'France' },
"Saint-Vallier": { "lat": 46.6413462, "lon": 4.3717516, "code": 71486, "dep": 'Saône-et-Loire', "reg": 'Bourgogne-Franche-Comté', "pays": 'France' },
"Tourailles": { "lat": 47.6855892, "lon": 1.1571912, "code": 41261, "dep": 'Loir-et-Cher', "reg": 'Centre-Val-de-Loire', "pays": 'France' },
"Vendôme": { "lat": 47.7942664, "lon": 1.0644829, "code": 41269, "dep": 'Loir-et-Cher', "reg": 'Centre-Val-de-Loire', "pays": 'France' }
};
// Fonction d'initialisation de la carte
function initMap() {
// Initialisation de la liste des marqueurs
var markers = [];
// Définition du dossier qui contiendra les marqueurs
//var iconBase = 'http://lorand-local/carte/icones/'; // en local
var iconBase = 'https://lorand.org/carte/icones/'; // en distant
// Créer l'objet "macarte" et l'insèrer dans l'élément HTML qui a l'ID "map"
macarte = L.map('map').setView([lat, lon], 11);
// Initialisation des groupes de marqueurs
markerClusters = L.markerClusterGroup();
// Les cartes d'openstreetmap.fr
L.tileLayer('https://{s}.tile.openstreetmap.fr/osmfr/{z}/{x}/{y}.png', {
// source des données
attribution: 'données © <a href="//osm.org/copyright">OpenStreetMap</a>/ODbL - rendu <a href="//openstreetmap.fr">OSM France</a>',
minZoom: 1,
maxZoom: 20
}).addTo(macarte);
// Liste des villes
for (ville in villes) {
// icône à utiliser pour le marqueur, sa taille affichée (iconSize), sa position (iconAnchor) et le décalage de son ancrage (popupAnchor)
var myIcon = L.icon({
iconUrl: iconBase + "arbre.png",
iconSize: [50, 50],
iconAnchor: [25, 50],
popupAnchor: [-0, -150],
});
var marker = L.marker([villes[ville].lat, villes[ville].lon], { icon: myIcon });
//var lieu = [villes[ville]] & [villes[ville].code];
// Construction du contenu de la bulle
marker.bindPopup('<b>' + ville + '</b> - INSEE : ' + villes[ville].code
+ '<br /><u>Département :</u> ' + villes[ville].dep
+ '<br /><u>Région :</u> ' + villes[ville].reg
+ '<br /><a href=' + lien
+ 'placelist.php?parent[]='+ villes[ville].pays
+ '&parent[]=' + villes[ville].reg
+ '&parent[]=' + villes[ville].dep
+ '&parent[]=' + ville + '%20' + villes[ville].code
+ '>les personnes concernées par ' + ville + ' sur le site malibele.org</a>'
);
// Ajout du marqueur aux groupes
markerClusters.addLayer(marker);
// Ajout du marqueur à la liste des marqueurs
markers.push(marker);
}
// Création du groupe des marqueurs pour adapter le zoom
var group = new L.featureGroup(markers);
// Pour que tous les marqueurs soient visibles et ajout d'un padding (pad(0.5)) pour que les marqueurs ne soient pas coupés
macarte.fitBounds(group.getBounds().pad(0.5));
macarte.addLayer(markerClusters);
}
// Fonction d'initialisation qui s'exécute lorsque le DOM est chargé
window.onload = function(){
initMap();
};
</script>
</body>
</html>Note à moi-même : il faut que j’apprenne à récupérer les données d’un fichier.
Carennac
Messages
1. Une carte OSM pour afficher les lieux de naissance des ancêtres, 28 août 2019, 09:21, par Katryne
Bonjour !
C’est un affichage intéressant que j’ai pu automatiser dans mon arbre réalisé avec le logiciel (payant) TNG TNG The Next Generation of Genealogy Sitebuilding. Présentation sur le site dédié (http://www.tngsitebuilding.com/) : "The Next Generation of Genealogy Sitebuilding (TNG) est un moyen puissant de gérer et d’afficher un arbre généalogique sur un site web, le tout sans générer de HTML statique. Au lieu de cela, les informations sont stockées dans une base de données et les pages sont créées à la demande." . Sur le site de généalogie du village que je réalise depuis 18 mois, deux plugins ont été ajoutés codés par des développeurs différents : un qui intègre une carte OSM OSM Open Street Map , l’autre qui va chercher tous les événements liés à une personne pour les placer sur la carte des ancêtres. Ce ne sont pas seulement les lieux de naissance qui sont utilisés, mais aussi ceux de mariage, de décès, voire de recensement. Cela permet de donner plus d’étoffe à la carte des ancêtres, car on ne dispose parfois que de l’un de ces éléments.
Voilà par ex. la carte des ancêtres d’Antoinette Guerrier (un peu loin de notre village, mais ses descendants sont ici) : https://genealogie.revestou.fr/mappedigree.php?personID=I3181&tree=revesto&parentset=0&generations=4
L’échelle de la carte s’adapte automatiquement pour englober tous les éléments listés.
NB ce n’est pas une pub déguisée pour le logiciel, j’en suis juste un utilisateur passionné. Je veux juste montrer un exemple de ce que la cartographie des ancêtres peut apporter. J’aimerais bien la même chose pour les descendants, car c’est également intéressant de pouvoir afficher leur essaimage.
1. Une carte OSM pour afficher les lieux de naissance des ancêtres, 28 août 2019, 10:11, par Roland
Bonjour et merci pour votre commentaire.
Votre logiciel a un gros défaut pour moi : il est en anglais (langue que je ne maîtrise absolument pas). Et puis, je suis maintenant trop vieux pour changer de logiciel et prendre de nouvelles habitudes. Je préfère donc tenter d’améliorer le mien (webtrees) qui est déjà très performant pour les recherches et qui a de très nombreuses qualités. Pour moi, son plus gros défaut est d’utiliser GoogleMaps dont je n’ai pas envie.
2. Une carte OSM pour afficher les lieux de naissance des ancêtres, 3 septembre 2019, 13:12, par Katryne
Bonjour Roland !
J’ai beaucoup hésité avec Webtree, car c’est un des rares logiciels de généalogie qui permette de tout gérer en ligne et de publier en ligne, alors que les autres sont des logiciels de bureau qui autorisent parfois la création d’une page web statique que l’on peut mettre en ligne. Mais je n’ai pas réussi de suite avec Webtree et me suis découragée. Et comme ça fait 6 ans que je suis avec TNG TNG The Next Generation of Genealogy Sitebuilding. Présentation sur le site dédié (http://www.tngsitebuilding.com/) : "The Next Generation of Genealogy Sitebuilding (TNG) est un moyen puissant de gérer et d’afficher un arbre généalogique sur un site web, le tout sans générer de HTML statique. Au lieu de cela, les informations sont stockées dans une base de données et les pages sont créées à la demande." , j’en n’en bouge plus. C’est toujours long d’appréhender un nouveau CMS CMS Content Management System. En français, SGC : Système de Gestion de Contenu. et j’en utilise déjà 6 différents de front et c’est déjà compliqué de ne pas se mélanger en gérant l’un ou l’autre.
Mon TNG TNG The Next Generation of Genealogy Sitebuilding. Présentation sur le site dédié (http://www.tngsitebuilding.com/) : "The Next Generation of Genealogy Sitebuilding (TNG) est un moyen puissant de gérer et d’afficher un arbre généalogique sur un site web, le tout sans générer de HTML statique. Au lieu de cela, les informations sont stockées dans une base de données et les pages sont créées à la demande." est d’abord en français, il y a un bouton déroulant pour choisir la langue (en bas du pavé qui se trouve en haut à droite). Je n’y ai laissé que le français, l’anglais et l’allemand, mais il y en a une trentaine disponibles, ou même plus. En principe, il détecte la langue du navigateur du visiteur pour le premier affichage, et il est possible de changer ensuite. Si votre navigateur a été détecté comme anglophone, c’est soit que vous l’utilisez en anglais, soit que vous ayez refusé les cookies, lesquels permettent aussi de "fixer" la langue.
Je vous souhaite une belle journée.