Archives de catégorie : JavaScript

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

Gloubi tuto – un texte en dégradé

Publié le par
Répondre

Pour ce deuxième gloubi tuto, on s’attaque à un script qui a eu son petit succès sur Skyblog : le texte « arc-en-ciel » (en dégradés).

Script original et explication

Pour voir le script original, qui fonctionne encore dans les navigateurs modernes, rendez-vous ici sur le site de notre Némésis dans la deuxième guerre du gloubi.

Le script fonctionne comme suit :

Avant d’appeler la principale fonction de notre script, on construit un tableau de correspondance décimal vers hexadécimal à l’aide de deux boucles imbriquées.

Continuer la lecture →
Pages : 1 2

Gloubi tuto – un menu interactif Hello Kitty

Publié le par
Répondre

Bienvenue sur ce premier gloubi tuto (pour en savoir plus sur les gloubi tutos) qui concerne un menu interactif avec Hello Kitty.

Présentation et explication de l’existant

Pour voir la source du script actuel, RDV sur cette page du site de notre nouvel adversaire dans la guerre du gloubi.

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

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