Interactive Maps Demo

Explore our interactive map features powered by Leaflet and OpenStreetMap.

Below is an interactive map showing key locations in San Francisco. Click on markers to see details!

Map Features

Interactive Elements:

• Zoom Controls: Use +/- buttons or scroll to zoom
• Pan: Click and drag to move around
• Markers: Click markers to see location details
• Popups: Information appears on marker click
• Full Screen: Expand map for better view

Map Data Structure:

// Example map block structure
{
  "block_type": "map",
  "content": {
    "center": {
      "lat": 37.7749,
      "lng": -122.4194
    },
    "zoom": 12,
    "markers": [
      {
        "position": {"lat": 37.7749, "lng": -122.4194},
        "title": "Location Name",
        "info": "Description"
      }
    ]
  },
  "settings": {
    "height": 500,
    "interactive": true
  }
}

Multiple Map Examples

World View - Major Cities:

Benefits of Interactive Maps

1. Visual Context: Show locations in geographical context
2. User Engagement: Interactive elements increase engagement
3. Data Visualization: Display location-based data effectively
4. Mobile Friendly: Touch gestures supported
5. Open Source: Powered by OpenStreetMap data

Maps are fully interactive - try zooming, panning, and clicking on markers!