const lat = 51.5894636;
const lng = 4.7717452;

const map = L.map('map-canvas', {
    dragging: false,
    zoomControl: false,
    attributionControl: false
}).setView([lat, lng], 17);

L.tileLayer('//api.mapbox.com/styles/v1/{id}/tiles/{z}/{x}/{y}?access_token=pk.eyJ1IjoidmVzcGlubyIsImEiOiJjanN2cXhiaXAwMHUxNDltcXJ5MjBnY2ttIn0.8NhFeYkursrF2QudfbrgHA', {
    id: 'mapbox/light-v11',
    tileSize: 512,
    zoomOffset: -1,
    minZoom: 17,
    maxZoom: 17}).addTo(map);

const marker = L.marker([lat, lng], {
    icon: L.icon({
        iconUrl: 'https://www.bakkerverkuijl.nl/wp-content/uploads/2026/09/gmaps.webp',
        iconSize: [74, 74]
    })
}).addTo(map);

map.on('zoom', () => map.setView(marker.getLatLng(), map.getZoom(), {
    animate: false
}));