You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
99 lines
4.0 KiB
HTML
99 lines
4.0 KiB
HTML
{{ with .Site.Params.Map }}
|
|
<div id="map" class="box"></div>
|
|
{{ if eq .service "osm" }}
|
|
{{ $js := $.Site.Data.libs.js }}
|
|
{{ $css := $.Site.Data.libs.css }}
|
|
{{ "<!-- OpenStreetMap -->" | safeHTML }}
|
|
{{ printf "<link rel=\"stylesheet\" href=\"//unpkg.com/leaflet@%s/dist/leaflet.css\" integrity=\"%s\" crossorigin=\"anonymous\"/>" $css.leaflet.version $css.leaflet.integrity | safeHTML }}
|
|
{{ printf "<script src=\"//unpkg.com/leaflet@%s/dist/leaflet.js\" integrity=\"%s\" crossorigin=\"anonymous\"></script>" $js.leaflet.version $js.leaflet.integrity | safeHTML }}
|
|
<script>
|
|
var loc = [{{- float .latitude -}}, {{- float .longitude -}}];
|
|
var mymap = L.map("map").setView(loc, {{- int .zoom -}});
|
|
L.tileLayer(
|
|
"https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png",
|
|
{
|
|
attribution:
|
|
'Map data © <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors',
|
|
maxZoom: {{- int .zoom -}}
|
|
}
|
|
).addTo(mymap);
|
|
var marker = L.marker(loc).addTo(mymap);
|
|
</script>
|
|
{{ else if eq .service "google" }}
|
|
{{ $opt := "" }}
|
|
{{ if isset . "language" }}{{ $opt = print $opt "&language=" .language }}{{ end }}
|
|
{{ if isset . "region" }}{{ $opt = print $opt "®ion=" .region }}{{ end }}
|
|
{{ "<!-- Google Map -->" | safeHTML }}
|
|
<script>
|
|
var map;
|
|
var centre = {lat: {{- float .latitude -}}, lng: {{- float .longitude -}}};
|
|
function initMap() {
|
|
map = new google.maps.Map(document.getElementById('map'), {
|
|
center: centre,
|
|
zoom: {{- float .zoom -}}
|
|
});
|
|
marker = new google.maps.Marker({position: centre, map: map});
|
|
}
|
|
</script>
|
|
<script src="https://maps.googleapis.com/maps/api/js?key={{- .api_key -}}{{- safeURL $opt -}}&callback=initMap"
|
|
async defer></script>
|
|
{{ else if eq .service "mapbox" }}
|
|
{{ printf "<meta name=\"viewport\" content=\"initial-scale=1,maximum-scale=1,user-scalable=no\" />" | safeHTML }}
|
|
{{ printf "<script src=\"https://api.mapbox.com/mapbox-gl-js/v1.8.1/mapbox-gl.js\"></script>" | safeHTML }}
|
|
{{ printf "<link href=\"https://api.mapbox.com/mapbox-gl-js/v1.8.1/mapbox-gl.css\" rel=\"stylesheet\" />" | safeHTML }}
|
|
<style>
|
|
body { margin: 0; padding: 0; }
|
|
#map { top: 0; bottom: 0; padding: 0; width: 100%; }
|
|
</style>
|
|
<script>
|
|
var loc = [{{- float .longitude -}}, {{- float .latitude -}}];
|
|
mapboxgl.accessToken = "{{- .api_key -}}";
|
|
|
|
var geojson = {
|
|
type: 'FeatureCollection',
|
|
features: [{
|
|
type: 'Feature',
|
|
geometry: {
|
|
type: 'Point',
|
|
coordinates: [{{- float .longitude -}}, {{- float .latitude -}}],
|
|
},
|
|
properties: {
|
|
title: "{{- .marker_title -}}",
|
|
description: "{{- .marker_address -}}"
|
|
}
|
|
}]
|
|
};
|
|
|
|
var map = new mapboxgl.Map({
|
|
container: 'map', // container id
|
|
style: "{{- safeHTML .style_url -}}", // stylesheet location
|
|
center: loc, // starting position [lng, lat]
|
|
zoom: {{- int .zoom -}} // starting zoom
|
|
});
|
|
|
|
// add markers to map
|
|
geojson.features.forEach(function(marker) {
|
|
|
|
// create a HTML element for each feature
|
|
var el = document.createElement('div');
|
|
el.className = 'marker';
|
|
|
|
// make a marker for each feature and add to the map
|
|
new mapboxgl.Marker(el)
|
|
.setLngLat(marker.geometry.coordinates)
|
|
.addTo(map);
|
|
|
|
if (marker.properties.title || marker.properties.description) {
|
|
new mapboxgl.Marker(el)
|
|
.setLngLat(marker.geometry.coordinates)
|
|
.setPopup(new mapboxgl.Popup({ offset: 25 }) // add popups
|
|
.setHTML('<h4>' + marker.properties.title + '</h4><div>' + marker.properties.description + '</div>'))
|
|
.addTo(map);
|
|
}
|
|
});
|
|
|
|
map.addControl(new mapboxgl.NavigationControl());
|
|
</script>
|
|
{{ end }}
|
|
{{ end }}
|