How to Recreate the Iconic Pegman from Google Maps

This is a little snippet I’ve wanted to try for quite some time. I finally got around to recreating this iconic feature from Google Maps: the ability to drag and drop this little guy, known as Pegman, to switch to Street View.

TL;DR
Click and drag the little icon in the bottom-right corner over the map:

HTML

The structure is straightforward. I have:

• A #map to serve as the container (with a background-image applied).
• A #pegman-container positioned in the bottom-right corner.
• The #pegman element itself for the draggable character.

<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);
}

The rotate value changes based on user interaction, which we’ll dive into next.

Javascript

Everything here revolves around user interaction. JavaScript handles:

• Listening for mouse events.
• Updating Pegman’s position and rotation dynamically.
• Adding smooth animations for better 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);

Let’s break down each function:

onMouseDown

This starts the drag by recording the initial mouse position and toggling the isDragging flag.

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

onMouseMove

This handles Pegman’s movement and rotation during the drag. It ensures:

• Rotation stays within a range (to avoid extreme angles like Superman flying).
• The rotate value updates dynamically using --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);
};

onMouseUp

This resets Pegman’s state once the user stops dragging:

• Rotation resets to 0.
• Pegman smoothly returns to its original position.

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);
};

Final Thoughts

This snippet highlights how simple animations and interactivity can recreate an iconic user experience. Key takeaways:

• Using CSS custom properties (like --r) keeps styling dynamic and manageable.
• Rotation limits ensure a polished, natural feel for user interactions.
• Timeouts and easing animations add realism to the motion.

Feel free to fork the CodePen, make changes and let me know what you think! ??️

By the way...

I'm using the original sprites from google, which you can see here and make experiments:

• runway state
• dropping state
• dangling state

Did you know? ✨ The Google Maps location I used is the real Santa Claus Village!
Fun fact: Santa’s Finnish name is Joulupukki, and he originally from Finland ???

The above is the detailed content of How to Recreate the Iconic Pegman from Google Maps. For more information, please follow other related articles on the PHP Chinese website!