Extract map options and event handlers (60e19542) · Commits · school / Capstone Design / 02 / vue-leaflet

src/components/LMap.vue

+8 −53

Original line number	Diff line number	Diff line
		@@ -20,7 +20,12 @@ import {
		resetWebpackIcon,
		provideMethodsFromBuilders,
		} from "../utils.js";
		import { mapMethodBuilders, buildMapPropSetters } from "../functions/map";
		import {
		getDefaultMapOptions,
		mapMethodBuilders,
		buildMapPropSetters,
		buildMapEventHandlers,
		} from "../functions/map";

		export default {
		props: {
		@@ -151,60 +156,10 @@ export default {
		layersInControl: [],
		});

		const options = {
		minZoom: props.minZoom,
		maxZoom: props.maxZoom,
		maxBounds: props.maxBounds,
		maxBoundsViscosity: props.maxBoundsViscosity,
		worldCopyJump: props.worldCopyJump,
		crs: props.crs,
		center: props.center,
		zoom: props.zoom,
		inertia: props.inertia,
		inertiaDeceleration: props.inertiaDeceleration,
		inertiaMaxSpeed: props.inertiaMaxSpeed,
		easeLinearity: props.easeLinearity,
		zoomAnimation: props.zoomAnimation,
		zoomAnimationThreshold: props.zoomAnimationThreshold,
		fadeAnimation: props.fadeAnimation,
		markerZoomAnimation: props.markerZoomAnimation,
		};

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

		const eventHandlers = {
		moveEndHandler() {
		/**
		* Triggers when zoom is updated
		* @type {number,string}
		*/
		context.emit("update:zoom", blueprint.leafletRef.getZoom());
		/**
		* Triggers when center is updated
		* @type {object,array}
		*/
		context.emit("update:center", blueprint.leafletRef.getCenter());

		/**
		* Triggers when bounds are updated
		* @type {object}
		*/
		context.emit("update:bounds", blueprint.leafletRef.getBounds());
		},
		overlayAddHandler(e) {
		const layer = blueprint.layersInControl.find((l) => l.name === e.name);
		if (layer) {
		layer.updateVisibleProp(true);
		}
		},
		overlayRemoveHandler(e) {
		const layer = blueprint.layersInControl.find((l) => l.name === e.name);
		if (layer) {
		layer.updateVisibleProp(false);
		}
		},
		};

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

src/functions/map.js

+109 −57

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

		export const getDefaultMapOptions = (props) => ({
		minZoom: props.minZoom,
		maxZoom: props.maxZoom,
		maxBounds: props.maxBounds,
		maxBoundsViscosity: props.maxBoundsViscosity,
		worldCopyJump: props.worldCopyJump,
		crs: props.crs,
		center: props.center,
		zoom: props.zoom,
		inertia: props.inertia,
		inertiaDeceleration: props.inertiaDeceleration,
		inertiaMaxSpeed: props.inertiaMaxSpeed,
		easeLinearity: props.easeLinearity,
		zoomAnimation: props.zoomAnimation,
		zoomAnimationThreshold: props.zoomAnimationThreshold,
		fadeAnimation: props.fadeAnimation,
		markerZoomAnimation: props.markerZoomAnimation,
		});

		export const mapMethodBuilders = {
		buildAddMapLayer(blueprint) {
		return (layer) => {
		@@ -20,7 +39,7 @@ export const mapMethodBuilders = {
		}
		}
		if (layer.visible !== false) {
		blueprint.mapRef.addLayer(layer.mapObject);
		blueprint.leafletRef.addLayer(layer.mapObject);
		}
		};
		},
		@@ -42,7 +61,7 @@ export const mapMethodBuilders = {
		);
		}
		}
		blueprint.mapRef.removeLayer(layer.mapObject);
		blueprint.leafletRef.removeLayer(layer.mapObject);
		};
		},

		@@ -52,7 +71,7 @@ export const mapMethodBuilders = {
		return;
		}
		blueprint.layerControl = lControlLayer;
		blueprint.mapRef.addControl(lControlLayer.mapObject);
		blueprint.leafletRef.addControl(lControlLayer.mapObject);
		blueprint.layersToAdd.forEach((layer) => {
		blueprint.layerControl.addLayer(layer);
		});
		@@ -65,17 +84,16 @@ export const mapMethodBuilders = {
		if (!blueprint.ready) {
		return;
		}
		blueprint.mapRef.fitBounds(bounds, {
		blueprint.leafletRef.fitBounds(bounds, {
		animate: this.noBlockingAnimations ? false : null,
		});
		};
		},
		};

		export const buildMapPropSetters = (blueprint, props) => {
		return {
		export const buildMapPropSetters = (blueprint, props) => ({
		setZoom(newVal) {
		blueprint.mapRef.setZoom(newVal, {
		blueprint.leafletRef.setZoom(newVal, {
		animate: props.noBlockingAnimations ? false : null,
		});
		},
		@@ -89,9 +107,9 @@ export const buildMapPropSetters = (blueprint, props) => {
		blueprint.padding = newVal;
		},
		setCrs(newVal) {
		const prevBounds = blueprint.mapRef.getBounds();
		blueprint.mapRef.options.crs = newVal;
		blueprint.mapRef.fitBounds(prevBounds, {
		const prevBounds = blueprint.leafletRef.getBounds();
		blueprint.leafletRef.options.crs = newVal;
		blueprint.leafletRef.fitBounds(prevBounds, {
		animate: false,
		padding: [0, 0],
		});
		@@ -104,11 +122,12 @@ export const buildMapPropSetters = (blueprint, props) => {
		if (!newBounds.isValid()) {
		return;
		}
		const oldBounds = blueprint.lastSetBounds \|\| blueprint.mapRef.getBounds();
		const oldBounds =
		blueprint.lastSetBounds \|\| blueprint.leafletRef.getBounds();
		const boundsChanged = !oldBounds.equals(newBounds, 0); // set maxMargin to 0 - check exact equals
		if (boundsChanged) {
		blueprint.lastSetBounds = newBounds;
		blueprint.mapRef.fitBounds(newBounds, this.fitBoundsOptions);
		blueprint.leafletRef.fitBounds(newBounds, this.fitBoundsOptions);
		}
		},
		setCenter(newVal) {
		@@ -116,13 +135,46 @@ export const buildMapPropSetters = (blueprint, props) => {
		return;
		}
		const newCenter = latLng(newVal);
		const oldCenter = blueprint.lastSetCenter \|\| blueprint.mapRef.getCenter();
		const oldCenter =
		blueprint.lastSetCenter \|\| blueprint.leafletRef.getCenter();
		if (oldCenter.lat !== newCenter.lat \|\| oldCenter.lng !== newCenter.lng) {
		blueprint.lastSetCenter = newCenter;
		blueprint.mapRef.panTo(newCenter, {
		blueprint.leafletRef.panTo(newCenter, {
		animate: this.noBlockingAnimations ? false : null,
		});
		}
		},
		};
		};
		});

		export const buildMapEventHandlers = (blueprint, context) => ({
		moveEndHandler() {
		/**
		* Triggers when zoom is updated
		* @type {number,string}
		*/
		context.emit("update:zoom", blueprint.leafletRef.getZoom());
		/**
		* Triggers when center is updated
		* @type {object,array}
		*/
		context.emit("update:center", blueprint.leafletRef.getCenter());

		/**
		* Triggers when bounds are updated
		* @type {object}
		*/
		context.emit("update:bounds", blueprint.leafletRef.getBounds());
		},
		overlayAddHandler(e) {
		const layer = blueprint.layersInControl.find((l) => l.name === e.name);
		if (layer) {
		layer.updateVisibleProp(true);
		}
		},
		overlayRemoveHandler(e) {
		const layer = blueprint.layersInControl.find((l) => l.name === e.name);
		if (layer) {
		layer.updateVisibleProp(false);
		}
		},
		});