Maps

Variants of the maps scenario, each on its own isolated page.

• Store locator (baseline)

  Pan/zoom the map and click the goal store's marker. Each marker has a permanent label.

  • map
  • leaflet
  • osm
  • store-locator
  • pan
  • zoom
  • marker

• Search & autocomplete

  Filter stores using an autocomplete search bar, center the map, and select the target store.

  • map
  • search
  • autocomplete
  • suggest
  • center
  • pan

• Radius proximity filter

  Use a range slider to filter stores by distance from Midtown, showing only nearby markers.

  • map
  • radius
  • proximity
  • range
  • slider
  • filter

• Marker popup action

  Click a marker to open its details inside a Leaflet popup pane and trigger an action inside the popup.

  • map
  • popup
  • event
  • detail
  • dynamic-dom
  • click