From 184b3004d82806f1b31c94701e75585fb8f2721b Mon Sep 17 00:00:00 2001 From: Hsieh Chin Fan Date: Fri, 11 Oct 2024 15:01:40 +0800 Subject: feat: implement crs in GeoLink Now GeoLink has the following format: geo:,?q=,&xy=,crs= When calling addMarker or updateCamera, only use [lon,lat] format --- src/dumbyUtils.mjs | 35 +++++++++++++++++++++++------------ 1 file changed, 23 insertions(+), 12 deletions(-) (limited to 'src/dumbyUtils.mjs') diff --git a/src/dumbyUtils.mjs b/src/dumbyUtils.mjs index 170cb16..2e71ee6 100644 --- a/src/dumbyUtils.mjs +++ b/src/dumbyUtils.mjs @@ -1,6 +1,8 @@ import LeaderLine from 'leader-line' import { insideWindow, insideParent } from './utils' +export const coordPattern = /^geo:([-]?[0-9.]+),([-]?[0-9.]+)/ + /** * focusNextMap. * @@ -100,11 +102,12 @@ const getMarkersFromMaps = link => { .filter(map => link.targets ? link.targets.includes(map.id) : true) .map(map => { const renderer = map.renderer - const markerTitle = `${link.targets ?? 'all'}@${link.xy}` + const markerTitle = `${link.targets ?? 'all'}@${link.dataset.xy}` + const lonLat = [Number(link.dataset.lon), Number(link.dataset.lat)] return map.querySelector(`.marker[title="${markerTitle}"]`) ?? renderer.addMarker({ - xy: link.xy, + xy: lonLat, title: markerTitle, type: link.type, }) @@ -138,21 +141,25 @@ const addLeaderLine = (link, target) => { */ export const createGeoLink = (link) => { const url = new URL(link.href) - const xyInParams = url.searchParams.get('xy')?.split(',')?.map(Number) - const xy = xyInParams ?? url?.href - ?.match(/^geo:([-]?[0-9.]+),([-]?[0-9.]+)/) + const params = new URLSearchParams(link.search) + const xyInParams = params.get('xy')?.split(',')?.map(Number) + const [lon, lat] = url.href + ?.match(coordPattern) ?.splice(1) ?.reverse() ?.map(Number) + const xy = xyInParams ?? [lon, lat] if (!xy || isNaN(xy[0]) || isNaN(xy[1])) return false // Geo information in link - link.url = url - link.xy = xy + link.dataset.xy = xy + link.dataset.lon = lon + link.dataset.lat = lat link.classList.add('with-leader-line', 'geolink') - link.targets = link.url.searchParams.get('id')?.split(',') ?? null - link.type = link.url.searchParams.get('type') ?? null + // TODO refactor as data attribute + link.targets = params.get('id')?.split(',') ?? null + link.type = params.get('type') ?? null link.lines = [] @@ -170,7 +177,11 @@ export const createGeoLink = (link) => { link.onclick = (event) => { event.preventDefault() removeLeaderLines(link) - getMarkersFromMaps(link).forEach(updateMapCameraByMarker(link.xy)) + getMarkersFromMaps(link) + .forEach(updateMapCameraByMarker([ + Number(link.dataset.lon), + Number(link.dataset.lat) + ])) } return true } @@ -229,9 +240,9 @@ const removeLeaderLines = link => { * @param {Number[]} xy * @return {Function} function */ -const updateMapCameraByMarker = xy => marker => { +const updateMapCameraByMarker = lonLat => marker => { const renderer = marker.closest('.mapclay')?.renderer - renderer.updateCamera({ center: xy }, true) + renderer.updateCamera({ center: lonLat }, true) } /** -- cgit v1.2.3-70-g09d2 From 2a7a840c25fcdb1653538514fb6609b0dea61b66 Mon Sep 17 00:00:00 2001 From: Hsieh Chin Fan Date: Fri, 11 Oct 2024 15:17:25 +0800 Subject: feat: add handler for invlid coordinates * prvent default onmouseover/onclick handler * set bg-color of GeoLink as gray * add title to suggest another CRS --- src/css/dumbymap.css | 6 ++++++ src/dumbyUtils.mjs | 6 +++++- src/dumbymap.mjs | 9 ++++++++- 3 files changed, 19 insertions(+), 2 deletions(-) (limited to 'src/dumbyUtils.mjs') diff --git a/src/css/dumbymap.css b/src/css/dumbymap.css index 52d0ded..7aff339 100644 --- a/src/css/dumbymap.css +++ b/src/css/dumbymap.css @@ -152,6 +152,12 @@ a[href^='http']:not(:has(img))::after, background-color: #9ee7ea; } + &[data-valid="false"] { + background-color: lightgray; + + opacity: 0.7; + } + &:hover, &.drag { background-image: none; diff --git a/src/dumbyUtils.mjs b/src/dumbyUtils.mjs index 2e71ee6..2f92c18 100644 --- a/src/dumbyUtils.mjs +++ b/src/dumbyUtils.mjs @@ -165,6 +165,8 @@ export const createGeoLink = (link) => { // LeaderLine link.onmouseover = () => { + if (link.dataset.valid === 'false') return + const anchors = getMarkersFromMaps(link) anchors .filter(isAnchorVisible) @@ -176,11 +178,13 @@ export const createGeoLink = (link) => { link.onmouseout = () => removeLeaderLines(link) link.onclick = (event) => { event.preventDefault() + if (link.dataset.valid === 'false') return + removeLeaderLines(link) getMarkersFromMaps(link) .forEach(updateMapCameraByMarker([ Number(link.dataset.lon), - Number(link.dataset.lat) + Number(link.dataset.lat), ])) } return true diff --git a/src/dumbymap.mjs b/src/dumbymap.mjs index 6602f29..974d4a3 100644 --- a/src/dumbymap.mjs +++ b/src/dumbymap.mjs @@ -179,7 +179,7 @@ export const generateMaps = (container, { /** Set CRS and GeoLinks */ register(proj4) - fromEPSGCode(crs).then(() => { + fromEPSGCode(crs).then(projection => { const transform = proj4(crs, 'EPSG:4326').forward Array.from(container.querySelectorAll(geoLinkSelector)) @@ -200,6 +200,13 @@ export const generateMaps = (container, { params.set('q', `${lat},${lon}`) link.search = params + if (projection.getUnits() === 'degrees' && + (lon > 180 || lon < -180 || lat > 90 || lat < -90) + ) { + link.dataset.valid = false + link.title = `Invalid Coordinate, maybe try another crs other than ${crs}` + } + return link }) .forEach(utils.createGeoLink) -- cgit v1.2.3-70-g09d2