Merge branch 'master' of https://github.com/vue-leaflet/vue-leaflet into... (e12db20d) · Commits · school / Capstone Design / 02 / vue-leaflet

README.md

+10 −3

Original line number	Diff line number	Diff line
		@@ -17,6 +17,7 @@ This is a Beta version! And may yet be instable! If you want to help, please rea
		- LFeatureGroup
		- LGeoJson
		- LIcon
		- LImageOverlay
		- LMap
		- LMarker
		- LPolygon
		@@ -39,7 +40,11 @@ or

		## Usage

		Until the complete documentation is ready, please check the [demo project](https://github.com/vue-leaflet/vue3-demo-project/blob/master/src/App.vue) for example usage.
		Until the complete documentation is ready, please check the
		[component playground](https://github.com/vue-leaflet/vue-leaflet/tree/master/src/playground/views) examples or the
		[demo project](https://github.com/vue-leaflet/vue3-demo-project/blob/master/src/App.vue) for usage with Vue 3.
		Most component props mimic the vanilla [Leaflet options](https://leafletjs.com/reference-1.7.1.html) as closely as
		possible, and generally remain the same as in their [Vue2Leaflet counterparts](https://vue2-leaflet.netlify.app/components/).

		### Working with Leaflet

		@@ -52,14 +57,16 @@ classes are technically no longer the same. See [Issue 48](https://github.com/vu
		To avoid these issues, import any Leaflet methods asynchronously in response to the LMap component's `@ready` event:
		```vue
		<template>
		<l-map>
		<l-map style="height:50vh">
		<l-geo-json :geojson="geojson" :options="geojsonOptions" />
		</l-map>
		</template>

		<script>
		// DON'T load Leaflet components here!
		import { LMap, LGeoJson } from "./../../components";
		// Its CSS is needed though, if not imported elsewhere in your application.
		import "leaflet/dist/leaflet.css"
		import { LMap, LGeoJson } from "@vue-leaflet/vue-leaflet";

		export default {
		components: {

package.json

+1 −1

Original line number	Diff line number	Diff line
		{
		"name": "@vue-leaflet/vue-leaflet",
		"author": "Nicolò Maria Mezzopera",
		"version": "0.5.0",
		"version": "0.6.0",
		"license": "MIT",
		"private": false,
		"sideEffects": false,

src/components/LGridLayer.vue

0 → 100644

+89 −0

Original line number	Diff line number	Diff line
		<script>
		import { onMounted, onUnmounted, ref, inject, nextTick, h, render } from "vue";
		import { remapEvents, propsBinder } from "../utils.js";
		import {
		props as gridLayerProps,
		setup as gridLayerSetup,
		} from "../functions/gridLayer";

		export default {
		props: {
		...gridLayerProps,
		childRender: {
		type: Function,
		required: true,
		},
		},
		setup(props, context) {
		const leafletRef = ref({});
		const tileComponents = ref({});
		const root = ref(null);
		const ready = ref(false);

		const addLayer = inject("addLayer");

		const { options, methods } = gridLayerSetup(props, leafletRef, context);

		onMounted(async () => {
		const { GridLayer, DomEvent, DomUtil } = await import(
		"leaflet/dist/leaflet-src.esm"
		);

		methods.onUnload = (e) => {
		const key = leafletRef.value._tileCoordsToKey(e.coords);
		if (tileComponents[key]) {
		tileComponents[key].innerHTML = "";
		tileComponents[key] = undefined;
		}
		};

		methods.setTileComponent = () => {
		leafletRef.value.redraw();
		};

		const GLayer = GridLayer.extend({
		createTile(coords) {
		const key = leafletRef.value._tileCoordsToKey(coords);
		tileComponents[key] = DomUtil.create("div");

		let vNode = h(
		{ setup: props.childRender, props: ["coords"] },
		{ coords }
		);
		render(vNode, tileComponents[key]);

		return tileComponents[key];
		},
		});

		leafletRef.value = new GLayer(options);

		const listeners = remapEvents(context.attrs);
		DomEvent.on(leafletRef.value, listeners);

		leafletRef.value.on("tileunload", methods.onUnload);

		propsBinder(methods, leafletRef.value, props);
		addLayer({
		...props,
		...methods,
		leafletObject: leafletRef.value,
		});
		ready.value = true;
		nextTick(() => context.emit("ready", leafletRef.value));
		});

		onUnmounted(() => {
		leafletRef.value.off("tileunload", methods.unLoad);
		});

		return { root, ready, leafletObject: leafletRef };
		},
		render() {
		if (this.ready) {
		return h("div", { style: { display: "none" }, ref: "root" });
		}
		return null;
		},
		};
		</script>

src/components/LImageOverlay.vue

0 → 100644

+48 −0

Original line number	Diff line number	Diff line
		<script>
		import { onMounted, ref, inject, nextTick } from "vue";
		import { remapEvents, propsBinder } from "../utils.js";
		import {
		props as imageOverlayProps,
		setup as imageOverlaySetup,
		} from "../functions/imageOverlay";
		import { render } from "../functions/layer";

		/**
		* ImageOverlay component, render a plain image instead of a geospatial map.
		*/
		export default {
		name: "LImageOverlay",
		props: imageOverlayProps,
		setup(props, context) {
		const leafletRef = ref({});
		const ready = ref(false);

		const addLayer = inject("addLayer");

		const { options, methods } = imageOverlaySetup(props, leafletRef, context);

		onMounted(async () => {
		const { imageOverlay, DomEvent } = await import(
		"leaflet/dist/leaflet-src.esm"
		);
		leafletRef.value = imageOverlay(props.url, props.bounds, options);

		const listeners = remapEvents(context.attrs);
		DomEvent.on(leafletRef.value, listeners);
		propsBinder(methods, leafletRef.value, props);
		addLayer({
		...props,
		...methods,
		leafletObject: leafletRef.value,
		});
		ready.value = true;
		nextTick(() => context.emit("ready", leafletRef.value));
		});

		return { ready, leafletObject: leafletRef };
		},
		render() {
		return render(this.ready, this.$slots);
		},
		};
		</script>

src/components/LLayerGroup.vue

+1 −1

Original line number	Diff line number	Diff line
		@@ -12,7 +12,7 @@ export default {

		const addLayer = inject("addLayer");

		const { methods } = layerGroupSetup(props, leafletRef);
		const { methods } = layerGroupSetup(props, leafletRef, context);

		onMounted(async () => {
		const { layerGroup, DomEvent } = await import(