Geographical Maps: Location Data

When location matters, maps provide context that no other visualization can. For a food delivery platform like QuickBite, maps help visualize restaurant coverage, delivery zones, and regional demand patterns.

When to Use Map Visualizations

Maps are valuable when:

• Location is a key dimension of your data
• You need to show coverage or service areas
• Geographic patterns reveal business insights
• Users need to explore by location (find nearby restaurants)

Maps are NOT ideal when:

• Location doesn't add meaningful context
• You're comparing categories without geographic relevance
• Precise numeric comparisons are the goal

Try It: Restaurant Coverage Map

Explore QuickBite's restaurant network. Adjust the delivery radius, toggle coverage circles, and click markers to see restaurant details:

Map Visualization Patterns

1. Point Maps (Markers)

Show individual locations. Best for:

• Restaurant locations
• Customer addresses
• Order pickup/dropoff points

2. Choropleth Maps

Color regions by value (e.g., orders by neighborhood). Best for:

• Regional performance comparison
• Density by administrative area
• Market penetration analysis

3. Coverage Maps (Circles)

Show service areas with radius circles. Best for:

• Delivery zone visualization
• Coverage gap analysis
• Network optimization

4. Flow Maps (Lines)

Show movement between points. Best for:

• Delivery routes
• Supply chain visualization
• Migration patterns

Working with Leaflet.js

Leaflet is a lightweight, mobile-friendly mapping library:

// Initialize map
const map = L.map('map-container').setView([37.7749, -122.4194], 13);

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

// Add a marker
const marker = L.marker([37.7749, -122.4194]).addTo(map);

// Add popup to marker
marker.bindPopup('<strong>QuickBite HQ</strong><br>San Francisco');

// Add a circle for delivery radius
L.circle([37.7749, -122.4194], {
  color: '#2dd4bf',
  fillColor: '#2dd4bf',
  fillOpacity: 0.2,
  radius: 1500 // meters
}).addTo(map);

Custom Marker Styling

Create distinctive markers with divIcon:

function createMarkerIcon(color) {
  return L.divIcon({
    className: 'custom-marker',
    html: `<div style="
      width: 24px;
      height: 24px;
      background: ${color};
      border: 3px solid white;
      border-radius: 50%;
      box-shadow: 0 2px 6px rgba(0,0,0,0.3);
    "></div>`,
    iconSize: [24, 24],
    iconAnchor: [12, 12]
  });
}

// Use custom marker
L.marker([lat, lng], {
  icon: createMarkerIcon('#2dd4bf')
}).addTo(map);

Map Visualization Best Practices

1. Choose Appropriate Zoom Level

• City overview: zoom 11-13
• Neighborhood detail: zoom 14-16
• Street level: zoom 17+

2. Use Meaningful Colors

• Encode data dimensions (category, rating, performance)
• Maintain consistency with rest of dashboard

3. Provide Context

• Include legends explaining colors
• Show key statistics alongside map
• Enable hover/click for details

4. Consider Mobile

• Touch-friendly markers
• Appropriate zoom controls
• Responsive container sizing

5. Don't Overcrowd

• Cluster markers when zoomed out
• Limit visible layers
• Progressive disclosure of detail

Common Map Use Cases

Key Takeaways

• Use maps when location context adds value to the insight
• Leaflet.js provides lightweight, interactive mapping
• Markers show point locations; circles show coverage areas
• Color-code markers to encode additional data dimensions
• Always consider mobile usability and marker clustering for large datasets
• Combine maps with summary statistics for complete understanding

Next, we'll explore animated transitions to bring your visualizations to life.