FR:Switch2osm/Translation/using-tiles/getting-started-with-openlayers/

From OpenStreetMap Wiki
Jump to navigation Jump to search

OpenLayers a été pendant longtemps le choix par défaut pour intégrer une carte glissante d'OpenStreetMap dans une page web. Une librairie complète et arrivée à maturité (400k de code JavaScript compacté), la difficulté d'apprentissage est modérée mais ce logiciel libre est capable de fournir de nombreuses fonctionalités au delà d'une simple "carte glissante": cela inclu aussi le support complet des projections, du dessin verctoriel, de vues d'emsemble, et bien plus encore.

Nous vous expliquons ici comment intégrer une carte très simple, mais il y a beaucoup d'autres exemples disponibles sur OpenLayers.org montrant toutes les possibilités de ce logiciel.

Intégration d'une carte simple

Copiez le texte suivant dans un nouveau fichier HTML pour commencer à utiliser OpenLayers

<!DOCTYPE HTML>
<html>
<head>
    <title>OpenLayers Basic Example</title>

    <script src="http://www.openlayers.org/api/OpenLayers.js"></script>
    <script>
      function init() {
        map = new OpenLayers.Map("mapdiv");
        var mapnik = new OpenLayers.Layer.OSM();
        map.addLayer(mapnik);

        var lonlat = new OpenLayers.LonLat(-1.788, 53.571).transform(
            new OpenLayers.Projection("EPSG:4326"), // transform from WGS 1984
            new OpenLayers.Projection("EPSG:900913") // to Spherical Mercator
          );

        var zoom = 13;

        var markers = new OpenLayers.Layer.Markers( "Markers" );
        map.addLayer(markers);
        markers.addMarker(new OpenLayers.Marker(lonlat));

        map.setCenter(lonlat, zoom);
      }
    </script>

    <style>
    #mapdiv { width:350px; height:250px; }
    div.olControlAttribution { bottom:3px; }
    </style>

</head>

<body onload="init();">
    <p>My HTML page with an embedded map</p>
    <div id="mapdiv"></div>
</body>
</html>

Cet exemple montre comment on initialise un object map qui apparaîtra dans une section div sur votre page HTML. Un objet LonLat est créé pour représenter le point central de la carte. Essayez de jouer sur les valeurs de latitude et longitude. Un appel à ‘transform’ s'occupe des projections, et nous utilisons le même emplacement pour afficher un marqueur.

Télécharger OpenLayers

L'exemple ci-dessus montre aussi comment, à l'aide d'une balise script, vous pouvez référencer le javascript OpenLayers hébergé chez openlayers.org . Il y a des avantages et des inconvénients avec cette approche. Une alternative est de télécharger OpenLayers et de l'héberger vous-même au côté de votre code HTML.

Vous pouvez télécharger un fichier zip depuis openlayers.org contenant de nombreux fichiers. Mais seulement une partie d'entre-eux est vraiment nécessaire. En fait, vous pourriez vous contenter du fichier unique en javascript compacté OpenLayers.js .

Les répertoires ‘theme’ et ‘image’ sont aussi nécessaires si vous souhaitez héberger vous-même toutes les ressources requises. Vous pouvez alors configurer les aspects visuels d'OpenLayers en utilisant ces fichiers. Le répertoire ‘lib’ contient le code source javascript avant qu'il ne soit compacté en un seul fichier, mais vous pouvez en fait exécuter OpenLayers dans un mode ‘multi-fichiers’ à partir de là. Ca peut être une bonne idée si vous développez avec l'API OpenLayers, puisque les rapports d'erreurs des navigateurs vous indiqueront des numéros de lignes plus faciles à interpréter.

Cependant, si vous choisissez de travailler avec OpenLayers, la librairie est complètement open-source (sous une licence BSD modifiée) et peut être utilisée librement dans vos projets et produits commerciaux.