---
import Layout from 'layouts/PageLayout.astro';
import 'leaflet/dist/leaflet.css'

const metadata = {
  title: 'Maps',
  ignoreTitleTemplate: true,
};
---

<Layout metadata={metadata}>

  <div class="w-full h-96" id="map" />


</Layout>

<script>
  import L from 'leaflet'

  const map = L.map('map', {
    center: [50,0],
    zoom: 13,
    preferCanvas: true
  })
  L.tileLayer('https://tile.openstreetmap.org/{z}/{x}/{y}.png', {
    maxZoom: 19,
    attribution: '&copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>'
}).addTo(map);
var marker = L.marker([51.5, -0.09]).addTo(map);
</script>