Archives par mot-clé : carte interactive

Un marqueur personnalisé avec Leaflet

Publié le par
Répondre

Lors de mon tutoriel sur la carte du métro de Paris avec Leaflet, j’ai déjà personnalisé les marqueurs de cette carte, mais comme dans le cadre du tutoriel c’était assez secondaire, je n’ai pas détaillé ce point.

Aujourd’hui est venu le temps de revenir sur la manière d’utiliser nos propres marqueurs sur une carte Leaflet.

Rappel des bases

Avant de parler de la manière dont on crée un marqueur personnalisé avec Leaflet, je pense qu’il serait intéressant de revenir sur la création d’une carte avec un marqueur.

Première étape, créer la carte. Pour cela, il suffit juste d’appeler le constructeur L.map(), en lui fournissant deux paramètres :

  • l’id de la <div> destinée à la carte
  • un objet d’options, dont les plus intéressantes sont center (pour indiquer les coordonnées sur lesquelles centrer la carte) et zoom

    Pour créer une carte centrée sur le point zéro des routes de France, cela donne :

    const map = L.map('map', {
  center: [48.853402, 2.348785],
  zoom: 16,
});
    Continuer la lecture →

    Personnaliser le marqueur d’une carte OpenLayers

    Publié le par
    Répondre

    Dans un tuto précédent sur la réalisation d’une carte à l’aide d’OpenLayers (carte du métro), j’ai utilisé des marqueurs personnalisés, mais comme ce n’était pas l’intérêt majeur du tuto, ne me suis pas attardé sur ce point.

    Et c’est justement sur ce point, la personnalisation des marqueurs d’une carte OpenLayers, que l’on va se pencher aujourd’hui.

    Retour sur la base

    Avant de parler de la personnalisation d’un marqueur avec OpenLayers, je souhaite d’abord revenir rapidement sur la manière de définir ce marqueur.

    Avec OpenLayers, un marqueur est une Feature dont la géométrie est un Point. Et les coordonnées de ce point sont définies via la méthode ol.proj.fromLonLat(), à laquelle on fournit un array contenant la longitude, puis la latitude.

    En prenant en exemple le point zéro des routes de France (sur le parvis de Notre-Dame de Paris), dont les coordonnées en latitude/longitude sont 48.8533973/ 2.3487972, cela donne :

    const iconFeature = new ol.Feature({
  geometry: new ol.geom.Point(ol.proj.fromLonLat([2.348785, 48.853402])),
});
    Continuer la lecture →

    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 avec contrôle de calques avec Leaflet

    Publié le par
    Répondre

    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 →
    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 des rues sans mégots avec Leaflet

    Publié le par
    8

    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

    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

    Carte interactive du métro de Paris avec Leaflet

    Publié le par
    Répondre

    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 →
    Pages : 1 2 3 4

    Carte interactive en SVG avec tooltip

    Publié le par
    Répondre

    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 →
    Pages : 1 2 3

    Retour sur ma première carte interactive

    Publié le par
    Répondre

    Dans mon dernier article (voir), j’ai indiqué que la première solution de carte interactive que j’avais présentée dans une série de deux articles (1 et 2) ne fonctionnait pas sous Chrome.

    Récemment, en consultant le code d’une page de reserves-naturelles.org, je me suis aperçu que la carte des régions de ce site fonctionnait sur le même principe que ma première solution et fonctionnait sous Chrome.

    En comparant les deux codes je me suis aperçu de la différence : la map utilisée avait un attribut id au lieu d’un attribut name, ce qui fait que Chrome était incapable de la charger.

    La démo originale a été corrigée, mais j’ai également fait une nouvelle version utilisant uniquement du JavaScript natif.

    Le code HTML reste le même. Le code JavaScript est le suivant :

    var areas = document.getElementsByTagName("area"); // array de toutes les areas
var target = document.getElementById("hovered"); // image dont on va changer la source

for (var i=0; i < areas.length; i++) { // pour chaque area de la page
	areas[i].addEventListener("mouseenter", function(evt) { // attachement à l'entrée de la souris
		// on récupère l'attribut "id" de l'élément déclencheur avec evt.target.getAttribute("id")
		target.src = "/assets/files/images/" + evt.target.getAttribute("id") + ".png"; // on change la source de l'image de couverture
	});
	areas[i].addEventListener("mouseleave", function(evt) { // attachement à la sortie de la souris
		target.src = "/assets/files/images/map.gif"; // on rétablit l'image transparente
	});
}

    Comme quoi, même après plusieurs années on apprend toujours.