Globe pins

Ce qui est inclus

Un globe terrestre en points, dessiné sur une <canvas> 2-D, avec des épingles ancrées à des coordonnées réelles et des cartes d’adresse qui suivent la rotation puis disparaissent derrière la sphère. Trois fichiers : une feuille de style, un script, et la carte des terres. Aucune dépendance, aucune étape de build, aucune requête externe.

Le composant ne remplace pas votre liste d’adresses : il se pose dessus. Tant que le script n’a pas tourné — et s’il ne tourne jamais — le balisage reste une liste de bureaux en grille, lisible et navigable. Le bouton d’épingle n’est même pas rendu dans cet état : il ne mènerait nulle part.

Fonctionnalités

• Des épingles qui sont de vrais boutons — le clic, la touche Entrée ou le simple focus font pivoter le globe jusqu’au lieu, et ouvrent sa carte. Échap referme.
• Rotation à la souris et au doigt — avec inertie, et une dérive lente vers l’ouest au repos, dans le sens où la Terre tourne.
• Une épingle cachée reste atteignable — passée derrière la sphère, elle se réduit à un pixel transparent posé sur le limbe, mais garde sa place dans l’ordre de tabulation : y arriver au clavier est ce qui la ramène de face.
• Carte des terres embarquée — un masque 1 bit de 1024 × 512 cases, 16 Kio, tiré des polygones Natural Earth qui sont dans le domaine public. Rien à télécharger à l’exécution.
• Tout se règle en CSS — densité du réseau, perspective, taille des points, couleurs, durées : le script relit les variables, on ne le touche jamais.
• Trois variantes — sombre, cyan à halo, et claire ; plus une version compacte pour une colonne latérale.

Le poser dans une page

Trois fichiers à charger, puis une liste de lieux :

<link rel="stylesheet" href="globe-pins.css">

<div class="globe-pins">
  <div class="globe-pins__scene">
    <canvas class="globe-pins__toile" aria-hidden="true"></canvas>
    <ul class="globe-pins__liste">
      <li class="globe-pins__lieu" data-gp-lat="48.8566" data-gp-lon="2.3522">
        <button class="globe-pins__epingle" type="button" aria-controls="paris">
          <span class="globe-pins__nom">Amener Paris face à la caméra</span>
        </button>
        <div class="globe-pins__carte" id="paris">
          <span class="globe-pins__pays">France</span>
          <span class="globe-pins__ligne">Paris</span>
          <span class="globe-pins__ligne">18 rue de Paradis</span>
        </div>
      </li>
    </ul>
  </div>
</div>

<script src="globe-pins.terres.js"></script>
<script src="globe-pins.js"></script>

Donnez une hauteur à .globe-pins : le globe s’y centre et prend 68 % du petit côté. Le composant s’installe au chargement, y compris sur les instances ajoutées après coup.

Ce qu’il faut savoir

• Un globe coûte des points. À 181 rangées, ce sont onze mille points de remplissage plus le trait de côte, dont la moitié est dessinée à chaque image. Mesuré à 61 images par seconde avec quatre globes sur la même page ; hors écran ou en onglet caché, la boucle s’arrête.
• Les cartes se marchent dessus si les lieux sont proches. Deux modificateurs basculent une carte de l’autre côté de son épingle, et data-gp-cartes="au-focus" ne les affiche qu’au survol quand les épingles sont nombreuses.
• Une toile ne se voit pas en couleurs forcées. Sous forced-colors: active, le composant retourne donc à la liste d’adresses qu’il était au départ. Sous prefers-reduced-motion, la dérive s’arrête et les délais tombent à zéro.
• Aucun style ni script en ligne. Le composant respecte la politique de sécurité stricte du site — vérifié en servant le dossier avec l’en-tête, pas supposé — et n’utilise jamais innerHTML. Les positions passent par deux variables CSS écrites via le CSSOM.
• Le dessin vient d’ailleurs. Les proportions reprennent celles d’un composant Framer commercial, relevées au pixel sur ses captures : rayon du limbe à 0,71 px près, perspective à 20,0°, réseau à 181 rangées. Le code, lui, est original — rien n’a été repris de son implémentation, et la variante à texture satellite n’est pas reproduite.