diff --git a/components/GenerateMap.vue b/components/GenerateMap.vue index 5fd8a40..f724656 100644 --- a/components/GenerateMap.vue +++ b/components/GenerateMap.vue @@ -32,6 +32,8 @@ const selectedLongitude = ref(props.mapLongitude); const selectedStyle = ref(props.availableMapStyles[0].url); const selectedZoom = ref(props.mapZoom); const showModal = ref(false); +const customMapboxStyleRendered = ref(false); +const mapLoadError = ref(false); const emit = defineEmits(["updateMapParams", "handleMapRequest"]); @@ -63,6 +65,14 @@ const updateMapParams = (updateObj: UpdateMapParams) => { selectedStyle.value = value as string; osmEnabled.value = false; emit("updateMapParams", { param: "OsmEnabled", value: false }); + // Reset custom mapbox style rendered state if switching to non-custom style + if ( + typeof value === "string" && + (!value.includes("mapbox://styles/") || + value.includes("mapbox://styles/mapbox/")) + ) { + customMapboxStyleRendered.value = false; + } break; case "Zoom": selectedZoom.value = value as number; @@ -71,6 +81,26 @@ const updateMapParams = (updateObj: UpdateMapParams) => { } }; +/** Passes map style loaded event and any errors to the map sidebar. */ +const handleMapStyleLoaded = (data: { + style: string; + success: boolean; + error?: string; +}) => { + if ( + data.style.includes("mapbox://styles/") && + !data.style.includes("mapbox://styles/mapbox/") + ) { + if (data.success) { + customMapboxStyleRendered.value = true; + mapLoadError.value = false; + } else { + customMapboxStyleRendered.value = false; + mapLoadError.value = true; + } + } +}; + /** Handles form submission and navigates to the home page. */ const handleFormSubmit = (formData: FormData) => { emit("handleMapRequest", formData); @@ -79,6 +109,24 @@ const handleFormSubmit = (formData: FormData) => { router.push("/"); }, 3000); }; + +const resetMapLoadError = () => { + mapLoadError.value = false; +}; + +const resetMapRendered = () => { + customMapboxStyleRendered.value = false; +}; + +watch( + () => localMapboxAccessToken.value, + (newVal) => { + // Reset error state when access token changes + if (newVal !== props.mapboxAccessToken) { + mapLoadError.value = false; + } + }, +);