Merge pull request #3 from valiantlynx/valiantlynx-turborepo

Valiantlynx turborepo

.gitignore

@@ -12,4 +12,5 @@ vite.config.ts.timestamp-*
 
 *.log
 .vscode
-.dist
+.dist
+.turbo

README.md

@@ -1,58 +1,51 @@
-# create-svelte
+# svelte-leaflet
 
-Everything you need to build a Svelte library, powered by [`create-svelte`](https://github.com/sveltejs/kit/tree/master/packages/create-svelte).
+Svelte component for [leaflet](https://leafletjs.com/)
 
-Read more about creating a library [in the docs](https://kit.svelte.dev/docs/packaging).
+[Documentation & Demo](https://ngyewch.github.io/svelte-leaflet/)
 
-## Creating a project
+[Sample project](https://github.com/ngyewch/svelte-leaflet-test)
 
-If you're seeing this, you've probably already done this step. Congrats!
+## Component support
 
-```bash
-# create a new project in the current directory
-npm create svelte@latest
+- [x] Map
 
-# create a new project in my-app
-npm create svelte@latest my-app
-```
+UI layers:
 
-## Developing
+- [x] Marker
+- [x] Popup
+- [x] Tooltip
 
-Once you've created a project and installed dependencies with `npm install` (or `pnpm install` or `yarn`), start a development server:
+Raster layers:
 
-```bash
-npm run dev
+- [x] TileLayer
+- [x] TileLayer.WMS
+- [x] ImageOverlay
+- [ ] VideoOverlay
 
-# or start the server and open the app in a new browser tab
-npm run dev -- --open
-```
+Vector layers:
 
-Everything inside `src/lib` is part of your library, everything inside `src/routes` can be used as a showcase or preview app.
+- [x] Polyline
+- [x] Polygon
+- [x] Rectangle
+- [x] Circle
+- [x] CircleMarker
+- [ ] SVGOverlay
 
-## Building
+Other layers:
 
-To build your library:
+- [ ] LayerGroup
+- [ ] FeatureGroup
+- [x] GeoJSON
 
-```bash
-npm run package
-```
+Basic types:
 
-To create a production version of your showcase app:
+- [x] Icon
+- [x] DivIcon
 
-```bash
-npm run build
-```
+Controls:
 
-You can preview the production build with `npm run preview`.
-
-> To deploy your app, you may need to install an [adapter](https://kit.svelte.dev/docs/adapters) for your target environment.
-
-## Publishing
-
-Go into the `package.json` and give your package the desired name through the `"name"` option. Also consider adding a `"license"` field and point it to a `LICENSE` file which you can create from a template (one popular option is the [MIT license](https://opensource.org/license/mit/)).
-
-To publish your library to [npm](https://www.npmjs.com):
-
-```bash
-npm publish
-```
+- [ ] Zoom
+- [ ] Attribution
+- [ ] Layers
+- [x] Scale

package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@valiantlynx/svelte-leaflet",
-	"version": "0.0.1",
+	"version": "0.0.3",
 	"publishConfig": {
 		"access": "public"
 	},
@@ -25,6 +25,7 @@
 		"type": "git",
 		"url": "git+https://github.com/valiantlynx/svelte-leaflet.git"
 	},
+	"homepage": "https://svelte-leaflet.netlify.app",
 	"scripts": {
 		"dev": "vite dev",
 		"build": "vite build && npm run package",
@@ -54,24 +55,31 @@
 	"devDependencies": {
 		"@changesets/cli": "^2.26.2",
 		"@sveltejs/adapter-auto": "^2.0.0",
+		"@sveltejs/adapter-static": "^2.0.3",
 		"@sveltejs/kit": "^1.20.4",
 		"@sveltejs/package": "^2.0.0",
 		"@valiantlynx/eslint-config-custom": "^0.0.1",
 		"@valiantlynx/tailwind-config": "^0.0.8",
 		"@valiantlynx/tsconfig": "^0.0.25",
+		"autoprefixer": "^10.4.16",
 		"eslint": "^8.28.0",
 		"eslint-config-prettier": "^8.5.0",
 		"eslint-plugin-svelte": "^2.30.0",
+		"postcss": "^8.4.31",
 		"prettier": "^2.8.0",
 		"prettier-plugin-svelte": "^2.10.1",
 		"publint": "^0.1.9",
 		"svelte": "^4.0.5",
 		"svelte-check": "^3.4.3",
+		"tailwindcss": "^3.3.5",
 		"tslib": "^2.4.1",
 		"typescript": "^5.0.0",
 		"vite": "^4.4.2"
 	},
 	"svelte": "./dist/index.js",
 	"types": "./dist/index.d.ts",
-	"type": "module"
+	"type": "module",
+	"dependencies": {
+		"leaflet": "^1.9.4"
+	}
 }

postcss.config.js

@@ -0,0 +1,6 @@
+export default {
+	plugins: {
+		tailwindcss: {},
+		autoprefixer: {}
+	}
+};

src/app.css

@@ -0,0 +1,3 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;

src/lib/EventBridge.js

@@ -0,0 +1,29 @@
+export default class EventBridge {
+	constructor(entity, dispatch, events = []) {
+		this.entity = entity;
+
+		this.eventHandlers = [];
+		if (events) {
+			const eventMap = {};
+			events.forEach((event) => {
+				if (!(event in eventMap)) {
+					const handler = function (e) {
+						dispatch(event, e);
+					};
+					this.eventHandlers.push({
+						event: event,
+						handler: handler
+					});
+					entity.on(event, handler);
+					eventMap[event] = handler;
+				}
+			});
+		}
+	}
+
+	unregister() {
+		this.eventHandlers.forEach((entry) => {
+			this.entity.off(entry.event, entry.handler);
+		});
+	}
+}

src/lib/components/Circle.svelte

@@ -0,0 +1,70 @@
+<script>
+	import { createEventDispatcher, getContext, onDestroy, setContext } from 'svelte';
+	import L from 'leaflet';
+
+	import EventBridge from '$lib/EventBridge';
+
+	const { getMap } = getContext(L);
+
+	export let latLng;
+	export let radius = 10;
+	export let color = '#3388ff';
+	export let weight = 3;
+	export let opacity = 1.0;
+	export let lineCap = 'round';
+	export let lineJoin = 'round';
+	export let dashArray = null;
+	export let dashOffset = null;
+	export let fill = true;
+	export let fillColor = '#3388ff';
+	export let fillOpacity = 0.2;
+	export let fillRule = 'evenodd';
+	export let options = {};
+	export let events = [];
+
+	let circle;
+
+	setContext(L.Layer, {
+		getLayer: () => circle
+	});
+
+	const dispatch = createEventDispatcher();
+	let eventBridge;
+
+	$: {
+		if (!circle) {
+			circle = L.circle(latLng, options).addTo(getMap());
+			eventBridge = new EventBridge(circle, dispatch, events);
+		}
+		circle.setLatLng(latLng);
+		circle.setRadius(radius);
+		circle.setStyle({
+			color: color,
+			weight: weight,
+			opacity: opacity,
+			lineCap: lineCap,
+			lineJoin: lineJoin,
+			dashArray: dashArray,
+			dashOffset: dashOffset,
+			fill: fill,
+			fillColor: fillColor,
+			fillOpacity: fillOpacity,
+			fillRule: fillRule
+		});
+	}
+
+	onDestroy(() => {
+		eventBridge.unregister();
+		circle.removeFrom(getMap());
+	});
+
+	export function getCircle() {
+		return circle;
+	}
+</script>
+
+<div>
+	{#if circle}
+		<slot />
+	{/if}
+</div>

src/lib/components/CircleMarker.svelte

@@ -0,0 +1,70 @@
+<script>
+	import { createEventDispatcher, getContext, onDestroy, setContext } from 'svelte';
+	import L from 'leaflet';
+
+	import EventBridge from '$lib/EventBridge';
+
+	const { getMap } = getContext(L);
+
+	export let latLng;
+	export let radius = 10;
+	export let color = '#3388ff';
+	export let weight = 3;
+	export let opacity = 1.0;
+	export let lineCap = 'round';
+	export let lineJoin = 'round';
+	export let dashArray = null;
+	export let dashOffset = null;
+	export let fill = true;
+	export let fillColor = '#3388ff';
+	export let fillOpacity = 0.2;
+	export let fillRule = 'evenodd';
+	export let options = {};
+	export let events = [];
+
+	let circleMarker;
+
+	setContext(L.Layer, {
+		getLayer: () => circleMarker
+	});
+
+	const dispatch = createEventDispatcher();
+	let eventBridge;
+
+	$: {
+		if (!circleMarker) {
+			circleMarker = L.circleMarker(latLng, options).addTo(getMap());
+			eventBridge = new EventBridge(circleMarker, dispatch, events);
+		}
+		circleMarker.setLatLng(latLng);
+		circleMarker.setRadius(radius);
+		circleMarker.setStyle({
+			color: color,
+			weight: weight,
+			opacity: opacity,
+			lineCap: lineCap,
+			lineJoin: lineJoin,
+			dashArray: dashArray,
+			dashOffset: dashOffset,
+			fill: fill,
+			fillColor: fillColor,
+			fillOpacity: fillOpacity,
+			fillRule: fillRule
+		});
+	}
+
+	onDestroy(() => {
+		eventBridge.unregister();
+		circleMarker.removeFrom(getMap());
+	});
+
+	export function getCircleMarker() {
+		return circleMarker;
+	}
+</script>
+
+<div>
+	{#if circleMarker}
+		<slot />
+	{/if}
+</div>

src/lib/components/DivIcon.svelte

@@ -0,0 +1,24 @@
+<script>
+	import { getContext } from 'svelte';
+	import L from 'leaflet';
+
+	const { getMarker } = getContext(L.Marker);
+
+	export let options = {};
+
+	let icon;
+	let html;
+
+	$: {
+		icon = L.divIcon({ ...{ html }, ...options });
+		getMarker().setIcon(icon);
+	}
+
+	export function getIcon() {
+		return icon;
+	}
+</script>
+
+<div bind:this={html}>
+	<slot />
+</div>