Skip to content

Add map layer switcher with CartoDB tile providers #20

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
rastermanden merged 1 commit into from
Apr 19, 2026
Merged

Add map layer switcher with CartoDB tile providers #20

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
144 changes: 140 additions & 4 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -163,6 +163,65 @@
.locate-fab:active { transform: scale(0.9); background: var(--ivory); }
.locate-fab.locating { color: var(--terracotta); }

.layer-fab {
position: absolute;
bottom: 64px;
right: 16px;
z-index: 1000;
width: 40px;
height: 40px;
border-radius: 10px;
background: white;
border: 1.5px solid var(--border-warm);
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
box-shadow: 0 2px 8px rgba(0,0,0,0.12);
transition: background 0.15s, transform 0.15s, border-color 0.15s, color 0.15s;
color: var(--muted);
}
.layer-fab:active { transform: scale(0.9); background: var(--ivory); }
.layer-fab.active { color: var(--terracotta); border-color: var(--terracotta); }

.layer-panel {
position: absolute;
bottom: 64px;
right: 64px;
z-index: 1001;
background: white;
border: 1.5px solid var(--border-warm);
border-radius: 12px;
box-shadow: 0 4px 20px rgba(0,0,0,0.15);
overflow: hidden;
display: none;
min-width: 152px;
}
.layer-panel.open { display: block; }
.layer-option {
display: flex;
align-items: center;
gap: 10px;
padding: 10px 14px;
cursor: pointer;
font-size: 13px;
font-family: var(--sans);
color: var(--ink);
border-bottom: 1px solid var(--border);
transition: background 0.1s;
white-space: nowrap;
}
.layer-option:last-child { border-bottom: none; }
.layer-option:hover { background: var(--ivory); }
.layer-option.active { color: var(--terracotta); font-weight: 500; }
.layer-swatch {
width: 22px;
height: 22px;
border-radius: 5px;
border: 1.5px solid rgba(0,0,0,0.1);
flex-shrink: 0;
}

/* Bottom sheet list */
.sheet {
background: var(--card);
Expand Down Expand Up @@ -1189,6 +1248,27 @@ <h1>Hidden Gems</h1>
</svg>
</div>
</div>
<div class="layer-panel" id="layerPanel">
<div class="layer-option active" data-layer="voyager" onclick="setMapLayer('voyager')">
<div class="layer-swatch" style="background: #e8e3d5;"></div>Voyager
</div>
<div class="layer-option" data-layer="positron" onclick="setMapLayer('positron')">
<div class="layer-swatch" style="background: #f2f2f0;"></div>Positron
</div>
<div class="layer-option" data-layer="dark" onclick="setMapLayer('dark')">
<div class="layer-swatch" style="background: #2c2c2e;"></div>Dark Matter
</div>
<div class="layer-option" data-layer="osm" onclick="setMapLayer('osm')">
<div class="layer-swatch" style="background: #d4e8c2;"></div>Street Map
</div>
</div>
<button class="layer-fab" id="layerFab" onclick="toggleLayerPanel()" title="Switch map style">
<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<polygon points="12 2 2 7 12 12 22 7 12 2"/>
<polyline points="2 17 12 22 22 17"/>
<polyline points="2 12 12 17 22 12"/>
</svg>
</button>
<button class="locate-fab" id="locateFab" onclick="locateMe()" title="Zoom to my location">
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<circle cx="12" cy="12" r="3"/>
Expand Down Expand Up @@ -1429,6 +1509,8 @@ <h1>Hidden Gems</h1>
let selectedFiles = [];
let selectedEmoji = '🌿';
let map;
let activeLayer = null;
let activeLayerName = 'voyager';
let currentUser = null;
let editingGemId = null;
let existingPhotos = [];
Expand Down Expand Up @@ -1489,15 +1571,69 @@ <h1>Hidden Gems</h1>

// ── Map ───────────────────────────────────────────────────────────────────────

const LAYERS = {
voyager: {
url: 'https://{s}.basemaps.cartocdn.com/rastertiles/voyager/{z}/{x}/{y}{r}.png',
attribution: '© <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors © <a href="https://carto.com/">CARTO</a>',
maxZoom: 20
},
positron: {
url: 'https://{s}.basemaps.cartocdn.com/light_all/{z}/{x}/{y}{r}.png',
attribution: '© <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors © <a href="https://carto.com/">CARTO</a>',
maxZoom: 20
},
dark: {
url: 'https://{s}.basemaps.cartocdn.com/dark_all/{z}/{x}/{y}{r}.png',
attribution: '© <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors © <a href="https://carto.com/">CARTO</a>',
maxZoom: 20
},
osm: {
url: 'https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',
attribution: '© <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors',
maxZoom: 19
}
};

function initMap() {
map = L.map('map', { zoomControl: false }).setView([55.676, 12.568], 13);
L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
attribution: '© OpenStreetMap',
maxZoom: 19
}).addTo(map);
const cfg = LAYERS.voyager;
activeLayer = L.tileLayer(cfg.url, { attribution: cfg.attribution, maxZoom: cfg.maxZoom }).addTo(map);
L.control.zoom({ position: 'topright' }).addTo(map);
}

function setMapLayer(name) {
if (name === activeLayerName) { toggleLayerPanel(); return; }
const cfg = LAYERS[name];
if (!cfg || !map) return;
if (activeLayer) map.removeLayer(activeLayer);
activeLayer = L.tileLayer(cfg.url, { attribution: cfg.attribution, maxZoom: cfg.maxZoom }).addTo(map);
activeLayerName = name;
document.querySelectorAll('.layer-option').forEach(el => {
el.classList.toggle('active', el.dataset.layer === name);
});
toggleLayerPanel();
}

function toggleLayerPanel() {
const panel = document.getElementById('layerPanel');
const fab = document.getElementById('layerFab');
const isOpen = panel.classList.toggle('open');
fab.classList.toggle('active', isOpen);
if (isOpen) {
setTimeout(() => document.addEventListener('click', closePanelOutside, true), 0);
}
}

function closePanelOutside(e) {
const panel = document.getElementById('layerPanel');
const fab = document.getElementById('layerFab');
if (!panel.contains(e.target) && !fab.contains(e.target)) {
panel.classList.remove('open');
fab.classList.remove('active');
document.removeEventListener('click', closePanelOutside, true);
}
}

function createMarkerIcon(emoji) {
return L.divIcon({
className: '',
Expand Down
Loading