Participer au site avec un Tip
Rechercher
 
Bug Suggérer des Améliorations / Corrections
Share Partager sur Facebook Partager sur Twitter
Links Notre chaîne YouTube Notre discord

Améliorations / Corrections

Vous avez des améliorations (ou des corrections) à proposer pour ce document : je vous remerçie par avance de m'en faire part, cela m'aide à améliorer le site.

Emplacement :

Description des améliorations :

Afficher une cartographie OpenStreetMap

Accès rapide :
Introduction
L'exemple de code

Introduction

De très nombreuses applications Web ont besoin d'afficher des cartographies. Il existe de nombreuses solutions. Certaines sont très puissantes, mais payantes : je pense notamment à Google Maps. D'autres sont « Open Source » et gratuite : c'est le cas d'OpenStreetMap. Dans l'exemple de code ci-dessous je vous montre un exemple d'utilisation de cette solution.

En fait, les choses sont un peu plus complexes : OpenStreetMap n'est qu'une base de données de cartographie. Si l'on veut voir quelque chose s'afficher à l'écran, il faut utiliser une autre API permettant l'affichage de la cartographie. Il en existe plusieurs qui peuvent se greffer par-dessus la base de données OpenStreetMap et notamment :

Dans l'exemple de code qui suit, je vous propose d'utiliser Leaflet avec un layer (une couche) cartographique basée sur OpenStreetMap. Voici un exemple d'affichage produit par Leaflet.

L'exemple de code

 1 
 2 
 3 
 4 
 5 
 6 
 7 
 8 
 9 
 10 
 11 
 12 
 13 
 14 
 15 
 16 
 17 
 18 
 19 
 20 
 21 
 22 
 23 
 24 
 25 
 26 
 27 
 28 
 29 
 30 
 31 

<!DOCTYPE html>
<html>
    <head>
        <title>Exemple d'utilisation de Leaflet et d'OpenStreetMap</title>
        
        <style>
            html, body, #map { 
                width: 100%; height: 100%; 
                margin: 0px; padding: 0px; 
                overflow: hidden;
            }
        </style>
        
        <!-- On charge la CSS leaflet -->
        <link rel="stylesheet" href="https://unpkg.com/leaflet@1.3.4/dist/leaflet.css" />
        
        <!-- On charge le code JavaScript de la librairie leaflet -->
        <script src="https://unpkg.com/leaflet@1.3.4/dist/leaflet.js"></script>
        
        <!-- On charge notre code JavaScript -->
        <script type="text/javascript" src="map.js"></script>
    </head>
    
    <body>
    
        <!-- Le tag HTML qui correspondra à notre cartographie -->
        <div id="map"></div>
    
    </body>

</html>
Exemple d'une page HTML utilisation une cartographie Leaflet/OpenStreetMap

il est à noter que la librairie leaflet utilise massivement le design pattern builder, comme en atteste l'exemple de code JavaScript suivant. 
 1 
 2 
 3 
 4 
 5 
 6 
 7 
 8 
 9 
 10 
 11 
 12 
 13 
 14 
 15 
 16 
 17 
 18 
 19 
 20 
 21 
 22 
 23 
 24 
 25 
 26 
 27 
 28 
 29 
 30 
 31 
 32 
 33 
 34 
 35 
 36 
 37 
 38 
 39 
 40 
 41 
 42 
 43 
 44 
 45 
 46 
 47 
 48 

window.addEventListener( "load", function( event ) {    
    var map = L.map( 'map' /* the id of the tag used for map injection */ );
    map.setView( [43.7991 /*latitude*/, 6.72545 /*longitude*/], 12 /*zoom*/ );
    
    
    // --- We add a layer based on OpenStreetMap ---
    L.tileLayer( 'http://tile.openstreetmap.org/{z}/{x}/{y}.png' ).addTo(map);   // Base Map
    
    // --- We add a circle to the map ---
    var circle = L.circle( [ 43.7991, 6.72545 ] , {
        color: 'red',
        fillColor: '#f03',
        fillOpacity: 0.5,
        radius: 200
    }).addTo(map);
    
    // --- We add a polygon to the map ---
    var polygon = L.polygon([
        [ 43.7949098,6.7109003 ],
        [ 43.773007,6.7012349 ],
        [ 43.7779801,6.7306691 ]
    ]).addTo(map);
    
    
    // --- We add a marker, with events, to the map ---
    var marker = L.marker( [ 43.7991, 6.72545 ] )
                  .bindPopup( "Infini Software" )
                  .addTo( map );
    marker.on( "mouseover", function( event ) {
        this.openPopup(); 
    });
    marker.on( "mouseout", function( event ) {
        this.closePopup(); 
    });
    
    // --- We add a new layer to the map that contains some markers ---
    var seranon = L.marker( [ 43.773007,6.7012349 ] )
                   .bindPopup( 'Village de Seranon' ),
    caille      = L.marker( [ 43.7779801,6.7306691 ] )
                   .bindPopup( 'Village de Caille' ),
    valderoure  = L.marker( [ 43.7949098,6.7109003 ] )
                   .bindPopup( 'Village de Valderoure' ),
    laFerriere  = L.marker( [ 43.7990248,6.7306592 ] )
                   .bindPopup( 'Village de La Ferriere' );
    
    L.layerGroup([seranon, caille, valderoure, laFerriere])
     .addTo( map );
});
Le code Javascript de notre cartographie