Interactive Points

Demonstrates interactive features with detailed popups.

Live Demo

Click locations for details

Key Concepts

Categorical colors with match expression

Different colors for each category:

circle-color:
  - match
  - ["get", "category"]
  - "government"
  - "#6366f1"        # Indigo for government
  - "landmark"
  - "#f59e0b"        # Amber for landmarks
  - "sports"
  - "#22c55e"        # Green for sports
  - "#6b7280"        # Gray fallback

Rich multi-line popups

Popups can contain multiple elements with mixed content:

interactive:
  click:
    popup:
      - h3:
          - property: name
      - p:
          - str: "📍 "
          - property: address
      - p:
          - str: "⭐ "
          - property: rating
          - str: " / 5"

Hover cursor

Change cursor on hover to indicate interactivity:

interactive:
  hover:
    cursor: pointer    # Shows pointer cursor on hover

Popup structure

Each popup item is an object with:

• Tag: HTML element (h3, p, div, etc.)
• Content: Array of content items that can be:
  • { str: "text" } - Static text
  • { property: "name" } - Feature property value

Emoji in content

Unicode characters work in popup text:

- p:
    - str: "📍 "
    - property: address

Advanced: Hover effects

You can also change styling on hover:

interactive:
  hover:
    cursor: pointer
    paint:
      circle-radius: 18        # Grow on hover
      circle-stroke-width: 4   # Thicker stroke