chandlerswift/lawrencedeerclub
1
0
Fork 0
Code Issues Pull requests Actions Packages Projects Releases Wiki Activity
lawrencedeerclub/map.html

236 lines
7.9 KiB
HTML
Raw Normal View History

Initial commit
2024-11-26 20:41:37 -06:00
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Lawrence Deer Club Maps</title>
<link rel="stylesheet" href="/leaflet/leaflet.css" />
<script src="/leaflet/leaflet.js"></script>
<style>
html, body {
margin: 0;
padding: 0;
}
#map {
height: 100vh;
width: 100vw;
}
div.popup dt {
font-weight: bold;
}
Use labels instead of popups for plat info
2024-11-27 20:35:22 -06:00
.label {
font-weight: bold;
text-align: center;
margin-top: -1em;
}
.label div {
position: relative;
left: -50%;
top: 10px;
text-shadow: 0 0 2px white;
}
Fix mobile popups to window This doesn't really do all that great a job; Leaflet doesn't really seem to be equipped to do this well (or, more likely, I'm just not figuring out how to do it!). The hack with the extra container is necessary because the transform on the `.leaflet-map-pane` element creates a new stacking context, which messes up even `position: fixed`. I wasn't able to figure out a way to get around this. Written on an airplane without an internet connection, so per the XKCD I'd link but can't, "my apparent IQ goes down like 30 points when [I don't have docs handy; orig "Wikipedia is down"]"!
2024-11-30 12:26:39 -06:00
.leaflet-popup-content-wrapper {
height: min(800px, 60vh);
overflow-y: auto;
}
#popupcontainer {
position: relative;
z-index: 1000;
}
#popupcontainer .leaflet-popup-content-wrapper {
height: unset;
}
#popupcontainer .leaflet-popup {
transform: none !important;
position: fixed;
width: 100vw;
height: 100vh;
right: 0;
left: 0 !important;
top: 1em;
bottom: 1em !important;
overflow: auto;
}
#popupcontainer .leaflet-popup-content {
width: initial;
}
Add images and thumbnails, and lightbox code Images generated with this: for file in *.jpg; do magick $file -resize 600x600 -quality 80 thumbs/$file; done
2025-01-03 00:02:04 -06:00
/* 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 */
Initial commit
2024-11-26 20:41:37 -06:00
</style>
</head>
<body>
<div id="map"></div>
Fix mobile popups to window This doesn't really do all that great a job; Leaflet doesn't really seem to be equipped to do this well (or, more likely, I'm just not figuring out how to do it!). The hack with the extra container is necessary because the transform on the `.leaflet-map-pane` element creates a new stacking context, which messes up even `position: fixed`. I wasn't able to figure out a way to get around this. Written on an airplane without an internet connection, so per the XKCD I'd link but can't, "my apparent IQ goes down like 30 points when [I don't have docs handy; orig "Wikipedia is down"]"!
2024-11-30 12:26:39 -06:00
<div id="popupcontainer" class="leaflet-container"></div>
Add images and thumbnails, and lightbox code Images generated with this: for file in *.jpg; do magick $file -resize 600x600 -quality 80 thumbs/$file; done
2025-01-03 00:02:04 -06:00
<div id="lightbox" onclick="this.style.display = 'none';"></div>
Initial commit
2024-11-26 20:41:37 -06:00
<script>
Add images and thumbnails, and lightbox code Images generated with this: for file in *.jpg; do magick $file -resize 600x600 -quality 80 thumbs/$file; done
2025-01-03 00:02:04 -06:00
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';
}
Initial commit
2024-11-26 20:41:37 -06:00
(async function() {
Constrain map Zoom and bounds
2025-01-02 22:08:40 -06:00
const map = L.map('map', {
Bump minZoom to 15
2025-01-03 22:59:05 -06:00
minZoom: 15,
Constrain map Zoom and bounds
2025-01-02 22:08:40 -06:00
maxZoom: 21,
maxBounds: [
[47.517085, -93.427584],
[47.457925, -93.340026],
],
Remove unnecessary initial location definition
2025-01-03 22:59:43 -06:00
});
Initial commit
2024-11-26 20:41:37 -06:00
// L.tileLayer('https://tile.openstreetmap.org/{z}/{x}/{y}.png', {
// maxZoom: 19,
// attribution: '&copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>'
// }).addTo(map);
Switch satellite imagery PNG->JPG for better compression
2025-01-02 23:23:45 -06:00
L.tileLayer('./satellite/{z}/{x}/{y}.jpg', {
Add 2023 Itasca County Leaf Off Imagery
2025-01-02 22:07:10 -06:00
minNativeZoom: 12,
maxNativeZoom: 20,
Increase max tileLayer zoom past 19 default
2025-01-02 23:53:39 -06:00
maxZoom: 21,
Add 2023 Itasca County Leaf Off Imagery
2025-01-02 22:07:10 -06:00
bounds: [
[47.517085, -93.427584],
[47.457925, -93.340026],
],
}).addTo(map);
Initial commit
2024-11-26 20:41:37 -06:00
// Make these requests in parallel
const track_req_promise = fetch('data/track.geojson');
const plats_req_promise = fetch('data/plats.geojson');
const data_req_promise = fetch('data/data.json');
const track_req = await track_req_promise;
const plats_req = await plats_req_promise;
const data_req = await data_req_promise;
const track = await track_req.json();
const plats = await plats_req.json();
const data = await data_req.json();
L.geoJSON(plats, {
Hide plats for our property
2024-11-30 12:33:41 -06:00
filter: feature => !feature.properties.TAO_NAME.toLowerCase().includes("lawrence deer club"),
Use labels instead of popups for plat info
2024-11-27 20:35:22 -06:00
onEachFeature: function(feature, layer) {
const latLngs = layer.getLatLngs()[0];
const centerish = [ // TODO: actual centroid
latLngs.reduce((acc, i) => acc + i.lat, 0) / latLngs.length,
latLngs.reduce((acc, i) => acc + i.lng, 0) / latLngs.length,
];
const label = L.marker(centerish, {
icon: L.divIcon({
iconSize: null,
className: "label",
html: "<div>" + feature.properties.TAO_NAME + "</div>"
})
}).addTo(map);
},
Initial commit
2024-11-26 20:41:37 -06:00
}).addTo(map);
Place track on top of plats
2025-01-02 23:24:51 -06:00
L.geoJSON(track, {
style: {
color: "maroon",
},
}).addTo(map);
Initial commit
2024-11-26 20:41:37 -06:00
for (let stand of data.stands) {
if (stand.location) {
const marker = L.marker(stand.location).addTo(map);
const popupContentWrapper = document.createElement('div');
popupContentWrapper.classList.add('popup');
let attributesString = '<dl>';
for (let [attribute, value] of Object.entries(stand.attributes)) {
attributesString += `<dt>${attribute}</dt><dd>${value}</dd>`;
}
attributesString += '</dl>';
popupContentWrapper.innerHTML = `
<h2>${stand.name}</h2>
Add images and thumbnails, and lightbox code Images generated with this: for file in *.jpg; do magick $file -resize 600x600 -quality 80 thumbs/$file; done
2025-01-03 00:02:04 -06:00
<a href="images/${stand.image}" onclick="displayLightboxOnClick(this, event)"><img style="width: min(80vw, 300px);" src="images/thumbs/${stand.image}"></a>
Initial commit
2024-11-26 20:41:37 -06:00
${attributesString}
`;
Fix mobile popups to window This doesn't really do all that great a job; Leaflet doesn't really seem to be equipped to do this well (or, more likely, I'm just not figuring out how to do it!). The hack with the extra container is necessary because the transform on the `.leaflet-map-pane` element creates a new stacking context, which messes up even `position: fixed`. I wasn't able to figure out a way to get around this. Written on an airplane without an internet connection, so per the XKCD I'd link but can't, "my apparent IQ goes down like 30 points when [I don't have docs handy; orig "Wikipedia is down"]"!
2024-11-30 12:26:39 -06:00
let popupOptions = {};
// TODO: evaluate this when creating popup instead of at
// page instantiation time -- if the page is resized, this
// won't keep up with those changes.
if (window.visualViewport.width < 600) {
popupOptions.pane = document.getElementById('popupcontainer');
}
marker.bindPopup(popupContentWrapper, popupOptions);
Initial commit
2024-11-26 20:41:37 -06:00
}
}
map.fitBounds([
[47.4865,-93.4068],
[47.4992,-93.3746],
]);
})();
</script>
</body>
</html>
Reference in a new issue Copy permalink