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 {
|
||||
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>
|
||||
</head>
|
||||
<body>
|
||||
<div id="map"></div>
|
||||
<div id="popupcontainer" class="leaflet-container"></div>
|
||||
<div id="lightbox" onclick="this.style.display = 'none';"></div>
|
||||
<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() {
|
||||
const map = L.map('map', {
|
||||
minZoom: 12,
|
||||
|
|
@ -155,7 +78,6 @@
|
|||
L.tileLayer('./satellite/{z}/{x}/{y}.jpg', {
|
||||
minNativeZoom: 12,
|
||||
maxNativeZoom: 20,
|
||||
maxZoom: 21,
|
||||
bounds: [
|
||||
[47.517085, -93.427584],
|
||||
[47.457925, -93.340026],
|
||||
|
|
@ -211,7 +133,7 @@
|
|||
attributesString += '</dl>';
|
||||
popupContentWrapper.innerHTML = `
|
||||
<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}
|
||||
`;
|
||||
let popupOptions = {};
|
||||
|
|
|
|||