Skip to content
maplibre-yaml

Interactive points

Three San Francisco places, colored by what kind of place each is, with a legend, a highlight while the pointer is over one, and a popup with its address and rating. Use this pattern for any points that fall into a few categories: shops by type, stations by line, sites by status.

Point at a place to highlight it; click it for details

Edit this map in the playground

interactive-points.yaml
# yaml-language-server: $schema=https://docs.maplibre-yaml.org/schema/latest/map.schema.json
type: map
id: interactive-points
config:
  center: [-122.41, 37.775]
  zoom: 13
  bounds: [-122.425, 37.772, -122.384, 37.8]
  mapStyle: "https://tiles.openfreemap.org/styles/liberty"
layers:
  - id: places
    type: circle
    label: Place type        # the legend title
    source:
      type: geojson
      generateId: true       # ids for the hover highlight
      data:
        type: FeatureCollection
        features:
          - type: Feature
            geometry:
              type: Point
              coordinates: [-122.4194, 37.7793]
            properties:
              name: "City Hall"
              category: "government"
              address: "1 Dr Carlton B Goodlett Pl"
              rating: 4.2
          - type: Feature
            geometry:
              type: Point
              coordinates: [-122.3934, 37.7955]
            properties:
              name: "Ferry Building"
              category: "landmark"
              address: "1 Ferry Building"
              rating: 4.7
          - type: Feature
            geometry:
              type: Point
              coordinates: [-122.3893, 37.7786]
            properties:
              name: "Oracle Park"
              category: "sports"
              address: "24 Willie Mays Plaza"
              rating: 4.6
    classify:
      field: category
      categories:
        government: "#6366f1"
        landmark: "#f59e0b"
        sports: "#22c55e"
      other: "#6b7280"         # any category not listed
    paint:
      circle-radius: 14
      circle-stroke-width: 3
      circle-stroke-color: "#ffffff"
    interactive:
      hover:
        cursor: pointer
        highlight: true
      click:
        popup:
          - h3:
              - property: name
          - p:
              - str: "Address: "
              - property: address
          - p:
              - str: "Rating: "
              - property: rating
              - str: " / 5"
controls:
  navigation: true

How it works

Section titled “How it works”

classify: colors the categories. It lists each value of category with its color, and other: colors any value not listed. It also makes the legend: the map has no legend: block, so one is generated from the classes, titled with the layer’s label:.

classify:
  field: category
  categories:
    government: "#6366f1"
    landmark: "#f59e0b"
    sports: "#22c55e"
  other: "#6b7280"         # any category not listed

classify: compiles to the MapLibre match expression you could write in circle-color yourself. Write the match by hand only when you need something classify: doesn’t do; you then lose the generated legend and the highlight below. Thematic maps & legends covers categories, palettes and numeric classes.

The hover highlight. highlight: true recolors the point under the pointer. It needs feature ids, which generateId: true on the source provides. (Without it, maplibre-yaml turns generateId on itself and says so in the browser console.)

hover:
  cursor: pointer
  highlight: true

A popup with several lines. Each entry under popup: is one HTML element, and its list mixes fixed text (str:) with the clicked feature’s values (property:):

click:
  popup:
    - h3:
        - property: name
    - p:
        - str: "Address: "
        - property: address
    - p:
        - str: "Rating: "
        - property: rating
        - str: " / 5"

Next

Section titled “Next”