Location Input

<script>
  // Import the shared stylesheet once in your application's root layout.
  import "sveltekit-ui/style.css"
  import { LocationInput, create_location_input_manager, Json, create_json_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 value_json = create_json_manager({ val: place, is_show_buttons: true })

  const manager = create_location_input_manager({
    val: place,
    mapkit_js_token: () => public_mapkit_token,
    label: "Meeting location",
    is_popover: true,
    is_popover_button: true,
    on_finish: (value) => value_json.set_val(value),
  })
</script>

<LocationInput {manager} />
<Json manager={value_json} />