From f027de5d6f8f0b0e8acee336e82330b51f61ca69 Mon Sep 17 00:00:00 2001 From: Jesse Winton Date: Tue, 24 Sep 2024 16:14:43 -0400 Subject: [PATCH 01/27] first pass --- package.json | 1 + pnpm-lock.yaml | 49 ++++++++++++++++++++++++ src/routes/globe/(components)/Map.svelte | 38 ++++++++++++++++++ src/routes/globe/+page.svelte | 8 ++++ src/routes/globe/+page.ts | 1 + 5 files changed, 97 insertions(+) create mode 100644 src/routes/globe/(components)/Map.svelte create mode 100644 src/routes/globe/+page.svelte create mode 100644 src/routes/globe/+page.ts diff --git a/package.json b/package.json index dd7b381565..989baf26cf 100644 --- a/package.json +++ b/package.json @@ -51,6 +51,7 @@ "cva": "npm:class-variance-authority@^0.7.0", "date-fns": "^3.6.0", "dequal": "^2.0.3", + "dotted-map": "^2.2.3", "embla-carousel": "^8.1.5", "embla-carousel-svelte": "^8.1.5", "embla-carousel-wheel-gestures": "^8.0.1", diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 642c1e9e34..773845ed44 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -87,6 +87,9 @@ importers: dequal: specifier: ^2.0.3 version: 2.0.3 + dotted-map: + specifier: ^2.2.3 + version: 2.2.3 embla-carousel: specifier: ^8.1.5 version: 8.1.8 @@ -1493,6 +1496,15 @@ packages: '@tsbb/copy-template-dir@1.4.0': resolution: {integrity: sha512-WXezrpwkm+JGoH5eh/7bngabXriDe7bhqCATWV6e+um8Qw0nNCkE4hfQ791CoiIdSe4LLyzoIfomwH1kR0GYvQ==} + '@turf/boolean-point-in-polygon@6.5.0': + resolution: {integrity: sha512-DtSuVFB26SI+hj0SjrvXowGTUCHlgevPAIsukssW6BG5MlNSBQAo70wpICBNJL6RjukXg8d2eXaAWuD/CqL00A==} + + '@turf/helpers@6.5.0': + resolution: {integrity: sha512-VbI1dV5bLFzohYYdgqwikdMVpe7pJ9X3E+dlr425wa2/sMJqYDhTO++ec38/pcPvPE6oD9WEEeU3Xu3gza+VPw==} + + '@turf/invariant@6.5.0': + resolution: {integrity: sha512-Wv8PRNCtPD31UVbdJE/KVAWKe7l6US+lJItRR/HOEW3eh+U/JwRCSUl/KZ7bmjM/C+zLNoreM2TU6OoLACs4eg==} + '@types/body-parser@1.19.5': resolution: {integrity: sha512-fB3Zu92ucau0iQ0JMCFQE7b/dv8Ot07NI3KaZIkIUNXq82k4eBAqUaneXfleGY9JWskeS9y+u0nXMyspcuQrCg==} @@ -2188,6 +2200,9 @@ packages: resolution: {integrity: sha512-ZmdL2rui+eB2YwhsWzjInR8LldtZHGDoQ1ugH85ppHKwpUHL7j7rN0Ti9NCnGiQbhaZ11FpR+7ao1dNsmduNUg==} engines: {node: '>=12'} + dotted-map@2.2.3: + resolution: {integrity: sha512-8hyOOHHLLVCcCisM3yb9hqp+3bJ7TSMcr1SfrUw8Wxp5UMqih35jIvUyagweCooJbz/EH1nC9GGuPysh7+YlAg==} + eastasianwidth@0.2.0: resolution: {integrity: sha512-I88TYZWc9XiYHRQ4/3c5rjjfgkjhLyW2luGIheGERbNQ6OY7yTybanSpDXZa8y7VUP9YmDcYa+eyq4ca7iLqWA==} @@ -2967,6 +2982,9 @@ packages: resolution: {integrity: sha512-8q7VEgMJW4J8tcfVPy8g09NcQwZdbwFEqhe/WZkoIzjn/3TGDwtOCYtXGxA3O8tPzpczCCDgv+P2P5y00ZJOOg==} engines: {node: '>= 8'} + mgrs@1.0.0: + resolution: {integrity: sha512-awNbTOqCxK1DBGjalK3xqWIstBZgN6fxsMSiXLs9/spqWkF2pAhb2rrYCFSsr1/tT7PhcDGjZndG8SWYn0byYA==} + microbuffer@1.0.0: resolution: {integrity: sha512-O/SUXauVN4x6RaEJFqSPcXNtLFL+QzJHKZlyDVYFwcDDRVca3Fa/37QXXC+4zAGGa4YhHrHxKXuuHvLDIQECtA==} @@ -3527,6 +3545,9 @@ packages: resolution: {integrity: sha512-7PiHtLll5LdnKIMw100I+8xJXR5gW2QwWYkT6iJva0bXitZKa/XMrSbdmg3r2Xnaidz9Qumd0VPaMrZlF9V9sA==} engines: {node: '>=0.4.0'} + proj4@2.12.1: + resolution: {integrity: sha512-vmhP3hmstjXjzFwg8QXJwpoj4n7GVrXk3ZW3DzNK/Ur4cuwXq7ZiMXaWYvLYLQbX8n4MXgbwTr4lthOUZltBpA==} + promise-inflight@1.0.1: resolution: {integrity: sha512-6zWPyEOFaQBJYcGMHBKTKJ3u6TBsnMFOIZSa6ce1e/ZrrsOlnHRHbabMjLiBYKp+n44X9eUI6VUPaukCXHuG4g==} peerDependencies: @@ -4257,6 +4278,9 @@ packages: wide-align@1.1.5: resolution: {integrity: sha512-eDMORYaPNZ4sQIuuYPDHdQvf4gyCF9rEEV/yPxGfwPkRodwEgiMUUXTx/dex+Me0wxx53S+NgUHaP7y3MGlDmg==} + wkt-parser@1.3.3: + resolution: {integrity: sha512-ZnV3yH8/k58ZPACOXeiHaMuXIiaTk1t0hSUVisbO0t4RjA5wPpUytcxeyiN2h+LZRrmuHIh/1UlrR9e7DHDvTw==} + word-wrap@1.2.5: resolution: {integrity: sha512-BN22B5eaMMI9UMtjrGd5g5eCYPpCPDUy0FJXbYsaT5zYxjFOckS53SQDE3pWkVoWpHXVb3BrYcEN4Twa55B5cA==} engines: {node: '>=0.10.0'} @@ -5829,6 +5853,17 @@ snapshots: readdirp: 3.6.0 run-parallel: 1.2.0 + '@turf/boolean-point-in-polygon@6.5.0': + dependencies: + '@turf/helpers': 6.5.0 + '@turf/invariant': 6.5.0 + + '@turf/helpers@6.5.0': {} + + '@turf/invariant@6.5.0': + dependencies: + '@turf/helpers': 6.5.0 + '@types/body-parser@1.19.5': dependencies: '@types/connect': 3.4.38 @@ -6572,6 +6607,11 @@ snapshots: dotenv@16.4.5: {} + dotted-map@2.2.3: + dependencies: + '@turf/boolean-point-in-polygon': 6.5.0 + proj4: 2.12.1 + eastasianwidth@0.2.0: {} ejs@3.1.10: @@ -7472,6 +7512,8 @@ snapshots: merge2@1.4.1: {} + mgrs@1.0.0: {} + microbuffer@1.0.0: {} micromatch@4.0.7: @@ -7953,6 +7995,11 @@ snapshots: progress@2.0.3: {} + proj4@2.12.1: + dependencies: + mgrs: 1.0.0 + wkt-parser: 1.3.3 + promise-inflight@1.0.1: {} promise-retry@2.0.1: @@ -8746,6 +8793,8 @@ snapshots: dependencies: string-width: 4.2.3 + wkt-parser@1.3.3: {} + word-wrap@1.2.5: {} wrap-ansi@7.0.0: diff --git a/src/routes/globe/(components)/Map.svelte b/src/routes/globe/(components)/Map.svelte new file mode 100644 index 0000000000..baa3e3008a --- /dev/null +++ b/src/routes/globe/(components)/Map.svelte @@ -0,0 +1,38 @@ + + +
+ + {#each points as point} + + {/each} + +
diff --git a/src/routes/globe/+page.svelte b/src/routes/globe/+page.svelte new file mode 100644 index 0000000000..9f5fc289f5 --- /dev/null +++ b/src/routes/globe/+page.svelte @@ -0,0 +1,8 @@ + + +
+ +
diff --git a/src/routes/globe/+page.ts b/src/routes/globe/+page.ts new file mode 100644 index 0000000000..a3d15781a7 --- /dev/null +++ b/src/routes/globe/+page.ts @@ -0,0 +1 @@ +export const ssr = false; From 7174e460fd9646b029f3678376a8311212087d72 Mon Sep 17 00:00:00 2001 From: Jesse Winton Date: Tue, 24 Sep 2024 18:23:18 -0400 Subject: [PATCH 02/27] basic map layout and points --- src/routes/globe/(components)/Map.svelte | 100 ++++++++++++++++++++--- 1 file changed, 89 insertions(+), 11 deletions(-) diff --git a/src/routes/globe/(components)/Map.svelte b/src/routes/globe/(components)/Map.svelte index baa3e3008a..6f8373bbe3 100644 --- a/src/routes/globe/(components)/Map.svelte +++ b/src/routes/globe/(components)/Map.svelte @@ -1,4 +1,5 @@ -
- - {#each points as point} - - {/each} - +
+
+ + {#each points as point} + + {/each} + +
From 78f31d5f840b4b1c2e8bf8e006e93c65c6942837 Mon Sep 17 00:00:00 2001 From: Jesse Winton Date: Wed, 25 Sep 2024 10:28:41 -0400 Subject: [PATCH 03/27] Update Map.svelte --- src/routes/globe/(components)/Map.svelte | 48 ++++++++++++++---------- 1 file changed, 28 insertions(+), 20 deletions(-) diff --git a/src/routes/globe/(components)/Map.svelte b/src/routes/globe/(components)/Map.svelte index 6f8373bbe3..c01c23319e 100644 --- a/src/routes/globe/(components)/Map.svelte +++ b/src/routes/globe/(components)/Map.svelte @@ -1,6 +1,5 @@
- + {#each points as point} - + + {/each} + {#each pins as pin} + {/each}
From be71b3c3fe651bd86d25702ed5d8fa65d6322d7e Mon Sep 17 00:00:00 2001 From: Jesse Winton Date: Fri, 27 Sep 2024 11:19:12 -0400 Subject: [PATCH 04/27] tweak the map --- package.json | 1 + pnpm-lock.yaml | 15 ++++++ src/routes/globe/(components)/Globe.svelte | 58 ++++++++++++++++++++++ src/routes/globe/(components)/Map.svelte | 23 +++++++++ src/routes/globe/mouse-position.ts | 13 +++++ 5 files changed, 110 insertions(+) create mode 100644 src/routes/globe/(components)/Globe.svelte create mode 100644 src/routes/globe/mouse-position.ts diff --git a/package.json b/package.json index 989baf26cf..d3db2d4009 100644 --- a/package.json +++ b/package.json @@ -48,6 +48,7 @@ "@typescript-eslint/eslint-plugin": "^7.13.1", "@typescript-eslint/parser": "^7.13.1", "clsx": "^2.1.1", + "cobe": "^0.6.3", "cva": "npm:class-variance-authority@^0.7.0", "date-fns": "^3.6.0", "dequal": "^2.0.3", diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 773845ed44..cdd78d1b49 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -78,6 +78,9 @@ importers: clsx: specifier: ^2.1.1 version: 2.1.1 + cobe: + specifier: ^0.6.3 + version: 0.6.3 cva: specifier: npm:class-variance-authority@^0.7.0 version: class-variance-authority@0.7.0 @@ -1966,6 +1969,9 @@ packages: resolution: {integrity: sha512-eYm0QWBtUrBWZWG0d386OGAw16Z995PiOVo2B7bjWSbHedGl5e0ZWaq65kOGgUSNesEIDkB9ISbTg/JK9dhCZA==} engines: {node: '>=6'} + cobe@0.6.3: + resolution: {integrity: sha512-WHr7X4o1ym94GZ96h7b1pNemZJacbOzd02dZtnVwuC4oWBaLg96PBmp2rIS1SAhUDhhC/QyS9WEqkpZIs/ZBTg==} + code-red@1.0.4: resolution: {integrity: sha512-7qJWqItLA8/VPVlKJlFXU+NBlo/qyfs39aJcuMT/2ere32ZqvF5OSxgdM5xOfJJ7O429gg2HM47y8v9P+9wrNw==} @@ -3341,6 +3347,9 @@ packages: resolution: {integrity: sha512-qTAAlrEsl8s4OiEQY69wDvcMIdQN6wdz5ojQiOy6YRMuynxenON0O5oCpJI6lshc6scgAY8qvJ2On/p+CXY0GA==} engines: {node: '>=4'} + phenomenon@1.6.0: + resolution: {integrity: sha512-7h9/fjPD3qNlgggzm88cY58l9sudZ6Ey+UmZsizfhtawO6E3srZQXywaNm2lBwT72TbpHYRPy7ytIHeBUD/G0A==} + phin@2.9.3: resolution: {integrity: sha512-CzFr90qM24ju5f88quFC/6qohjC144rehe5n6DH900lgXmUe86+xCKc10ev56gRKC4/BkHUoG4uSiQgBiIXwDA==} @@ -6406,6 +6415,10 @@ snapshots: clsx@2.1.1: {} + cobe@0.6.3: + dependencies: + phenomenon: 1.6.0 + code-red@1.0.4: dependencies: '@jridgewell/sourcemap-codec': 1.5.0 @@ -7869,6 +7882,8 @@ snapshots: postgres-date: 1.0.7 postgres-interval: 1.2.0 + phenomenon@1.6.0: {} + phin@2.9.3: {} phin@3.7.1: diff --git a/src/routes/globe/(components)/Globe.svelte b/src/routes/globe/(components)/Globe.svelte new file mode 100644 index 0000000000..d5e7824954 --- /dev/null +++ b/src/routes/globe/(components)/Globe.svelte @@ -0,0 +1,58 @@ + + +
+
+ +
+
diff --git a/src/routes/globe/(components)/Map.svelte b/src/routes/globe/(components)/Map.svelte index c01c23319e..b3681b1232 100644 --- a/src/routes/globe/(components)/Map.svelte +++ b/src/routes/globe/(components)/Map.svelte @@ -1,5 +1,16 @@
- +
+ {#each pins as pin, i} + + {#each points as point} {/each} {#each pins as pin} - (showTooltip = true)} - on:mouseleave={() => (showTooltip = false)} - role="presentation" - /> - + {/each} + {#if showTooltip} - Tooltip +
+ {tooltip.city}, {tooltip.country} +
{/if}
diff --git a/src/routes/globe/mouse-position.ts b/src/routes/globe/mouse-position.ts index 6edbbd2956..e9db31862a 100644 --- a/src/routes/globe/mouse-position.ts +++ b/src/routes/globe/mouse-position.ts @@ -2,7 +2,7 @@ import { readable } from 'svelte/store'; export const mousePosition = readable({ x: 0, y: 0 }, (set) => { const updateMousePosition = (event: MouseEvent) => { - set({ x: event.clientX, y: event.clientY }); + set({ x: event.offsetX, y: event.offsetY }); }; window.addEventListener('mousemove', updateMousePosition); From af236d89d1cecac7bd1895193c25ef2fd228ed9d Mon Sep 17 00:00:00 2001 From: Jesse Winton Date: Fri, 27 Sep 2024 15:11:03 -0400 Subject: [PATCH 06/27] update --- src/routes/globe/(components)/Map.svelte | 16 ++++++++-------- src/routes/globe/mouse-position.ts | 2 +- 2 files changed, 9 insertions(+), 9 deletions(-) diff --git a/src/routes/globe/(components)/Map.svelte b/src/routes/globe/(components)/Map.svelte index 03f3dd16f4..8e390db946 100644 --- a/src/routes/globe/(components)/Map.svelte +++ b/src/routes/globe/(components)/Map.svelte @@ -106,7 +106,7 @@ } ]; - pinsData.forEach((pin) => { + pinsData.forEach((pin, index) => { map.addPin({ lat: pin.lat, lng: pin.lng, @@ -130,6 +130,7 @@ const svgRect = mapContainer.getBoundingClientRect(); const viewBox = mapContainer.viewBox.baseVal; + // Calculate scaling factors const scaleX = svgRect.width / viewBox.width; const scaleY = svgRect.height / viewBox.height; @@ -137,11 +138,11 @@ const marker = document.querySelector(`#marker-${index}`) as HTMLElement; if (!marker) return; - const x = pin.x * scaleX; - const y = pin.y * scaleY; + const x = pin.x * scaleX + svgRect.left; + const y = pin.y * scaleY + svgRect.top; - marker.style.left = `${svgRect.left + x}px`; - marker.style.top = `${svgRect.top + y}px`; + marker.style.left = `${x}px`; + marker.style.top = `${y}px`; }); }; @@ -160,10 +161,9 @@ {#each pins as pin, i}