diff options
Diffstat (limited to 'main.js')
| -rw-r--r-- | main.js | 706 |
1 files changed, 462 insertions, 244 deletions
@@ -53,6 +53,8 @@ import RegularShape from 'ol/style/RegularShape.js'; import Stroke from 'ol/style/Stroke.js'; import Style from 'ol/style/Style.js'; +import Geolocation from 'ol/Geolocation.js'; + import proj4 from 'proj4'; import { get as getProjection } from 'ol/proj.js'; import { register as registerProjection } from 'ol/proj/proj4.js'; @@ -140,9 +142,6 @@ const [BASEMAP, MAP] = (function() { projection: PROJECTION, extent: EXTENT, showFullExtent: true, - /* center of the bbox of the Norrbotten and Västerbotten geometries */ - center: [694767.48, 7338176.57], - zoom: 1, enableRotation: false, resolutions: [1024, 512, 256, 128, 64, 32, 16, 8], constrainResolution: false, @@ -169,11 +168,16 @@ const CONTAINER_STOPEVENT = MAP.getViewport().getElementsByClassName('ol-overlay CONTAINER_STOPEVENT.appendChild(document.getElementById('zoom-control')); CONTAINER_STOPEVENT.appendChild(CONTAINER_MAP); CONTAINER_STOPEVENT.appendChild(document.getElementById('info-modal')); + CONTAINER_STOPEVENT.appendChild(document.getElementById('help-modal')); const info_backdrop = document.createElement('div'); CONTAINER_STOPEVENT.appendChild(info_backdrop); info_backdrop.id = 'info-modal-backdrop'; + const help_backdrop = document.createElement('div'); + CONTAINER_STOPEVENT.appendChild(help_backdrop); + help_backdrop.id = 'help-modal-backdrop'; + const age_filter = document.createElement('div'); age_filter.id = 'age-filter-modal'; age_filter.classList.add('modal'); @@ -341,6 +345,7 @@ if (window.location === window.parent.location) { btn.classList.add('btn', classInactive); btn.setAttribute('aria-label', btn.title); MAP.addControl(control); + control.element.id = 'fullscreen-toggle'; /* for the help dialog */ control.addEventListener('enterfullscreen', function() { /* dispose popover as entering fullscreen messes up its position */ @@ -424,85 +429,128 @@ if (window.location === window.parent.location) { }; } -/* info button */ +/* info and help buttons */ (function() { - const div = document.createElement('div'); - MENU.appendChild(div); - div.id = 'info-button'; - div.classList.add('ol-unselectable', 'ol-control'); + const add_button = function(x) { + const div = document.createElement('div'); + MENU.appendChild(div); + div.id = x.id + '-button'; + div.classList.add('ol-unselectable', 'ol-control'); - const btn = document.createElement('button'); - div.appendChild(btn); - btn.type = 'button'; - btn.setAttribute('aria-expanded', 'false'); - btn.title = 'Visa information'; - btn.setAttribute('aria-label', btn.title); - btn.classList.add('btn', 'btn-light'); + const btn = document.createElement('button'); + div.appendChild(btn); + btn.type = 'button'; + btn.setAttribute('aria-expanded', 'false'); + btn.title = x.title; + btn.setAttribute('aria-label', btn.title); + btn.classList.add('btn', 'btn-light'); - const i = document.createElement('i'); - btn.appendChild(i); - i.classList.add('bi', 'bi-info-lg'); + const i = document.createElement('i'); + btn.appendChild(i); + i.classList.add('bi', 'bi-' + x.bi); - const panel = document.getElementById('info-modal'); - const modal = new Modal(panel, { - backdrop: false, - }); + const panel = document.getElementById(x.id + '-modal'); + const modal = new Modal(panel, { + backdrop: false, + }); - const backdrop = document.getElementById('info-modal-backdrop'); - backdrop.onclick = function() { - modal.hide(); - }; + const backdrop = document.getElementById(x.id + '-modal-backdrop'); + backdrop.onclick = function() { + modal.hide(); + }; - panel.addEventListener('show.bs.modal', function() { - backdrop.classList.add('modal-backdrop', 'show'); - btn.setAttribute('aria-expanded', 'true'); - btn.classList.replace('btn-light', 'btn-dark'); - }); - panel.addEventListener('hide.bs.modal', function() { - /* XXX workaround for https://github.com/twbs/bootstrap/issues/41005#issuecomment-2585390544 */ - const activeElement = document.activeElement; - if (activeElement instanceof HTMLElement) { - activeElement.blur(); - } - }); - panel.addEventListener('hidden.bs.modal', function() { - btn.classList.replace('btn-dark', 'btn-light'); - btn.setAttribute('aria-expanded', 'false'); - backdrop.classList.remove('modal-backdrop', 'show'); - infoMetadataAccordions.forEach(function(x, idx) { - /* collapse all accordions */ - const body = x.element.parentNode.parentNode; - const name = 'info-accordion-collapse-' + idx; - if (body.id === name) { - body.classList.remove('show'); + panel.addEventListener('show.bs.modal', function() { + backdrop.classList.add('modal-backdrop', 'show'); + btn.setAttribute('aria-expanded', 'true'); + btn.classList.replace('btn-light', 'btn-dark'); + }); + panel.addEventListener('hide.bs.modal', function() { + /* XXX workaround for https://github.com/twbs/bootstrap/issues/41005#issuecomment-2585390544 */ + const activeElement = document.activeElement; + if (activeElement instanceof HTMLElement) { + activeElement.blur(); } - if (body.parentNode !== null) { - const headers = body.parentNode.getElementsByClassName('accordion-header'); - for (let i = 0; i < headers.length; i++) { - const buttons = headers[i].getElementsByClassName('accordion-button'); - for (let j = 0; j < buttons.length; j++) { - const btn = buttons[j]; - if (btn.getAttribute('data-bs-target') === '#' + name) { - btn.setAttribute('aria-expanded', 'false'); - btn.classList.add('collapsed'); - } + }); + + panel.addEventListener('hidden.bs.modal', function() { + btn.classList.replace('btn-dark', 'btn-light'); + btn.setAttribute('aria-expanded', 'false'); + backdrop.classList.remove('modal-backdrop', 'show'); + }); + + btn.onclick = function() { + modal.show(); + }; + + /* de-obfuscate email address */ + const CLASSNAME = 'email-address-b64'; + const ATTRNAME = 'data-mailto-b64'; + for (const a of panel.getElementsByClassName(CLASSNAME)) { + if (a.tagName.toLowerCase() === 'a' && a.hasAttribute(ATTRNAME)) { + let href = 'mailto:'; + for (const part of a.getAttribute(ATTRNAME).split(/\s+/)) { + switch (part) { + case '__AT__': + href += '@'; + break; + case '__DOT__': + href += '.'; + break; + default: + href += atob(part); } } + a.classList.remove(CLASSNAME); + a.removeAttribute(ATTRNAME); + a.href = href; } + } + + return [panel, btn, modal]; + }; + + /* info button */ + (function() { + const [panel, btn, modal] = add_button({ + id: 'info', + title: 'Källor och licensinformation', + bi: 'info-lg', }); - }); - const dateFormatter = new Intl.DateTimeFormat(LOCALE); - btn.onclick = function() { - infoMetadataAccordions.forEach((x) => x.element.replaceChildren()); - modal.show(); - Promise.allSettled(Object.entries(mapLayers).map(function([grp,lyr]) { - if (lyr?.getSource() instanceof VectorTile) { - const url = lyr.getSource().getUrls()[0]; - if (url == null || url.length <= 16 || url.substr(url.length - 16) !== '/{z}/{x}/{y}.pbf') { - return new Promise(() => { throw new Error(`Invalid URL ${url}`); }); + panel.addEventListener('hidden.bs.modal', function() { + infoMetadataAccordions.forEach(function(x, idx) { + /* collapse all accordions */ + const body = x.element.parentNode.parentNode; + const name = 'info-accordion-collapse-' + idx; + if (body.id === name) { + body.classList.remove('show'); + } + if (body.parentNode !== null) { + const headers = body.parentNode.getElementsByClassName('accordion-header'); + for (let i = 0; i < headers.length; i++) { + const buttons = headers[i].getElementsByClassName('accordion-button'); + for (let j = 0; j < buttons.length; j++) { + const btn = buttons[j]; + if (btn.getAttribute('data-bs-target') === '#' + name) { + btn.setAttribute('aria-expanded', 'false'); + btn.classList.add('collapsed'); + } + } + } + } + }); + }); + + const dateFormatter = new Intl.DateTimeFormat(LOCALE); + btn.onclick = function() { + infoMetadataAccordions.forEach((x) => x.element.replaceChildren()); + modal.show(); + Promise.allSettled(Object.entries(mapLayers).map(function([grp,lyr]) { + const baseurl = lyr?.getSource?.()?.get?.('baseurl'); + if (baseurl == null) { + return new Promise(() => { throw new Error(`Unknown source for "${grp}"`); }); } - return fetch(url.substr(0, url.length - 16) + '/metadata.json') + return fetch(new URL('metadata.json', baseurl)) .then(function(resp0) { if (resp0.status === 200) { return resp0.json().then((x) => [grp,x]); @@ -510,152 +558,213 @@ if (window.location === window.parent.location) { throw new Error(`${resp0.url} [${resp0.status}]`); } }); - } - return new Promise(() => { throw new Error(`Unknown source for "${grp}"`); }); - })) - .then(function(rs) { - const metadata = Object.fromEntries(rs.filter(function(r) { - if (r.status === 'fulfilled') { - return true; - } else if (r.status === 'rejected') { - console.log(r.reason); - } - return false; - }).map((r) => r.value)); - - infoMetadataAccordions.forEach(function(x) { - const ul = x.element; - const groupnames = new Set(); - const last_updated = []; - x.items.forEach(function([groupname]) { - const layer_group = metadata[groupname]; - if (layer_group == null) { - return; - } - if (!groupnames.has(groupname)) { - groupnames.add(groupname); - if (layer_group.last_updated != null) { - last_updated.push(layer_group.last_updated); - } - } - }); - if (last_updated.length > 0) { - /* show creation time of the MVT layers */ - const li = document.createElement('li'); - li.classList.add('list-group-item', 'text-muted'); - ul.appendChild(li); - const i = document.createElement('i'); - i.classList.add('bi', 'bi-map'); - li.appendChild(i); - const t = document.createTextNode( - ' Lokalt skikt (vectiler) genererades ' + - last_updated - .sort() - .map((ts) => dateFormatter.format(new Date(ts))) - .join('; ') + '.' - ); - li.appendChild(t); - } - - const source_files = new Set(); - x.items.forEach(function([groupname, layername]) { - /* for each source file associated with the accordion header, show copyright, license and timing information */ - const layer_group = metadata[groupname]; - if (layer_group?.layers == null || layer_group?.source_files == null) { - return; + })) + .then(function(rs) { + const metadata = Object.fromEntries(rs.filter(function(r) { + if (r.status === 'fulfilled') { + return true; + } else if (r.status === 'rejected') { + console.log(r.reason); } - const def = layer_group.layers[layername]; - if (def?.source_files == null) { - return; - } - def.source_files.forEach(function(source_file) { - if (source_files.has(source_file)) { + return false; + }).map((r) => r.value)); + + infoMetadataAccordions.forEach(function(x) { + const ul = x.element; + const groupnames = new Set(); + const last_updated = []; + x.items.forEach(function([groupname]) { + const layer_group = metadata[groupname]; + if (layer_group == null) { return; } - const x = layer_group.source_files[source_file]; - source_files.add(source_file); - + if (!groupnames.has(groupname)) { + groupnames.add(groupname); + if (layer_group.last_updated != null) { + last_updated.push(layer_group.last_updated); + } + } + }); + if (last_updated.length > 0) { + /* show creation time of the MVT layers */ const li = document.createElement('li'); - li.classList.add('list-group-item'); + li.classList.add('list-group-item', 'text-muted'); ul.appendChild(li); - const h = document.createElement('h6'); - li.appendChild(h); - if (x.description != null) { - const t = document.createTextNode(x.description); - h.appendChild(t); - } + const i = document.createElement('i'); + i.classList.add('bi', 'bi-map'); + li.appendChild(i); + const t = document.createTextNode( + ' Lokalt skikt (vectiler) genererades ' + + last_updated + .sort() + .map((ts) => dateFormatter.format(new Date(ts))) + .join('; ') + '.' + ); + li.appendChild(t); + } - if (x.copyright != null) { - const p = document.createElement('p'); - li.appendChild(p); - const t = document.createTextNode(x.copyright); - p.appendChild(t); + const source_files = new Set(); + x.items.forEach(function([groupname, layername]) { + /* for each source file associated with the accordion header, show copyright, license and timing information */ + const layer_group = metadata[groupname]; + if (layer_group?.layers == null || layer_group?.source_files == null) { + return; } + const def = layer_group.layers[layername]; + if (def?.source_files == null) { + return; + } + def.source_files.forEach(function(source_file) { + if (source_files.has(source_file)) { + return; + } + const x = layer_group.source_files[source_file]; + source_files.add(source_file); + + const li = document.createElement('li'); + li.classList.add('list-group-item'); + ul.appendChild(li); + const h = document.createElement('h6'); + li.appendChild(h); + if (x.description != null) { + const t = document.createTextNode(x.description); + h.appendChild(t); + } - if (x.license != null) { - const p = document.createElement('p'); - li.appendChild(p); - p.appendChild(document.createTextNode('Licensvillkor: ')); - const t = document.createTextNode(x.license.name); - if (x.license.url == null) { + if (x.copyright != null) { + const p = document.createElement('p'); + li.appendChild(p); + const t = document.createTextNode(x.copyright); p.appendChild(t); - } else { + } + + if (x.license != null) { + const p = document.createElement('p'); + li.appendChild(p); + p.appendChild(document.createTextNode('Licensvillkor: ')); + const t = document.createTextNode(x.license.name); + if (x.license.url == null) { + p.appendChild(t); + } else { + const a = document.createElement('a'); + a.href = x.license.url; + a.target = '_blank'; + a.appendChild(t); + p.appendChild(a); + } + } + + if (x.product_url != null) { + const p = document.createElement('p'); + li.appendChild(p); + const t = document.createTextNode('Produktlänk '); + const i = document.createElement('i'); + i.classList.add('bi', 'bi-box-arrow-up-right'); const a = document.createElement('a'); - a.href = x.license.url; + a.href = x.product_url; a.target = '_blank'; a.appendChild(t); + a.appendChild(i); p.appendChild(a); } - } - - if (x.product_url != null) { - const p = document.createElement('p'); - li.appendChild(p); - const t = document.createTextNode('Produktlänk '); - const i = document.createElement('i'); - i.classList.add('bi', 'bi-box-arrow-up-right'); - const a = document.createElement('a'); - a.href = x.product_url; - a.target = '_blank'; - a.appendChild(t); - a.appendChild(i); - p.appendChild(a); - } - if (x.last_modified != null) { - const p = document.createElement('p'); - p.classList.add('small', 'text-muted'); - li.appendChild(p); - const i = document.createElement('i'); - i.classList.add('bi', 'bi-file-earmark-code'); - p.appendChild(i); - p.appendChild(document.createTextNode(' ')); - const t0 = document.createTextNode('Källfil'); - if (x.url == null) { - p.appendChild(t0); - } else { - const a = document.createElement('a'); - p.appendChild(a); + if (x.last_modified != null) { + const p = document.createElement('p'); + p.classList.add('small', 'text-muted'); + li.appendChild(p); const i = document.createElement('i'); - i.classList.add('bi', 'bi-box-arrow-up-right'); - a.appendChild(t0); - a.appendChild(document.createTextNode(' ')); - a.appendChild(i); - a.href = x.url; - a.target = '_blank'; + i.classList.add('bi', 'bi-file-earmark-code'); + p.appendChild(i); + p.appendChild(document.createTextNode(' ')); + const t0 = document.createTextNode('Källfil'); + if (x.url == null) { + p.appendChild(t0); + } else { + const a = document.createElement('a'); + p.appendChild(a); + const i = document.createElement('i'); + i.classList.add('bi', 'bi-box-arrow-up-right'); + a.appendChild(t0); + a.appendChild(document.createTextNode(' ')); + a.appendChild(i); + a.href = x.url; + a.target = '_blank'; + } + const t1 = document.createTextNode(' ändrades senast '); + p.appendChild(t1); + const td = document.createTextNode(dateFormatter.format(new Date(x.last_modified))); + p.appendChild(td); + const t2 = document.createTextNode('.'); + p.appendChild(t2); } - const t1 = document.createTextNode(' ändrades senast '); - p.appendChild(t1); - const td = document.createTextNode(dateFormatter.format(new Date(x.last_modified))); - p.appendChild(td); - const t2 = document.createTextNode('.'); - p.appendChild(t2); - } + }); }); }); }); - }); - }; + }; + })(); + + /* help button */ + (function() { + const [panel] = add_button({ + id: 'help', + title: 'Hjälp med att använda kartan', + bi: 'question-circle', + }); + + /* Use the text from the .html file but ensure that buttons are + * listed in the same order as the menu, and spell titles out. This + * avoids duplication and avoids that things would get out of sync */ + const button_map = {}; + const ol = panel.querySelector('#help-describe-functions'); + if (ol != null && ol.tagName.toLowerCase() === 'ol') { + for (const li of ol.children) { + const id = li.getAttribute('data-for-button'); + if (id == null || id === '') { + continue; + } + button_map[id] = li; + } + } + + for (const node of MENU.children) { + if (node.id == null || node.id === '') { + continue + } + const btn = node.getElementsByTagName('button')[0]; + if (btn == null || btn.tagName.toLowerCase() !== 'button') { + continue; + } + const btn2 = btn.cloneNode(true); + const title = btn2.title; + btn2.id = btn2.title = ''; + for (const attr of btn.attributes) { + if (attr.name.toLowerCase().startsWith('aria-') || attr.name === 'id' || attr.name === 'title') { + btn2.removeAttribute(attr.name); + } + } + + const h = document.createElement('h6'); + h.classList.add('help-button-description'); + h.appendChild(btn2); + if (title != null && title != '') { + const t = document.createTextNode(title) + h.appendChild(t); + } + btn2.classList.add('help-button'); + + ol.insertAdjacentElement('beforebegin', h); + + const li = button_map[node.id]; + if (li != null) { + /* move <li>'s children (paragraphs) to the main text */ + while (li.children.length > 0) { + ol.insertAdjacentElement('beforebegin', li.firstElementChild); + } + } + } + ol.remove(); + })(); })(); /* we're all set, show the control container now */ @@ -735,6 +844,35 @@ const ageFilterSettings = (function() { * WebGL, which is currently blocking on https://github.com/openlayers/openlayers/issues/15807 * and https://github.com/openlayers/openlayers/issues/16246 */ const LAYERS = Object.seal({ + adm: { + lansyta: { + legend: { zoomLevel: 3, type: 'linestring' }, + style: [1.5, 2, 3, 3, 4, 4, 6, 6, 8, 8, 10, 10].map(function(width) { + return new Style({ + zIndex: 0, + fill: null, + stroke: new Stroke({ + width: width, + color: [212, 147, 208, 1], + }), + }); + }), + }, + kommunyta: { + legend: { zoomLevel: 3, type: 'linestring' }, + style: [2, 2, 3, 3, 4, 4, 6, 6, 8, 8, 10, 10].map(function(width) { + return new Style({ + zIndex: 0, + fill: null, + stroke: new Stroke({ + width: width/2, + color: [212, 147, 208, 1], + }), + }); + }), + }, + }, + mrr: { appr_ec: { legend: { zoomLevel: 4 }, @@ -2642,15 +2780,57 @@ const LAYERS = Object.seal({ const STYLES = Object.seal(Object.fromEntries(Object.entries(LAYERS).map(([k,ls]) => [k, Object.seal(Object.fromEntries(Object.keys(ls).map((l) => [l, null])))]))); (function() { + const view = MAP.getView(); const params = new URLSearchParams(window.location.hash.substring(1)); - const x = parseFloat(params.get('x')); - const y = parseFloat(params.get('y')); + const x = parseFloat(params.get('x')), + y = parseFloat(params.get('y')), + z = parseFloat(params.get('z')); if (!isNaN(x) && !isNaN(y)) { - MAP.getView().setCenter([x, y]); - } - const z = parseFloat(params.get('z')); - if (!isNaN(z)) { - MAP.getView().setZoom(z); + view.setCenter([x, y]); + view.setZoom(isNaN(z) ? 1 : z); + } else { + /* center of the bbox of the Norrbotten and Västerbotten geometries */ + view.setCenter([694767.48, 7338176.57]); + view.setZoom(1); + const geolocation = new Geolocation({ + projection: view.getProjection(), + tracking: true, + }); + const evt_key = geolocation.on('change:position', function() { + const pos = geolocation.getPosition(); + if (pos == null) { + return; + } + /* ignore further geolocation position changes */ + unByKey(evt_key); + geolocation.setTracking(false); + + const params2 = new URLSearchParams(window.location.hash.substring(1)); + /* ignore geolocation result if coordinates have changed meanwhile */ + if (params2.has('x') || params2.has('y')) { + return; + } + /* ignore geolocation result if not within extent */ + if (EXTENT[0] > pos[0] || pos[0] > EXTENT[2] || EXTENT[1] > pos[1] || pos[1] > EXTENT[3]) { + return; + } + view.setCenter(pos); + params2.set('x', pos[0].toFixed(2).replace(TRAILING_ZEROES, '')); + params2.set('y', pos[1].toFixed(2).replace(TRAILING_ZEROES, '')); + if (!params2.has('z')) { + const accuracy = geolocation.getAccuracy(); + if (accuracy == null || accuracy < 0) { + view.setZoom(Math.max(view.getMinZoom(), 0)); + } else { + /* infer resolution from accuracy, up to zoom level 7 (8px/m) */ + const [width, height] = MAP.getSize(); + const res = 8. * accuracy / Math.min(width, height); + view.setResolution(Math.max(res, view.getResolutionForZoom(7))); + } + params2.set('z', view.getZoom().toFixed(3).replace(TRAILING_ZEROES, '')); + } + location.hash = '#' + params2.toString(); + }); } if (!params.has('layers') || (!params.get('layers').match(/^\s*$/) && /* compat redirect/layer subst for old non-hierachical names */ @@ -2748,8 +2928,6 @@ MAP.getView().on('change', function(event) { /* add layers to the map */ const mapLayers = (function() { - const baseurl = '/'; - const xyz = '/{z}/{x}/{y}.pbf'; const tileGrid = createXYZ({ extent: EXTENT, tileSize: 1024, @@ -2766,7 +2944,7 @@ const mapLayers = (function() { /* Note: layers are added in the order below, so leave SvK and * misc at the end so they show up on top of suface features */ const rasterLayers = ['kskog']; - const vectorLayers = ['nv', 'mrr', 'skydd', 'ren', 'ri', 'avverk', 'vbk', 'svk', 'misc']; + const vectorLayers = ['adm', 'nv', 'mrr', 'skydd', 'ren', 'ri', 'avverk', 'vbk', 'svk', 'misc']; const canFilterByAge = ['avverk', 'mrr', 'vbk']; /* layers for which features are dated */ const ret = {}; @@ -2774,19 +2952,21 @@ const mapLayers = (function() { rasterLayers.forEach((k) => ret[k] = null); } else { rasterLayers.forEach(function(k) { + const baseurl = new URL('/raster/' + k + '/', window.location.toString()).toString(); + const source = new GeoTIFF({ + sources: [{ url: baseurl + encodeURIComponent(k) + '.tiff' }], + normalize: false, + convertToRGB: false, + wrapX: false, + interpolate: false, + /* use the projection found in the source's metadata */ + }); + /* GeoTIFF doesn't allow retrieving the URL later, so we manually store the baseurl instead */ + source.set('baseurl', baseurl, true); ret[k] = new TileLayerGL({ /* Naturvårdsverket has a WMS server we could use instead, but by serving it ourselves * we can filter on he various kskog classes */ - source: new GeoTIFF({ - sources: [{ - url: baseurl + 'raster/' + k + '.tiff', - }], - normalize: false, - convertToRGB: false, - wrapX: false, - interpolate: false, - /* use the projection found in the source's metadata */ - }), + source: source, visible: false, style: null, /* filled later */ }); @@ -2797,15 +2977,18 @@ const mapLayers = (function() { vectorLayers.forEach(function(k) { const canFilterByAge0 = canFilterByAge.includes(k); const styles = STYLES[k]; + const baseurl = new URL('/tiles/' + k + '/', window.location.toString()).toString(); + const source = new VectorTile({ + url: baseurl + '{z}/{x}/{y}.pbf', + format: new MVT(), + projection: PROJECTION, + wrapX: false, + transition: 0, + tileGrid: tileGrid, + }); + source.set('baseurl', baseurl, true); ret[k] = new VectorTileLayer({ - source: new VectorTile({ - url: baseurl + 'tiles/' + k + xyz, - format: new MVT(), - projection: PROJECTION, - wrapX: false, - transition: 0, - tileGrid: tileGrid, - }), + source: source, /* XXX switch to 'hybrid' if there are perf issues; but that seems to * put lines above points regardless of their respective z-index */ renderMode: 'hybrid', @@ -3246,6 +3429,21 @@ const layerHierarchy = [ }, ] }, + { + text: 'Administrativa gränser', + type: 'switch', + collapse_children: true, + children: [ + { + text: 'Länsgränser', + layer: 'adm.lansyta', + }, + { + text: 'Kommungränser', + layer: 'adm.kommunyta', + }, + ], + }, ]; /* legend panel */ @@ -3305,8 +3503,11 @@ const layerHierarchy = [ console.log(`Could not find symbol for layer ${layer}, skipping`); return; } - const legend = LAYERS[layerGroup][layerName]?.legend ?? {}; - if (canvas == null || !legend.reuse_canvas) { + const legend = LAYERS[layerGroup][layerName]?.legend; + if (legend === null) { + return; /* layer has opted out from legend */ + } + if (canvas == null || !legend?.reuse_canvas) { canvas = document.createElement('canvas'); div.appendChild(canvas); render = toContext(canvas.getContext('2d'), @@ -3324,9 +3525,9 @@ const layerHierarchy = [ else if (mapLayers[layerGroup].getSource() instanceof VectorTile) { /* vector source */ const style = Array.isArray(LAYERS[layerGroup][layerName].style) ? - LAYERS[layerGroup][layerName].style[legend.zoomLevel ?? 5] : + LAYERS[layerGroup][layerName].style[legend?.zoomLevel ?? 5] : LAYERS[layerGroup][layerName].style; - const legend_type = legend.type ?? 'polygon'; + const legend_type = legend?.type ?? 'polygon'; if (legend_type === 'point' && style.getImage(1) instanceof Icon && style.getImage(1).getSrc()) { /* use a new <img> element since .setStyle() returns the same one and doesn't work in that case */ const div2 = document.createElement('div'); @@ -3356,7 +3557,7 @@ const layerHierarchy = [ } elem._legend = li; - if (elem.children !== undefined && elem.children.length > 0) { + if (elem.children != null && elem.children.length > 0) { if (classes.length > 0) { li.classList.add(classes[0]); classes = classes.slice(1); @@ -3402,7 +3603,7 @@ const infoMetadataAccordions = []; elem._layers = elem.layer === undefined ? [] : Array.isArray(elem.layer) ? elem.layer : [elem.layer]; - if (elem.children !== undefined && elem.children.length > 0) { + if (elem.children != null && elem.children.length > 0) { collectLayers(elem.children); elem.children.forEach(function(child) { child._layers.forEach((l) => elem._layers.push(l)); @@ -3432,7 +3633,7 @@ const infoMetadataAccordions = []; elem._legend.classList.add('d-none'); } } - if (elem.children !== undefined && elem.children.length > 0) { + if (elem.children != null && elem.children.length > 0) { setIndeterminateAndChecked(elem.children); } }); @@ -3507,7 +3708,7 @@ const infoMetadataAccordions = []; let layerId = 0; const addAccordionGroup = function(parentNode, children) { const ul = document.createElement('ul'); - parentNode.appendChild(ul); + parentNode?.appendChild?.(ul); ul.classList.add('list-group', 'list-group-flush'); children.forEach(function(child) { @@ -3533,7 +3734,7 @@ const infoMetadataAccordions = []; const textNode = document.createTextNode(child.text); label.appendChild(textNode); - if (child.children !== undefined && child.children.length > 0) { + if (child.children != null && child.children.length > 0) { addAccordionGroup(li, child.children); } @@ -3588,8 +3789,18 @@ const infoMetadataAccordions = []; const text0 = document.createTextNode(x.text); label0.appendChild(text0); - if (x.children === undefined || x.children.length === 0) { - item.replaceChild(span0, header); + if (x.children == null || x.children.length === 0 || x.collapse_children) { + span0.removeAttribute('data-bs-toggle'); + span0.removeAttribute('data-bs-target'); + item.replaceChildren(span0); + if (x.type === 'switch') { + span0.classList.add('form-switch'); + input0.setAttribute('role', 'switch'); + } + if (x.children != null && x.children.length > 0) { + /* create inputs for the hash param logic but don't add them to the panel */ + addAccordionGroup(null, x.children); + } } else { const body = document.createElement('div'); collapse.appendChild(body); @@ -3979,7 +4190,7 @@ const infoMetadataAccordions = []; (function() { const div = document.createElement('div'); - div.classList.add('measure-value', 'border-secondary', 'rounded-2'); + div.classList.add('measure-value'); body.appendChild(div); const span0 = document.createElement('span'); span0.appendChild(value); @@ -4572,6 +4783,16 @@ const disposePopover = (function() { fields: mapFields(fieldMap, [ 'NAMN', 'geom_area' ]), }; + layers.skydd.biosfarsomraden = { + title: 'Biosfärsområden (UNESCO)', + fields: [ + { key: 'SKYDDSTYP', desc: 'Skyddstyp' }, + { key: 'NAMN', desc: 'Namn' }, + { key: 'LINK', desc: 'Länk', fn: formatLink }, + fieldMap.geom_area, + ], + }; + layers.skydd.naturvardsavtal = { title: 'Naturvårdsavtal (Naturvårdsverket, Länsstyrelsen)', fields: [ @@ -5215,8 +5436,7 @@ const disposePopover = (function() { popover.dispose(); } - const size = event.map.getSize(); - if (size[0] < 576 || size[1] < 576) { + if (window.innerWidth < 200) { return; /* skip popover if the map is too small */ } @@ -5238,7 +5458,7 @@ const disposePopover = (function() { const layerGroup = layer.get('layerGroup'); const layerName = feature.getProperties().layer; mapSources[layerGroup] ??= layer.getSource(); - const def = layerName != null ? layers[layerGroup][layerName] : null; + const def = layerName != null ? layers[layerGroup]?.[layerName] : null; if (def?.fields == null) { /* skip layers which didn't opt-in for popover */ return false; @@ -5860,13 +6080,11 @@ const ageFilterSetActive = (function() { .forEach((lyr) => lyr.changed()); }; const setter = function(active) { - if (ageFilterSettings._active !== active) { - if (active) { - ageFilterSettings.setupMinMax(); - } - ageFilterSettings._active = active; - changed(); + if (active) { + ageFilterSettings.setupMinMax(); } + ageFilterSettings._active = active; + changed(); if (active && ageFilterSettings.type === 'relative') { if (timeoutID == null) { timeoutID = setTimeout(fun, getDelay(state)[0]); |