jeffemmett
/
folk-canvas
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

maps and proximity

This commit is contained in:
“chrisshank” 2024-09-08 15:04:32 -07:00
parent b0c5311d54
commit 7f01c93d7c
3 changed files with 197 additions and 49 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

152
demo/maps.html
View File

@ -3,7 +3,7 @@
<head> <head>
<meta charset="UTF-8" /> <meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Shapes - Collision</title> <title>Maps</title>
<style> <style>
* { * {
box-sizing: border-box; box-sizing: border-box;
@ -19,22 +19,168 @@
margin: 0; margin: 0;
} }
leaflet-map { leaflet-map,
geo-wiki {
display: block;
height: 100%; height: 100%;
width: 100%; width: 100%;
} }
geo-wiki {
ul {
height: 100%;
overflow: auto;
margin: 0;
scroll-padding-block-end: 1rem;
}
}
</style> </style>
</head> </head>
<body> <body>
<spatial-geometry x="25" y="100" width="500" height="300"> <spatial-geometry x="25" y="100" width="400" height="200">
<leaflet-map coordinates="52.09, 5.12" zoom="13"></leaflet-map> <leaflet-map coordinates="52.09, 5.12" zoom="13"></leaflet-map>
</spatial-geometry> </spatial-geometry>
<spatial-geometry x="50" y="550" width="400" height="250">
<leaflet-map coordinates="51.50404120260676, -0.14007568359375003" zoom="13"></leaflet-map>
</spatial-geometry>
<spatial-geometry x="500" y="400" width="500" height="300">
<geo-wiki coordinates="51.50404120260676, -0.14007568359375003"></geo-wiki>
</spatial-geometry>
<script type="module"> <script type="module">
import { SpatialGeometry } from '../src/elements/spatial-geometry.ts'; import { SpatialGeometry } from '../src/elements/spatial-geometry.ts';
import { LeafletMap } from '../src/maps'; import { LeafletMap } from '../src/maps';
SpatialGeometry.register(); SpatialGeometry.register();
LeafletMap.register(); LeafletMap.register();
function collisionDetection(rect1, rect2) {
return (
rect1.left < rect2.right &&
rect1.right > rect2.left &&
rect1.top < rect2.bottom &&
rect1.bottom > rect2.top
);
}
function proximityDetection(rect1, rect2, distance = 30) {
return collisionDetection(
DOMRectReadOnly.fromRect({
x: rect1.x - distance,
y: rect1.y - distance,
height: rect1.height + distance * 2,
width: rect1.width + distance * 2,
}),
rect2
);
}
const proximityMap = new Map(
Array.from(document.querySelectorAll('spatial-geometry')).map((el) => [el, new Set()])
);
function handleProximity(e) {
proximityMap.forEach((set, el) => {
if (el !== e.target) {
const alreadyIntersection = set.has(e.target);
// TODO: refactor this hack once resizing and the vertices API are figured out
const isNowIntersecting = proximityDetection(
DOMRectReadOnly.fromRect({ x: el.x, y: el.y, height: el.height, width: el.width }),
DOMRectReadOnly.fromRect({
x: e.target.x,
y: e.target.y,
height: e.target.height,
width: e.target.width,
})
);
if (isNowIntersecting && !alreadyIntersection) {
set.add(e.target);
proximityMap.get(e.target)?.add(el);
} else if (alreadyIntersection && !isNowIntersecting) {
set.delete(e.target);
proximityMap.get(e.target)?.delete(el);
}
}
});
}
document.addEventListener('move', handleProximity);
document.addEventListener('resize', handleProximity);
document.addEventListener('recenter', (e) => {
proximityMap.get(e.target.parentElement)?.forEach((el) => {
const content = el.firstElementChild;
if (content instanceof GeoWiki) {
const { lat, lng } = e.detail;
content.coordinates = [lat, lng];
}
});
});
class GeoWiki extends HTMLElement {
static tagName = 'geo-wiki';
static register() {
customElements.define(this.tagName, this);
}
static observedAttributes = ['coordinates'];
#coordinates = [0, 0];
#results = [];
get coordinates() {
return this.#coordinates;
}
set coordinates(coordinates) {
this.setAttribute('coordinates', coordinates.join(', '));
}
attributeChangedCallback(name, oldValue, newValue) {
if (name === 'coordinates') {
this.#coordinates = newValue.split(',').map((str) => Number(str)) || [0, 0];
this.searchWiki(this.#coordinates);
}
}
async searchWiki([lat, long]) {
const params = new URLSearchParams({
action: 'query',
format: 'json',
list: 'geosearch',
gscoord: `${lat}|${long}`,
gsradius: '1000',
gslimit: '50',
origin: '*',
});
// https://www.mediawiki.org/wiki/API:Geosearch
this.#results = await fetch(`https://en.wikipedia.org/w/api.php?${params}`)
.then((response) => response.json())
.then((data) => data?.query?.geosearch ?? []);
this.#renderResults();
}
#renderResults() {
this.firstElementChild?.remove();
const list = document.createElement('ul');
for (const result of this.#results) {
const li = document.createElement('li');
const a = document.createElement('a');
a.href = `https://en.wikipedia.org/wiki/${result.title}`;
a.textContent = result.title;
li.appendChild(a);
list.appendChild(li);
}
this.appendChild(list);
}
}
GeoWiki.register();
</script> </script>
</body> </body>
</html> </html>

