camper/web/templates/public/contact.gohtml

<!--
 SPDX-FileCopyrightText: 2023 jordi fita mas <jordi@tandem.blog>
 SPDX-License-Identifier: AGPL-3.0-only
-->
{{ define "title" -}}
    {{( pgettext "Contact" "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.contactPage*/ -}}

<div class="contact-page">
	<div class="contact-details">
		<h2>{{( pgettext "Contact" "title" )}}</h2>

		{{ template "companyAddress" .PublicPage.CompanyAddress }}
	</div>

    <div id="map"></div>
</div>

    {{ if .CompanyGeography -}}
        <script src="/static/leaflet@1.9.4/leaflet.js"></script>
        <script>
            document.addEventListener('DOMContentLoaded', function () {
                var container = document.getElementById("map");
                container.style.height = '600px';
                var map = L.map(container).setView(['{{ .CompanyGeography.Lat }}', '{{ .CompanyGeography.Lng }}'], '9');

                L
                    .tileLayer('https://{s}.basemaps.cartocdn.com/rastertiles/voyager/{z}/{x}/{y}{r}.png', {
                        attribution: '© <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>, © <a href="https://carto.com/attributions">CARTO</a>'
                    })
                    .addTo(map)
                ;

                map.scrollWheelZoom.disable();

                var content =
                        {{- with .PublicPage.CompanyAddress -}}
                        '{{ .Address }}<br>{{ .City }} - {{ .PostalCode }}<br>{{ .Province }}'
                        {{- end -}}
                ;
                L
                    .marker(['{{ .CompanyGeography.Lat }}', '{{ .CompanyGeography.Lng }}'])
                    .addTo(map)
                    .bindPopup(content)
                ;

                var observer = ResizeObserver && new ResizeObserver(function () {
                    map.invalidateSize(true);
                });
                observer && observer.observe(container);
            });
        </script>
    {{- end }}
{{- end }}