S'abonner au Flux RSS

Mot-clé - openlayers

Fil des billets - Fil des commentaires

mardi, mai 24 2011

Leaflet la sobre, OpenLayers la gourmande

En utilisant Leaflet sur quelques pages de test je trouvais son comportement assez rapide en comparaison à OpenLayers, voulant comprendre ce qui pourrait expliquer ce sentiment j'ai décidé de mesurer le nombre de tuiles téléchargées par chacune des librairie pour une utilisation identique. J'ai pour cela monté ce soir un rapide test que je vous livre ici.

Le protocole de test est le suivant, une page contenant 2 cartes identiques de 512px par 512px, une pour LeafLet et l'autre pour OpenLayers. Les deux cartes sont déplacées simultanément en appelant des commandes identiques.

Les commandes de déplacement sont décrites ci-dessous avec à chaque fois le nombre de tuiles totale téléchargées depuis le début du test comptées depuis le serveur web.

Au chargement de la page

  • Leaflet : 9 tuiles
  • OpenLayers : 42 tuiles
  • ratio : 4.6

Deux zoom out :

  • Leaflet : 27 tuiles
  • OpenLayers : 126 tuiles

Deux zoom in (toujours sans changer de position) :

  • Leaflet : 27 tuiles
  • OpenLayers : 192 tuiles

Déplacement d'un degré au nord puis d'un degré à l'est

  • Leaflet : 33 tuiles
  • OpenLayers : 212 tuiles

Deux zoom in

  • Leaflet : 51 tuiles
  • OpenLayers : 296 tuiles

Pan de 100px à gauche, puis 100px en bas

  • Leaflet : 54 tuiles
  • OpenLayers : 316 tuiles
  • ratio : 5.85

Là le match est sans appel, Leaflet gagne haut la main dans le registre de la sobriété. Mais si OpenLayers déborde sur les cotés alors la différence va s'amenuiser lors d'une ballade sur la carte. Ce que j'ai fais en tournant un peu en rond, quelques zoom out et in pour me recentrer et au final après une visite autour d'un point fixe on obtient :

  • Leaflet : 182 tuiles
  • OpenLayers : 1449 tuiles
  • ratio : 7.96

La ratio final de 7.96 comparé au ratio inital de 4.6 lors du chargement de la page me laisse un peu pantois sur l'efficacité du chargement des tuiles périphériques par OpenLayers.

vendredi, janvier 21 2011

Réduire la taille de la librairie OpenLayers

La librairie OpenLayers est constituée d'un ensemble de classe, de fonctions, de librairies externes, qui sont séparés dans 292 fichiers Javascript. Le principe de la construction de la librairie est de rassembler tous les fichiers pour n'avoir au final qu'un seul .js à mettre sur votre serveur web. Nous allons décrire ici la méthode qui permet de pour choisir quelles parties seront incluses dans le fichier final. Pour ma part j'ai l'habitude d'exclure tous les objets type Marker des cartes qui ne sont composées que de tuiles de bases, on enlèvera de même tous les contrôles inutilisés.

Tout d'abord, récupérez l'archive contenant les sources sur le site du projet, la version à la rédaction de ce billet est la 2.10.

wget http://www.openlayers.org/download/OpenLayers-2.10.tar.gz

Décompressez ensuite l'archive obtenue et placez vous dans le répertoire build qui contient les scripts de construction.

tar xvfz OpenLayers-2.10.tar.gz
cd OpenLayers-2.10/build/

On trouve dans le répertoires les scripts build.py et buildUncompressed.py écrits en python. Les fichiers de profile full.cfg library.cfg, et lite.cfg, le fichier de licence et un traditionnel README.txt qui contient un peu d'aide, juste un peu.

Le script nommé build.py prend 2 options. La première permet de spécifier le fichier de profile à utiliser (par défaut full.cfg) et la deuxième le nom du fichier généré (par défaut OpenLayers.js)

exécution du programme :

./build.py

ou

./build.py full

on note que le fichier de profil est à indiquer sans l'extension .cfg

