Interactive Map Button

← Back to Demos

A button that smoothly expands to reveal an interactive map on hover. Built with Leaflet.js and OpenStreetMap, featuring custom markers, smooth clip-path animations, and location popups. Perfect for creating engaging map interactions in modern web applications.

Interactive Demo

Hover over the button to see it smoothly expand and reveal an interactive map of London with zoom controls.

View on Map

Implementation

The map uses Leaflet.js, a lightweight and powerful JavaScript library for interactive maps. OpenStreetMap provides the tile layer, and custom CSS creates the styled marker with smooth animations.

Map Initialization
// Initialize the Leaflet map
map = L.map('map').setView([lat, lng], 13);

// Add OpenStreetMap tiles
L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
  attribution: '© OpenStreetMap contributors',
  maxZoom: 19
}).addTo(map);

Custom markers are created using Leaflet's DivIcon with CSS styling.

Custom Marker Creation
const redIcon = L.divIcon({
  className: 'custom-marker',
  html: '<div style="width: 40px; height: 40px;"></div>',
  iconSize: [40, 40],
  iconAnchor: [20, 40],
  popupAnchor: [0, -40]
});

Key Features

  • • Smooth fade-in animation when map is revealed
  • • Custom teardrop-shaped marker with CSS styling
  • • Interactive popups showing location information
  • • Zoom controls for detailed map exploration
  • • Toggle functionality to show/hide the map
  • • Responsive design that works on all devices
  • • Free OpenStreetMap tile layer integration