Workshop : OpenLayers - Construire un application de Web mapping avec une fondation solide [Softlibre] Sommaire | Module suivant Rédacteurs : Tim Schaud Traduction : Yves Jacolin Openlayers - Construire un application de Web mapping avec une fondation solide OpenLayers est une bibliothèque de développement rapide pour la construction d'applications de cartographie dans un navigateur.
![Workshop : OpenLayers - Construire un application de Web mapping avec une fondation solide [Softlibre]](http://cdn.pearltrees.com/s/pic/th/openlayers-application-11558787)
La bibliothèque permet aux développeurs d'intégrer des données de divers fournisseurs, fournis une API simple et créer une application cartographique rapide. Ce workshop est divisé en cinq modules, offrant une bonne introduction aux nouveaux venus tout en apportant une vision avancée aux utilisateurs plus expérimentés. Avant de commencer Il est recommandé (mais pas obligatoire) d'installer firebug. Lien à garder sous la main : Modules du workshop : Module 2 : Les couches - explorer les différents types de couche disponible avec OpenLayers.
Workshop : OpenLayers - Construire un application de Web mapping avec une fondation solide [Softlibre] Sommaire | Module suivant Module 1 : Les bases d'OpenLayers Afficher une carte est le coeur d'OpenLayers, commençons par créer une carte très simple.
![Workshop : OpenLayers - Construire un application de Web mapping avec une fondation solide [Softlibre]](http://cdn.pearltrees.com/s/pic/th/openlayers-application-16153913)
Une carte très simple Copier le code suivant dans un éditeur de texte et sauver dans un répertoire appelé ol_workshop à la racine des documents Apache sous le nom de 1-basics.html. Ouvrez-le dans votre navigateur : Quand vous ouvrez la page dans votre navigateur, il affiche ceci : Le script peut être vue comme ayant 6 étapes distinctes : La bibliothèque est chargée en utilisant la balise script. Les étapes suivantes détaillent ces étapes. Étape 1 : Obtenir la bibliothèque OpenLayers L'url openlayers/lib/OpenLayers.js pointe vers la localisation du fichier JavaScript qui charge OpenLayers. (Pour les utilisateurs avancés : il est également possible de compresser OpenLayers en un seul fichier qui améliore spectaculairement le temps de chargement.
Étape 2 : La carte dans le Document Object Model (DOM) Étape 3 : L'objet map Étape 4 : Créer une couche. Utiliser OpenLayers et OpenStreetMap : la carte minimale - One more geek. 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. 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>.
Introduction à OpenLayers. Ce tutorial est un aperçu rapide des possibilités d'OpenLayers.
Il vous permettra de comprendre globalement le fonctionnement de cette bibliothèque Javascript OpenSource tournée vers la cartographie. - Intégration d'OpenLayers - Afficher une carte - Enrichir l'interface - Ajouter des marqueurs - Intégration d'OpenLayers - La dernière version d'OpenLayers est librement téléchargeable à l'adresse suivante : OpenLayers (link is external). Une fois dézippé, placer le répertoire OpenLayers dans votre environnement de développement Web (ex: le localhost d'apache) . - Afficher une carte - Nous allons aborder ici une partie un peu longue et compliquée. L'une des premières étapes est de créer un nouvel objet map grâce au constructeur OpenLayers.Map (1), il prend comme paramètre l'id de la balise qui contiendra la carte. Le résultat est visible sur cette page : exemple 1. - Enrichir l'interface - Comme vous avez pu le constater dans l'exemple 1, OpenLayers dispose d'une interface par défaut.
OpenLayers.