diff --git a/data/sri.toml b/data/sri.toml index e5a2e12b..c9402eda 100644 --- a/data/sri.toml +++ b/data/sri.toml @@ -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==" diff --git a/exampleSite/config.toml b/exampleSite/config.toml index cc2164ca..35742421 100644 --- a/exampleSite/config.toml +++ b/exampleSite/config.toml @@ -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" diff --git a/layouts/partials/footer.html b/layouts/partials/footer.html index 7f62cfd4..06ecdc76 100644 --- a/layouts/partials/footer.html +++ b/layouts/partials/footer.html @@ -5,8 +5,8 @@ {{ end }} - {{ if .Site.Params.google_maps_api_key }} - + {{ if eq .Site.Params.map 1 }} + {{ end }} {{ if not .Site.Params.disable_sri }} @@ -14,16 +14,20 @@ {{ printf "" $js.imagesLoaded.version $js.imagesLoaded.sri | safeHTML }} {{ printf "" $js.bootstrap.version $js.bootstrap.sri | safeHTML }} {{ printf "" $js.isotope.version $js.isotope.sri | safeHTML }} - {{ if .Site.Params.google_maps_api_key }} + {{ if eq .Site.Params.map 1 }} {{ printf "" $js.gmaps.version $js.gmaps.sri | safeHTML }} + {{ else if or (eq .Site.Params.map 2) (eq .Site.Params.map 3) }} + {{ printf "" $js.leaflet.version $js.leaflet.sri | safeHTML }} {{ end }} {{ else }} - {{ if .Site.Params.google_maps_api_key }} + {{ if eq .Site.Params.map 1 }} + {{ else if or (eq .Site.Params.map 2) (eq .Site.Params.map 3) }} + {{ end }} {{ end }} diff --git a/layouts/partials/header.html b/layouts/partials/header.html index 59b8fb19..5438c5ce 100644 --- a/layouts/partials/header.html +++ b/layouts/partials/header.html @@ -31,10 +31,16 @@ {{ printf "" $sri.css.bootstrap.version $sri.css.bootstrap.sri | safeHTML }} {{ printf "" $sri.css.academicons.version $sri.css.academicons.sri | safeHTML }} {{ printf "" $sri.css.fontAwesome.version $sri.css.fontAwesome.sri | safeHTML }} + {{ if or (eq .Site.Params.map 2) (eq .Site.Params.map 3) }} + {{ printf "" $sri.css.leaflet.version $sri.css.leaflet.sri | safeHTML }} + {{ end }} {{ else }} + {{ if or (eq .Site.Params.map 2) (eq .Site.Params.map 3) }} + + {{ 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" . -}} diff --git a/layouts/partials/widgets/contact.html b/layouts/partials/widgets/contact.html index 17339818..20c47584 100644 --- a/layouts/partials/widgets/contact.html +++ b/layouts/partials/widgets/contact.html @@ -83,11 +83,14 @@ - {{ if and $.Site.Params.latitude $.Site.Params.longitude }} + {{ if $.Site.Params.map }}
{{ end }} diff --git a/static/js/hugo-academic.js b/static/js/hugo-academic.js index 2ddb9bbc..f1fdc0e8 100644 --- a/static/js/hugo-academic.js +++ b/static/js/hugo-academic.js @@ -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 © OpenStreetMap contributors, CC-BY-SA, Imagery © Mapbox', + 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: '© OpenStreetMap' + }).addTo(map); + } + let marker = L.marker([lat, lng]).addTo(map); + let url = lat + ',' + lng +'#map='+ zoom +'/'+ lat +'/'+ lng +'&layers=N'; + marker.bindPopup(address + '

Routing via OpenStreetMap

'); + } } }