Integrate current location with page generation
This commit is contained in:
Adriano Caloiaro
parent
b6c481ad14
commit
9f9c1c5271
4 changed files with 160 additions and 44 deletions
6
content/custom/whereami.md
Normal file
6
content/custom/whereami.md
Normal file
|
|
@ -0,0 +1,6 @@
|
||||||
|
---
|
||||||
|
title: Where Am I?
|
||||||
|
url: /whereami
|
||||||
|
layout: current_location
|
||||||
|
---
|
||||||
|
|
||||||
|
|
@ -1,44 +0,0 @@
|
||||||
---
|
|
||||||
layout: page
|
|
||||||
title: Where Am I?
|
|
||||||
url: /whereami
|
|
||||||
---
|
|
||||||
|
|
||||||
{{< rawhtml >}}
|
|
||||||
<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>
|
|
||||||
|
|
||||||
<div id="mapid"></div>
|
|
||||||
|
|
||||||
<style>
|
|
||||||
#mapid { height: 480px; }
|
|
||||||
</style>
|
|
||||||
|
|
||||||
<script type="text/javascript">
|
|
||||||
var lat, lon
|
|
||||||
|
|
||||||
fetch('https://adriano.fyi/current_location')
|
|
||||||
.then(response => response.json())
|
|
||||||
.then(data => {
|
|
||||||
var lat = data.lat
|
|
||||||
var lon = data.lon
|
|
||||||
var map = L.map('mapid').setView([lat, lon], 15);
|
|
||||||
L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
|
|
||||||
maxZoom: 19,
|
|
||||||
attribution: '© <a href="https://openstreetmap.org/copyright">OpenStreetMap contributors</a>'
|
|
||||||
}).addTo(map);
|
|
||||||
|
|
||||||
// show the scale bar on the lower left corner
|
|
||||||
L.control.scale().addTo(map);
|
|
||||||
|
|
||||||
// show a marker on the map
|
|
||||||
L.marker({lon: lon, lat: lat}).bindPopup('Come say hi').addTo(map);
|
|
||||||
|
|
||||||
});
|
|
||||||
|
|
||||||
</script>
|
|
||||||
{{< /rawhtml >}}
|
|
||||||
38
layouts/custom/current_location.html
Normal file
38
layouts/custom/current_location.html
Normal file
|
|
@ -0,0 +1,38 @@
|
||||||
|
{{ define "main" }}
|
||||||
|
{{ $current_location := getJSON "https://adriano.fyi/current_location" }}
|
||||||
|
{{ $geocode_url := printf "http://mycorp.adriano.fyi:4000/v1/reverse?point.lon=%f&point.lat=%f&layers=coarse&size=1" $current_location.lon $current_location.lat }}
|
||||||
|
{{ $dataJ := getJSON $geocode_url }}
|
||||||
|
{{ $place := index $dataJ.features 0 }}
|
||||||
|
|
||||||
|
<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>
|
||||||
|
<style>
|
||||||
|
#mapid { height: 480px; }
|
||||||
|
</style>
|
||||||
|
|
||||||
|
<div class="container" role="main">
|
||||||
|
<h2>{{ $place.properties.label }}</h2>
|
||||||
|
<div id="mapid"></div>
|
||||||
|
|
||||||
|
<script type="text/javascript">
|
||||||
|
var lat = {{ $current_location.lat }};
|
||||||
|
var lon = {{ $current_location.lon }};
|
||||||
|
var map = L.map('mapid').setView([lat, lon], 15);
|
||||||
|
L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
|
||||||
|
maxZoom: 19,
|
||||||
|
attribution: '© <a href="https://openstreetmap.org/copyright">OpenStreetMap contributors</a>'
|
||||||
|
}).addTo(map);
|
||||||
|
|
||||||
|
// show the scale bar on the lower left corner
|
||||||
|
L.control.scale().addTo(map);
|
||||||
|
|
||||||
|
// show a marker on the map
|
||||||
|
L.marker({lon: lon, lat: lat}).bindPopup('Come say hi').addTo(map);
|
||||||
|
</script>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
{{ end }}
|
||||||
|
|
@ -590,6 +590,122 @@ footer .theme-by {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/* --- custom layout css --- */
|
||||||
|
.intro-header .custom-heading
|
||||||
|
.intro-header .tags-heading,
|
||||||
|
.intro-header .categories-heading {
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
.intro-header.big-img .custom-heading,
|
||||||
|
.intro-header.big-img .post-heading {
|
||||||
|
padding: 100px 0;
|
||||||
|
color: #FFF;
|
||||||
|
text-shadow: 1px 1px 3px #000;
|
||||||
|
}
|
||||||
|
.intro-header .custom-heading h1,
|
||||||
|
.intro-header .tags-heading h1,
|
||||||
|
.intro-header .categories-heading h1 {
|
||||||
|
margin-top: 0;
|
||||||
|
font-size: 50px;
|
||||||
|
}
|
||||||
|
.intro-header .post-heading h1 {
|
||||||
|
margin-top: 0;
|
||||||
|
font-size: 35px;
|
||||||
|
}
|
||||||
|
.intro-header .custom-heading .page-subheading,
|
||||||
|
.intro-header .post-heading .post-subheading {
|
||||||
|
font-size: 27px;
|
||||||
|
line-height: 1.1;
|
||||||
|
display: block;
|
||||||
|
font-family: 'Open Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
|
||||||
|
font-weight: 300;
|
||||||
|
margin: 10px 0 0;
|
||||||
|
}
|
||||||
|
.intro-header .post-heading .post-subheading {
|
||||||
|
margin-bottom: 20px;
|
||||||
|
}
|
||||||
|
.intro-header.big-img .custom-heading .page-subheading,
|
||||||
|
.intro-header.big-img .post-heading .post-subheading {
|
||||||
|
font-weight: 400;
|
||||||
|
}
|
||||||
|
.intro-header.big-img .custom-heading hr {
|
||||||
|
box-shadow: 1px 1px 3px #000;
|
||||||
|
-webkit-box-shadow: 1px 1px 3px #000;
|
||||||
|
-moz-box-shadow: 1px 1px 3px #000;
|
||||||
|
}
|
||||||
|
.intro-header.big-img .post-heading .post-meta {
|
||||||
|
color: #EEE;
|
||||||
|
}
|
||||||
|
.intro-header.big-img .img-desc {
|
||||||
|
background: rgba(30, 30, 30, 0.6);
|
||||||
|
position: absolute;
|
||||||
|
padding: 5px 10px;
|
||||||
|
font-size: 11px;
|
||||||
|
color: #EEE;
|
||||||
|
font-family: 'Open Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
|
||||||
|
right: 0;
|
||||||
|
bottom: 0;
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
@media only screen and (min-width: 768px) {
|
||||||
|
.intro-header {
|
||||||
|
margin-top: 130px;
|
||||||
|
}
|
||||||
|
.intro-header.big-img {
|
||||||
|
margin-top: 91px; /* Full navbar is small navbar + 20px padding on each side when expanded */
|
||||||
|
}
|
||||||
|
.intro-header.big-img .custom-heading,
|
||||||
|
.intro-header.big-img .post-heading {
|
||||||
|
padding: 150px 0;
|
||||||
|
}
|
||||||
|
.intro-header .custom-heading h1,
|
||||||
|
.intro-header .tags-heading h1,
|
||||||
|
.intro-header .categories-heading h1 {
|
||||||
|
font-size: 80px;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
.intro-header .post-heading h1 {
|
||||||
|
font-size: 50px;
|
||||||
|
}
|
||||||
|
.intro-header.big-img .img-desc {
|
||||||
|
font-size: 14px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.header-section.has-img .no-img {
|
||||||
|
margin-top: 0;
|
||||||
|
background: #FCFCFC;
|
||||||
|
margin: 0 0 40px;
|
||||||
|
padding: 20px 0;
|
||||||
|
box-shadow: 0 0 5px #AAA;
|
||||||
|
}
|
||||||
|
/* Many phones are 320 or 360px, so make sure images are a proper aspect ratio in those cases */
|
||||||
|
.header-section.has-img .intro-header.no-img {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
@media only screen and (max-width: 365px) {
|
||||||
|
.header-section.has-img .intro-header.no-img {
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
.intro-header.big-img {
|
||||||
|
width: 100%;
|
||||||
|
height: 220px;
|
||||||
|
}
|
||||||
|
.intro-header.big-img .custom-heading,
|
||||||
|
.intro-header.big-img .post-heading {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
.header-section.has-img .big-img {
|
||||||
|
margin-bottom: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
@media only screen and (max-width: 325px) {
|
||||||
|
.intro-header.big-img {
|
||||||
|
height: 200px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
/* --- Pager --- */
|
/* --- Pager --- */
|
||||||
|
|
||||||
.pager li a {
|
.pager li a {
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue