Archives de catégorie : JavaScript

Trucs, astuces et tutoriels sur le JavaScript, le langage de programmation dans les navigateurs Web.

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

Une horloge hexagonale

Publié le par
Répondre

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

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.

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

Un menu pour mobile avec MODX

Publié le par
Répondre

Avec la généralisation des terminaux mobiles (smartphones et tablettes) il est important de prendre en compte la taille réduite de leur affichage lors de la conception de votre site. Un élément essentiel du design d’un site est le menu principal de navigation. Pour les terminaux mobiles, une des solutions est de remplacer le classique combo liste de liens non ordonnée (<ul>) + css par une liste déroulante (<select>) et du JavaScript.

Menu pour smartphone
Continuer la lecture →

[JavaScript/HTML5] Et maintenant ajoutons quelques couleurs

Publié le par
Répondre

Dans mon précédent article Amusons-nous avec les canvas, nous étions arrivés au résultat ci-dessous:

Nous avons donc ici un effet que l’on aurait pu obtenir en CSS. Mais grâce aux <canvas> nous pouvons à présent remplir notre texte avec autre chose qu’une unique couleur ; avec les <canvas> on peut utiliser des dégradés, ainsi que des images.

Continuer la lecture →

[JavaScript/HTML5] Amusons-nous avec les canvas

Publié le par
Répondre

Aujourd’hui nous allons voir comment ajouter du texte aux nouveaux éléments <canvas> du HTML5.

Comme les plus attentifs d’entre-vous l’auront déjà remarqué, le titre de l’article révèle déjà une partie du contenu de l’article ; effectivement, pour utiliser les canvas, il faut obligatoirement passer par JavaScript.

Continuer la lecture →