Ce billet est le premier d'une série sur la vulgarisation d'OpenStreetMap et OpenLayers. Nous allons voir ici qu'il est très simple aujourd'hui d'inclure une carte nabvigable dans une page web.

Le code de ce billet est mise en oeuvre dans : minimal.html

L'intégration d'une carte dans une page web consiste à ajouter une balise <div> avec un id nommé ici map. L'initialisation de la carte se fera au chargement de la page, pour cela on ajoute un appel à la fonction javascript init() dans la balise <body>.

<body onload="init()">

  <div>Démonstration de carte openstreetmap minimale</div>

  <div id="map"></div>

</body>

Dans l'en-tête de la page on définira la fonction init() comme suit. Dans cette première approche on se contente d'une carte simple que l'on positionne sur un point définit au niveau de zoom 5. Dans un prochain billet on verra comment utiliser un système de coordonnées plus commun.

    <script type="text/javascript">
    function init(){

      // Création d'un objet map
      var map = new OpenLayers.Map('map');

      // Ajout d'un calque en utilisant le rendu par défaut
      map.addLayer( new OpenLayers.Layer.OSM() );

      // Création du point central de la carte à partir 
      //de coordonnées géographiques
      var center = new OpenLayers.LonLat(30000,5800000);

      // Positionnement de la carte sur le point central,
      // au niveau de zoom 5
      map.setCenter(center, 5);
    }
    </script>

Les propriétés visuelles de la carte, sa taille et la bordure noire sont définies comme pour tout objet html par une feuille de style CSS directement en utilisant l'identifiant de l'objet <div>.

     #map {
       width: 600px;
       height: 400px;
       border: 1px solid black;
     }

Nous avons maintenant une carte dans notre page web sur laquelle il est possible de se déplacer, de modifier le niveau de zoom, de faire glisser à la souris et bien d'autres choses encore. Les connaisseurs reconnaîtront le rendu utilisé dans cet exemple, c'est le rendu réalisé par mapnik, utilisé sur le portail OpenStreetMap. Rendu que nous n'avons pas choisi et que nous verrons comment changer dans un prochain billet. Vous pouvez maintenant intégrer dans votre CMS à base de logiciel libre une carte à base de données libres.