Le carnet web de florence

Depuis que Google a mis à disposition son service Google Maps, les petits bouts de carte se sont mis à fleurir un peu partout sur la toile. Il faut indiquer un lieu ? Pas de problème, on va mettre une Google Map... Mieux ! On va mettre une OpenStreetMap !

J'ai testé plusieurs solutions pour obtenir une carte sympathique, facile à mettre en place, et avec du code valide. On commence par oublier l'onglet Export du site principal d'OpenStreetMap.

La meilleure solution que j'ai trouvé consiste à passer par Mapstraction. Il s'agit d'une bibliothèque javascript libre d'abstraction d'API. Concrètement, avec le même code, vous pouvez afficher une carte Google, Yahoo!... ou OpenStreetMap (voir la démonstration OpenStreetMap et OpenLayers – notez que OpenLayers est une bibliothèque javascript libre pour mettre en place des slippy maps).

Passons aux travaux pratiques. Voici ce que l'on aimerait obtenir :

Voir la carte sur OpenStreetMap.

Voici une carte tout à fait respectables, avec quelques POI marqués. Le seul inconvénient : les bulles des POI sont... moches.

Comment mettre cela en place ? Simple, voici le code :

    <!-- DIV xhtml de la carte. La taille peut être spécifiée soit ici,
         dans l'attribut style, soit dans les css.
    -->
    <div id="demo-map" style="width: 600px; height: 600px;"></div>
    <p><a
    href="http://openstreetmap.org/?lat=43.5945&lon=1.4496&zoom=12"
    hreflang="en" title="Site du projet OpenStreetMap">
        Voir la carte sur OpenStreetMap.
    </a></p>
    
    
    <!-- Inclusion des bibliothèques javascript OpenLayers et Mapstraction -->
    <script
        type="text/javascript"
        src="http://openlayers.org/api/OpenLayers.js"
    ></script>
    <script
        type="text/javascript"
        src="http://mapstraction.com/svn/source/mapstraction.js"
    ></script>
    
    <script type="text/javascript">
    // Initialisation de la carte.
    var mapstraction = new Mapstraction('demo-map','openlayers');
    mapstraction.addControls({
        pan: true, 
        zoom: 'small',
        map_type: true 
    });
    // Centrer la carte sur toulouse
    var toulouse = new LatLonPoint(43.60277,1.44371);
    mapstraction.setCenterAndZoom(toulouse, 12);
    
    // Ajouter des points (avec leur latitude et longitude) :
    //
    // Comment récupérer la latitude et la longitude d'un point ?
    // 1. Aller sur http://openstreetmap.org/
    // 2. Cliquer sur l'onglet "Export" (en haut)
    // 3. Dans "Format to Export", choisir "Embeddable HTML"
    // 4. Cliquez sur "Add a marker to the map"
    // 5. Cliquez sur la position souhaitée sur la carte (ne pas hésiter à
    //    zoomer !)
    // 6. La latitude et la longitude s'affichent en dessous.
    
    // Cinéma Utopia
    utopia = new Marker(new LatLonPoint(43.60394,1.44679))
    utopia.setInfoBubble('Cinéma Utopia Toulouse');
    mapstraction.addMarker(utopia);
    
    // Toulibre - Groupe d'utilisateurs de logiciels libres toulousain
    toulibre = new Marker(new LatLonPoint(43.60834,1.44461))
    toulibre.setInfoBubble('GUL Toulibre');
    mapstraction.addMarker(toulibre);
    
    // Un point au hasard
    hasard = new Marker(new LatLonPoint(43.58484,1.38883))
    hasard.setInfoBubble('Un point au hasard');
    mapstraction.addMarker(hasard);
    
    </script> 

Il y a même des jolis commentaires pour tout vous expliquer ! Notez l'astuce pratique pour récupérer les coordonnées d'un point. Pour le lien Voir la carte sur OpenStreetMap, vous pouvez simplement copier l'adresse de permalien de la vue que vous souhaitez sur le site principal d'OpenStreetMap.

Maintenant, vous n'avez plus d'excuse ! Si vous voulez mettre une carte sur votre site, copiez ce code. (Non, l'excuse OpenStreetMap est incomplet pour la zone que je veux afficher ne tient pas. Allez sur place, complétez OpenStreetMap, et retournez à votre site web.)