Compare commits
No commits in common. "9d33189bd6eddacd5e023dfc690012c98373c7a4" and "beb4592233d1f7cbaab60e3befceae676146f2c3" have entirely different histories.
9d33189bd6
...
beb4592233
BIN
images/alans.jpg
|
Before Width: | Height: | Size: 6.4 MiB |
|
Before Width: | Height: | Size: 4.9 MiB |
|
Before Width: | Height: | Size: 6.4 MiB |
|
Before Width: | Height: | Size: 5.1 MiB |
|
Before Width: | Height: | Size: 6.3 MiB |
|
Before Width: | Height: | Size: 6.9 MiB |
|
Before Width: | Height: | Size: 6.6 MiB |
|
Before Width: | Height: | Size: 6.3 MiB |
BIN
images/point.jpg
|
Before Width: | Height: | Size: 4.9 MiB |
BIN
images/ridge.jpg
|
Before Width: | Height: | Size: 6 MiB |
BIN
images/sofa.jpg
|
Before Width: | Height: | Size: 4.9 MiB |
|
Before Width: | Height: | Size: 5.7 MiB |
|
Before Width: | Height: | Size: 78 KiB |
|
Before Width: | Height: | Size: 56 KiB |
|
Before Width: | Height: | Size: 79 KiB |
|
Before Width: | Height: | Size: 57 KiB |
|
Before Width: | Height: | Size: 74 KiB |
|
Before Width: | Height: | Size: 84 KiB |
|
Before Width: | Height: | Size: 79 KiB |
|
Before Width: | Height: | Size: 76 KiB |
|
Before Width: | Height: | Size: 58 KiB |
|
Before Width: | Height: | Size: 81 KiB |
|
Before Width: | Height: | Size: 55 KiB |
|
Before Width: | Height: | Size: 74 KiB |
|
Before Width: | Height: | Size: 74 KiB |
|
Before Width: | Height: | Size: 6.6 MiB |
80
map.html
|
|
@ -56,89 +56,12 @@
|
||||||
#popupcontainer .leaflet-popup-content {
|
#popupcontainer .leaflet-popup-content {
|
||||||
width: initial;
|
width: initial;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* BEGIN lightbox */
|
|
||||||
|
|
||||||
/* simplified from https://jekyllcodex.org/without-plugin/lightbox/ */
|
|
||||||
#lightbox {
|
|
||||||
width: 100%;
|
|
||||||
height: 100%;
|
|
||||||
position: fixed;
|
|
||||||
top: 0;
|
|
||||||
left: 0;
|
|
||||||
background: rgba(0,0,0,0.85);
|
|
||||||
z-index: 9999999;
|
|
||||||
line-height: 0;
|
|
||||||
cursor: pointer;
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
#lightbox .img {
|
|
||||||
position: relative;
|
|
||||||
top: 50%;
|
|
||||||
left: 50%;
|
|
||||||
transform: translate(-50%,-50%);
|
|
||||||
max-width: 100%;
|
|
||||||
max-height: 100%;
|
|
||||||
}
|
|
||||||
#lightbox .img img {
|
|
||||||
opacity: 0;
|
|
||||||
pointer-events: none;
|
|
||||||
width: auto;
|
|
||||||
}
|
|
||||||
@media screen and (min-width: 1200px) {
|
|
||||||
#lightbox .img {
|
|
||||||
max-width: 1200px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@media screen and (min-height: 1200px) {
|
|
||||||
#lightbox .img {
|
|
||||||
max-height: 1200px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
#lightbox #close {
|
|
||||||
height: 50px;
|
|
||||||
width: 50px;
|
|
||||||
position: fixed;
|
|
||||||
cursor: pointer;
|
|
||||||
text-decoration: none;
|
|
||||||
z-index: 99;
|
|
||||||
right: 0;
|
|
||||||
top: 0;
|
|
||||||
}
|
|
||||||
#lightbox #close:after, #lightbox #close:before {
|
|
||||||
position: absolute;
|
|
||||||
margin-top: 22px;
|
|
||||||
margin-left: 14px;
|
|
||||||
content: "";
|
|
||||||
height: 3px;
|
|
||||||
background: white;
|
|
||||||
width: 23px;
|
|
||||||
transform-origin: 50% 50%;
|
|
||||||
transform: rotate(-45deg);
|
|
||||||
}
|
|
||||||
#lightbox #close:after {
|
|
||||||
transform: rotate(45deg);
|
|
||||||
}
|
|
||||||
#lightbox, #lightbox * {
|
|
||||||
user-select: none;
|
|
||||||
}
|
|
||||||
/* END lightbox */
|
|
||||||
</style>
|
</style>
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<div id="map"></div>
|
<div id="map"></div>
|
||||||
<div id="popupcontainer" class="leaflet-container"></div>
|
<div id="popupcontainer" class="leaflet-container"></div>
|
||||||
<div id="lightbox" onclick="this.style.display = 'none';"></div>
|
|
||||||
<script>
|
<script>
|
||||||
function displayLightboxOnClick(target, event) {
|
|
||||||
event.preventDefault();
|
|
||||||
document.getElementById('lightbox').innerHTML = `
|
|
||||||
<a id="close"></a>
|
|
||||||
<div class="img" style="background: url('${target.getAttribute('href')}') center center / contain no-repeat;">
|
|
||||||
<img src="${target.getAttribute('href')}">
|
|
||||||
</div>`;
|
|
||||||
document.getElementById('lightbox').style.display = 'block';
|
|
||||||
}
|
|
||||||
(async function() {
|
(async function() {
|
||||||
const map = L.map('map', {
|
const map = L.map('map', {
|
||||||
minZoom: 12,
|
minZoom: 12,
|
||||||
|
|
@ -155,7 +78,6 @@
|
||||||
L.tileLayer('./satellite/{z}/{x}/{y}.jpg', {
|
L.tileLayer('./satellite/{z}/{x}/{y}.jpg', {
|
||||||
minNativeZoom: 12,
|
minNativeZoom: 12,
|
||||||
maxNativeZoom: 20,
|
maxNativeZoom: 20,
|
||||||
maxZoom: 21,
|
|
||||||
bounds: [
|
bounds: [
|
||||||
[47.517085, -93.427584],
|
[47.517085, -93.427584],
|
||||||
[47.457925, -93.340026],
|
[47.457925, -93.340026],
|
||||||
|
|
@ -211,7 +133,7 @@
|
||||||
attributesString += '</dl>';
|
attributesString += '</dl>';
|
||||||
popupContentWrapper.innerHTML = `
|
popupContentWrapper.innerHTML = `
|
||||||
<h2>${stand.name}</h2>
|
<h2>${stand.name}</h2>
|
||||||
<a href="images/${stand.image}" onclick="displayLightboxOnClick(this, event)"><img style="width: min(80vw, 300px);" src="images/thumbs/${stand.image}"></a>
|
<img style="width: min(80vw, 300px);" src="images/${stand.image}">
|
||||||
${attributesString}
|
${attributesString}
|
||||||
`;
|
`;
|
||||||
let popupOptions = {};
|
let popupOptions = {};
|
||||||
|
|
|
||||||