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

Add per-stand-type icons

Browse source 
With-Icons-Drawn-By: Käthe
This commit is contained in:
Chandler Swift 2025-11-09 16:09:47 -06:00
parent d666f15b00
commit f3adeb7482
Signed by: chandlerswift
GPG key ID: A851D929D52FB93F
9 changed files with 338 additions and 16 deletions
Download patch file Download diff file Expand all files Collapse all files

66
map.html
View file

@ -136,12 +136,34 @@
line-height: 18px;
color: #555;
}
.legend i {
width: 18px;
height: 18px;
float: left;
margin-right: 8px;
opacity: 0.7;
.legend-item {
display: flex;
align-items: center;
gap: 8px;
margin-bottom: 4px;
}
.legend-item:last-child {
margin-bottom: 0;
}
.legend-line {
display: inline-block;
width: 28px;
height: 0;
border-radius: 4px;
}
.legend-line.road {
border-top: 6px solid #8b5a2b;
}
.legend-line.trail {
border-top: 3px solid #800000;
}
.legend-line.shooting_lane {
border-top: 3px dashed #000000;
}
.legend-icon {
width: 20px;
height: 20px;
object-fit: contain;
}
/* END legend */
</style>
@ -363,7 +385,19 @@
for (let stand of data.stands) {
if (stand.location) {
const marker = L.marker(stand.location).addTo(map);
const icon = L.icon({
iconUrl: `images/icons/${stand.type}.svg`,
iconSize: [16, 16],
iconAnchor: [8, 16],
popupAnchor: [0, -12],
});
const marker = L.marker(stand.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]];
icon.options.popupAnchor = [0, -icon.options.iconSize[1] * 3 / 4];
marker.setIcon(icon);
});
const popupContentWrapper = document.createElement('div');
popupContentWrapper.classList.add('popup');
let attributesString = '<dl>';
@ -391,15 +425,15 @@
legend.onAdd = function (map) {
const div = L.DomUtil.create('div', 'legend');
div.innerHTML = `
<i class="road"></i> Road<br>
<i class="trail"></i> Trail<br>
<i class="shooting_lane"></i> Shooting lane<br>
<i class="castle"></i> Castle stand<br>
<i class="ladder"></i> Ladder stand<br>
<i class="barrel"></i> Barrel stand<br>
<i class="shack"></i> Shack<br>
<i class="outhouse"></i> Outhouse<br>
<i class="fruit tree"></i> Fruit tree
<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/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>
`;
return div;
};