Refactor map setup more in line with other components (77f8a108) · Commits · school / Capstone Design / 02 / vue-leaflet

src/components/LMap.vue

+4 −19

Original line number	Diff line number	Diff line
		@@ -5,27 +5,14 @@
		</template>

		<script>
		import {
		onMounted,
		onBeforeUnmount,
		computed,
		provide,
		reactive,
		ref,
		} from "vue";
		import { onMounted, onBeforeUnmount, computed, reactive, ref } from "vue";
		import {
		remapEvents,
		propsBinder,
		debounce,
		resetWebpackIcon,
		provideMethodsFromBuilders,
		} from "../utils.js";
		import {
		getDefaultMapOptions,
		mapMethodBuilders,
		buildMapPropSetters,
		buildMapEventHandlers,
		} from "../functions/map";
		import { setup, buildMapEventHandlers } from "../functions/map";

		export default {
		props: {
		@@ -156,9 +143,8 @@ export default {
		layersInControl: [],
		});

		const options = getDefaultMapOptions(props);
		const eventHandlers = buildMapEventHandlers(blueprint, context);
		provideMethodsFromBuilders(provide, mapMethodBuilders, blueprint);
		const { options, methods } = setup(props, blueprint);

		onMounted(async () => {
		const { map, CRS, Icon, DomEvent, setOptions } = await import(
		@@ -169,8 +155,7 @@ export default {

		blueprint.leafletRef = map(root.value, options);

		const setters = buildMapPropSetters(blueprint, props);
		propsBinder(setters, blueprint.leafletRef, props, setOptions);
		propsBinder(methods, blueprint.leafletRef, props, setOptions);
		const listeners = remapEvents(context.attrs);

		blueprint.leafletRef.on(

src/functions/map.js

+108 −112

Original line number	Diff line number	Diff line
		import { latLng, latLngBounds } from "leaflet";
		import { provide } from "vue";

		export const getDefaultMapOptions = (props) => ({
		export const setup = (props, mapBlueprint) => {
		const options = {
		minZoom: props.minZoom,
		maxZoom: props.maxZoom,
		maxBounds: props.maxBounds,
		@@ -17,99 +19,86 @@ export const getDefaultMapOptions = (props) => ({
		zoomAnimationThreshold: props.zoomAnimationThreshold,
		fadeAnimation: props.fadeAnimation,
		markerZoomAnimation: props.markerZoomAnimation,
		});
		};

		export const mapMethodBuilders = {
		buildAddMapLayer(blueprint) {
		return (layer) => {
		if (!blueprint.ready) {
		return;
		}
		const methods = {
		addMapLayer(layer) {
		if (layer.layerType !== undefined) {
		if (blueprint.layerControl === undefined) {
		blueprint.layersToAdd.push(layer);
		if (mapBlueprint.layerControl === undefined) {
		mapBlueprint.layersToAdd.push(layer);
		} else {
		const exist = blueprint.layersInControl.find(
		const exist = mapBlueprint.layersInControl.find(
		(l) => l.mapObject._leaflet_id === layer.mapObject._leaflet_id
		);
		if (!exist) {
		blueprint.layerControl.addLayer(layer);
		blueprint.layersInControl.push(layer);
		mapBlueprint.layerControl.addLayer(layer);
		mapBlueprint.layersInControl.push(layer);
		}
		}
		}
		if (layer.visible !== false) {
		blueprint.leafletRef.addLayer(layer.mapObject);
		mapBlueprint.leafletRef.addLayer(layer.mapObject);
		}
		};
		},

		buildRemoveMapLayer(blueprint) {
		return (layer) => {
		if (!blueprint.ready) {
		removeMapLayer(layer) {
		if (!mapBlueprint.ready) {
		return;
		}
		if (layer.layerType !== undefined) {
		if (blueprint.layerControl === undefined) {
		blueprint.layersToAdd = blueprint.layersToAdd.filter(
		if (mapBlueprint.layerControl === undefined) {
		mapBlueprint.layersToAdd = mapBlueprint.layersToAdd.filter(
		(l) => l.name !== layer.name
		);
		} else {
		blueprint.layerControl.removeLayer(layer.mapObject);
		blueprint.layersInControl = blueprint.layersInControl.filter(
		mapBlueprint.layerControl.removeLayer(layer.mapObject);
		mapBlueprint.layersInControl = mapBlueprint.layersInControl.filter(
		(l) => l.mapObject._leaflet_id !== layer.mapObject._leaflet_id
		);
		}
		}
		blueprint.leafletRef.removeLayer(layer.mapObject);
		};
		mapBlueprint.leafletRef.removeLayer(layer.mapObject);
		},

		buildRegisterLayerControl(blueprint) {
		return (lControlLayer) => {
		if (!blueprint.ready) {
		registerLayerControl(lControlLayer) {
		if (!mapBlueprint.ready) {
		return;
		}
		blueprint.layerControl = lControlLayer;
		blueprint.leafletRef.addControl(lControlLayer.mapObject);
		blueprint.layersToAdd.forEach((layer) => {
		blueprint.layerControl.addLayer(layer);
		mapBlueprint.layerControl = lControlLayer;
		mapBlueprint.leafletRef.addControl(lControlLayer.mapObject);
		mapBlueprint.layersToAdd.forEach((layer) => {
		mapBlueprint.layerControl.addLayer(layer);
		});
		blueprint.layersToAdd = [];
		};
		mapBlueprint.layersToAdd = [];
		},

		buildFitBounds(blueprint) {
		return (bounds) => {
		if (!blueprint.ready) {
		fitBounds(bounds) {
		if (!mapBlueprint.ready) {
		return;
		}
		blueprint.leafletRef.fitBounds(bounds, {
		mapBlueprint.leafletRef.fitBounds(bounds, {
		animate: this.noBlockingAnimations ? false : null,
		});
		};
		},
		};

		export const buildMapPropSetters = (blueprint, props) => ({
		setZoom(newVal) {
		blueprint.leafletRef.setZoom(newVal, {
		mapBlueprint.leafletRef.setZoom(newVal, {
		animate: props.noBlockingAnimations ? false : null,
		});
		},
		setPaddingBottomRight(newVal) {
		blueprint.paddingBottomRight = newVal;
		mapBlueprint.paddingBottomRight = newVal;
		},
		setPaddingTopLeft(newVal) {
		blueprint.paddingTopLeft = newVal;
		mapBlueprint.paddingTopLeft = newVal;
		},
		setPadding(newVal) {
		blueprint.padding = newVal;
		mapBlueprint.padding = newVal;
		},
		setCrs(newVal) {
		const prevBounds = blueprint.leafletRef.getBounds();
		blueprint.leafletRef.options.crs = newVal;
		blueprint.leafletRef.fitBounds(prevBounds, {
		const prevBounds = mapBlueprint.leafletRef.getBounds();
		mapBlueprint.leafletRef.options.crs = newVal;
		mapBlueprint.leafletRef.fitBounds(prevBounds, {
		animate: false,
		padding: [0, 0],
		});
		@@ -123,11 +112,11 @@ export const buildMapPropSetters = (blueprint, props) => ({
		return;
		}
		const oldBounds =
		blueprint.lastSetBounds \|\| blueprint.leafletRef.getBounds();
		mapBlueprint.lastSetBounds \|\| mapBlueprint.leafletRef.getBounds();
		const boundsChanged = !oldBounds.equals(newBounds, 0); // set maxMargin to 0 - check exact equals
		if (boundsChanged) {
		blueprint.lastSetBounds = newBounds;
		blueprint.leafletRef.fitBounds(newBounds, this.fitBoundsOptions);
		mapBlueprint.lastSetBounds = newBounds;
		mapBlueprint.leafletRef.fitBounds(newBounds, this.fitBoundsOptions);
		}
		},
		setCenter(newVal) {
		@@ -136,15 +125,22 @@ export const buildMapPropSetters = (blueprint, props) => ({
		}
		const newCenter = latLng(newVal);
		const oldCenter =
		blueprint.lastSetCenter \|\| blueprint.leafletRef.getCenter();
		mapBlueprint.lastSetCenter \|\| mapBlueprint.leafletRef.getCenter();
		if (oldCenter.lat !== newCenter.lat \|\| oldCenter.lng !== newCenter.lng) {
		blueprint.lastSetCenter = newCenter;
		blueprint.leafletRef.panTo(newCenter, {
		mapBlueprint.lastSetCenter = newCenter;
		mapBlueprint.leafletRef.panTo(newCenter, {
		animate: this.noBlockingAnimations ? false : null,
		});
		}
		},
		});
		};

		provide("addMapLayer", methods.addMapLayer);
		provide("removeMapLayer", methods.removeMapLayer);
		provide("registerLayerControl", methods.registerLayerControl);

		return { options, methods };
		};

		export const buildMapEventHandlers = (blueprint, context) => ({
		moveEndHandler() {