Map

Pannable tile map with zoom buttons and clickable markers.

Import

Vue

import { UiMap } from '@ziyarago/ui/vue'

Makkah markers

Vue

<UiMap
  :lat="21.4225"
  :lon="39.8262"
  :zoom="14"
  :height="340"
  :markers="[{ lat: 21.4225, lon: 39.8262, label: 'Masjid al-Haram', icon: 'landmark', tone: 'brand' }, { lat: 21.4189, lon: 39.8265, label: 'Hilton Makkah', icon: 'hotel', tone: 'sky' }]"
 />

API reference

Interactive raster map with panning, zoom buttons and clickable markers, using OpenStreetMap data via CARTO tiles.

Props

PropType and valuesDefaultDescription

latnumber21.4225Initial center latitude.

lonnumber39.8262Initial center longitude.

zoomnumber14Initial zoom level; the zoom buttons clamp it to 3..18.

markers

{ lat: number; lon: number; label?: string; icon?: string; tone?: 'brand' | 'sky' | 'success' | 'warning' | 'danger' | 'neutral' }[]

[]Pins. label is the tooltip, icon defaults to "map-pin".

widthnumber640Pixel width used to compute which tiles to load; the map element itself fills its container.

heightnumber360Height in px.

themelightdark—Tile theme. If omitted, dark is used when the page is inside a dark data-theme.

stylestring—CARTO tile style path, for example "light_all" or "dark_all". Overrides theme.

labelstring'Map'aria-label of the map region.

labels{ zoomIn?: string; zoomOut?: string }'{ zoomIn: 'Zoom in', zoomOut: 'Zoom out' }'Accessible names of the zoom buttons.

Events

Vue: @name. React: onName.

selectCalled with the marker object when a marker is clicked.

moveCalled with { lat, lon, zoom } while the user pans or zooms (drag, touch, wheel, double click or the +/- buttons).

zoomCalled with the new zoom level when it changes.

Notes

The center and zoom props are initial values; user panning and zooming is kept in internal state. Listen to move/zoom to track it.
Drag or touch to pan, wheel or double click to zoom around the pointer. The tile theme follows the page data-theme after mount (light tiles on the server render) unless theme or style is set.
Tiles come from a third-party CDN, so it needs network access.