build.py utilise jsmin (présent dans le répertoire tools/ de l'archive) pour minifier le code généré, si vous ne souhaitez pas le faire il vous faudra alors utiliser le script buildUncompressed.py pour construire votre librairie. La génération non compressée aboutit à un fichier de 2.6M, on réservera cette version pour les devs :-)

Par défault le script build.py utilise le fichier de configuration full.cfg qui comme son nom l'indique contient l'ensemble des librairies et classes du projet OpenLayers ainsi que les inclusions externes. Les fichiers sont placés dans le répertoire lib/ dans la racine de l'archive. La création du build full donne

Total files merged: 269
Compressing using jsmin.

Pour une taille de 929K.

Une compilation avec la configuration plus légère en utilisant le profile lite.cfg aboutit à 128K pour seulement 23 fichiers de sources utilisés, le gain est net et sans appel.

On aboutit avec ce fichier au minimum requis pour afficher une carte dans une page web, un minimum de contôles sont toutefois nécessaires pour permettre à l'internaute d'interagir sur la carte. C'est dans ce sens que j'ai créé le fichier ci-dessous qui me permet d'aboutir à un fichier de 154K ce qui fait tout de même un gain de 80% en taille.

[first]
OpenLayers/SingleFile.js
OpenLayers.js
OpenLayers/BaseTypes.js
OpenLayers/BaseTypes/Class.js
OpenLayers/Util.js

[last]

[include]
OpenLayers/Map.js
OpenLayers/Layer/TMS.js
OpenLayers/Control/Attribution.js
OpenLayers/Control/PanZoom.js
OpenLayers/Control/Navigation.js
OpenLayers/Control/ArgParser.js

[exclude]

Un fichier de profile se décrit en 4 sections qui contiennent chacune un ensemble de nom de fichier faisant référence au répertoire lib/ de la racine. Les fichiers présents dans include sont inclus dans le fichier final quand ceux de la section exclude en sont exclus. Il est possible de laisser la section include vide et de ne seulement spécifier que ceux qui ne seront pas utilisés, dans ce cas tous les fichiers sources sont inclus ; c'est d'ailleurs le choix fait dans le profil full.

Un fichier présent dans la section first sera inclus en début de processus, pour la section last il sera poussé à la fin du fichier, un fichier présent dans l'une de ces 2 sections doit figurer également dans la section include sinon une erreur se produit. La section include à prédominance sur la section exclude, un fichier présent dans les 2 sera inclus au final.

Dans la version par défaut la localisation française n'est pas incluse, on ajoutera la ligne "OpenLayers/Lang/fr.js" dans la section include pour corriger cela, raison de plus pour les francophones de construire eux mêmes leur librairie.

Il ne faut pas voir la finalité de la réduction de taille comme un gain en temps de transferts, au vu du volume de tuiles qui accompagnent une carte cela ne serait pas pertinent. Le gain le plus intéressant se trouve au niveau de l'exécution du code javascript dans le navigateur pour une part. D'autre part moins on à de code exposé, moins on a de bugs potentiels.

Un dernier intérêt à mettre en place cette méthode et vous l'aurez vite compris c'est que vous pouvez inclure votre propre code Javascript dans la lib et ne plus avoir qu'un seul fichier .js à charger pour animer vos cartes, et un fichier de moins, c'est une socket de moins, des octets en moins, une ligne de log en moins ...

jeudi, novembre 11 2010

Installer la librairie OpenLayers sur votre serveur

Utiliser une librairie JavaScript distante est une dépendance dangeuresue pour un site web, en cas de problème sur le site OpenLayers les cartes sur vos sites ne seraient plus affichées, pour éviter cela nous allons voir comment installer la librairie à la racine de votre serveur web.

La librairie sera installée à la racine du serveur web dans un répertoire nommé opl210.

Première étape récupérer l'archive sur le site, ici nous la sauvegardons dans la racine du serveur.

wget http://www.openlayers.org/download/OpenLayers-2.10.tar.gz

On décompresse l'archive dans le répertoire courant

tar xvfz http://www.openlayers.org/download/OpenLayers-2.10.tar.gz

Il ne nous reste qu'à copier les fichiers nécessaires dans le répertoire opl210.

cp OpenLayers-2.10/OpenLayers.js opl210/
cp -r OpenLayers-2.10/img/ opl210/
cp -r OpenLayers-2.10/theme/ opl210/

Nous pouvons désormais supprimer l'archive OpenLayers-2.10.tar.gz et le répertoire OpenLayers-2.10 qui ne sont plus utiles.

Nous utiliserons maintenant dans notre page html la librairie locale en indiquant dans les headers l'emplacement de celle-ci :

<script type="text/javascript" src="/opl210/OpenLayers.js"></script>

Inutile de préciser où sont stockées les images et les styles utilisés, la librairie les cherche par défaut dans le répertoire/url où celle-ci se trouve. Dans le prochain billet nous verrons lors de la personnalisation de la carte comment indiquer des répertoires différents afin de pouvoir organiser les fichiers à son habitude.

NB : le fichier readme.txt contient une erreur sur l'emplacement du fichier OpenLayers.js ne pas s'y fier, j'ai ouvert un ticket pour corriger cette erreur

La mise en oeuvre de ce billet est consultable dans : local.html

lundi, novembre 8 2010

OpenLayers et les projections

Dans ce deuxième billet consacré à Openlayers nous allons aborder les sytèmes géodésiques et les projections. Sans entrer dans les détails il faut savoir que la représentation de la terre qui est ronde sur une feuille de papier plane représente un casse tête depuis des siècles à tous les cartographes, pour faire cela au mieux (avec le minimum de déformations) on a inventé les systèmes géodésiques et les projections cartographiques.

Quand vous utilisez un GPS dans votre voiture, en randonnée ou en vélo la position que vous lisez sur l'écran est exprimée en longitude et latitude dans le système géodésique WGS 84. L'EPSG qui se charhe de référencer les différents systèmes lui a attribué le numéro 4326, les codes EPSG sont une référence pour les outils manipulant des données géographiques comme Postgis ou OpenLayers, ils sont d'ailleurs utilisés par aussi par l'Open Geospatial Consortium.

Tout serait simple si OpenLayers utilisait ce système pour référencer les tuiles qui composent la carte, mais OpenLayers utilise le système 900913, car c'est ce système qui est utilisé lors de la création des tuiles, nous devons donc l'utiliser pour positionner notre carte, comme nous l'avons fait dans le précédent billet. Je reviendrais plus tard sur les origines du système 900913, les habitués de l'écriture cowboy pourront déjà faire des recherches sur le moteur éponyme.

Un peu de pratique maintenant et positionnons notre carte avec des données WGS 84. Dans notre précédent exemple nous avons centré la carte sur la position 30000,580000, position exprimée dans le système 900913.

var center = new OpenLayers.LonLat(30000,5800000);

Afin de pouvoir spécifier center dans le système WGS 84 nous allons créer 2 objets de projection avec la classe OpenLayers.Projection, un objet pour le WGS 84 en utilisant son code EPSC 4326, et un pour le système attendu par OpenLayers 900913.

var projFrom = new OpenLayers.Projection("EPSG:4326");
var projTo = new OpenLayers.Projection("EPSG:900913")

Nous allons donc cette fois pourvoir définir notre centre avec une coordoonée en longitude est de 0.2694 approximatif, et une latitude nord de 46.1224.

var center = new OpenLayers.LonLat(0.269494585,46.1224893);

Il ne nous reste plus qu'à tranformer notre point center avec la fonction transform pour obtenir un point nommé cproj que l'on pourra utiliser pour positionner la carte.

var cproj = center.transform(projFrom, projTo);

Le contenu de center est transformé d'un système de projection source projFrom dans un système destination projTo, ce qui nous permet d'obtenir dans la variable cproj une position exprimée dans le système 900913, il ne nous reste plus qu'à utiliser cette position pout centrer la carte.

map.setCenter(cproj, 5);

La mise en oeuvre de ce billet est consultable dans : projections.html

mercredi, novembre 3 2010

Utiliser OpenLayers et OpenStreetMap : la carte minimale

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.