Vous êtes ici : Accueil -> La boite à outils du chercheur et du curieux -> Cartes et Plans -> Charente, Charente-Maritime, Deux-Sèvres, Vienne : Carte satellite des (...)

Charente, Charente-Maritime, Deux-Sèvres, Vienne : Carte satellite des trésors de l’histoire

D 3 janvier 2007     H 10:38     A Pierre     C 0 messages A 33484 LECTURES


agrandir

Des cartes satellite Google (Googlemap) au document d’archives, il n’y a que la distance de quelques clics, rapidement franchie.

Mode d’emploi de la carte

Squelette SPIP

Choisissez - d’un simple clic gauche - parmi les balises jaunes placées sur les lieux de mémoire et découvrez les trésors de l’histoire locale - Faites un zoom pour agrandir et mieux distinguer l’emplacement des balises. Nota : seule une petite partie des archives présentées sur ce site est accessible avec les balises. Pour les autres sources, voir le plan du site et le moteur de recherche en haut de la colonne de droite.

Mode d’emploi de la carte


- Pour centrer l’image sur un point de la carte, faire un double-clic gauche à cet emplacement.

- Pour trouver les trésors signalés par une balise rouge, cliquer sur la balise elle-même, tout en prononçant la formule "Sésame, ouvre toi ..." (c’est plus efficace).

- Pour faire un zoom avant ou arrière, utiliser les signes + ou - ou déplacer le curseur.

Nota : Un zoom important permet d’obtenir le nom des rues de la commune.

- Pour changer le mode d’affichage de la carte (plan / vue satellite / vue mixte), clic sur le mode choisi.

- Pour déplacer la carte, la faire glisser en maintenant le bouton gauche de la souris enfoncé.

- Pour ramener la carte à sa position d’origine, clic sur la croix centrale.


Squelette SPIP de cette page et d’une carte Googlemap

Pour cette page


- 1- On définit les caractéristiques de l"iframe" dans lequel le fichier googlecarte_xxx.html va s’afficher. L’iframe s’ouvre avec un 1er fichier googlecarte_01.html

Le code de cet iframe (à mettre dans le corps d’un article normal, à l’endroit où on veut afficher la carte) est le suivant :

<iframe id="carte" name="carte" src="spip.php?page=googlecarte_xxx" width="795" height="620" frameborder=0 scrolling=NO></iframe>


Les puristes n’aiment beaucoup pas la fonction "iframe". Je l’utilise malgré tout, car elle permet d’appeler dans l’iframe un fichier googlecarte_xxx.html. Cela évite d’avoir à écrire un squelette de page spécifique à chaque type de carte.

La carte



- 2- Le squelette googlecarte_xxx.html (celui qui est présenté sur cette page)

  • Dans le "head"
    <script src="http://maps.google.com/maps?file=api&v=2&key=votre clé Google API" type="text/javascript"></script>



  • Dans le "body",



Dans cette page, on a la possibilité d’afficher plusieurs cartes à partir d’une série de boutons.

    • a - les boutons, ils envoient les paramètres spécifiques à chacune des cartes. Ici, ces paramètres sont :
      • le groupe de mots-clés qui va permettre l’affichage des balises
      • la position du centre de la carte
      • le titre de la carte
      • on pourrait en ajouter d’autres : l’échelle, le type de balises, les dimensions de la carte, etc.



Le code des boutons (dont le mode d’affichage est géré par une feuille de style), est celui-ci :

