81 lines
3.2 KiB
HTML
81 lines
3.2 KiB
HTML
{{ define "main" }}
|
|
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.2/dist/leaflet.css"
|
|
integrity="sha256-sA+zWATbFveLLNqWO2gtiw3HL/lh1giY/Inf1BJ0z14="
|
|
crossorigin=""/>
|
|
<!-- Make sure you put this AFTER Leaflet's CSS -->
|
|
<script src="https://unpkg.com/leaflet@1.9.2/dist/leaflet.js"
|
|
integrity="sha256-o9N1jGDZrf5tS+Ft4gbIK7mYMipq9lqpVJ91xHSyKhg="
|
|
crossorigin=""></script>
|
|
<style type="text/css">
|
|
#map { height: 300px; }
|
|
</style>
|
|
<div class="container" style="margin-top:200px;">
|
|
<div class="row" style="min-height: 400px;">
|
|
<div class="col-md-12" style="text-align: center;">
|
|
<h1 style="font-size: 50px;">{{ .Title }}</h1>
|
|
<p>{{ .Params.nr }} / {{ .Params.dnr }} - {{ .Params.height }} m - {{ .Params.typ }}</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<img src="{{ .Params.mainImage }}" style="max-height: 80pc; max-width: 100%;">
|
|
<div class="container" style="margin-top:30px;">
|
|
<div class="row">
|
|
<div class="col-md-8">
|
|
{{ .Content }}
|
|
</div>
|
|
<div class="col-md-4">
|
|
<div id="map"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="container" style="margin-top:30px;">
|
|
<div class="row">
|
|
<div class="col-md-3"></div>
|
|
<div class="col-md-6">
|
|
<div id="carouselExampleControls" class="carousel slide" data-bs-ride="carousel">
|
|
<div class="carousel-inner">
|
|
<div class="carousel-item active">
|
|
<img src="https://www.kekskurse.de//img/2022/02/leuchtturm-ueckermuende/DSC09212.jpg" class="d-block" style="width:100%;" alt="...">
|
|
</div>
|
|
<div class="carousel-item">
|
|
<img src="https://www.kekskurse.de//img/2022/02/leuchtturm-ueckermuende/DSC09225.jpg" class="d-block " style="width:100%;" alt="...">
|
|
</div>
|
|
</div>
|
|
<button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleControls" data-bs-slide="prev">
|
|
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
|
|
<span class="visually-hidden">Previous</span>
|
|
</button>
|
|
<button class="carousel-control-next" type="button" data-bs-target="#carouselExampleControls" data-bs-slide="next">
|
|
<span class="carousel-control-next-icon" aria-hidden="true"></span>
|
|
<span class="visually-hidden">Next</span>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<br><br>
|
|
<script>
|
|
var leuchtTurmBund = L.icon({
|
|
iconUrl: '/leuchturm-bunt.png',
|
|
//shadowUrl: 'leaf-shadow.png',
|
|
|
|
iconSize: [50, 50], // size of the icon
|
|
//shadowSize: [50, 64], // size of the shadow
|
|
iconAnchor: [20, 40], // point of the icon which will correspond to marker's location
|
|
//shadowAnchor: [4, 62], // the same for the shadow
|
|
popupAnchor: [-0, -45] // point from which the popup should open relative to the iconAnchor
|
|
});
|
|
|
|
|
|
var map = L.map('map').setView([53.73, 11.7], 6);
|
|
L.tileLayer('https://tile.openstreetmap.org/{z}/{x}/{y}.png', {
|
|
maxZoom: 19,
|
|
attribution: '© <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>'
|
|
}).addTo(map);
|
|
L.marker([{{ .Params.lat }}, {{ .Params.lon }}], {icon: leuchtTurmBund}).addTo(map)
|
|
|
|
|
|
</script>
|
|
|
|
{{ end }} |