PVR/gokarna
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Add Map in Posts

Browse Source
This commit is contained in:
Paul Mougin
2022-10-07 18:31:03 +02:00
parent 6dfa8dad9b
commit c9ee674b2d
14 changed files with 1859 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
layouts/_default/baseof.html
View File

@@ -2,9 +2,6 @@
<html lang="en">
{{- partial "head.html" . -}}
<body>
{{ if .HasShortcode "leaflet-map" }}
{{ partial "leaflet-loader" . }}
{{ end }}
<script type="text/javascript">
// Immediately set theme on page load
setThemeByUserPref();

28
layouts/partials/leaflet-loader.html Normal file
View File

@@ -0,0 +1,28 @@
<!-- Leaflet (JS/CSS) -->
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.6.0/dist/leaflet.css"
integrity="sha512-xwE/Az9zrjBIphAcBb3F6JVqxf46+CDLwfLMHloNu6KEQCAWi6HcDUbeOfBIptF7tcCzusKFjFw2yuvEpDL9wQ=="
crossorigin=""/>
<script src="https://unpkg.com/leaflet@1.6.0/dist/leaflet.js"
integrity="sha512-gZwIG9x3wUXg2hdXF6+rVkLF/0Vi9U8D2Ntg4Ga5I5BZpVkVxlJWbSQtXPSiUTtC0TjtGOmxa1AJPuV0CPthew=="
crossorigin=""></script>
<!-- leaflet-elevation -->
<link rel="stylesheet" href="https://unpkg.com/@raruto/leaflet-elevation@1.1.1/dist/leaflet-elevation.css" />
<script src="{{ .Site.BaseURL }}/js/leaflet.elevation.js"></script>
<!-- leaflet-hugo -->
<script src="{{ .Site.BaseURL }}/js/leaflet.hugo.js"></script>
<style>
.fa-icon-marker {
text-align: center;
width: 100%;
}
.download-track {
background-color: #e1e1e1;
text-align: center;
margin-bottom: 25px;
border-radius: 0 0 10px 10px;
cursor: pointer;
}
</style>

23
layouts/partials/leaflet-map.html Normal file
View File

@@ -0,0 +1,23 @@
{{ $mapLat := default "" .mapLat }}
{{ $mapLon := default "" .mapLon }}
{{ $zoom := default "13" .zoom }}
{{ $mapWidth := default "100%" .mapWidth }}
{{ $mapHeight := default "400px" .mapHeight }}
{{ $mapId := default (md5 (printf "%s%s" $mapLat $mapLon)) .mapId }}
{{ $scrollWheelZoom := default "true" .scrollWheelZoom }}
<!--Container-->
<div id='mapid_{{ $mapId }}' class="leaflet-map" style='width: {{ $mapWidth }}; height: {{ $mapHeight}};'></div>
<script>
//Create Map
leafletMapsObj[{{ $mapId }}] = L.map('mapid_{{ $mapId }}').setView([{{ $mapLat }}, {{ $mapLon }}], {{ $zoom }});
{{ if eq $scrollWheelZoom "false" }}
leafletMapsObj[{{ $mapId }}].scrollWheelZoom.disable();
{{ end }}
//Add tiles
L.tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
}).addTo(leafletMapsObj[{{ $mapId }}]);
</script>

12
layouts/partials/leaflet-marker.html Normal file
View File

@@ -0,0 +1,12 @@
{{ $markerLat := default "" .markerLat }}
{{ $markerLon := default "" .markerLon }}
{{ $mapId := default (md5 (printf "%s%s" $markerLat $markerLon)) .mapId }}
{{ $markerId := md5 (printf "%s%s%s" $mapId $markerLat $markerLon)}}
<script>
//Marker
leafletMarkersObj[{{ $markerId }}] = L.marker([{{ $markerLat }}, {{ $markerLon }}]).addTo(leafletMapsObj[{{ $mapId }}]);
</script>

9
layouts/partials/post.html
View File

@@ -1,3 +1,6 @@
{{ $Lat := $.Param "Latitude" }}
{{ $Lon := $.Param "Longitude" }}
<div class="post container">
<div class="post-header-section">
@@ -18,6 +21,12 @@
<p>
{{ .Content }}
</p>
{{ if (and (isset .Params "longitude") (isset .Params "latitude")) }}
{{ partial "leaflet-loader" . }}
<h3>Map</h3>
{{ partial "leaflet-map" (dict "context" . "mapHeight" "200px" "mapLat" $Lat "mapLon" $Lon) }}
{{ partial "leaflet-marker" (dict "context" . "markerLat" $Lat "markerLon" $Lon) }}
{{ end }}
</div>
</div>