mapbox-cartography

Mapbox Cartography Skill

This skill provides expert cartographic knowledge to help you design effective, beautiful, and functional maps using Mapbox.

Core Cartographic Principles

Visual Hierarchy

Maps must guide the viewer's attention to what matters most:

• Most important: POIs, user location, route highlights
• Secondary: Major roads, city labels, landmarks
• Tertiary: Minor streets, administrative boundaries
• Background: Water, land use, terrain

Implementation:

• Use size, color intensity, and contrast to establish hierarchy
• Primary features: high contrast, larger symbols, bold colors
• Background features: low contrast, muted colors, smaller text

Color Theory for Maps

Color Harmony:

• Analogous colors: Use colors next to each other on color wheel (blue-green-teal) for cohesive designs
• Complementary colors: Use opposite colors (blue/orange, red/green) for high contrast emphasis
• Monochromatic: Single hue with varying saturation/brightness for elegant, minimal designs

Color Psychology:

• Blue: Water, trust, calm, professional (default for water bodies)
• Green: Parks, nature, growth, eco-friendly (vegetation, parks)
• Red/Orange: Urgent, important, dining (alerts, restaurants)
• Yellow: Caution, highlight, attention (warnings, selected items)
• Gray: Neutral, background, roads (infrastructure)

Accessibility:

• Ensure 4.5:1 contrast ratio for text (WCAG AA)
• Don't rely solely on color to convey information
• Test designs with colorblind simulators
• Avoid red/green combinations for critical distinctions

Color Palette Templates:

Light Theme (Day/Professional):

{
  "background": "#f5f5f5",
  "water": "#a0c8f0",
  "parks": "#d4e7c5",
  "roads": "#ffffff",
  "buildings": "#e0e0e0",
  "text": "#333333"
}

Dark Theme (Night Mode):

{
  "background": "#1a1a1a",
  "water": "#0d47a1",
  "parks": "#2e7d32",
  "roads": "#3a3a3a",
  "buildings": "#2d2d2d",
  "text": "#ffffff"
}