Un marqueur personnalisé avec Leaflet

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

    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

    Comment déclencher n’importe quel événement en JavaScript vanilla

    Après avoir réussi à automatiser les clicks sur les fortunes de Cookie Clicker (voir ici), par curiosité je me suis intéressé à la première version de ce jeu (voir ici).

    Sur cette version, la première chose que j’ai cherché à automatiser est bien évidemment le click sur le cookie.

    Après un rapide coup d’oeil au code de la page, j’ai trouvé l’id de notre cookie (dans notre cas “cookie”), et j’ai mis en place un classique setInterval pour déclencher un clic, avec notre grande amie la méthode click().

    let legacyCookieClicker = setInterval(() => {
       document.querySelector('#cookie').click();
    }, 250);
    

    Mais cela n’avais par l’air d’avoir d’effet.

    Continuer la lecture

    Automatiser le clic sur les fortunes de Cookie Clicker

    Aujourd’hui, après avoir effectué une ascension sur Cookie Clicker, je me suis dit : “Si je veux débloquer les fortunes (qui apparaissent dans le fil d’actualités), il va falloir encore que je reste attentif devant mon écran…”.

    C’est alors que je me suis demandé s’il n’y avait pas moyen d’automatiser cela.

    La première étape fut d’analyser le code principal du jeu.

    Contrairement à d’autres aspects du jeu (les mini-jeux ou encore les cookies dorés…) le fil d’actualités n’est pas géré par l’intermédiaire de l’objet principal du jeu (Game dans le code du jeu).

    Pour arriver à mon but, il faut donc passer par le code HTML du jeu. Un rapide coup d’oeil à ce code me donne l’ID (commentsText1) de la div qui contient la nouvelle affichée.

    Avec cet ID je peux maintenant le sélectionner avec document.getElementById().

    Continuer la lecture

    Le retour du compteur de caractères

    Après être revenu dernièrement sur ma série de tutos d’introduction aux canvas, j’ai décidé de m’attaquer à l’un de mes anciens articles me valant le plus d’affichage sur le moteur de recherche d’Alphabet : le compteur de caractères.

    Comme pour mes derniers articles traitant de JavaScript, une fois de plus je n’utiliserai que des fonctions natives, sans aucune librairie.

    Organisation du nouveau code

    Le nouveau code sera réparti dans deux fonctions : une fonction d’initialisation, et la fonction en charge du compte des caractères. Cette dernière fonction étant appelée une fois à l’initialisation, pour pouvoir être utilisable sur une page où les champs de formulaire contiennent déjà du texte (une amélioration par rapport à l’ancien code), et ensuite attachée à un événement sur les champs.

    Un des gros changement est la manière dont on va passer les paramètres à notre champ compteur de caractères : au lieu de passer ces paramètres à notre fonction d’initialisation, on va utiliser des attributs HTML.

    Continuer la lecture

    Gloubi tuto – menu interactif déroulant

    Cette semaine, attaquons-nous à un autre script de menu présenté chez notre gloubi adversaire.

    Ce script est visible sur cette page, et est toujours fonctionnel dans les navigateurs modernes.

    Fonctionnement

    Le menu produit par ce script se présente sous la forme d’un tableau dans un tableau (je parle là des balises HTML).

    <table>
        <tr>
            <td>Rubrique</td>
        </tr>
        <tr>
            <td>Liens....</td>
        </tr>
        <tr>
            <td>Rubrique</td>
        </tr>
        <tr>
            <td>Liens....</td>
        </tr>
    </table>
    
    Continuer la lecture

    Amusons-nous avec les canvas – le retour

    Il y a quelques années, j’avais écrit une série d’articles expliquant comment créer à l’aide du  tag <canvas> un texte ombré avec une image en fond utilisant une police Google Fonts.

    La technique ayant un peu évolué depuis, et ayant fait de nouveaux essais de mon côté, je pense qu’il est temps de créer une nouvelle version de ce code.

    Le premier changement concerne la façon dont on gère l’utilisation de la police Google Font dans le canvas.

    Dans le premier script, le chargement de la police était assuré de manière “classique” par CSS. Le problème ? Pour que la police soit utilisable dans le canvas, il faut que la police soit utilisée sur au moins un élément de notre page. Et pour s’assurer que la police soit bien chargée, le code qui s’occupe du “dessin” est exécuté après 1s (utilisation d’un setTimeOut()).

    Depuis les versions 35 de Chrome et la version 41 de Firefox, toutes deux sorties après la rédaction de la première série d’articles, il existe un objet JavaScript qui permet de définir une police personnalisée, qui par la suite peut être utilisée partout sur le document, y compris dans les canvas.

    Continuer la lecture

    Gloubi tuto – un texte en dégradé

    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

    Gloubi tuto – un menu interactif Hello Kitty

    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

    Petit tuto pour les paranos

    Bon, cette période d’épidémie de virus (biologique, pas informatique) est aussi une période d’épidémie de fake news.

    La dernière en date concerne le formulaire de génération d’attestation de déplacement. Cette rumeur tient au fait que le QR code généré par ce formulaire permettrait de récupérer les données présentes sur votre téléphone.

    Continuer la lecture