Merge pull request #37 from vue-leaflet/add-polyline-component (2f8ec992) · Commits · school / Capstone Design / 02 / vue-leaflet

src/Playground.vue

+13 −0

Original line number	Diff line number	Diff line
		@@ -15,9 +15,20 @@
		lol
		</l-tooltip>
		</l-marker>

		<l-marker :lat-lng="[47.41322, -1.219482]">
		<l-icon :icon-url="iconUrl" :icon-size="iconSize" />
		</l-marker>

		<l-polyline
		:lat-lngs="[
		[47.334852, -1.509485],
		[47.342596, -1.328731],
		[47.241487, -1.190568],
		[47.234787, -1.358337],
		]"
		color="green"
		></l-polyline>
		</l-map>
		<button @click="changeIcon">New kitten icon</button>
		</div>
		@@ -29,6 +40,7 @@ import LTileLayer from "./components/LTileLayer.vue";
		import LMarker from "./components/LMarker.vue";
		import LControlLayers from "./components/LControlLayers.vue";
		import LTooltip from "./components/LTooltip.vue";
		import LPolyline from "./components/LPolyline.vue";

		export default {
		components: {
		@@ -38,6 +50,7 @@ export default {
		LMarker,
		LControlLayers,
		LTooltip,
		LPolyline,
		},
		data() {
		return {

src/components/LPolyline.vue

0 → 100644

+48 −0

Original line number	Diff line number	Diff line
		<script>
		import { onMounted, ref, h, inject } from "vue";
		import { remapEvents, propsBinder } from "../utils.js";
		import { props, setup as polylineSetup } from "../functions/polyline";

		/**
		* Polyline component, lets you add and personalize polylines on the map
		*/
		export default {
		name: "LPolyline",
		props,
		setup(props, context) {
		const leafletRef = ref({});
		const ready = ref(false);

		const addLayer = inject("addLayer");

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

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

		leafletRef.value = polyline(props.latLngs, options);

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

		propsBinder(methods, leafletRef.value, props, setOptions);

		addLayer({
		...props,
		...methods,
		leafletObject: leafletRef.value,
		});
		ready.value = true;
		});
		return { ready };
		},
		render() {
		if (this.ready && this.$slots.default) {
		return h("div", { style: { display: "none" } }, this.$slots.default());
		}
		return null;
		},
		};
		</script>

src/functions/interactiveLayer.js

0 → 100644

+21 −0

Original line number	Diff line number	Diff line
		export const props = {
		interactive: {
		type: Boolean,
		default: true,
		},
		bubblingMouseEvents: {
		type: Boolean,
		default: true,
		},
		};

		export const setup = (props) => {
		const options = {
		interactive: props.interactive,
		bubblingMouseEvents: props.bubblingMouseEvents,
		};

		const methods = {};

		return { options, methods };
		};

src/functions/path.js

0 → 100644

+157 −0

Original line number	Diff line number	Diff line
		import { onBeforeUnmount, inject } from "vue";
		import { props as layerProps, setup as layerSetup } from "./layer";
		import {
		props as interactiveLayerProps,
		setup as interactiveLayerSetup,
		} from "./interactiveLayer";

		export const props = {
		...layerProps,
		...interactiveLayerProps,
		stroke: {
		type: Boolean,
		custom: true,
		default: true,
		},
		color: {
		type: String,
		custom: true,
		default: "#3388ff",
		},
		weight: {
		type: Number,
		custom: true,
		default: 3,
		},
		opacity: {
		type: Number,
		custom: true,
		default: 1.0,
		},
		lineCap: {
		type: String,
		custom: true,
		default: "round",
		},
		lineJoin: {
		type: String,
		custom: true,
		default: "round",
		},
		dashArray: {
		type: String,
		custom: true,
		default: null,
		},
		dashOffset: {
		type: String,
		custom: true,
		default: null,
		},
		fill: {
		type: Boolean,
		custom: true,
		default: false,
		},
		fillColor: {
		type: String,
		custom: true,
		default: "#3388ff",
		},
		fillOpacity: {
		type: Number,
		custom: true,
		default: 0.2,
		},
		fillRule: {
		type: String,
		custom: true,
		default: "evenodd",
		},
		className: {
		type: String,
		custom: true,
		default: null,
		},
		};

		export const setup = (props, leafletRef, context) => {
		const { options: layerOptions, methods: layerMethods } = layerSetup(
		props,
		leafletRef,
		context
		);
		const {
		options: interactiveLayerOptions,
		methods: interactiveLayerMethods,
		} = interactiveLayerSetup(props, leafletRef, context);

		const removeLayer = inject("removeLayer");

		const options = {
		...layerOptions,
		...interactiveLayerOptions,
		stroke: props.stroke,
		color: props.color,
		weight: props.weight,
		opacity: props.opacity,
		lineCap: props.lineCap,
		lineJoin: props.lineJoin,
		dashArray: props.dashArray,
		dashOffset: props.dashOffset,
		fill: props.fill,
		fillColor: props.fillColor,
		fillOpacity: props.fillOpacity,
		fillRule: props.fillRule,
		className: props.className,
		};
		const methods = {
		...layerMethods,
		...interactiveLayerMethods,
		setStroke(stroke) {
		leafletRef.value.setStyle({ stroke });
		},
		setColor(color) {
		leafletRef.value.setStyle({ color });
		},
		setWeight(weight) {
		leafletRef.value.setStyle({ weight });
		},
		setOpacity(opacity) {
		leafletRef.value.setStyle({ opacity });
		},
		setLineCap(lineCap) {
		leafletRef.value.setStyle({ lineCap });
		},
		setLineJoin(lineJoin) {
		leafletRef.value.setStyle({ lineJoin });
		},
		setDashArray(dashArray) {
		leafletRef.value.setStyle({ dashArray });
		},
		setDashOffset(dashOffset) {
		leafletRef.value.setStyle({ dashOffset });
		},
		setFill(fill) {
		leafletRef.value.setStyle({ fill });
		},
		setFillColor(fillColor) {
		leafletRef.value.setStyle({ fillColor });
		},
		setFillOpacity(fillOpacity) {
		leafletRef.value.setStyle({ fillOpacity });
		},
		setFillRule(fillRule) {
		leafletRef.value.setStyle({ fillRule });
		},
		setClassName(className) {
		leafletRef.value.setStyle({ className });
		},
		};

		onBeforeUnmount(() => {
		removeLayer();
		});

		return { options, methods };
		};

src/functions/polyline.js

0 → 100644

+45 −0

Original line number	Diff line number	Diff line
		import { props as pathProps, setup as pathSetup } from "./path";

		export const props = {
		...pathProps,
		latLngs: {
		type: Array,
		default: () => [],
		},
		smoothFactor: {
		type: Number,
		custom: true,
		default: 1.0,
		},
		noClip: {
		type: Boolean,
		custom: true,
		default: false,
		},
		};

		export const setup = (props, leafletRef, context) => {
		const { options: pathOptions, methods: pathMethods } = pathSetup(
		props,
		leafletRef,
		context
		);
		const options = {
		...pathOptions,
		...props,
		};

		const methods = {
		...pathMethods,
		setSmoothFactor(smoothFactor) {
		leafletRef.value.setStyle({ smoothFactor });
		},
		setNoClip(noClip) {
		leafletRef.value.setStyle({ noClip });
		},
		addLatLng(latLng) {
		leafletRef.value.addLatLng(latLng);
		},
		};
		return { options, methods };
		};