Ceci est l’ébauche de doc, pour mémoire, à mettre en forme.
openlayers est une bibliothèque de scripts permettant l’insertion et la gestion de cartes “glissantes” dans des pages web: voir wikipedia en anglais et le site d’openlayers, on y trouve beaucoup d’exemples et la documentation sur l’API.
Ici, on va juste noter pour l’instant quelques petites astuces, notamment comment faire pour mettre au point ou travailler sur un projet “off line”, donc sans les serveurs de cartes ni de scripts.
On va prendre l’exemple le plus simple http://www.openlayers.org/dev/examples/osm.html, et on voir comment le transcrire pour le faire fonctionner en local sur un PC; le source de la page html est ci-dessous:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
<meta name="apple-mobile-web-app-capable" content="yes">
<title>OpenLayers Basic OSM Example</title>
<link rel="stylesheet" href="../theme/default/style.css" type="text/css">
<link rel="stylesheet" href="style.css" type="text/css">
<script src="../OpenLayers.js"></script>
<script type="text/javascript">
var map, layer;
function init(){
map = new OpenLayers.Map( 'map');
layer = new OpenLayers.Layer.OSM( "Simple OSM Map");
map.addLayer(layer);
map.setCenter(
new OpenLayers.LonLat(-71.147, 42.472).transform(
new OpenLayers.Projection("EPSG:4326"),
map.getProjectionObject()
), 12
);
}
</script>
</head>
<body onload="init()">
<h1 id="title">Basic OSM Example</h1>
<div id="tags">
openstreetmap basic light
</div>
<div id="shortdesc">Show a Simple OSM Map</div>
<div id="map" class="smallmap"></div>
<div id="docs">
<p>This example shows a very simple OSM layout with minimal controls.</p>
</div>
</body>
</html>
On voit que pour faire fonctionner en local cette application, il faut évidemment un serveur web; on installera un environnement WAMP (windows apache mysql php) (Easyphp, wampserver) si on est sous windows et on activera apache si on est sous Unix. On créera une zone web (tests/openlayers par exemple) et on vérifiera qu’on accède bien aux fichiers qui y sont en créant un fichier php du style:
<?php
/** \brief
*/
echo ("salut!!!");
?>
Il faudra avoir en local les fichiers styles /theme/default/style.css et style.css: pas compliqué, il suffit d’afficher le source de la page (ctrl U sur firefox) et de cliquer sur les liens des feuilles de styles pour les afficher et faire enregistrer-sous pour les sauver sur le P, par exemple dans tests/openlayers/styles
Il faut aussi en local le script OpenLayers.js . Pour cela on peut faire pareil, mais il est préférable de le télécharger sous forme d’un zip: http://www.openlayers.org/download/OpenLayers-2.12.zip, dont on n’extraira que ce qui nous intéresse, ici OpenLayers.js, par exemple dans /tests/openlayers/apis.
On remplacera dans la page html les url distantes par les locales, mais évidemment, il manque le gros morceau, c’est la définition du serveur de “tiles” (les carreaux qui constituent la carte) et les “tiles” elles-mêmes.
La définition du serveur et la syntaxe des noms de fichiers “tiles” sont définis par défaut au serveur OSM lorsqu’on active la méthode “OpenLayers.Layer.OSM”. On précisera donc l’adresse du serveur dans cette commande; mais il faut d’abord trouver les carreaux. On va utiliser pour cela un logiciel en version évaluation: Easy OpenstreetMap Downloader (à ce jour je n’ai pas trouvé de logiciel freeware pour faire cela, ceux qui sont indiqués () ne fonctionnent pas, en tout cas sur mon PC). Ce logiciel, une fois installé sur le PC, permet de définir la zone à télécharger, avec un niveau de zoom jusqu’à 13 pour la version d’évaluation, ce qui sera suffisant pour des mises au point et évitera aussi de charger le serveur openstreetmap. J’ai télécharger une zone pour les zooms de 9 à 13. Les carreaux se chargent dans des fichiers nommés os_aa_bb_zz.png (aa et bb étant x ou y, z étant le zoom). La syntaxe par défaut de l’URL de récupération des carreaux est: http://serveur/dossier/${z}/${x}/${y}.png. On va donc pour simplifier ranger les fichiers dans des dossiers /tests/openlayers/tiles/9 (et pas 09!),/tests/openlayers/tiles/10, /tests/openlayers/tiles/11 etc… la syntaxe définitive de l’URL sera:
http://localhost/test/openlayers/tiles/${z}/os_${x}_${y}_${z}.png
On modifiera donc le fichier(test1.html)en conséquence, pour obtenir (en changeant aussi le centre de la carte et le zoom, et en définissant une classe largemap pour afficher une plus grande carte):
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
<meta name="apple-mobile-web-app-capable" content="yes">
<title>OpenLayers Basic OSM Example</title>
<link rel="stylesheet" href="style.css" type="text/css">
<link rel="stylesheet" href="style_2.css" type="text/css">
<script type="text/javascript" src="http://localhost/tests/openlayers/apis/OpenLayers.js"></script>
<script>OpenLayers.Console = window.console || OpenLayers.Console;</script>
<script type="text/javascript">
var map, layer;
function init(){
map = new OpenLayers.Map( 'map');
layer = new OpenLayers.Layer.OSM( "Simple OSM Map","http://localhost/tests/openlayers/tiles/${z}/os_${x}_${y}_${z}.png");
map.addLayer(layer);
map.setCenter(
new OpenLayers.LonLat(7.000, 43.7000).transform(
new OpenLayers.Projection("EPSG:4326"),
map.getProjectionObject()
), 13
);
}
</script>
</head>
<body onload="init()">
<h1 id="title">Basic OSM Example</h1>
<div id="tags">
openstreetmap basic light
</div>
<div id="shortdesc">Show a Simple OSM Map</div>
<div id="map"></div>
<div id="docs">
<p>This example shows a very simple OSM layout with minimal controls.</p>
</div>
</body>
</html>
En appelant l’URL http:://localhost/tests/openlayers/test1.html, on affichera la carte voulue dans les zooms de 9 à 13, sans accès à des serveurs extérieurs!