mirror of
https://github.com/tiennm99/HugoBlox-kit.git
synced 2026-10-12 18:15:31 +00:00
Add OpenStreetMap-based alternative to Google Maps (#360)
* add leaflet JS as alternative to gmap JS * changes to `config.toml`: * add `zoom = 15` * add `map = 0` (`map` sets the map provider - refer to comments) * change `google_maps_api_key` to `map_api_key`
This commit is contained in:
Alexander Minges authored and gcushen committed
1 parent
05fa83afa7
commit
d48bcdf30a
6 files changed
+100
-44
No files matched your search
@@ -31,6 +31,9 @@
|
||||
[js.gmaps]
|
||||
version = "0.4.25"
|
||||
sri = "sha256-7vjlAeb8OaTrCXZkCNun9djzuB2owUsaO72kXaFDBJs="
|
||||
[js.leaflet]
|
||||
version = "1.2.0"
|
||||
sri = "sha512-lInM/apFSqyy1o6s89K4iQUKg6ppXEgsVxT35HbzUupEVRh2Eu9Wdl4tHj7dZO0s1uvplcYGmt3498TtHq+log=="
|
||||
|
||||
# CSS
|
||||
|
||||
@@ -43,3 +46,6 @@
|
||||
[css.academicons]
|
||||
version = "1.8.1"
|
||||
sri = "sha512-NThgw3XKQ1absAahW6to7Ey42uycrVvfNfyjqcFNgCmOCQ5AR4AO0SiXrN+8ZtYeappp56lk1WtvjVmEa+VR6A=="
|
||||
[css.leaflet]
|
||||
version = "1.2.0"
|
||||
sri = "sha512-M2wvCLH6DSRazYeZRIm1JnYyh22purTM+FDB5CsyxtQJYeKq83arPe5wgbNmcFXGqiSH2XR8dT/fJISVA1r/zQ=="
|
||||
+19
-6
@@ -55,7 +55,7 @@ defaultContentLanguageInSubdir = false
|
||||
skype = "echo123"
|
||||
telegram = ""
|
||||
|
||||
# Enable Keybase in Contact section by entering your keybase.io username.
|
||||
# Enable Keybase in Contact widget by entering your keybase.io username.
|
||||
keybase = ""
|
||||
|
||||
# Discussion link (e.g. link to a forum, mailing list, or chat).
|
||||
@@ -66,13 +66,26 @@ defaultContentLanguageInSubdir = false
|
||||
# To enable, place an image in `static/img/` and reference its filename below. To disable, set the value to "".
|
||||
logo = ""
|
||||
|
||||
# Enable Google Maps by entering your API key, latitude, and longitude.
|
||||
# Get your API key: https://developers.google.com/maps/documentation/javascript/get-api-key
|
||||
# Get your coords: Right-click place on Google Maps. Select 'What's here?'. At the bottom is a card with the coords.
|
||||
# Disable Google Maps by clearing all three options to "".
|
||||
google_maps_api_key = ""
|
||||
# Enable/disable map in Contact widget.
|
||||
# To show your address on a map in the contact widget, you need to enter your latitude, longitude and choose
|
||||
# a map provider below.
|
||||
# To use Google Maps, set `map = 1` and enter your API key that can be obtained here:
|
||||
# https://developers.google.com/maps/documentation/javascript/get-api-key
|
||||
# To use OpenStreetMap tiles, set `map = 2`.
|
||||
# To use OpenStreetMap on a high traffic site, set `map = 3` and enter your API key that can be obtained here:
|
||||
# https://www.mapbox.com/studio/account/tokens
|
||||
# To get your coordinates, right-click on Google Maps and choose "What's here?". The coords will show up at the bottom.
|
||||
#
|
||||
# Map provider:
|
||||
# 0: No map
|
||||
# 1: Google Maps
|
||||
# 2: OpenStreetMap (Mapnik)
|
||||
# 3: OpenStreetMap (Mapbox)
|
||||
map = 0
|
||||
map_api_key = ""
|
||||
latitude = "37.4275"
|
||||
longitude = "-122.1697"
|
||||
zoom = 15
|
||||
|
||||
# Date and time format (refer to Go's date format: http://fuckinggodateformat.com )
|
||||
# Examples: "Mon, Jan 2, 2006" or "2006-01-02"
|
||||
|
||||
@@ -5,8 +5,8 @@
|
||||
<script id="dsq-count-scr" src="//{{ .Site.DisqusShortname }}.disqus.com/count.js" async></script>
|
||||
{{ end }}
|
||||
|
||||
{{ if .Site.Params.google_maps_api_key }}
|
||||
<script async defer src="//maps.googleapis.com/maps/api/js?key={{ .Site.Params.google_maps_api_key }}"></script>
|
||||
{{ if eq .Site.Params.map 1 }}
|
||||
<script async defer src="//maps.googleapis.com/maps/api/js?key={{ .Site.Params.map_api_key }}"></script>
|
||||
{{ end }}
|
||||
|
||||
{{ if not .Site.Params.disable_sri }}
|
||||
@@ -14,16 +14,20 @@
|
||||
{{ printf "<script src=\"https://cdnjs.cloudflare.com/ajax/libs/jquery.imagesloaded/%s/imagesloaded.pkgd.min.js\" integrity=\"%s\" crossorigin=\"anonymous\"></script>" $js.imagesLoaded.version $js.imagesLoaded.sri | safeHTML }}
|
||||
{{ printf "<script src=\"https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/%s/js/bootstrap.min.js\" integrity=\"%s\" crossorigin=\"anonymous\"></script>" $js.bootstrap.version $js.bootstrap.sri | safeHTML }}
|
||||
{{ printf "<script src=\"https://cdnjs.cloudflare.com/ajax/libs/jquery.isotope/%s/isotope.pkgd.min.js\" integrity=\"%s\" crossorigin=\"anonymous\"></script>" $js.isotope.version $js.isotope.sri | safeHTML }}
|
||||
{{ if .Site.Params.google_maps_api_key }}
|
||||
{{ if eq .Site.Params.map 1 }}
|
||||
{{ printf "<script src=\"https://cdnjs.cloudflare.com/ajax/libs/gmaps.js/%s/gmaps.min.js\" integrity=\"%s\" crossorigin=\"anonymous\"></script>" $js.gmaps.version $js.gmaps.sri | safeHTML }}
|
||||
{{ else if or (eq .Site.Params.map 2) (eq .Site.Params.map 3) }}
|
||||
{{ printf "<script src=\"https://cdnjs.cloudflare.com/ajax/libs/leaflet/%s/leaflet.js\" integrity=\"%s\" crossorigin=\"anonymous\"></script>" $js.leaflet.version $js.leaflet.sri | safeHTML }}
|
||||
{{ end }}
|
||||
{{ else }}
|
||||
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/{{- $js.jQuery.version -}}/jquery.min.js"></script>
|
||||
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery.imagesloaded/{{- $js.imagesLoaded.version -}}/imagesloaded.pkgd.min.js"></script>
|
||||
<script src="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/{{- $js.bootstrap.version -}}/js/bootstrap.min.js"></script>
|
||||
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery.isotope/{{- $js.isotope.version -}}/isotope.pkgd.min.js"></script>
|
||||
{{ if .Site.Params.google_maps_api_key }}
|
||||
{{ if eq .Site.Params.map 1 }}
|
||||
<script src="//cdnjs.cloudflare.com/ajax/libs/gmaps.js/{{- $js.gmaps.version -}}/gmaps.min.js"></script>
|
||||
{{ else if or (eq .Site.Params.map 2) (eq .Site.Params.map 3) }}
|
||||
<script src="//cdnjs.cloudflare.com/ajax/libs/leaflet/{{- $js.leaflet.version -}}/leaflet.js"></script>
|
||||
{{ end }}
|
||||
{{ end }}
|
||||
<script src="{{ "/js/hugo-academic.js" | relURL }}"></script>
|
||||
|
||||
@@ -31,10 +31,16 @@
|
||||
{{ printf "<link rel=\"stylesheet\" href=\"https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/%s/css/bootstrap.min.css\" integrity=\"%s\" crossorigin=\"anonymous\">" $sri.css.bootstrap.version $sri.css.bootstrap.sri | safeHTML }}
|
||||
{{ printf "<link rel=\"stylesheet\" href=\"https://cdnjs.cloudflare.com/ajax/libs/academicons/%s/css/academicons.min.css\" integrity=\"%s\" crossorigin=\"anonymous\">" $sri.css.academicons.version $sri.css.academicons.sri | safeHTML }}
|
||||
{{ printf "<link rel=\"stylesheet\" href=\"https://cdnjs.cloudflare.com/ajax/libs/font-awesome/%s/css/font-awesome.min.css\" integrity=\"%s\" crossorigin=\"anonymous\">" $sri.css.fontAwesome.version $sri.css.fontAwesome.sri | safeHTML }}
|
||||
{{ if or (eq .Site.Params.map 2) (eq .Site.Params.map 3) }}
|
||||
{{ printf "<link rel=\"stylesheet\" href=\"https://cdnjs.cloudflare.com/ajax/libs/leaflet/%s/leaflet.css\" integrity=\"%s\" crossorigin=\"anonymous\">" $sri.css.leaflet.version $sri.css.leaflet.sri | safeHTML }}
|
||||
{{ end }}
|
||||
{{ else }}
|
||||
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/{{- $sri.css.bootstrap.version -}}/css/bootstrap.min.css">
|
||||
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/academicons/{{- $sri.css.academicons.version -}}/css/academicons.min.css">
|
||||
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/font-awesome/{{- $sri.css.fontAwesome.version -}}/css/font-awesome.min.css">
|
||||
{{ if or (eq .Site.Params.map 2) (eq .Site.Params.map 3) }}
|
||||
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/leaflet/{{- $sri.css.leaflet.version -}}/leaflet.css">
|
||||
{{ end }}
|
||||
{{ end }}
|
||||
{{/* We cannot use SRI with Google Fonts because the CSS is dynamically generated according to the user agent */}}
|
||||
{{- partial "css/parse_theme.css" . -}}
|
||||
|
||||
@@ -83,11 +83,14 @@
|
||||
|
||||
</ul>
|
||||
|
||||
{{ if and $.Site.Params.latitude $.Site.Params.longitude }}
|
||||
{{ if $.Site.Params.map }}
|
||||
<div class="hidden">
|
||||
<input id="gmap-lat" value="{{ $.Site.Params.latitude }}" />
|
||||
<input id="gmap-lng" value="{{ $.Site.Params.longitude }}" />
|
||||
<input id="gmap-dir" value="{{ $.Site.Params.address }}" />
|
||||
<input id="map-provider" value="{{ $.Site.Params.map }}">
|
||||
<input id="map-lat" value="{{ $.Site.Params.latitude }}">
|
||||
<input id="map-lng" value="{{ $.Site.Params.longitude }}">
|
||||
<input id="map-dir" value="{{ $.Site.Params.address }}">
|
||||
<input id="map-zoom" value="{{ $.Site.Params.zoom | default "15" }}">
|
||||
<input id="map-api-key" value="{{ $.Site.Params.map_api_key }}">
|
||||
</div>
|
||||
<div id="map"></div>
|
||||
{{ end }}
|
||||
|
||||
+54
-30
@@ -173,41 +173,65 @@
|
||||
}
|
||||
|
||||
/* ---------------------------------------------------------------------------
|
||||
* Google maps.
|
||||
* Google Maps or OpenStreetMap via Leaflet.
|
||||
* --------------------------------------------------------------------------- */
|
||||
|
||||
function initMap () {
|
||||
if ($('#map').length) {
|
||||
let lat = $('#gmap-lat').val();
|
||||
let lng = $('#gmap-lng').val();
|
||||
let address = $('#gmap-dir').val();
|
||||
let map_provider = $('#map-provider').val();
|
||||
let lat = $('#map-lat').val();
|
||||
let lng = $('#map-lng').val();
|
||||
let zoom = parseInt($('#map-zoom').val());
|
||||
let address = $('#map-dir').val();
|
||||
let api_key = $('#map-api-key').val();
|
||||
|
||||
if ( map_provider == 1 ) {
|
||||
let map = new GMaps({
|
||||
div: '#map',
|
||||
lat: lat,
|
||||
lng: lng,
|
||||
zoom: zoom,
|
||||
zoomControl: true,
|
||||
zoomControlOpt: {
|
||||
style: 'SMALL',
|
||||
position: 'TOP_LEFT'
|
||||
},
|
||||
panControl: false,
|
||||
streetViewControl: false,
|
||||
mapTypeControl: false,
|
||||
overviewMapControl: false,
|
||||
scrollwheel: true,
|
||||
draggable: true
|
||||
});
|
||||
|
||||
let map = new GMaps({
|
||||
div: '#map',
|
||||
lat: lat,
|
||||
lng: lng,
|
||||
zoomControl: true,
|
||||
zoomControlOpt: {
|
||||
style: 'SMALL',
|
||||
position: 'TOP_LEFT'
|
||||
},
|
||||
panControl: false,
|
||||
streetViewControl: false,
|
||||
mapTypeControl: false,
|
||||
overviewMapControl: false,
|
||||
scrollwheel: true,
|
||||
draggable: true
|
||||
});
|
||||
|
||||
map.addMarker({
|
||||
lat: lat,
|
||||
lng: lng,
|
||||
click: function (e) {
|
||||
let url = 'https://www.google.com/maps/place/' + encodeURIComponent(address) + '/@' + lat + ',' + lng +'/';
|
||||
window.open(url, '_blank')
|
||||
},
|
||||
title: address
|
||||
})
|
||||
map.addMarker({
|
||||
lat: lat,
|
||||
lng: lng,
|
||||
click: function (e) {
|
||||
let url = 'https://www.google.com/maps/place/' + encodeURIComponent(address) + '/@' + lat + ',' + lng +'/';
|
||||
window.open(url, '_blank')
|
||||
},
|
||||
title: address
|
||||
})
|
||||
} else {
|
||||
let map = new L.map('map').setView([lat, lng], zoom);
|
||||
if ( map_provider == 3 && api_key.length ) {
|
||||
L.tileLayer('https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token={accessToken}', {
|
||||
attribution: 'Map data © <a href="http://openstreetmap.org">OpenStreetMap</a> contributors, <a href="http://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, Imagery © <a href="http://mapbox.com">Mapbox</a>',
|
||||
maxZoom: 18,
|
||||
id: 'mapbox.streets',
|
||||
accessToken: api_key
|
||||
}).addTo(map);
|
||||
} else {
|
||||
L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
|
||||
maxZoom: 19,
|
||||
attribution: '© <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>'
|
||||
}).addTo(map);
|
||||
}
|
||||
let marker = L.marker([lat, lng]).addTo(map);
|
||||
let url = lat + ',' + lng +'#map='+ zoom +'/'+ lat +'/'+ lng +'&layers=N';
|
||||
marker.bindPopup(address + '<p><a href="https://www.openstreetmap.org/directions?engine=osrm_car&route='+ url +'">Routing via OpenStreetMap</a></p>');
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
Reference in new issue
Block a user