Basic Map

A simple example showing circle markers for major cities with size based on population.

Live Demo

Click cities to see population

Key Concepts

Data-driven circle size

Circle radius interpolates based on population:

circle-radius:
  - interpolate
  - ["linear"]
  - ["get", "population"]
  - 500000    # Population 500k → radius 8px
  - 8
  - 5000000   # Population 5M → radius 20px
  - 20
  - 10000000  # Population 10M → radius 30px
  - 30

Interactive popups

Click handlers show feature properties:

interactive:
  hover:
    cursor: pointer
  click:
    popup:
      - h3:
          - property: name
      - p:
          - str: "Population: "
          - property: population

Inline GeoJSON

Data embedded directly in configuration for quick prototyping:

source:
  type: geojson
  data:
    type: FeatureCollection
    features:
      - type: Feature
        geometry:
          type: Point
          coordinates: [-74.006, 40.7128]
        properties:
          name: "New York"
          population: 8336817