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; };