Add non-stand icons to map
This commit is contained in:
parent
dba7cd0be4
commit
e3e7445cc0
6 changed files with 259 additions and 273 deletions
20
map.html
20
map.html
|
|
@ -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>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue