camper/web/templates/public/campground.gohtml

<!--
 SPDX-FileCopyrightText: 2023 jordi fita mas <jordi@tandem.blog>
 SPDX-License-Identifier: AGPL-3.0-only
-->
{{ define "title" -}}
    {{( pgettext "Campground" "title" )}}
{{- end }}

{{ define "head" -}}
    <link rel="stylesheet" href="/static/leaflet@1.9.4/leaflet.css">
{{- end }}

{{ define "content" -}}
    {{- /*gotype: dev.tandem.ws/tandem/camper/pkg/app.campgroundPage*/ -}}
    <h2>{{( pgettext "Campground" "title" )}}</h2>
    <div id="campground_map">{{ template "campground_map.svg" }}</div>

    <script src="/static/leaflet@1.9.4/leaflet.js"></script>
    <script>(function () {
            'use strict';
            const container = document.getElementById('campground_map');
            container.style.height = '80vh';

            const svg = container.childNodes[0];
            svg.remove();

            const latLngBounds = L.latLngBounds([[0, 0], [1500, 1192]]);
            const map = L.map(container, {
                center: latLngBounds.getCenter(),
                zoom: 4,
                scrollWheelZoom: false,
                maxBounds: latLngBounds,
                maxBoundsViscosity: 1.0,
                zoomSnap: 0,
            });
            map.setMinZoom(map.getBoundsZoom(latLngBounds, true));
            map.fitBounds(latLngBounds);
            L.svgOverlay(svg, latLngBounds).addTo(map);
        })();
    </script>
{{- end }}