Add non-stand icons to map

This commit is contained in:
Chandler Swift 2025-11-09 22:06:23 -06:00
parent dba7cd0be4
commit e3e7445cc0
Signed by: chandlerswift
GPG key ID: A851D929D52FB93F
6 changed files with 259 additions and 273 deletions

View file

@ -383,15 +383,15 @@
});
});
for (let stand of data.stands) {
if (stand.location) {
for (let poi of data) {
if (poi.location) {
const icon = L.icon({
iconUrl: `images/icons/${stand.type}.svg`,
iconUrl: `images/icons/${poi.type}.svg`,
iconSize: [16, 16],
iconAnchor: [8, 16],
popupAnchor: [0, -12],
});
const marker = L.marker(stand.location, {icon}).addTo(map);
const marker = L.marker(poi.location, {icon}).addTo(map);
map.on('zoom', () => {
icon.options.iconSize = [map.getZoom() * 8 - 104, map.getZoom() * 8 - 104];
icon.options.iconAnchor = [icon.options.iconSize[0] / 2, icon.options.iconSize[1]];
@ -401,13 +401,13 @@
const popupContentWrapper = document.createElement('div');
popupContentWrapper.classList.add('popup');
let attributesString = '<dl>';
for (let [attribute, value] of Object.entries(stand.attributes)) {
for (let [attribute, value] of Object.entries(poi.attributes)) {
attributesString += `<dt>${attribute}</dt><dd>${value}</dd>`;
}
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>
<h2>${poi.name}</h2>
<a href="images/${poi.image}" onclick="displayLightboxOnClick(this, event)"><img style="width: min(80vw, 300px);" src="images/thumbs/${poi.image}"></a>
${attributesString}
`;
let popupOptions = {};
@ -428,9 +428,9 @@
<div class="legend-item"><span class="legend-line road"></span>Road</div>
<div class="legend-item"><span class="legend-line trail"></span>Trail</div>
<div class="legend-item"><span class="legend-line shooting_lane"></span>Shooting lane</div>
<div class="legend-item"><img class="legend-icon" src="images/icons/castle.svg" alt="Castle icon">Castle stand</div>
<div class="legend-item"><img class="legend-icon" src="images/icons/ladder.svg" alt="Ladder icon">Ladder stand</div>
<div class="legend-item"><img class="legend-icon" src="images/icons/barrel.svg" alt="Barrel icon">Barrel stand</div>
<div class="legend-item"><img class="legend-icon" src="images/icons/castle-stand.svg" alt="Castle icon">Castle stand</div>
<div class="legend-item"><img class="legend-icon" src="images/icons/ladder-stand.svg" alt="Ladder icon">Ladder stand</div>
<div class="legend-item"><img class="legend-icon" src="images/icons/barrel-stand.svg" alt="Barrel icon">Barrel stand</div>
<div class="legend-item"><img class="legend-icon" src="images/icons/shack.svg" alt="Shack icon">Shack</div>
<div class="legend-item"><img class="legend-icon" src="images/icons/outhouse.svg" alt="Outhouse icon">Outhouse</div>
<div class="legend-item"><img class="legend-icon" src="images/icons/fruit-tree.svg" alt="Fruit tree icon">Fruit tree</div>