Components / Data & content

Location

Component + manager

Displays a static map (using Apple MapKit) pinned to a specific location. Optionally in a popover or inline.

Preview

Usage

API reference

Live preview

Interactive example

Loading example…

Usage

Import the component and its manager, then make it your own.

ComponentLocation

Managercreate_location_manager

svelte

<script>
  // Import the shared stylesheet once in your application's root layout.
  import "sveltekit-ui/style.css"
  import { Location, create_location_manager } from "sveltekit-ui"

  // Replace this placeholder with your public MapKit JS token,
  // authorized for your website's domain.
  const public_mapkit_token = "YOUR_DOMAIN_AUTHORIZED_PUBLIC_MAPKIT_TOKEN"

  const place = {
    name: "Boston, Massachusetts",
    latitude: 42.3603,
    longitude: -71.0573,
    formatted_address: "Boston, MA, United States",
    country_code: "US",
  }

  const manager = create_location_manager({
    val: place,
    mapkit_js_token: () => public_mapkit_token,
    is_popover: true,
    is_inline: true,
  })
</script>

<Location {manager} />

API reference

Configure the manager, call its methods, and read its reactive state.

7 entries in configuration

Property	Type	Default	Description
`val`	`object or null`	`null`	Location data: { latitude, longitude, place_id, name, etc. }
`height`	`number or null`	`null`	Height of the map in rem. Defaults to 'min(40rem, 50vh)' if not set.
`width`	`number or null`	`null`	Width of the map in rem. Defaults to 'clamp(60rem, 80vw, 100%)' if not set.
`is_popover`	`boolean`	`false`	If true, displays the map in a popover triggered by a button. Otherwise, it's shown directly.
`is_inline`	`boolean`	`true`	If true and is_popover is also true, shows an inline button + text plus a popover. If false, hides the inline portion and you must open popover manually.
`is_dark_color_scheme`	`boolean`	`true`	Determines map color scheme (dark or light).
`mapkit_js_token`	`string or null`	`null`	Apple MapKit JS token required for loading the map.