Archives par mot-clé : openlayers

Articles parlant d’OpenLayers, librairie JavaScript permettant de générer des cartes interactives sur votre site.

Carte interactive OpenLayers avec contrôle de calques

Publié le par
Répondre

Après avoir réalisé une carte historique de la ligne 2 du tramway d’Île-de-France avec Leaflet (voir le tutoriel), je me suis attaqué à la création de cette même carte avec OpenLayers.

Bien que plus complet sur certains points, OpenLayers n’inclus pas nativement deux fonctionnalités utilisées dans la carte :

  • Le contrôle de calques
  • Les tooltips.

Pour le contrôle de calques, j’ai utilisé le plugin ol-layerswitcher de Matt Walker.

Pour les tooltips, j’ai utilisé un overlay et une interaction sur les calques des stations. Le corps du tooltip consiste en une div incluse dans la div de la carte :

<div id="map" style="width: 800px;height: 600px;">
  <div id="tooltip" class="tooltip"></div>
</div>
Continuer la lecture →
Pages : 1 2

Carte interactive des rues sans mégots avec OpenLayers

Publié le par
Répondre

Bon, je suppose que vous commencez à avoir l’habitude que je vous présente la manière de créer une carte interactive à l’aide des deux librairies majeures OpenLayers et Leaflet.

Après avoir rapidement créé la carte des rues et sections de rue concernées par l’opération « Des rues sans mégots » avec Leaflet, j’ai bien entendu créé une version avec OpenLayers de cette carte.

Sources des données

Pour cette carte j’utilise le même fichier GeoJSON que pour la carte avec Leaflet :

  • La liste des rues ou sections de rue provient de la page d’actualités de Paris.fr
  • Le tracé des rues a été extrait des données disponibles sur Paris Data.
Continuer la lecture →
Pages : 1 2

Carte interactive du métro de Paris avec OpenLayers

Publié le par
Répondre

Après vous avoir créé une carte interactive du métro de Paris avec la librairie Leaflet (voir mon précédent article), j’ai décidé de recréer cette carte avec l’autre libraire majeure de cartographie en ligne : OpenLayers (que j’ai déjà utilisée pour ma carte utilisant un fond statique).

Données utilisées

Les données utilisées pour créer cette carte sont les même que pour celle réalisée avec Leaflet :

  • Fond de carte Stamen Toner Lite
  • Tracé des lignes fournis par le STIF sur leur site d’open data : opendata.stif.info
  • Code couleur des lignes fournis par la RATP : data.ratp.fr
  • Coordonnées des stations fournies par le STIF et Wikipédia pour les stations fantômes
  • Logo utilisé comme marqueur de position trouvé sur le site de la RATP
Continuer la lecture →
Pages : 1 2 3

Remake de ma carte interactive avec OpenLayers

Publié le par
Répondre

Il n’y a pas très longtemps, en faisant la maintenance de mon site (oui, même si le contenu n’évolue quasiment pas, le site n’est pas à l’abandon) je suis retombé sur la carte interactive que j’avais réalisées plusieurs années auparavant.

Cette carte reposait sur l’utilisation d’une image comme fond de carte, et d’une map HTML plus un script jQuery.

J’avais résumé le processus de création dans deux articles :

  1. Création de la carte et du mappage
  2. Ajout interactivité avec jQuery

L’inconvénient de cette solution est quelle ne fonctionne pas sur Chrome. Et Chrome étant le navigateur avec la plus grosse part de marché cela est problématique.

Dernièrement, lors de ma mission chez Orange, j’ai été amené à travailler sur une partie de cartographie. Pour des raisons de confidentialité, il avait été décidé de ne pas utiliser de solution commerciale (celle de big G dans ce cas), mais une solution open-source.

Le choix final c’est arrêté sur la librairie OpenLayers, avec un fond OpenStreetMap.

Or cette librairie (compatible avec tous les navigateurs modernes) permet l’utilisation d’une image statique comme fond de carte (voir cet exemple). C’est donc pourquoi j’ai décidé de refaire une carte interactive à l’aide de cette librairie.

Création de la carte

Préparatifs

Comme avec toute librairie, il faut d’abord l’intégrer à votre page (via un CDN ou en local), ainsi que sa feuille de style.

Ensuite, il faut créer dans le corps de la page une div qui sera utilisée par OpenLayers pour créer la carte. De plus, cette div doit être préalablement dimensionnée, si vous ne souhaitez pas qu’elle occupe toute la largeur disponible.

Le script de création de la carte, quant à lui, doit être placé à la fin du body de la page.

Bon, tout est près ? Il est temps de passer à la création de notre carte.

Continuer la lecture →
Pages : 1 2 3