<script setup lang="ts">
import { onMounted, ref } from 'vue'
import L from 'leaflet'
onMounted(() => {
  init()
})
const map = ref(null)
const init = () => {
  map.value = L.map('map').setView([51.505, -0.09], 4)

  L.tileLayer('https://map.kerryapex.com/osm_tiles/{z}/{x}/{y}.png', {
    attribution: '&copy; OpenStreetMap contributors'
  }).addTo(map.value)
}
</script>
<template>
  <div id="map" style="height: 272px"></div>
</template>

<style lang="scss" scoped>
@import 'leaflet/dist/leaflet.css';
</style>