[(#REM) Onglets ]

<div id="bandonglets" class="bandonglets" align="center">
<ul>
  <li id="bandonglets_1"><a href="spip.php?page=googlemap_xxx&groupe=38&lati=45.6497634&longi=0.1690435&lieu=Charente">(16) Charente</a></li>
  <li id="bandonglets_2"><a href="spip.php?page=googlemap_xxx&groupe=2&lati=45.7775919&longi=-0.7873022&lieu=Charente-Maritime">(17) Charente-Maritime</a></li>
  <li id="bandonglets_3"><a href="spip.php?page=googlemap_xxx&groupe=39&lati=46.5480094&longi=-0.2371812&lieu=Deux-Sèvres">(79) Deux-Sèvres</a></li>
  <li id="bandonglets_4"><a href="spip.php?page=googlemap_xxx&groupe=40&lati=46.543974&longi=0.4161099&lieu=Vienne">(86) Vienne</a></li>
</ul>       
</div>



Les divers paramètres envoyés par le bouton sont séparés par le signe ’&’, et la liste peut être longue.

    • puis les paramètres généraux nécessaires pour la création de la carte,
    • les marqueurs (les images des petites balises sont spécifiques au site).
    • les contrôles et les gadgets (ici, curseur de zoom, sélecteur de mode d’affichage, échelle, mini-carte de situation)
    • On détermine le point central de la carte (latitude et longitude), avec les paramètres ’lati’ et ’longi’ envoyés par les boutons, et reçus par les balises #ENV{lati, 45.7775919}; et #ENV{longi, -0.7873022}; (les valeurs 45.777... et -0.787... sont des valeurs par défaut de lati et longi). Pour cela, j’ai modifié le script de base de la carte Googlemap en ajoutant deux lignes :



       map.clati = #ENV{lati, 45.7775919};
       map.clong = #ENV{longi, -0.7873022};



et en modifiant la ligne suivante

       map.setCenter(new GLatLng(map.clati, map.clong), 9, G_HYBRID_MAP);



    • le niveau de zoom de l’affichage initial, le type de carte (ici G_HYBRID_MAP = image satellite + carte)



Le script d’affichage de la carte est donc celui-ci :

   <script type="text/javascript">
   //<![CDATA[

   // Check to see if this browser can run the Google API
   if (GBrowserIsCompatible()) {

        // Create our "tiny" marker icon
        var icon = new GIcon();
        icon.image = "IMG/gif/mm_20_hp.gif";
        icon.shadow = "http://labs.google.com/ridefinder/images/mm_20_shadow.png";
        icon.iconSize = new GSize(12, 20);
        icon.shadowSize = new GSize(22, 20);
        icon.iconAnchor = new GPoint(6, 20);
        icon.infoWindowAnchor = new GPoint(5, 1);


     // Display the map, with some controls and set the initial location
        var map = new GMap(document.getElementById("map"));
        map.addControl(new GLargeMapControl());
        map.addControl(new GMapTypeControl());
        map.addControl(new GScaleControl());
        map.addControl(new GOverviewMapControl());
       map.clati = #ENV{lati, 45.7775919};
       map.clong = #ENV{longi, -0.7873022};    
        map.setCenter(new GLatLng(map.clati, map.clong), 9, G_HYBRID_MAP);               

     GEvent.addListener(map, "click", function(overlay, point) {
       if (overlay) {
         if (overlay.my_html) {
           overlay.openInfoWindowHtml(overlay.my_html);
         }
       }
     });      

   }

   
   // display a warning if the browser was not compatible
   else {
     alert("Sorry, the Google Maps API is not compatible with this browser");
   }

   //]]>
   </script>



  • Toujours dans le "body, juste après ce qui précède, on place la boucle spip qui va faire l’opération suivante :
    • 1- aller chercher la liste des mots-clefs (ici des noms de lieux) dans le groupe qu’on a choisi
    • 2- récupérer dans la table spip_communes créée spécialement pour cela, les champs "latitude", "longitude", "code INSEE", "code postal" etc. de la commune. Pour parvenir à réaliser cette extraction, une condition impérative à respecter : le mot-clef doit être écrit exactement comme il l’est dans la table spip_communes. Sinon les coordonnées ne sont pas trouvées, et le marqueur ne s’affiche pas.



Le code de la boucle, qui récupère, par la balise #ENV{groupe,2}, le groupe de mots-clés (2, ici valeur par défaut) correspondant à la carte choisie est :

<BOUCLE_mots(MOTS) {id_groupe=#ENV{groupe,2}} {par titre}>
    <BOUCLE_1(spip_communes){titre}>
        <script type="text/javascript">
         var marker = new GMarker(new GPoint(#LONG,#LAT), {title:"[(#TITRE|textebrut|addslashes)]",icon:icon});
         marker.my_html = "<div class='infobulle1'>
         <div class='texte13'><a href='#URL_MOT' target='_top'>
         <img src='[(#LOGO_MOT_NORMAL||image_reduire{150,150}|extraire_attribut{'src'})]'/>
         <br><b>#TITRE</b></a></div>
         <div class='texte11'>D'un clic sur son nom, accédez
         <br>aux sources de l'histoire de ce lieu.</div></div>";
         map.addOverlay(marker);
        </script>
   </BOUCLE_1>
</BOUCLE_mots>



Les éléments à adapter à votre cas sont :

- le numéro du groupe de mots-clefs à utiliser

- la latitude et longitude du centre de la carte

- le nom de la table à interroger (ici spip_communes)

- tous les paramètres class=’xxx’, qui correspondent à des styles définis dans une feuille de style (en associer une à ce fichier googlecarte_xxx.html).

Voili, voilà : c’est tout simple si on a suivi.

Pour plus de détails, allez voir dans les forums de Spip-contrib. Ca devrait vous aider, comme ça m’a aidé à réaliser cette page. Il y des gens sympa qui sont prêts à vous donner un coup de main. Pensez à leur renvoyer l’ascenseur si, vous aussi, vous créez des squelettes intéressants.

Répondre à cet article

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 ?
  • [Se connecter]
Votre message
Ajouter un document

Suivre les commentaires : RSS 2.0 | Atom

Les mots-clés de l'article

pour en savoir plus sur : Carte satellite - Département Charente (16) - Département Charente-Maritime (17) - Département Deux-Sèvres (79) - Département Vienne (86) - Province Aunis - Province Poitou - Province Saintonge -

Chercher dans le site

Les plus lus --- Les 50 +

1.  Calendrier révolutionnaire ou républicain - Conversion en date grégorienne

2.  Carte satellite des voies romaines, des chemins anciens de Saintonge, Aunis et Angoumois

3.  Conversion des monnaies d’avant la Révolution en valeur actuelle

4.  FAQ & R - Le Forum Aux Questions ... & aux Réponses

5.  Carte satellite Googlemap avec moteur de géolocalisation : rechercher une ville, une commune, un village


5 articles au hasard

1.  1809 - Fouras (17) - La bataille des brûlots à bord du vaisseau "le Régulus"

2.  Maps of the city of Angouleme and its suburbs near 1650

3.  1590-1598 - Angoulême (16) : Misère, épidémie et brigandage. La fin du siècle.

4.  1906 - Bulletin de la Société des Archives Historiques de Saintonge et d’Aunis

5.  1789 - Chenommet (16) : cahier de doléances de la paroisse


Les plus populaires --- Les 50 +

1.  Conversion des monnaies d’avant la Révolution en valeur actuelle

2.  Carte satellite des voies romaines, des chemins anciens de Saintonge, Aunis et Angoumois

3.  Carte satellite Googlemap avec moteur de géolocalisation : rechercher une ville, une commune, un village

4.  1120 - Cartulaire de l’église d’Angoulême - Terre de Bouchereau à Macqueville (17)

5.  Études historiques sur la ville de Cognac et l’arrondissement, par F. Marvaud - Table onomastique


Brèves --- Toutes

1.  Au château de la Roche Courbon, fête de la préhistoire les 23 et 24 avril 2016

2.  Antiquité-Avenir. Réseau des Associations liées à l’Antiquité - Communiqué de presse

3.  Temples de la Saintonge Maritime : Une histoire mouvementée

4.  2.644.259 visiteurs sur Histoire Passion - Statistiques au 31/12/2013

5.  Archéologie et histoire du fleuve Charente à Taillebourg - Port d’Envaux