leuchttuerme-ostsee/themes/leuchttuerm/layouts/leuchtturm/single.html

81 lines
3.2 KiB
HTML
Raw Normal View History

2022-10-14 14:05:03 +00:00
{{ 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>
2022-10-14 15:02:54 +00:00
<p>{{ .Params.nr }} / {{ .Params.dnr }} - {{ .Params.height }} m - {{ .Params.typ }}</p>
2022-10-14 14:05:03 +00:00
</div>
</div>
</div>
<img src="{{ .Params.mainImage }}" style="max-height: 80pc;">
<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>
2022-10-14 15:02:54 +00:00
<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>
2022-10-14 14:05:03 +00:00
</div>
2022-10-14 15:02:54 +00:00
2022-10-14 14:05:03 +00:00
<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: '&copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>'
}).addTo(map);
L.marker([{{ .Params.lat }}, {{ .Params.lon }}], {icon: leuchtTurmBund}).addTo(map)
</script>
{{ end }}