Généalogie des MaLiBeLe
Les ancêtres ont fait ce que nous sommes. Mieux les connaître, c'est donc mieux nous connaître.
La citation du jour
Il est plus facile d’identifier un imbécile que de repérer un surdoué. Et les deux ne sont même pas incompatibles !
Activités
geek - cycliste - généalogiste - Savoir - lecteur - collectionneur - Philosophe - citoyen - marcheur - scripteur - Photographe - instituteur - enseignant en sciences - enseignant formateur - journaliste local - bénévole
Les mots clés
villes et villages * challengeAZ * ARHFa * webtrees * ancêtre * vieux métiers * Histoire et histoires * ">1J1P * 1GM * geneatheme * PoilusVerdun * Gallica * généalogie * 1Ancetre * Sources * gedcom * état civil * archives
Lorand

Site personnel de Roland Bouat. Pour les curieux : Lorand est un anagramme de Roland.

Une carte OSM pour afficher les lieux de naissance des ancêtres

Mots clés : généalogiste , geek , OpenStreetMap

mardi 27 août 2019 , par Roland


Il y a longtemps que ça me trottait dans la tête mais je crois que je tiens le bon bout. Mon projet était d’intégrer une carte OSM   des lieux de vie des ancêtres des MaLiBeLe.

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

 La page html 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.


Voir en ligne : Pas à pas – Insérer une carte OpenStreetMap sur votre site


Création : 27/08/2019 - MAJ : 28/08/2019 - 29/08/2019


[1J’espère que l’image utilisée est bien libre de droit !

[2CMS utilisé : Spip à l’adresse lorand.org.

Messages

  • Bonjour !
    C’est un affichage intéressant que j’ai pu automatiser dans mon arbre réalisé avec le logiciel (payant) TNG  . 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  , 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.

    • 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.

Un message, un commentaire ?

modération a priori

Ce forum est modéré a priori : votre contribution n’apparaîtra qu’après avoir été validée par un administrateur du site.

Qui êtes-vous ?
Votre message

Ce formulaire accepte les raccourcis SPIP [->url] {{gras}} {italique} <quote> <code> et le code HTML <q> <del> <ins>. Pour créer des paragraphes, laissez simplement des lignes vides.

Brèves
30 janvier – Webtrees 1.7.12

La version 1.7.12 est sortie le 08/12/2018. Téléchargement : webtrees-1.7.12.zip https://github.com/…/re…/downlo... (31.2 Mb). La prochaine version (...)

11 janvier – Une personne = au moins une source

Comme aucune personne n’est "inventée" en généalogie, la découverte de son existence provient toujours d’une information. Cette information est une (...)

10 janvier – Validité des sources

niveau 1 = très fiable : état civil, BMS, actes notariés niveau 2 = à recouper : 2-1 : informations reçues par courriel 2-2 : web-sites (les relevés (...)

Site servant aussi de test à la mise en œuvre de certaines fonctionnalités (donc expérimental).