From f3adeb7482200eb3d090a6d3d88e79dd31eb9382 Mon Sep 17 00:00:00 2001 From: Chandler Swift Date: Sun, 9 Nov 2025 16:09:47 -0600 Subject: [PATCH] Add per-stand-type icons MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit With-Icons-Drawn-By: Käthe --- images/icons/barrel.svg | 25 ++++++++++ images/icons/castle.svg | 4 ++ images/icons/decommissioned-stands.svg | 51 ++++++++++++++++++++ images/icons/fruit-tree.svg | 51 ++++++++++++++++++++ images/icons/hook.svg | 51 ++++++++++++++++++++ images/icons/ladder.svg | 4 ++ images/icons/outhouse.svg | 51 ++++++++++++++++++++ images/icons/shack.svg | 51 ++++++++++++++++++++ map.html | 66 +++++++++++++++++++------- 9 files changed, 338 insertions(+), 16 deletions(-) create mode 100644 images/icons/barrel.svg create mode 100644 images/icons/castle.svg create mode 100644 images/icons/decommissioned-stands.svg create mode 100644 images/icons/fruit-tree.svg create mode 100644 images/icons/hook.svg create mode 100644 images/icons/ladder.svg create mode 100644 images/icons/outhouse.svg create mode 100644 images/icons/shack.svg diff --git a/images/icons/barrel.svg b/images/icons/barrel.svg new file mode 100644 index 0000000..be2156d --- /dev/null +++ b/images/icons/barrel.svg @@ -0,0 +1,25 @@ + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/images/icons/castle.svg b/images/icons/castle.svg new file mode 100644 index 0000000..84bc7cc --- /dev/null +++ b/images/icons/castle.svg @@ -0,0 +1,4 @@ + + + + diff --git a/images/icons/decommissioned-stands.svg b/images/icons/decommissioned-stands.svg new file mode 100644 index 0000000..5035c15 --- /dev/null +++ b/images/icons/decommissioned-stands.svg @@ -0,0 +1,51 @@ + + + + + + + + + + diff --git a/images/icons/fruit-tree.svg b/images/icons/fruit-tree.svg new file mode 100644 index 0000000..cc74c22 --- /dev/null +++ b/images/icons/fruit-tree.svg @@ -0,0 +1,51 @@ + + + + + + + + + + diff --git a/images/icons/hook.svg b/images/icons/hook.svg new file mode 100644 index 0000000..2c65ec7 --- /dev/null +++ b/images/icons/hook.svg @@ -0,0 +1,51 @@ + + + + + + + + + + diff --git a/images/icons/ladder.svg b/images/icons/ladder.svg new file mode 100644 index 0000000..d47c27f --- /dev/null +++ b/images/icons/ladder.svg @@ -0,0 +1,4 @@ + + + + diff --git a/images/icons/outhouse.svg b/images/icons/outhouse.svg new file mode 100644 index 0000000..338032a --- /dev/null +++ b/images/icons/outhouse.svg @@ -0,0 +1,51 @@ + + + + + + + + + + diff --git a/images/icons/shack.svg b/images/icons/shack.svg new file mode 100644 index 0000000..66c6c8f --- /dev/null +++ b/images/icons/shack.svg @@ -0,0 +1,51 @@ + + + + + + + + + + diff --git a/map.html b/map.html index 52bde47..d0802d7 100644 --- a/map.html +++ b/map.html @@ -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 */ @@ -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 = '
'; @@ -391,15 +425,15 @@ legend.onAdd = function (map) { const div = L.DomUtil.create('div', 'legend'); div.innerHTML = ` - Road
- Trail
- Shooting lane
- Castle stand
- Ladder stand
- Barrel stand
- Shack
- Outhouse
- Fruit tree +
Road
+
Trail
+
Shooting lane
+
Castle iconCastle stand
+
Ladder iconLadder stand
+
Barrel iconBarrel stand
+
Shack iconShack
+
Outhouse iconOuthouse
+
Fruit tree iconFruit tree
`; return div; };