OpenLayers a été pendant longtemps le choix standard par défaut pour encapsuler une vue OpenStreetMap navigable dans une page web. C’est une bibliothèque mature et complète (un peu plus de 400k de JavaScript minifié). Elle a une courbe d’apprentissage modérée mais est capable de nombreuses applications au delà d’une simple “carte glissante”: ces fonctionnalités incluent un support des projections complet, le dessin vectoriel, les aperçus de cartes, et bien plus.

Sur cette page, nous expliquons comment créer une carte encapsulable très simple, mais il y a beaucoup plus d’exemples sur OpenLayers.org montrant les capacités complètes du logiciel.

Une carte encapsulée simple

Copiez ce qui suit 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 initialiser un objet map qui apparaitra dans une div sur votre page HTML. Un objet LonLat est créé pour représenter le point au centre de la carte. Essayez de jouer avec les valeurs de latitude et longitude. Un appel à ‘transform’ permet de gérer les projections, et nous utilisons le même emplacement pour positionner un marqueur.

Télécharger OpenLayers

L’exemple ci-dessus montre aussi comment, avec une balise script, vous pouvez référencer le fichier JavaScript OpenLayers hébergé de manière distante sur openlayers.org . Il y a de nombreux avantages et désavantages à cette approche. L’alternative est de télécharger OpenLayers et de l’héberger vous même à côté de votre HTML.

Vous pouvez télécharger un fichier zip depuis openlayers.org qui contient de nombreux fichiers, dont seuls certains sont nécessaires. En fait, vous risquez d’utiliser seulement le fichier unique OpenLayers.js résultant du JavaScript compacté.

Les répertoires ‘theme’ et ‘image’ sont aussi nécessaires si vous souhaitez auto-héberger toutes les ressources requises. Vous pouvez configurer les aspects visuels de OpenLayers en utilisant ces fichiers. Le répertoire ‘lib’ a les sources JavaScript avant qu’ils ne soient compactés en un seul fichier, mais vous pouvez aussi faire fonctionner OpenLayers en mode ‘multi-fichiers’ depuis ceux-là. Cela peut être une bonne idée quand vous développez avec l’API OpenLayers, comme les erreurs reportées dans le navigateur vous renvoient aux numéros de ligne montrant des choses ayant plus de significations.

Si vous choisissez de travailler avec OpenLayers, la bibliothèque est entièrement open-source (sous une licence BSD modifiée) et peut être utilisée gratuitement pour vos projets et produits commerciaux.