Comment recréer l'emblématique Pegman à partir de Google Maps

C'est un petit extrait que je voulais essayer depuis un certain temps. J'ai finalement réussi à recréer cette fonctionnalité emblématique de Google Maps : la possibilité de glisser-déposer ce petit bonhomme, connu sous le nom de Pegman, pour passer à Street View.

TL;DR
Cliquez et faites glisser la petite icône dans le coin inférieur droit sur la carte :

HTML

La structure est simple. J'ai :

• Une #carte pour servir de conteneur (avec une image d'arrière-plan appliquée).
• Un conteneur #pegman positionné dans le coin inférieur droit.
• L'élément #pegman lui-même pour le personnage déplaçable.

<div>



<h2>
  
  
  CSS
</h2>

<p>Positioning everything is simple, as you can see in the source code above, but the most important part is the rotate property. This is dynamically updated using JavaScript:<br>
</p>

<pre class="brush:php;toolbar:false">#pegman {
  /* other styles */
  rotate: var(--r);
}

La valeur de rotation change en fonction de l'interaction de l'utilisateur, que nous aborderons ensuite.

Javascript

Tout ici tourne autour de l'interaction avec l'utilisateur. Poignées JavaScript :

• Écoute des événements de souris.
• Mise à jour dynamique de la position et de la rotation de Pegman.
• Ajout d'animations fluides pour une meilleure UX.

const pegman = document.querySelector('#pegman');
let isDragging = false;
let initialX = 0;
let initialY = 0;
let inactivityTimeout;
let lastX = 0;
const timeout = 25;
const maxDegrees = 50;

// Event listeners
pegman.addEventListener('mousedown', onMouseDown);
document.addEventListener('mousemove', onMouseMove);
document.addEventListener('mouseup', onMouseUp);

Décomposons chaque fonction :

surMouseDown

Cela démarre le glisser en enregistrant la position initiale de la souris et en basculant l'indicateur isDragging.

const onMouseDown = (e) => {
  isDragging = true;
  initialX = e.clientX;
  initialY = e.clientY;
};

surMouseMove

Cela gère le mouvement et la rotation de Pegman pendant le glissement. Il assure :

• La rotation reste dans une plage (pour éviter les angles extrêmes comme le vol de Superman).
• La valeur de rotation est mise à jour dynamiquement en utilisant --r.

const onMouseMove = (e) => {
  if (!isDragging) return;

  const dy = e.clientY - initialY;
  const dx = e.clientX - initialX;

  // Limit rotation range
  let rx = Math.max(-maxDegrees, Math.min(maxDegrees, dx - lastX));
  pegman.setAttribute('style', `--r: ${rx}deg`);

  // Animate Pegman's position
  pegman.animate({ translate: `${dx}px ${dy}px` }, {
    duration: 100,
    fill: 'forwards',
  });

  // Reset rotation after inactivity
  clearTimeout(inactivityTimeout);
  inactivityTimeout = setTimeout(() => {
    lastX = dx;
    pegman.setAttribute('style', `--r: 0deg`);
  }, timeout);
};

surMouseUp

Cela réinitialise l'état de Pegman une fois que l'utilisateur arrête de glisser :

• La rotation est réinitialisée à 0.
• Pegman revient en douceur à sa position initiale.

const onMouseUp = () => {
  isDragging = false;

  // Reset rotation
  pegman.setAttribute('style', `--r: 0`);

  // Animate Pegman back to its original position
  pegman.animate({ translate: `0px 0px` }, {
    duration: 500,
    fill: 'forwards',
    easing: 'ease',
  });

  // Clear residual state
  inactivityTimeout = setTimeout(() => {
    lastX = 0;
  }, timeout);
};

Pensées finales

Cet extrait montre comment des animations simples et l'interactivité peuvent recréer une expérience utilisateur emblématique. Points clés à retenir :

• L'utilisation de propriétés personnalisées CSS (comme --r) permet de conserver un style dynamique et gérable.
• Les limites de rotation garantissent une sensation soignée et naturelle pour les interactions des utilisateurs.
• Les délais d'attente et les animations d'assouplissement ajoutent du réalisme au mouvement.

N'hésitez pas à utiliser le CodePen, à apporter des modifications et à me dire ce que vous en pensez ! ??️

D'ailleurs...

J'utilise les sprites originaux de Google, que vous pouvez voir ici et faire des expériences :

• état de la piste
• état abandonné
• état suspendu

Le saviez-vous ? ✨ L'emplacement Google Maps que j'ai utilisé est le vrai Village du Père Noël !
Fait amusant : Le nom finlandais du Père Noël est Joulupukki, et il est originaire de Finlande ???