feat: Initial implementation of leaflet-components
Wraps Leaflet.js as native Web Components. Each element maps 1:1 to a Leaflet object with reactive attribute binding and proper lifecycle cleanup. Key design decisions: - LeafletElement base class handles attribute→option mapping, the leaflet-register bubble event for parent/child wiring, and disconnectedCallback cleanup tracking parent bindings. - LeafletControl base class for map controls (zoom, attribution, scale). - leaflet-map uses a PROPS table to drive observedAttributes, getters/setters, attributeChangedCallback, and map event listeners from a single source of truth. Property types are derived via a mapped type over the table; the mixin-base pattern (TypedBase) makes them visible to TypeScript without an interface merge. - Boolean map options that default to true use disable-* attributes. - Leaflet and its CSS are bundled into dist/index.js via esbuild. - JSR config included for @buddy/leaflet-components.main
Buddy
4 months ago
commit
6b448ba092
@ -0,0 +1,32 @@
|
||||
/.idea/
|
||||
/jspm_packages/
|
||||
/node_modules/
|
||||
/web_modules/
|
||||
/dist/
|
||||
*.pid
|
||||
*.pid.lock
|
||||
*.seed
|
||||
*.tgz
|
||||
*.tsbuildinfo
|
||||
.env
|
||||
.env.development.local
|
||||
.env.local
|
||||
.env.production.local
|
||||
.env.test.local
|
||||
.eslintcache
|
||||
.node_repl_history
|
||||
.npm
|
||||
.pnp.*
|
||||
.pnpm-debug.log*
|
||||
.stylelintcache
|
||||
.yarn-integrity
|
||||
.yarn/build-state.yml
|
||||
.yarn/cache
|
||||
.yarn/install-state.gz
|
||||
.yarn/unplugged
|
||||
lerna-debug.log*
|
||||
npm-debug.log*
|
||||
pids
|
||||
report.[0-9]*.[0-9]*.[0-9]*.[0-9]*.json
|
||||
yarn-debug.log*
|
||||
yarn-error.log*
|
||||
@ -0,0 +1,7 @@
|
||||
{
|
||||
"semi": true,
|
||||
"trailingComma": "all",
|
||||
"singleQuote": true,
|
||||
"printWidth": 100,
|
||||
"tabWidth": 2
|
||||
}
|
||||
@ -0,0 +1,50 @@
|
||||
# CLAUDE.md
|
||||
|
||||
This file provides guidance to Claude Code (claude.ai/code) when working with code in this repository.
|
||||
|
||||
## Commands
|
||||
|
||||
```bash
|
||||
npm run build # Type-check + emit .d.ts via tsc, then bundle to dist/index.js via esbuild
|
||||
npm run lint # ESLint over src/**/*.{ts,js}
|
||||
npm run format # Prettier formatting
|
||||
```
|
||||
|
||||
There are no tests in this project. To preview components locally, open `index.html` in a browser with a dev server that supports TypeScript (e.g. `npx vite`).
|
||||
|
||||
## Architecture
|
||||
|
||||
This library wraps [Leaflet.js](https://leafletjs.com/) as native Web Components (Custom Elements). Each HTML element maps 1:1 to a Leaflet object.
|
||||
|
||||
### Core base class: `src/core/LeafletElement.ts`
|
||||
|
||||
`LeafletElement` (extends `HTMLElement`) is the abstract base for all components except `leaflet-map`. Subclasses must implement `createLeafletObject()` returning an `L.Layer`. The base class:
|
||||
|
||||
- Reads `observedAttributes` to auto-populate `this.options` via `initOptions()` on connect, converting kebab-case attribute names to camelCase for Leaflet options.
|
||||
- Parses attribute values to booleans, numbers, or JSON automatically (`parseAttributeValue`).
|
||||
- On `attributeChangedCallback`, calls `updateLeafletObject()` which by default invokes the matching Leaflet setter (e.g. `setOpacity`, `setRadius`). Subclasses override this for attributes needing custom logic (e.g. lat/lng pairs).
|
||||
- Uses a custom `leaflet-register` bubbling event to wire children into parents. When a child connects, it dispatches this event upward; each parent intercepts and either calls `addLayer`, `bindPopup`, or `bindTooltip` depending on the child's type.
|
||||
|
||||
### `leaflet-map`: `src/components/leaflet-map.ts`
|
||||
|
||||
`LeafletMap` does **not** extend `LeafletElement` — it extends `HTMLElement` directly and uses Shadow DOM. It is the root of the component tree and terminates all bubbling `leaflet-register` events by calling `layer.addTo(this.map)`.
|
||||
|
||||
### Child component pattern
|
||||
|
||||
All other components extend `LeafletElement`. To add a new component:
|
||||
|
||||
1. Extend `LeafletElement`, implement `createLeafletObject()`.
|
||||
2. Declare `static get observedAttributes()` listing HTML attributes (kebab-case).
|
||||
3. Override `updateLeafletObject()` only if the default setter-based update won't work (common for coordinate pairs).
|
||||
4. Call `customElements.define('leaflet-foo', LeafletFoo)` at the bottom.
|
||||
5. Export from `src/index.ts`.
|
||||
|
||||
### Special cases
|
||||
|
||||
- **`leaflet-polygon`** uses `<leaflet-line>` children for vertices. The polygon collects lat/lng from child `leaflet-line` elements rather than having them as direct attributes.
|
||||
- **`leaflet-popup`** / **`leaflet-tooltip`**: content comes from `innerHTML`, not attributes. `leaflet-popup` watches for DOM mutations to keep Leaflet in sync.
|
||||
- **`leaflet-layer-group`**: a passthrough container; children register themselves into it via the standard bubble mechanism.
|
||||
|
||||
### Output
|
||||
|
||||
`tsc` compiles `src/` → `dist/` with `.js` files and `.d.ts` declarations. Imports within the source use `.js` extensions (required for ESM `"moduleResolution": "bundler"`).
|
||||
@ -0,0 +1,24 @@
|
||||
import tsParser from '@typescript-eslint/parser';
|
||||
import tsPlugin from '@typescript-eslint/eslint-plugin';
|
||||
import prettierPlugin from 'eslint-plugin-prettier';
|
||||
import prettierConfig from 'eslint-config-prettier';
|
||||
|
||||
export default [
|
||||
{
|
||||
files: ['src/**/*.ts'],
|
||||
languageOptions: {
|
||||
parser: tsParser,
|
||||
ecmaVersion: 2020,
|
||||
sourceType: 'module',
|
||||
},
|
||||
plugins: {
|
||||
'@typescript-eslint': tsPlugin,
|
||||
prettier: prettierPlugin,
|
||||
},
|
||||
rules: {
|
||||
...tsPlugin.configs.recommended.rules,
|
||||
...prettierConfig.rules,
|
||||
'prettier/prettier': 'error',
|
||||
},
|
||||
},
|
||||
];
|
||||
@ -0,0 +1,74 @@
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Leaflet Components Demo</title>
|
||||
<style>
|
||||
body {
|
||||
margin: 0;
|
||||
padding: 20px;
|
||||
font-family: sans-serif;
|
||||
}
|
||||
leaflet-map {
|
||||
height: 500px;
|
||||
border: 1px solid #ccc;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<h1>Leaflet Web Components</h1>
|
||||
|
||||
<leaflet-map lat="51.505" lng="-0.09" zoom="13">
|
||||
<leaflet-tile-layer
|
||||
url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
|
||||
attribution="© <a href='https://www.openstreetmap.org/copyright'>OpenStreetMap</a> contributors"
|
||||
>
|
||||
</leaflet-tile-layer>
|
||||
|
||||
<leaflet-marker lat="51.505" lng="-0.09" title="A Marker">
|
||||
<leaflet-popup><b>Hello world!</b><br />I am a popup.</leaflet-popup>
|
||||
<leaflet-tooltip>I am a tooltip</leaflet-tooltip>
|
||||
</leaflet-marker>
|
||||
|
||||
<leaflet-circle
|
||||
lat="51.508"
|
||||
lng="-0.11"
|
||||
color="red"
|
||||
fill-color="#f03"
|
||||
fill-opacity="0.5"
|
||||
radius="500"
|
||||
>
|
||||
<leaflet-popup>I am a circle.</leaflet-popup>
|
||||
</leaflet-circle>
|
||||
|
||||
<leaflet-polygon color="blue" fill-color="cyan" fill-opacity="0.3">
|
||||
<leaflet-line lat="51.509" lng="-0.08"></leaflet-line>
|
||||
<leaflet-line lat="51.503" lng="-0.06"></leaflet-line>
|
||||
<leaflet-line lat="51.51" lng="-0.047"></leaflet-line>
|
||||
<leaflet-popup>I am a polygon.</leaflet-popup>
|
||||
</leaflet-polygon>
|
||||
|
||||
<leaflet-feature-group>
|
||||
<leaflet-marker lat="51.513" lng="-0.07" title="Feature Group Marker">
|
||||
<leaflet-tooltip>Part of a feature group</leaflet-tooltip>
|
||||
</leaflet-marker>
|
||||
<leaflet-circle lat="51.513" lng="-0.07" radius="100" color="purple" fill-color="purple" fill-opacity="0.2">
|
||||
</leaflet-circle>
|
||||
</leaflet-feature-group>
|
||||
|
||||
<leaflet-geojson
|
||||
color="#e67e22"
|
||||
weight="3"
|
||||
fill-color="#f39c12"
|
||||
fill-opacity="0.4"
|
||||
data='{"type":"Feature","geometry":{"type":"Polygon","coordinates":[[[-0.13,51.50],[-0.12,51.50],[-0.12,51.51],[-0.13,51.51],[-0.13,51.50]]]},"properties":{}}'
|
||||
></leaflet-geojson>
|
||||
|
||||
<leaflet-control-scale position="bottomleft"></leaflet-control-scale>
|
||||
</leaflet-map>
|
||||
|
||||
<!-- script type="module" src="./src/index.ts"></script -->
|
||||
<script type="module" src="/dist/index.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
@ -0,0 +1,5 @@
|
||||
{
|
||||
"name": "@buddy/leaflet-components",
|
||||
"version": "0.1.0",
|
||||
"exports": "./src/index.ts"
|
||||
}
|
||||
File diff suppressed because it is too large
Load Diff
@ -0,0 +1,41 @@
|
||||
{
|
||||
"name": "leaflet-components",
|
||||
"version": "0.1.0",
|
||||
"description": "LeafletJS as Web Components",
|
||||
"main": "dist/index.js",
|
||||
"module": "dist/index.js",
|
||||
"types": "dist/index.d.ts",
|
||||
"exports": {
|
||||
".": {
|
||||
"import": "./dist/index.js",
|
||||
"types": "./dist/index.d.ts"
|
||||
}
|
||||
},
|
||||
"scripts": {
|
||||
"build": "rm -rf dist && tsc --emitDeclarationOnly && esbuild src/index.ts --bundle --format=esm --loader:.css=text --outfile=dist/index.js",
|
||||
"lint": "eslint 'src/**/*.{ts,js}'",
|
||||
"format": "prettier --write 'src/**/*.{ts,js,json,md}'",
|
||||
"prepublishOnly": "npm run build"
|
||||
},
|
||||
"keywords": [
|
||||
"leaflet",
|
||||
"web-components",
|
||||
"maps"
|
||||
],
|
||||
"author": "buddy",
|
||||
"license": "MIT",
|
||||
"type": "module",
|
||||
"dependencies": {},
|
||||
"devDependencies": {
|
||||
"@types/leaflet": "1.9.21",
|
||||
"leaflet": "1.9.4",
|
||||
"@typescript-eslint/eslint-plugin": "8.60.1",
|
||||
"@typescript-eslint/parser": "8.60.1",
|
||||
"esbuild": "^0.28.0",
|
||||
"eslint": "10.4.1",
|
||||
"eslint-config-prettier": "10.1.8",
|
||||
"eslint-plugin-prettier": "5.5.6",
|
||||
"prettier": "3.8.3",
|
||||
"typescript": "6.0.3"
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,54 @@
|
||||
import { Layer, CircleMarker } from 'leaflet';
|
||||
import { LeafletElement } from '../core/LeafletElement.js';
|
||||
|
||||
export class LeafletCircleMarker extends LeafletElement {
|
||||
static get observedAttributes() {
|
||||
return [
|
||||
'lat',
|
||||
'lng',
|
||||
'radius',
|
||||
'color',
|
||||
'weight',
|
||||
'opacity',
|
||||
'fill',
|
||||
'fill-color',
|
||||
'fill-opacity',
|
||||
];
|
||||
}
|
||||
|
||||
protected createLeafletObject(): Layer {
|
||||
const lat = parseFloat(this.getAttribute('lat') || '0');
|
||||
const lng = parseFloat(this.getAttribute('lng') || '0');
|
||||
return new CircleMarker([lat, lng], this.options);
|
||||
}
|
||||
|
||||
protected updateLeafletObject(property: string, value: unknown) {
|
||||
if (this.leafletObject instanceof CircleMarker) {
|
||||
if (property === 'lat' || property === 'lng') {
|
||||
const lat = parseFloat(this.getAttribute('lat') || '0');
|
||||
const lng = parseFloat(this.getAttribute('lng') || '0');
|
||||
this.leafletObject.setLatLng([lat, lng]);
|
||||
} else if (
|
||||
[
|
||||
'color',
|
||||
'weight',
|
||||
'opacity',
|
||||
'fill',
|
||||
'fillColor',
|
||||
'fillOpacity',
|
||||
'stroke',
|
||||
'dashArray',
|
||||
'dashOffset',
|
||||
'lineCap',
|
||||
'lineJoin',
|
||||
].includes(property)
|
||||
) {
|
||||
this.leafletObject.setStyle({ [property]: value });
|
||||
} else {
|
||||
super.updateLeafletObject(property, value);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
customElements.define('leaflet-circle-marker', LeafletCircleMarker);
|
||||
@ -0,0 +1,54 @@
|
||||
import { Circle, Layer } from 'leaflet';
|
||||
import { LeafletElement } from '../core/LeafletElement.js';
|
||||
|
||||
export class LeafletCircle extends LeafletElement {
|
||||
static get observedAttributes() {
|
||||
return [
|
||||
'lat',
|
||||
'lng',
|
||||
'radius',
|
||||
'color',
|
||||
'weight',
|
||||
'opacity',
|
||||
'fill',
|
||||
'fill-color',
|
||||
'fill-opacity',
|
||||
];
|
||||
}
|
||||
|
||||
protected createLeafletObject(): Layer {
|
||||
const lat = parseFloat(this.getAttribute('lat') || '0');
|
||||
const lng = parseFloat(this.getAttribute('lng') || '0');
|
||||
return new Circle([lat, lng], this.options);
|
||||
}
|
||||
|
||||
protected updateLeafletObject(property: string, value: unknown) {
|
||||
if (this.leafletObject instanceof Circle) {
|
||||
if (property === 'lat' || property === 'lng') {
|
||||
const lat = parseFloat(this.getAttribute('lat') || '0');
|
||||
const lng = parseFloat(this.getAttribute('lng') || '0');
|
||||
this.leafletObject.setLatLng([lat, lng]);
|
||||
} else if (
|
||||
[
|
||||
'color',
|
||||
'weight',
|
||||
'opacity',
|
||||
'fill',
|
||||
'fillColor',
|
||||
'fillOpacity',
|
||||
'stroke',
|
||||
'dashArray',
|
||||
'dashOffset',
|
||||
'lineCap',
|
||||
'lineJoin',
|
||||
].includes(property)
|
||||
) {
|
||||
this.leafletObject.setStyle({ [property]: value });
|
||||
} else {
|
||||
super.updateLeafletObject(property, value);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
customElements.define('leaflet-circle', LeafletCircle);
|
||||
@ -0,0 +1,19 @@
|
||||
import { Control, ControlPosition } from 'leaflet';
|
||||
import { LeafletControl } from '../core/LeafletControl.js';
|
||||
|
||||
export class LeafletControlAttribution extends LeafletControl {
|
||||
static get observedAttributes() {
|
||||
return ['position', 'prefix'];
|
||||
}
|
||||
|
||||
protected createControl(): Control {
|
||||
const options: Control.AttributionOptions = {};
|
||||
const position = this.getAttribute('position') as ControlPosition | null;
|
||||
const prefix = this.getAttribute('prefix');
|
||||
if (position) options.position = position;
|
||||
if (prefix !== null) options.prefix = prefix;
|
||||
return new Control.Attribution(options);
|
||||
}
|
||||
}
|
||||
|
||||
customElements.define('leaflet-control-attribution', LeafletControlAttribution);
|
||||
@ -0,0 +1,25 @@
|
||||
import { Control, ControlPosition } from 'leaflet';
|
||||
import { LeafletControl } from '../core/LeafletControl.js';
|
||||
|
||||
export class LeafletControlScale extends LeafletControl {
|
||||
static get observedAttributes() {
|
||||
return ['position', 'max-width', 'metric', 'imperial', 'update-when-idle'];
|
||||
}
|
||||
|
||||
protected createControl(): Control {
|
||||
const options: Control.ScaleOptions = {};
|
||||
const position = this.getAttribute('position') as ControlPosition | null;
|
||||
const maxWidth = this.getAttribute('max-width');
|
||||
const metric = this.getAttribute('metric');
|
||||
const imperial = this.getAttribute('imperial');
|
||||
const updateWhenIdle = this.getAttribute('update-when-idle');
|
||||
if (position) options.position = position;
|
||||
if (maxWidth !== null) options.maxWidth = parseInt(maxWidth, 10);
|
||||
if (metric !== null) options.metric = metric !== 'false';
|
||||
if (imperial !== null) options.imperial = imperial !== 'false';
|
||||
if (updateWhenIdle !== null) options.updateWhenIdle = updateWhenIdle !== 'false';
|
||||
return new Control.Scale(options);
|
||||
}
|
||||
}
|
||||
|
||||
customElements.define('leaflet-control-scale', LeafletControlScale);
|
||||
@ -0,0 +1,25 @@
|
||||
import { Control, ControlPosition } from 'leaflet';
|
||||
import { LeafletControl } from '../core/LeafletControl.js';
|
||||
|
||||
export class LeafletControlZoom extends LeafletControl {
|
||||
static get observedAttributes() {
|
||||
return ['position', 'zoom-in-text', 'zoom-in-title', 'zoom-out-text', 'zoom-out-title'];
|
||||
}
|
||||
|
||||
protected createControl(): Control {
|
||||
const options: Control.ZoomOptions = {};
|
||||
const position = this.getAttribute('position') as ControlPosition | null;
|
||||
const zoomInText = this.getAttribute('zoom-in-text');
|
||||
const zoomInTitle = this.getAttribute('zoom-in-title');
|
||||
const zoomOutText = this.getAttribute('zoom-out-text');
|
||||
const zoomOutTitle = this.getAttribute('zoom-out-title');
|
||||
if (position) options.position = position;
|
||||
if (zoomInText !== null) options.zoomInText = zoomInText;
|
||||
if (zoomInTitle !== null) options.zoomInTitle = zoomInTitle;
|
||||
if (zoomOutText !== null) options.zoomOutText = zoomOutText;
|
||||
if (zoomOutTitle !== null) options.zoomOutTitle = zoomOutTitle;
|
||||
return new Control.Zoom(options);
|
||||
}
|
||||
}
|
||||
|
||||
customElements.define('leaflet-control-zoom', LeafletControlZoom);
|
||||
@ -0,0 +1,10 @@
|
||||
import { FeatureGroup, Layer } from 'leaflet';
|
||||
import { LeafletElement } from '../core/LeafletElement.js';
|
||||
|
||||
export class LeafletFeatureGroup extends LeafletElement {
|
||||
protected createLeafletObject(): Layer {
|
||||
return new FeatureGroup([], this.options);
|
||||
}
|
||||
}
|
||||
|
||||
customElements.define('leaflet-feature-group', LeafletFeatureGroup);
|
||||
@ -0,0 +1,45 @@
|
||||
import { GeoJSON, PathOptions, Layer } from 'leaflet';
|
||||
import { LeafletElement } from '../core/LeafletElement.js';
|
||||
|
||||
export class LeafletGeoJSON extends LeafletElement {
|
||||
static get observedAttributes() {
|
||||
return [
|
||||
'data',
|
||||
'stroke',
|
||||
'color',
|
||||
'weight',
|
||||
'opacity',
|
||||
'line-cap',
|
||||
'line-join',
|
||||
'dash-array',
|
||||
'dash-offset',
|
||||
'fill',
|
||||
'fill-color',
|
||||
'fill-opacity',
|
||||
'fill-rule',
|
||||
];
|
||||
}
|
||||
|
||||
protected createLeafletObject(): Layer {
|
||||
const raw = this.getAttribute('data');
|
||||
const data = raw ? JSON.parse(raw) : undefined;
|
||||
const styleOpts = Object.fromEntries(
|
||||
Object.entries(this.options).filter(([k]) => k !== 'data'),
|
||||
);
|
||||
return new GeoJSON(data, { style: styleOpts as PathOptions });
|
||||
}
|
||||
|
||||
protected updateLeafletObject(property: string, value: unknown) {
|
||||
if (!(this.leafletObject instanceof GeoJSON)) return;
|
||||
if (property === 'data') {
|
||||
this.leafletObject.clearLayers();
|
||||
if (value) {
|
||||
this.leafletObject.addData(value as Parameters<GeoJSON['addData']>[0]);
|
||||
}
|
||||
} else {
|
||||
this.leafletObject.setStyle({ [property]: value } as PathOptions);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
customElements.define('leaflet-geojson', LeafletGeoJSON);
|
||||
@ -0,0 +1,44 @@
|
||||
import {
|
||||
ImageOverlay,
|
||||
LatLngBounds,
|
||||
LatLngBoundsExpression,
|
||||
LatLngExpression,
|
||||
Layer,
|
||||
} from 'leaflet';
|
||||
import { LeafletElement } from '../core/LeafletElement.js';
|
||||
|
||||
export class LeafletImageOverlay extends LeafletElement {
|
||||
static get observedAttributes() {
|
||||
return [
|
||||
'url',
|
||||
'bounds',
|
||||
'opacity',
|
||||
'alt',
|
||||
'interactive',
|
||||
'cross-origin',
|
||||
'error-overlay-url',
|
||||
'z-index',
|
||||
'className',
|
||||
];
|
||||
}
|
||||
|
||||
protected createLeafletObject(): Layer {
|
||||
const url = this.getAttribute('url') || '';
|
||||
const bounds = this.options.bounds as LatLngBoundsExpression;
|
||||
return new ImageOverlay(url, bounds, this.options);
|
||||
}
|
||||
|
||||
protected updateLeafletObject(property: string, value: unknown) {
|
||||
if (this.leafletObject instanceof ImageOverlay) {
|
||||
if (property === 'url') {
|
||||
this.leafletObject.setUrl(value as string);
|
||||
} else if (property === 'bounds') {
|
||||
this.leafletObject.setBounds(new LatLngBounds(value as LatLngExpression[]));
|
||||
} else {
|
||||
super.updateLeafletObject(property, value);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
customElements.define('leaflet-image-overlay', LeafletImageOverlay);
|
||||
@ -0,0 +1,10 @@
|
||||
import { LayerGroup, Layer } from 'leaflet';
|
||||
import { LeafletElement } from '../core/LeafletElement.js';
|
||||
|
||||
export class LeafletLayerGroup extends LeafletElement {
|
||||
protected createLeafletObject(): Layer {
|
||||
return new LayerGroup([], this.options);
|
||||
}
|
||||
}
|
||||
|
||||
customElements.define('leaflet-layer-group', LeafletLayerGroup);
|
||||
@ -0,0 +1,18 @@
|
||||
export class LeafletLine extends HTMLElement {
|
||||
static get observedAttributes() {
|
||||
return ['lat', 'lng'];
|
||||
}
|
||||
|
||||
get latlng(): [number, number] {
|
||||
return [
|
||||
parseFloat(this.getAttribute('lat') || '0'),
|
||||
parseFloat(this.getAttribute('lng') || '0'),
|
||||
];
|
||||
}
|
||||
|
||||
attributeChangedCallback() {
|
||||
this.dispatchEvent(new CustomEvent('line-updated', { bubbles: true }));
|
||||
}
|
||||
}
|
||||
|
||||
customElements.define('leaflet-line', LeafletLine);
|
||||
@ -0,0 +1,329 @@
|
||||
import { Map as LMap, MapOptions } from 'leaflet';
|
||||
import leafletCSS from 'leaflet/dist/leaflet.css';
|
||||
import { LeafletRegisterEvent } from '../core/LeafletElement.js';
|
||||
|
||||
// ── Prop types ─────────────────────────────────────────────────────────────
|
||||
|
||||
type NumProp = {
|
||||
kind: 'num';
|
||||
attr: string;
|
||||
default: number;
|
||||
viewState?: true;
|
||||
mapGet?: (m: LMap) => number | undefined;
|
||||
mapSet?: (m: LMap, v: number) => void;
|
||||
event?: string;
|
||||
};
|
||||
|
||||
type BoolOffProp = {
|
||||
kind: 'bool-off';
|
||||
attr: string;
|
||||
mapSet?: (m: LMap, enabled: boolean) => void;
|
||||
};
|
||||
|
||||
type BoolOnProp = {
|
||||
kind: 'bool-on';
|
||||
attr: string;
|
||||
};
|
||||
|
||||
type PropDef = NumProp | BoolOffProp | BoolOnProp;
|
||||
|
||||
// ── Property table ─────────────────────────────────────────────────────────
|
||||
|
||||
const PROPS = {
|
||||
// View state — excluded from #buildOptions, initialised via setView()
|
||||
lat: {
|
||||
kind: 'num',
|
||||
attr: 'lat',
|
||||
default: 0,
|
||||
viewState: true,
|
||||
event: 'moveend',
|
||||
mapGet: (m: LMap) => m.getCenter()?.lat,
|
||||
mapSet: (m: LMap, v: number) => m.setView([v, m.getCenter()?.lng ?? 0], m.getZoom()),
|
||||
},
|
||||
lng: {
|
||||
kind: 'num',
|
||||
attr: 'lng',
|
||||
default: 0,
|
||||
viewState: true,
|
||||
event: 'moveend',
|
||||
mapGet: (m: LMap) => m.getCenter()?.lng,
|
||||
mapSet: (m: LMap, v: number) => m.setView([m.getCenter()?.lat ?? 0, v], m.getZoom()),
|
||||
},
|
||||
zoom: {
|
||||
kind: 'num',
|
||||
attr: 'zoom',
|
||||
default: 2,
|
||||
viewState: true,
|
||||
event: 'zoomend',
|
||||
mapGet: (m: LMap) => m.getZoom(),
|
||||
mapSet: (m: LMap, v: number) => m.setZoom(v),
|
||||
},
|
||||
|
||||
// Live numeric options — have Leaflet setters
|
||||
minZoom: {
|
||||
kind: 'num',
|
||||
attr: 'min-zoom',
|
||||
default: 0,
|
||||
mapGet: (m: LMap) => m.getMinZoom(),
|
||||
mapSet: (m: LMap, v: number) => m.setMinZoom(v),
|
||||
},
|
||||
maxZoom: {
|
||||
kind: 'num',
|
||||
attr: 'max-zoom',
|
||||
default: Infinity,
|
||||
mapGet: (m: LMap) => m.getMaxZoom(),
|
||||
mapSet: (m: LMap, v: number) => m.setMaxZoom(v),
|
||||
},
|
||||
|
||||
// Constructor-only numeric options
|
||||
zoomSnap: { kind: 'num', attr: 'zoom-snap', default: 1 },
|
||||
zoomDelta: { kind: 'num', attr: 'zoom-delta', default: 1 },
|
||||
keyboardPanDelta: { kind: 'num', attr: 'keyboard-pan-delta', default: 80 },
|
||||
wheelDebounceTime: { kind: 'num', attr: 'wheel-debounce-time', default: 40 },
|
||||
wheelPxPerZoomLevel: { kind: 'num', attr: 'wheel-px-per-zoom-level', default: 60 },
|
||||
inertiaDeceleration: { kind: 'num', attr: 'inertia-deceleration', default: 3000 },
|
||||
inertiaMaxSpeed: { kind: 'num', attr: 'inertia-max-speed', default: Infinity },
|
||||
easeLinearity: { kind: 'num', attr: 'ease-linearity', default: 0.2 },
|
||||
maxBoundsViscosity: { kind: 'num', attr: 'max-bounds-viscosity', default: 0 },
|
||||
tapTolerance: { kind: 'num', attr: 'tap-tolerance', default: 15 },
|
||||
zoomAnimationThreshold: { kind: 'num', attr: 'zoom-animation-threshold', default: 4 },
|
||||
transform3DLimit: { kind: 'num', attr: 'transform-3d-limit', default: 8388608 },
|
||||
|
||||
// Boolean defaults-true → disable-* attribute; handler-based options have live mapSet
|
||||
scrollWheelZoom: {
|
||||
kind: 'bool-off',
|
||||
attr: 'disable-scroll-wheel-zoom',
|
||||
mapSet: (m: LMap, v: boolean) => (v ? m.scrollWheelZoom.enable() : m.scrollWheelZoom.disable()),
|
||||
},
|
||||
dragging: {
|
||||
kind: 'bool-off',
|
||||
attr: 'disable-dragging',
|
||||
mapSet: (m: LMap, v: boolean) => (v ? m.dragging.enable() : m.dragging.disable()),
|
||||
},
|
||||
touchZoom: {
|
||||
kind: 'bool-off',
|
||||
attr: 'disable-touch-zoom',
|
||||
mapSet: (m: LMap, v: boolean) => (v ? m.touchZoom.enable() : m.touchZoom.disable()),
|
||||
},
|
||||
doubleClickZoom: {
|
||||
kind: 'bool-off',
|
||||
attr: 'disable-double-click-zoom',
|
||||
mapSet: (m: LMap, v: boolean) => (v ? m.doubleClickZoom.enable() : m.doubleClickZoom.disable()),
|
||||
},
|
||||
boxZoom: {
|
||||
kind: 'bool-off',
|
||||
attr: 'disable-box-zoom',
|
||||
mapSet: (m: LMap, v: boolean) => (v ? m.boxZoom.enable() : m.boxZoom.disable()),
|
||||
},
|
||||
keyboard: {
|
||||
kind: 'bool-off',
|
||||
attr: 'disable-keyboard',
|
||||
mapSet: (m: LMap, v: boolean) => (v ? m.keyboard.enable() : m.keyboard.disable()),
|
||||
},
|
||||
closePopupOnClick: { kind: 'bool-off', attr: 'disable-close-popup-on-click' },
|
||||
trackResize: { kind: 'bool-off', attr: 'disable-track-resize' },
|
||||
zoomControl: { kind: 'bool-off', attr: 'disable-zoom-control' },
|
||||
attributionControl: { kind: 'bool-off', attr: 'disable-attribution-control' },
|
||||
inertia: { kind: 'bool-off', attr: 'disable-inertia' },
|
||||
zoomAnimation: { kind: 'bool-off', attr: 'disable-zoom-animation' },
|
||||
fadeAnimation: { kind: 'bool-off', attr: 'disable-fade-animation' },
|
||||
markerZoomAnimation: { kind: 'bool-off', attr: 'disable-marker-zoom-animation' },
|
||||
bounceAtZoomLimits: { kind: 'bool-off', attr: 'disable-bounce-at-zoom-limits' },
|
||||
tapHold: { kind: 'bool-off', attr: 'disable-tap-hold' },
|
||||
|
||||
// Boolean defaults-false → normal attribute
|
||||
preferCanvas: { kind: 'bool-on', attr: 'prefer-canvas' },
|
||||
worldCopyJump: { kind: 'bool-on', attr: 'world-copy-jump' },
|
||||
} satisfies Record<string, PropDef>;
|
||||
|
||||
type PropName = keyof typeof PROPS;
|
||||
|
||||
const ATTR_TO_PROP = new globalThis.Map<string, PropName>(
|
||||
(Object.entries(PROPS) as [PropName, PropDef][]).map(([name, spec]) => [spec.attr, name]),
|
||||
);
|
||||
|
||||
// ── Element ────────────────────────────────────────────────────────────────
|
||||
|
||||
// Derive property types directly from the PROPS table so adding a prop to the
|
||||
// table automatically makes it part of the LeafletMap instance type.
|
||||
type PropTypes = {
|
||||
[K in keyof typeof PROPS]: (typeof PROPS)[K] extends { kind: 'num' } ? number : boolean;
|
||||
};
|
||||
|
||||
// Cast HTMLElement to a typed base whose instances include PropTypes. This is
|
||||
// the mixin pattern — TypeScript sees LeafletMap as having all prop types, the
|
||||
// runtime still extends HTMLElement, and no interface merge is required.
|
||||
const TypedBase = HTMLElement as unknown as new () => HTMLElement & PropTypes;
|
||||
|
||||
export class LeafletMap extends TypedBase {
|
||||
#map?: LMap;
|
||||
#container!: HTMLDivElement;
|
||||
#syncing = false;
|
||||
#mapEventHandlers = new globalThis.Map<string, () => void>();
|
||||
|
||||
static get observedAttributes(): string[] {
|
||||
return Object.values(PROPS).map((s) => s.attr);
|
||||
}
|
||||
|
||||
// Generates a getter/setter on the prototype for every entry in PROPS.
|
||||
// The functions are defined inside the class body so they can access private fields.
|
||||
static {
|
||||
for (const [propName, spec] of Object.entries(PROPS) as [PropName, PropDef][]) {
|
||||
if (spec.kind === 'num') {
|
||||
Object.defineProperty(LeafletMap.prototype, propName, {
|
||||
get(this: LeafletMap) {
|
||||
const val = spec.mapGet && this.#map ? spec.mapGet(this.#map) : undefined;
|
||||
return val !== undefined ? val : Number(this.getAttribute(spec.attr) ?? spec.default);
|
||||
},
|
||||
set(this: LeafletMap, v: number) {
|
||||
if (spec.event) {
|
||||
this.#syncAttr(spec.attr, String(v));
|
||||
} else {
|
||||
this.setAttribute(spec.attr, String(v));
|
||||
}
|
||||
},
|
||||
configurable: true,
|
||||
enumerable: true,
|
||||
});
|
||||
} else if (spec.kind === 'bool-off') {
|
||||
Object.defineProperty(LeafletMap.prototype, propName, {
|
||||
get(this: LeafletMap) {
|
||||
return !this.hasAttribute(spec.attr);
|
||||
},
|
||||
set(this: LeafletMap, v: boolean) {
|
||||
this.toggleAttribute(spec.attr, !v);
|
||||
},
|
||||
configurable: true,
|
||||
enumerable: true,
|
||||
});
|
||||
} else {
|
||||
Object.defineProperty(LeafletMap.prototype, propName, {
|
||||
get(this: LeafletMap) {
|
||||
return this.hasAttribute(spec.attr);
|
||||
},
|
||||
set(this: LeafletMap, v: boolean) {
|
||||
this.toggleAttribute(spec.attr, v);
|
||||
},
|
||||
configurable: true,
|
||||
enumerable: true,
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
constructor() {
|
||||
super();
|
||||
this.attachShadow({ mode: 'open' });
|
||||
this.#container = document.createElement('div');
|
||||
this.#container.style.width = '100%';
|
||||
this.#container.style.height = '100%';
|
||||
this.shadowRoot!.appendChild(this.#container);
|
||||
const style = document.createElement('style');
|
||||
style.textContent = `:host { display: block; width: 100%; height: 400px; }\n${leafletCSS}`;
|
||||
this.shadowRoot!.appendChild(style);
|
||||
}
|
||||
|
||||
connectedCallback() {
|
||||
// Read view-state from attributes directly — the getters call getCenter()/getZoom()
|
||||
// which throw if invoked before setView(), so we can't use them here.
|
||||
const lat = Number(this.getAttribute('lat') ?? 0);
|
||||
const lng = Number(this.getAttribute('lng') ?? 0);
|
||||
const zoom = Number(this.getAttribute('zoom') ?? 2);
|
||||
|
||||
// Assign #map only after setView so the getters' `this.#map` guard is
|
||||
// equivalent to "map is ready" — getCenter()/getZoom() throw before setView.
|
||||
const map = new LMap(this.#container, this.#buildOptions());
|
||||
map.setView([lat, lng], zoom);
|
||||
this.#map = map;
|
||||
|
||||
// Register one handler per unique map event, updating all props that share it
|
||||
const groups = new globalThis.Map<string, NumProp[]>();
|
||||
for (const spec of Object.values(PROPS) as PropDef[]) {
|
||||
if (spec.kind === 'num' && spec.event && spec.mapGet) {
|
||||
const g = groups.get(spec.event) ?? [];
|
||||
g.push(spec);
|
||||
groups.set(spec.event, g);
|
||||
}
|
||||
}
|
||||
for (const [event, specs] of groups) {
|
||||
const handler = () => {
|
||||
for (const s of specs) {
|
||||
if (this.#map && s.mapGet) {
|
||||
const v = s.mapGet(this.#map);
|
||||
if (v !== undefined) this.#syncAttr(s.attr, String(v));
|
||||
}
|
||||
}
|
||||
};
|
||||
this.#mapEventHandlers.set(event, handler);
|
||||
this.#map.on(event, handler);
|
||||
}
|
||||
|
||||
this.addEventListener(
|
||||
'leaflet-register',
|
||||
this.#handleLeafletRegister as EventListenerOrEventListenerObject,
|
||||
);
|
||||
}
|
||||
|
||||
disconnectedCallback() {
|
||||
this.removeEventListener(
|
||||
'leaflet-register',
|
||||
this.#handleLeafletRegister as EventListenerOrEventListenerObject,
|
||||
);
|
||||
if (!this.#map) return;
|
||||
for (const [event, handler] of this.#mapEventHandlers) {
|
||||
this.#map.off(event, handler);
|
||||
}
|
||||
this.#mapEventHandlers.clear();
|
||||
this.#map.remove();
|
||||
this.#map = undefined;
|
||||
}
|
||||
|
||||
attributeChangedCallback(name: string, oldValue: string | null, newValue: string | null) {
|
||||
if (oldValue === newValue || !this.#map || this.#syncing) return;
|
||||
const propName = ATTR_TO_PROP.get(name);
|
||||
if (!propName) return;
|
||||
const spec = PROPS[propName] as PropDef;
|
||||
if (spec.kind === 'num') {
|
||||
if (spec.mapSet && newValue !== null) spec.mapSet(this.#map, Number(newValue));
|
||||
} else if (spec.kind === 'bool-off') {
|
||||
spec.mapSet?.(this.#map, newValue === null);
|
||||
}
|
||||
// bool-on: constructor-only, no live update
|
||||
}
|
||||
|
||||
#syncAttr(name: string, value: string) {
|
||||
if (this.#syncing || this.getAttribute(name) === value) return;
|
||||
this.#syncing = true;
|
||||
this.setAttribute(name, value);
|
||||
this.#syncing = false;
|
||||
}
|
||||
|
||||
#buildOptions(): MapOptions {
|
||||
const o: Record<string, unknown> = {};
|
||||
for (const [propName, spec] of Object.entries(PROPS) as [PropName, PropDef][]) {
|
||||
if (spec.kind === 'num') {
|
||||
if (spec.viewState) continue;
|
||||
const v = this.getAttribute(spec.attr);
|
||||
if (v !== null) o[propName] = Number(v);
|
||||
} else if (spec.kind === 'bool-off') {
|
||||
if (this.hasAttribute(spec.attr)) o[propName] = false;
|
||||
} else {
|
||||
if (this.hasAttribute(spec.attr)) o[propName] = true;
|
||||
}
|
||||
}
|
||||
return o as MapOptions;
|
||||
}
|
||||
|
||||
#handleLeafletRegister = (e: LeafletRegisterEvent) => {
|
||||
e.stopPropagation();
|
||||
if (this.#map && e.detail.leafletObject) {
|
||||
e.detail.leafletObject.addTo(this.#map);
|
||||
}
|
||||
};
|
||||
|
||||
get map(): LMap | undefined {
|
||||
return this.#map;
|
||||
}
|
||||
}
|
||||
|
||||
customElements.define('leaflet-map', LeafletMap);
|
||||
@ -0,0 +1,28 @@
|
||||
import L from 'leaflet';
|
||||
import { LeafletElement } from '../core/LeafletElement.js';
|
||||
|
||||
export class LeafletMarker extends LeafletElement {
|
||||
static get observedAttributes() {
|
||||
return ['lat', 'lng', 'title', 'alt', 'draggable', 'opacity', 'z-index-offset'];
|
||||
}
|
||||
|
||||
protected createLeafletObject(): L.Layer {
|
||||
const lat = parseFloat(this.getAttribute('lat') || '0');
|
||||
const lng = parseFloat(this.getAttribute('lng') || '0');
|
||||
return new L.Marker([lat, lng], this.options);
|
||||
}
|
||||
|
||||
protected updateLeafletObject(property: string, value: unknown) {
|
||||
if (this.leafletObject instanceof L.Marker) {
|
||||
if (property === 'lat' || property === 'lng') {
|
||||
const lat = parseFloat(this.getAttribute('lat') || '0');
|
||||
const lng = parseFloat(this.getAttribute('lng') || '0');
|
||||
this.leafletObject.setLatLng([lat, lng]);
|
||||
} else {
|
||||
super.updateLeafletObject(property, value);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
customElements.define('leaflet-marker', LeafletMarker);
|
||||
@ -0,0 +1,68 @@
|
||||
import L from 'leaflet';
|
||||
import { LeafletElement } from '../core/LeafletElement.js';
|
||||
import { LeafletLine } from './leaflet-line.js';
|
||||
|
||||
export class LeafletPolygon extends LeafletElement {
|
||||
private _observer?: MutationObserver;
|
||||
static get observedAttributes() {
|
||||
return ['color', 'weight', 'opacity', 'fill', 'fill-color', 'fill-opacity'];
|
||||
}
|
||||
|
||||
protected createLeafletObject(): L.Layer {
|
||||
const coords = this.getCoords();
|
||||
return new L.Polygon(coords, this.options);
|
||||
}
|
||||
|
||||
private getCoords(): [number, number][] {
|
||||
const lines = Array.from(this.querySelectorAll('leaflet-line')) as LeafletLine[];
|
||||
return lines.map((line) => line.latlng);
|
||||
}
|
||||
|
||||
connectedCallback() {
|
||||
super.connectedCallback();
|
||||
this.addEventListener('line-updated', () => {
|
||||
if (this.leafletObject instanceof L.Polygon) {
|
||||
this.leafletObject.setLatLngs(this.getCoords());
|
||||
}
|
||||
});
|
||||
|
||||
this._observer = new MutationObserver(() => {
|
||||
if (this.leafletObject instanceof L.Polygon) {
|
||||
this.leafletObject.setLatLngs(this.getCoords());
|
||||
}
|
||||
});
|
||||
this._observer.observe(this, { childList: true });
|
||||
}
|
||||
|
||||
disconnectedCallback() {
|
||||
this._observer?.disconnect();
|
||||
this._observer = undefined;
|
||||
super.disconnectedCallback();
|
||||
}
|
||||
|
||||
protected updateLeafletObject(property: string, value: unknown) {
|
||||
if (this.leafletObject instanceof L.Polygon) {
|
||||
if (
|
||||
[
|
||||
'color',
|
||||
'weight',
|
||||
'opacity',
|
||||
'fill',
|
||||
'fillColor',
|
||||
'fillOpacity',
|
||||
'stroke',
|
||||
'dashArray',
|
||||
'dashOffset',
|
||||
'lineCap',
|
||||
'lineJoin',
|
||||
].includes(property)
|
||||
) {
|
||||
this.leafletObject.setStyle({ [property]: value });
|
||||
} else {
|
||||
super.updateLeafletObject(property, value);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
customElements.define('leaflet-polygon', LeafletPolygon);
|
||||
@ -0,0 +1,68 @@
|
||||
import L from 'leaflet';
|
||||
import { LeafletElement } from '../core/LeafletElement.js';
|
||||
import { LeafletLine } from './leaflet-line.js';
|
||||
|
||||
export class LeafletPolyline extends LeafletElement {
|
||||
private _observer?: MutationObserver;
|
||||
static get observedAttributes() {
|
||||
return ['color', 'weight', 'opacity', 'fill', 'fill-color', 'fill-opacity'];
|
||||
}
|
||||
|
||||
protected createLeafletObject(): L.Layer {
|
||||
const coords = this.getCoords();
|
||||
return new L.Polyline(coords, this.options);
|
||||
}
|
||||
|
||||
private getCoords(): [number, number][] {
|
||||
const lines = Array.from(this.querySelectorAll('leaflet-line')) as LeafletLine[];
|
||||
return lines.map((line) => line.latlng);
|
||||
}
|
||||
|
||||
connectedCallback() {
|
||||
super.connectedCallback();
|
||||
this.addEventListener('line-updated', () => {
|
||||
if (this.leafletObject instanceof L.Polyline) {
|
||||
this.leafletObject.setLatLngs(this.getCoords());
|
||||
}
|
||||
});
|
||||
|
||||
this._observer = new MutationObserver(() => {
|
||||
if (this.leafletObject instanceof L.Polyline) {
|
||||
this.leafletObject.setLatLngs(this.getCoords());
|
||||
}
|
||||
});
|
||||
this._observer.observe(this, { childList: true });
|
||||
}
|
||||
|
||||
disconnectedCallback() {
|
||||
this._observer?.disconnect();
|
||||
this._observer = undefined;
|
||||
super.disconnectedCallback();
|
||||
}
|
||||
|
||||
protected updateLeafletObject(property: string, value: unknown) {
|
||||
if (this.leafletObject instanceof L.Polyline) {
|
||||
if (
|
||||
[
|
||||
'color',
|
||||
'weight',
|
||||
'opacity',
|
||||
'fill',
|
||||
'fillColor',
|
||||
'fillOpacity',
|
||||
'stroke',
|
||||
'dashArray',
|
||||
'dashOffset',
|
||||
'lineCap',
|
||||
'lineJoin',
|
||||
].includes(property)
|
||||
) {
|
||||
this.leafletObject.setStyle({ [property]: value });
|
||||
} else {
|
||||
super.updateLeafletObject(property, value);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
customElements.define('leaflet-polyline', LeafletPolyline);
|
||||
@ -0,0 +1,59 @@
|
||||
import L from 'leaflet';
|
||||
import { LeafletElement } from '../core/LeafletElement.js';
|
||||
|
||||
export class LeafletPopup extends LeafletElement {
|
||||
private _observer?: MutationObserver;
|
||||
static get observedAttributes() {
|
||||
return [
|
||||
'lat',
|
||||
'lng',
|
||||
'max-width',
|
||||
'min-width',
|
||||
'max-height',
|
||||
'auto-pan',
|
||||
'close-button',
|
||||
'auto-close',
|
||||
];
|
||||
}
|
||||
|
||||
protected createLeafletObject(): L.Layer {
|
||||
const lat = this.getAttribute('lat');
|
||||
const lng = this.getAttribute('lng');
|
||||
const options = { ...this.options, content: this.innerHTML };
|
||||
const popup = new L.Popup(options);
|
||||
if (lat && lng) {
|
||||
popup.setLatLng([parseFloat(lat), parseFloat(lng)]);
|
||||
}
|
||||
return popup;
|
||||
}
|
||||
|
||||
connectedCallback() {
|
||||
super.connectedCallback();
|
||||
this._observer = new MutationObserver(() => {
|
||||
if (this.leafletObject instanceof L.Popup) {
|
||||
this.leafletObject.setContent(this.innerHTML);
|
||||
}
|
||||
});
|
||||
this._observer.observe(this, { childList: true, characterData: true, subtree: true });
|
||||
}
|
||||
|
||||
disconnectedCallback() {
|
||||
this._observer?.disconnect();
|
||||
this._observer = undefined;
|
||||
super.disconnectedCallback();
|
||||
}
|
||||
|
||||
protected updateLeafletObject(property: string, value: unknown) {
|
||||
if (this.leafletObject instanceof L.Popup) {
|
||||
if (property === 'lat' || property === 'lng') {
|
||||
const lat = parseFloat(this.getAttribute('lat') || '0');
|
||||
const lng = parseFloat(this.getAttribute('lng') || '0');
|
||||
this.leafletObject.setLatLng([lat, lng]);
|
||||
} else {
|
||||
super.updateLeafletObject(property, value);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
customElements.define('leaflet-popup', LeafletPopup);
|
||||
@ -0,0 +1,41 @@
|
||||
import L from 'leaflet';
|
||||
import { LeafletElement } from '../core/LeafletElement.js';
|
||||
|
||||
export class LeafletRectangle extends LeafletElement {
|
||||
static get observedAttributes() {
|
||||
return ['bounds', 'color', 'weight', 'opacity', 'fill', 'fill-color', 'fill-opacity'];
|
||||
}
|
||||
|
||||
protected createLeafletObject(): L.Layer {
|
||||
const bounds = this.options.bounds as L.LatLngBoundsExpression;
|
||||
return new L.Rectangle(bounds, this.options);
|
||||
}
|
||||
|
||||
protected updateLeafletObject(property: string, value: unknown) {
|
||||
if (this.leafletObject instanceof L.Rectangle) {
|
||||
if (property === 'bounds') {
|
||||
this.leafletObject.setBounds(value as L.LatLngBoundsExpression);
|
||||
} else if (
|
||||
[
|
||||
'color',
|
||||
'weight',
|
||||
'opacity',
|
||||
'fill',
|
||||
'fillColor',
|
||||
'fillOpacity',
|
||||
'stroke',
|
||||
'dashArray',
|
||||
'dashOffset',
|
||||
'lineCap',
|
||||
'lineJoin',
|
||||
].includes(property)
|
||||
) {
|
||||
this.leafletObject.setStyle({ [property]: value });
|
||||
} else {
|
||||
super.updateLeafletObject(property, value);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
customElements.define('leaflet-rectangle', LeafletRectangle);
|
||||
@ -0,0 +1,31 @@
|
||||
import L from 'leaflet';
|
||||
import { LeafletElement } from '../core/LeafletElement.js';
|
||||
|
||||
export class LeafletSVGOverlay extends LeafletElement {
|
||||
static get observedAttributes() {
|
||||
return ['bounds', 'opacity', 'alt', 'interactive', 'cross-origin', 'z-index', 'className'];
|
||||
}
|
||||
|
||||
protected createLeafletObject(): L.Layer {
|
||||
const svg = this.querySelector('svg');
|
||||
const bounds = this.options.bounds as L.LatLngBoundsExpression;
|
||||
if (!svg) {
|
||||
// Create a dummy SVG if none provided
|
||||
const dummy = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
|
||||
return new L.SVGOverlay(dummy, bounds, this.options);
|
||||
}
|
||||
return new L.SVGOverlay(svg, bounds, this.options);
|
||||
}
|
||||
|
||||
protected updateLeafletObject(property: string, value: unknown) {
|
||||
if (this.leafletObject instanceof L.SVGOverlay) {
|
||||
if (property === 'bounds') {
|
||||
this.leafletObject.setBounds(new L.LatLngBounds(value as L.LatLngExpression[]));
|
||||
} else {
|
||||
super.updateLeafletObject(property, value);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
customElements.define('leaflet-svg-overlay', LeafletSVGOverlay);
|
||||
@ -0,0 +1,25 @@
|
||||
import L from 'leaflet';
|
||||
import { LeafletElement } from '../core/LeafletElement.js';
|
||||
|
||||
export class LeafletTileLayerWMS extends LeafletElement {
|
||||
static get observedAttributes() {
|
||||
return ['url', 'layers', 'styles', 'format', 'transparent', 'version', 'crs', 'uppercase'];
|
||||
}
|
||||
|
||||
protected createLeafletObject(): L.Layer {
|
||||
const url = this.getAttribute('url') || '';
|
||||
return new L.TileLayer.WMS(url, this.options as L.WMSOptions);
|
||||
}
|
||||
|
||||
protected updateLeafletObject(property: string, value: unknown) {
|
||||
if (this.leafletObject instanceof L.TileLayer.WMS) {
|
||||
if (property === 'url') {
|
||||
this.leafletObject.setUrl(value as string);
|
||||
} else {
|
||||
super.updateLeafletObject(property, value);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
customElements.define('leaflet-tile-layer-wms', LeafletTileLayerWMS);
|
||||
@ -0,0 +1,25 @@
|
||||
import L from 'leaflet';
|
||||
import { LeafletElement } from '../core/LeafletElement.js';
|
||||
|
||||
export class LeafletTileLayer extends LeafletElement {
|
||||
static get observedAttributes() {
|
||||
return ['url', 'attribution', 'min-zoom', 'max-zoom', 'opacity', 'z-index'];
|
||||
}
|
||||
|
||||
protected createLeafletObject(): L.Layer {
|
||||
const url = this.getAttribute('url') || '';
|
||||
return new L.TileLayer(url, this.options);
|
||||
}
|
||||
|
||||
protected updateLeafletObject(property: string, value: unknown) {
|
||||
if (this.leafletObject instanceof L.TileLayer) {
|
||||
if (property === 'url') {
|
||||
this.leafletObject.setUrl(value as string);
|
||||
} else {
|
||||
super.updateLeafletObject(property, value);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
customElements.define('leaflet-tile-layer', LeafletTileLayer);
|
||||
@ -0,0 +1,50 @@
|
||||
import L from 'leaflet';
|
||||
import { LeafletElement } from '../core/LeafletElement.js';
|
||||
|
||||
export class LeafletTooltip extends LeafletElement {
|
||||
private _observer?: MutationObserver;
|
||||
static get observedAttributes() {
|
||||
return ['lat', 'lng', 'pane', 'offset', 'direction', 'permanent', 'sticky', 'opacity'];
|
||||
}
|
||||
|
||||
protected createLeafletObject(): L.Layer {
|
||||
const lat = this.getAttribute('lat');
|
||||
const lng = this.getAttribute('lng');
|
||||
const options = { ...this.options, content: this.innerHTML };
|
||||
const tooltip = new L.Tooltip(options);
|
||||
if (lat && lng) {
|
||||
tooltip.setLatLng([parseFloat(lat), parseFloat(lng)]);
|
||||
}
|
||||
return tooltip;
|
||||
}
|
||||
|
||||
connectedCallback() {
|
||||
super.connectedCallback();
|
||||
this._observer = new MutationObserver(() => {
|
||||
if (this.leafletObject instanceof L.Tooltip) {
|
||||
this.leafletObject.setContent(this.innerHTML);
|
||||
}
|
||||
});
|
||||
this._observer.observe(this, { childList: true, characterData: true, subtree: true });
|
||||
}
|
||||
|
||||
disconnectedCallback() {
|
||||
this._observer?.disconnect();
|
||||
this._observer = undefined;
|
||||
super.disconnectedCallback();
|
||||
}
|
||||
|
||||
protected updateLeafletObject(property: string, value: unknown) {
|
||||
if (this.leafletObject instanceof L.Tooltip) {
|
||||
if (property === 'lat' || property === 'lng') {
|
||||
const lat = parseFloat(this.getAttribute('lat') || '0');
|
||||
const lng = parseFloat(this.getAttribute('lng') || '0');
|
||||
this.leafletObject.setLatLng([lat, lng]);
|
||||
} else {
|
||||
super.updateLeafletObject(property, value);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
customElements.define('leaflet-tooltip', LeafletTooltip);
|
||||
@ -0,0 +1,45 @@
|
||||
import L from 'leaflet';
|
||||
import { LeafletElement } from '../core/LeafletElement.js';
|
||||
|
||||
export class LeafletVideoOverlay extends LeafletElement {
|
||||
static get observedAttributes() {
|
||||
return [
|
||||
'url',
|
||||
'bounds',
|
||||
'opacity',
|
||||
'alt',
|
||||
'interactive',
|
||||
'cross-origin',
|
||||
'loop',
|
||||
'autoplay',
|
||||
'muted',
|
||||
'playsinline',
|
||||
];
|
||||
}
|
||||
|
||||
protected createLeafletObject(): L.Layer {
|
||||
const url = this.getAttribute('url') || '';
|
||||
const bounds = this.options.bounds as L.LatLngBoundsExpression;
|
||||
return new L.VideoOverlay(url, bounds, this.options);
|
||||
}
|
||||
|
||||
protected updateLeafletObject(property: string, value: unknown) {
|
||||
if (this.leafletObject instanceof L.VideoOverlay) {
|
||||
if (property === 'url') {
|
||||
this.leafletObject.setUrl(value as string);
|
||||
} else if (property === 'bounds') {
|
||||
this.leafletObject.setBounds(new L.LatLngBounds(value as L.LatLngExpression[]));
|
||||
} else {
|
||||
super.updateLeafletObject(property, value);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
getElement(): HTMLVideoElement | undefined {
|
||||
return this.leafletObject instanceof L.VideoOverlay
|
||||
? this.leafletObject.getElement()
|
||||
: undefined;
|
||||
}
|
||||
}
|
||||
|
||||
customElements.define('leaflet-video-overlay', LeafletVideoOverlay);
|
||||
@ -0,0 +1,36 @@
|
||||
import { Control } from 'leaflet';
|
||||
|
||||
export abstract class LeafletControl extends HTMLElement {
|
||||
protected control?: Control;
|
||||
|
||||
static get observedAttributes(): string[] {
|
||||
return [];
|
||||
}
|
||||
|
||||
connectedCallback() {
|
||||
this.control = this.createControl();
|
||||
this.register();
|
||||
}
|
||||
|
||||
disconnectedCallback() {
|
||||
this.control?.remove();
|
||||
this.control = undefined;
|
||||
}
|
||||
|
||||
protected abstract createControl(): Control;
|
||||
|
||||
protected register() {
|
||||
if (this.control) {
|
||||
this.dispatchEvent(
|
||||
new CustomEvent('leaflet-register', {
|
||||
detail: {
|
||||
leafletObject: this.control,
|
||||
element: this,
|
||||
},
|
||||
bubbles: true,
|
||||
composed: true,
|
||||
}),
|
||||
);
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,141 @@
|
||||
import { Layer, Control, Popup, Tooltip, LayerGroup } from 'leaflet';
|
||||
|
||||
export interface LeafletRegisterEvent extends CustomEvent {
|
||||
detail: {
|
||||
leafletObject: Layer | Control;
|
||||
element: HTMLElement;
|
||||
};
|
||||
}
|
||||
|
||||
export abstract class LeafletElement extends HTMLElement {
|
||||
protected leafletObject?: Layer;
|
||||
protected options: Record<string, unknown> = {};
|
||||
protected _parentLayer?: Layer;
|
||||
protected _parentBindingType?: 'popup' | 'tooltip' | 'layer';
|
||||
private _registerHandler?: EventListener;
|
||||
|
||||
static get observedAttributes(): string[] {
|
||||
return [];
|
||||
}
|
||||
|
||||
connectedCallback() {
|
||||
this.initOptions();
|
||||
this.leafletObject = this.createLeafletObject();
|
||||
|
||||
this._registerHandler = ((e: LeafletRegisterEvent) => {
|
||||
if (this.leafletObject) {
|
||||
const childObj = e.detail.leafletObject;
|
||||
const childEl = e.detail.element;
|
||||
if (childObj instanceof Popup) {
|
||||
e.stopPropagation();
|
||||
this.leafletObject.bindPopup(childObj);
|
||||
if (childEl instanceof LeafletElement) {
|
||||
childEl._parentLayer = this.leafletObject;
|
||||
childEl._parentBindingType = 'popup';
|
||||
}
|
||||
} else if (childObj instanceof Tooltip) {
|
||||
e.stopPropagation();
|
||||
this.leafletObject.bindTooltip(childObj);
|
||||
if (childEl instanceof LeafletElement) {
|
||||
childEl._parentLayer = this.leafletObject;
|
||||
childEl._parentBindingType = 'tooltip';
|
||||
}
|
||||
} else if (childObj instanceof Layer && 'addLayer' in this.leafletObject) {
|
||||
e.stopPropagation();
|
||||
(this.leafletObject as LayerGroup).addLayer(childObj);
|
||||
if (childEl instanceof LeafletElement) {
|
||||
childEl._parentLayer = this.leafletObject;
|
||||
childEl._parentBindingType = 'layer';
|
||||
}
|
||||
}
|
||||
}
|
||||
}) as EventListener;
|
||||
this.addEventListener('leaflet-register', this._registerHandler);
|
||||
|
||||
this.register();
|
||||
}
|
||||
|
||||
disconnectedCallback() {
|
||||
if (this._registerHandler) {
|
||||
this.removeEventListener('leaflet-register', this._registerHandler);
|
||||
this._registerHandler = undefined;
|
||||
}
|
||||
if (!this.leafletObject) return;
|
||||
if (this._parentBindingType === 'popup' && this._parentLayer) {
|
||||
this._parentLayer.unbindPopup();
|
||||
} else if (this._parentBindingType === 'tooltip' && this._parentLayer) {
|
||||
this._parentLayer.unbindTooltip();
|
||||
} else if (
|
||||
this._parentBindingType === 'layer' &&
|
||||
this._parentLayer &&
|
||||
'removeLayer' in this._parentLayer
|
||||
) {
|
||||
(this._parentLayer as LayerGroup).removeLayer(this.leafletObject);
|
||||
} else {
|
||||
this.leafletObject.remove();
|
||||
}
|
||||
this._parentLayer = undefined;
|
||||
this._parentBindingType = undefined;
|
||||
this.leafletObject = undefined;
|
||||
}
|
||||
|
||||
protected initOptions() {
|
||||
const observed = (this.constructor as typeof LeafletElement).observedAttributes;
|
||||
observed.forEach((attr) => {
|
||||
const val = this.getAttribute(attr);
|
||||
if (val !== null) {
|
||||
this.options[camelCase(attr)] = parseAttributeValue(val);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
attributeChangedCallback(name: string, oldValue: string, newValue: string) {
|
||||
if (oldValue === newValue) return;
|
||||
const propertyName = camelCase(name);
|
||||
const parsedValue = parseAttributeValue(newValue);
|
||||
this.options[propertyName] = parsedValue;
|
||||
|
||||
if (this.leafletObject) {
|
||||
this.updateLeafletObject(propertyName, parsedValue);
|
||||
}
|
||||
}
|
||||
|
||||
protected abstract createLeafletObject(): Layer;
|
||||
|
||||
protected updateLeafletObject(property: string, value: unknown) {
|
||||
const setter = `set${property.charAt(0).toUpperCase()}${property.slice(1)}`;
|
||||
const obj = this.leafletObject as unknown as Record<string, unknown>;
|
||||
if (obj && typeof obj[setter] === 'function') {
|
||||
(obj[setter] as (val: unknown) => void)(value);
|
||||
}
|
||||
}
|
||||
|
||||
protected register() {
|
||||
if (!this.leafletObject) return;
|
||||
const event = new CustomEvent('leaflet-register', {
|
||||
detail: {
|
||||
leafletObject: this.leafletObject,
|
||||
element: this,
|
||||
},
|
||||
bubbles: true,
|
||||
composed: true,
|
||||
});
|
||||
this.dispatchEvent(event);
|
||||
}
|
||||
}
|
||||
|
||||
function camelCase(str: string): string {
|
||||
return str.replace(/-([a-z])/g, (g) => g[1].toUpperCase());
|
||||
}
|
||||
|
||||
function parseAttributeValue(value: string): unknown {
|
||||
if (value === 'true') return true;
|
||||
if (value === 'false') return false;
|
||||
const num = Number(value);
|
||||
if (!isNaN(num) && value !== '') return num;
|
||||
try {
|
||||
return JSON.parse(value);
|
||||
} catch {
|
||||
return value;
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,23 @@
|
||||
export * from './core/LeafletElement.js';
|
||||
export * from './core/LeafletControl.js';
|
||||
export * from './components/leaflet-map.js';
|
||||
export * from './components/leaflet-marker.js';
|
||||
export * from './components/leaflet-circle.js';
|
||||
export * from './components/leaflet-circle-marker.js';
|
||||
export * from './components/leaflet-line.js';
|
||||
export * from './components/leaflet-polygon.js';
|
||||
export * from './components/leaflet-polyline.js';
|
||||
export * from './components/leaflet-rectangle.js';
|
||||
export * from './components/leaflet-tile-layer.js';
|
||||
export * from './components/leaflet-tile-layer-wms.js';
|
||||
export * from './components/leaflet-image-overlay.js';
|
||||
export * from './components/leaflet-video-overlay.js';
|
||||
export * from './components/leaflet-svg-overlay.js';
|
||||
export * from './components/leaflet-layer-group.js';
|
||||
export * from './components/leaflet-feature-group.js';
|
||||
export * from './components/leaflet-geojson.js';
|
||||
export * from './components/leaflet-control-zoom.js';
|
||||
export * from './components/leaflet-control-attribution.js';
|
||||
export * from './components/leaflet-control-scale.js';
|
||||
export * from './components/leaflet-popup.js';
|
||||
export * from './components/leaflet-tooltip.js';
|
||||
@ -0,0 +1,4 @@
|
||||
declare module '*.css' {
|
||||
const content: string;
|
||||
export default content;
|
||||
}
|
||||
@ -0,0 +1,17 @@
|
||||
{
|
||||
"compilerOptions": {
|
||||
"target": "ESNext",
|
||||
"module": "ESNext",
|
||||
"moduleResolution": "bundler",
|
||||
"lib": ["ESNext", "DOM", "DOM.Iterable"],
|
||||
"declaration": true,
|
||||
"outDir": "./dist",
|
||||
"rootDir": "./src",
|
||||
"strict": true,
|
||||
"esModuleInterop": true,
|
||||
"skipLibCheck": true,
|
||||
"forceConsistentCasingInFileNames": true,
|
||||
"isolatedModules": true,
|
||||
},
|
||||
"include": ["src/**/*"]
|
||||
}
|
||||
Loading…
Reference in New Issue