feat: add handler for invlid coordinates

* prvent default onmouseover/onclick handler
* set bg-color of GeoLink as gray
* add title to suggest another CRS

3 files changed, 19 insertions, 2 deletions

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)