Carte interactive OpenLayers avec contrôle de calques

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

Carte avec contrôle de calques avec Leaflet

Cette semaine encore, nous allons encore voir la création d’une carte interactive avec la librairie Leaflet.

La carte présentée aujourd’hui utilise les groupes de calques, ainsi que le contrôle de calques, afin de réaliser une carte historique de la ligne 2 du tramway d’Île-de-France.

Bref historique

Afin d’expliquer le découpage des données et les différents calques, un bref historique de la ligne doit être fait.

Jusqu’en 1993, une partie des voies empruntées par la ligne actuelle était exploitée par la SNCF (le tramway actuel est exploité par la RATP) sous le nom de « Ligne de Puteaux à Issy-Plaine ».

En 1997, entre en service le T2, qui empreinte le même parcours, plus une extension au nord. Toutes les stations de l’ancienne ligne sous réutilisées, certaines changeant de nom, et 4 nouvelles sont créées.

En 2006, une section du parcours est déviée.

En 2009, la ligne est prolongée une première fois au sud, avec l’ajout de 4 nouvelles stations.

En 2012, la ligne est prolongée une deuxième fois vers le nord, rajoutant 7 nouvelles stations.

Continuer la lecture

Carte interactive des rues sans mégots avec OpenLayers

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

Carte interactive des rues sans mégots avec Leaflet

Cette carte interactive des rues sans mégots de Paris a été réalisée suite à la suite de la consultation de la page d’actualités de la ville de Paris concernant cette action de propreté, qui ne contenait qu’une image pour présenter la cartographie des différentes rues concernées par cette opération.

Sources des données

La liste des rues ou sections de rues proviennent de la page d’actualités.

Le tracé des rues provient de Paris Data, le site d’open data de la Ville de Paris.

Je suis parti des données en CSV, pour en extraire plus facilement les rues participantes. Pour les rues concernées seulement en partie j’ai ensuite supprimé manuellement les sections inutiles, en passant par geojson.io pour m’assurer que je ne supprimais pas des parties couvertes par l’opération.

Chaque feature de rue a au moins une propriété « name ». Pour les rues ne participant que sur une section je rajoute une propriété « between » pour indiquer cette section.

Ces données ont ensuite été rassemblées dans une FeatureCollection de LineStrings dans un fichier GeoJSON.

Continuer la lecture

Carte interactive du métro de Paris avec OpenLayers

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

Carte interactive du métro de Paris avec Leaflet

Si on vous parle de solution pour intégrer une carte sur votre site, la première qui vous vient à l’esprit est surement Google Maps. Mais il existe plusieurs solutions open-source et gratuites.

Je vous ai déjà parlé d’OpenLayers, avec laquelle j’ai déjà refait une carte réalisée précédemment avec jQuery.

Mais OpenLayers n’est pas la librairie open-source la plus utilisée. La première place revient à Leaflet (voir sources en fin d’article).

Pour m’exercer, j’ai décider de créer une carte interactive du métro de Paris avec Leaflet.

Éléments utilisés dans la carte

Pour des questions de lisibilité des différentes lignes de métro, j’ai choisi d’utiliser le fond de carte Stamen Toner Lite.

Pour le tracé des lignes, j’ai utilisé des données fournies par le STIF sur opendata.stif.info.

Les codes couleur des différentes lignes proviennent de la RATP sur data.ratp.fr.

Les coordonnées des stations proviennent elles aussi du STIF, et de Wikipédia pour les stations fantômes.

Le logo utilisé comme marqueur de position d’une station provient du site de la RATP.

Continuer la lecture

Une horloge hexagonale

À la suite de mes premières expérimentations avec les canvas (voir mes trois premiers articles étiquetés #canvas) et de la consultation récente de pages traitant de la création d’horloges utilisant cette technologie, j’ai décidé d’en créer une à ma façon.

Pour mon horloge, j’ai voulu le faire de manière originale, à la manière des montres proposées par Tokyoflash Japan. Mon choix s’est arrêté sur l’utilisation de formes hexagonales (parce que j’aime bien cette forme).

Avec l’utilisation d’un anneau hexagonal et d’un hexagone au centre, un digit (dans notre cas, un ensemble anneau + hexagone au milieu) peut prendre 8 valeurs différentes, ce qui fait que l’heure sera affichée en base 8.

Digits hexagonaux
Détail d’un digit hexagonal

Vu que les minutes et secondes (les parties ayant les plus grandes valeurs) vont de 0 à 59, deux digits en octal pour chaque suffisent.

Continuer la lecture

Corriger les titres Yoast SEO

Si vous utilisez Yoast SEO sur votre site WordPress pour gérer les balises nécessaires au bon référencement de vos contenus, vous pouvez rencontrer ce genre de problème :

Mauvais titre SEO

Quels que soient les réglages que vous choisissez pour votre titre, des éléments non voulus apparaissent à la fin de celui-ci. Yoast serait-il incompatible avec votre version de WordPress ?

Don't panic

Pas de panique, le problème provient sûrement de votre thème, qui doit appliquer une mise en forme supplémentaire au titre généré par WordPress et déjà mis en forme par Yoast via un filtre.

Continuer la lecture

Carte interactive en SVG avec tooltip

Après la première version de ma carte interactive (voir ici), j’en ai créé une deuxième à l’aide de la librairie OpenLayers.

Cette solution fonctionne, mais c’est comme disposer d’un outil multifonction mais d’en n’utiliser qu’une ou deux, OpenLayers étant une librairie permettant de faire beaucoup plus.

Une autre solution un peu plus « légère », mais tout autant moderne, existe : le SVG.

Le SVG, qu’est-ce que c’est ?

Le SVG, ou Scalable Vector Graphics (« graphique vectoriel adaptable »), est un format d’images vectorielles basé sur le langage de balisage XML.

L’avantage de ce format de fichier est que pour des formes simples (ce qui dans notre cas d’une carte des régions d’un pays) il est plus léger que le JPEG ou le PNG.

Continuer la lecture

Enlever la balise meta « generator » sur votre site WordPress

Je sais qu’il y a quelque temps, j’avais fait un article sur comment rajouter une balise meta « generator » à un site MODX, mais cette balise peut remettre en question la sécurité de votre site.

Une faille de sécurité ?

Connaître le CMS derrière un site peut faciliter la vie à toute personne voulant vous nuire. En effet, beaucoup de CMS étant open-source et ayant une communauté très active, si jamais une faille est découverte dans un système, la nouvelle circule vite. De plus, les failles peuvent varier d’une version à une autre du même CMS.

Juste en examinant le code source des pages d’un site et en analysant la structure des dossiers pour les différents fichiers de style et de script, on peut deviner le CMS derrière. Mais révéler la version précise de ce CMS reviens à dire là et comment vous frapper pour vous faire le plus mal possible.

Continuer la lecture