65
src/elements/spatial-geometry.ts
View File

@ -1,8 +1,5 @@
export type Shape = 'rectangle' | 'circle' | 'triangle'; export type Shape = 'rectangle' | 'circle' | 'triangle';
// Can we make adding new shapes extensible via a static property?
const shapes = new Set(['rectangle', 'circle', 'triangle']);
export type MoveEventDetail = { movementX: number; movementY: number }; export type MoveEventDetail = { movementX: number; movementY: number };
export class MoveEvent extends CustomEvent<MoveEventDetail> { export class MoveEvent extends CustomEvent<MoveEventDetail> {
@ -33,7 +30,7 @@ styles.replaceSync(`
display: block; display: block;
position: absolute; position: absolute;
padding: 20px 10px 10px; padding: 20px 10px 10px;
cursor: var(--fc-grab, grab); cursor: var(--fc-move, move);
content-visibility: auto; content-visibility: auto;
} }
@ -52,7 +49,6 @@ styles.replaceSync(`
} }
:host(:state(moving)) { :host(:state(moving)) {
cursor: var(--fc-grabbing, grabbing);
user-select: none; user-select: none;
} }
@ -144,13 +140,11 @@ export class SpatialGeometry extends HTMLElement {
customElements.define(this.tagName, this); customElements.define(this.tagName, this);
} }
static observedAttributes = ['type', 'x', 'y', 'width', 'height', 'rotate']; #internals = this.attachInternals();
#internals: ElementInternals;
constructor() { constructor() {
super(); super();
this.#internals = this.attachInternals();
this.addEventListener('pointerdown', this); this.addEventListener('pointerdown', this);
this.addEventListener('lostpointercapture', this); this.addEventListener('lostpointercapture', this);
this.addEventListener('touchstart', this); this.addEventListener('touchstart', this);
@ -188,7 +182,8 @@ export class SpatialGeometry extends HTMLElement {
} }
set x(x: number) { set x(x: number) {
this.setAttribute('x', x.toString()); this.#x = x;
this.#requestUpdate('x');
} }
#previousY = 0; #previousY = 0;
@ -198,27 +193,30 @@ export class SpatialGeometry extends HTMLElement {
} }
set y(y: number) { set y(y: number) {
this.setAttribute('y', y.toString()); this.#y = y;
this.#requestUpdate('y');
} }
#previousWidth = 0; #previousWidth = 0;
#width = 0; #width = 1;
get width(): number { get width(): number {
return this.#width; return this.#width;
} }
set width(width: number) { set width(width: number) {
this.setAttribute('width', width.toString()); this.#width = width;
this.#requestUpdate('width');
} }
#previousHeight = 0; #previousHeight = 0;
#height = 0; #height = 1;
get height(): number { get height(): number {
return this.#height; return this.#height;
} }
set height(height: number) { set height(height: number) {
this.setAttribute('height', height.toString()); this.#height = height;
this.#requestUpdate('height');
} }
#previousRotate = 0; #previousRotate = 0;
@ -228,36 +226,17 @@ export class SpatialGeometry extends HTMLElement {
} }
set rotate(rotate: number) { set rotate(rotate: number) {
this.setAttribute('rotate', rotate.toString()); this.#rotate = rotate;
this.#requestUpdate('rotate');
} }
attributeChangedCallback(name: string, _oldValue: string, newValue: string) { connectedCallback() {
if (name === 'x') { this.type = (this.getAttribute('type') || 'rectangle') as Shape;
this.#previousX = this.#x; this.x = Number(this.getAttribute('x')) || 0;
this.#x = Number(newValue); this.y = Number(this.getAttribute('y')) || 0;
this.#requestUpdate('x'); this.height = Number(this.getAttribute('height')) || 0;
} else if (name === 'y') { this.width = Number(this.getAttribute('width')) || 0;
this.#previousY = this.#y; this.rotate = Number(this.getAttribute('rotate')) || 0;
this.#y = Number(newValue);
this.#requestUpdate('y');
} else if (name === 'width') {
this.#previousWidth = this.#width;
this.#width = Number(newValue);
this.#requestUpdate('width');
} else if (name === 'height') {
this.#previousHeight = this.#height;
this.#height = Number(newValue);
this.#requestUpdate('height');
} else if (name === 'rotate') {
this.#previousRotate = this.#rotate;
this.#rotate = Number(newValue);
this.#requestUpdate('rotate');
} else if (name === 'type') {
if (shapes.has(newValue)) {
this.#type = newValue as Shape;
this.#requestUpdate('type');
}
}
} }
disconnectedCallback() { disconnectedCallback() {

29
src/maps/index.ts
View File

@ -1,4 +1,4 @@
import { map, Map, tileLayer } from 'leaflet'; import { LatLng, LatLngExpression, LeafletEvent, map, Map, tileLayer } from 'leaflet';
// @ts-ignore // @ts-ignore
// Vite specific import :( // Vite specific import :(
@ -15,6 +15,12 @@ styles.replaceSync(`${css}
} }
`); `);
export class RecenterEvent extends CustomEvent<LatLng> {
constructor(detail: LatLng) {
super('recenter', { detail, bubbles: true });
}
}
export class LeafletMap extends HTMLElement { export class LeafletMap extends HTMLElement {
static tagName = 'leaflet-map'; static tagName = 'leaflet-map';
@ -27,7 +33,7 @@ export class LeafletMap extends HTMLElement {
constructor() { constructor() {
super(); super();
this.handleEvent = this.handleEvent.bind(this);
const shadow = this.attachShadow({ mode: 'open' }); const shadow = this.attachShadow({ mode: 'open' });
shadow.adoptedStyleSheets.push(styles); shadow.adoptedStyleSheets.push(styles);
shadow.appendChild(this.#container); shadow.appendChild(this.#container);
@ -41,6 +47,23 @@ export class LeafletMap extends HTMLElement {
attribution: '&copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>', attribution: '&copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>',
}) })
); );
this.#map.setView([52.09, 5.12], 13); const coordinates = (this.getAttribute('coordinates')
?.split(',')
.map((str) => Number(str)) || [0, 0]) as LatLngExpression;
const zoom = Number(this.getAttribute('zoom') || 13);
this.#map.setView(coordinates, zoom);
this.#map.on('zoom', this.handleEvent);
this.#map.on('moveend', this.handleEvent);
}
handleEvent(event: LeafletEvent) {
switch (event.type) {
case 'zoom':
case 'moveend': {
this.dispatchEvent(new RecenterEvent(this.#map.getCenter()));
break;
}
}
} }
} }