WIP building initial port from Vue2Leaflet (aaf521fe) · Commits · school / Capstone Design / 02 / vue-leaflet

src/components/LIcon.vue

0 → 100644

+29 −0

Original line number	Diff line number	Diff line
		<script>
		import { onMounted, reactive, ref } from "vue";
		import { props, setup as iconSetup } from "../functions/icon";

		/**
		* Icon component, lets you add and custom icons to the map
		*/
		export default {
		name: "LIcon",
		props,
		setup(props, context) {
		const leafletRef = ref({});
		const schematics = reactive({
		DomEvent: () => undefined,
		divIcon: () => undefined,
		icon: () => undefined,
		});

		onMounted(async () => {
		const { DomEvent, divIcon, icon } = await import(
		"leaflet/dist/leaflet-src.esm"
		);
		schematics.DomEvent = DomEvent;
		schematics.divIcon = divIcon;
		schematics.icon = icon;
		});
		},
		};
		</script>

0 → 100644

+92 −0

Original line number	Diff line number	Diff line
		import { ref, nextTick } from "vue";

		export const props = {
		iconUrl: {
		type: String,
		custom: true,
		default: null,
		},
		iconRetinaUrl: {
		type: String,
		custom: true,
		default: null,
		},
		iconSize: {
		type: [Object, Array],
		custom: true,
		default: null,
		},
		iconAnchor: {
		type: [Object, Array],
		custom: true,
		default: null,
		},
		popupAnchor: {
		type: [Object, Array],
		custom: true,
		default: () => [0, 0],
		},
		tooltipAnchor: {
		type: [Object, Array],
		custom: true,
		default: () => [0, 0],
		},
		shadowUrl: {
		type: String,
		custom: true,
		default: null,
		},
		shadowRetinaUrl: {
		type: String,
		custom: true,
		default: null,
		},
		shadowSize: {
		type: [Object, Array],
		custom: true,
		default: null,
		},
		shadowAnchor: {
		type: [Object, Array],
		custom: true,
		default: null,
		},
		bgPos: {
		type: [Object, Array],
		custom: true,
		default: () => [0, 0],
		},
		className: {
		type: String,
		custom: true,
		default: "",
		},
		options: {
		type: Object,
		custom: true,
		default: () => ({}),
		},
		};

		export const setup = (props, mapRef, context, leafletMethods) => {
		const recreationNeeded = ref(false);
		const swapHtmlNeeded = ref(false);

		const createIcon = () => {};

		const methods = {
		scheduleCreateIcon() {
		recreationNeeded.value = true;
		nextTick(createIcon);
		},

		scheduleHtmlSwap() {
		swapHtmlNeeded.value = true;
		nextTick(createIcon);
		},

		createIcon,
		};

		return { methods };
		};