Uncaught error when i search a location

[Paulvincent1]

The nominatim api is working good but when i return an object with feature property it shows uncaught error.

this is the error

@maplibre_maplibre-gl-geocoder.js?t=1737868887708&v=c72c84f4:708 Uncaught (in promise) Error: Unhandled error. (No message available)
at EventEmitter.emit (@maplibre_maplibre-gl-geocoder.js?t=1737868887708&v=c72c84f4:708:17)
at MaplibreGeocoder._handleGeocodeErrorResponse (@maplibre_maplibre-gl-geocoder.js?t=1737868887708&v=c72c84f4:1507:24)
at MaplibreGeocoder. (@maplibre_maplibre-gl-geocoder.js?t=1737868887708&v=c72c84f4:1414:14)
at Generator.throw ()
at rejected (@maplibre_maplibre-gl-geocoder.js?t=1737868887708&v=c72c84f4:15:32)

[Paulvincent1]

this is my code

<script setup> import MaplibreGeocoder from "@maplibre/maplibre-gl-geocoder"; import "@maplibre/maplibre-gl-geocoder/dist/maplibre-gl-geocoder.css"; import { useForm } from "@inertiajs/vue3"; import Layout from "../Layouts/Layout.vue"; import SetupProfileLayout from "../Layouts/SetupProfileLayout.vue"; import { route } from "../../../../vendor/tightenco/ziggy/src/js"; import InputFlashMessage from "../Components/InputFlashMessage.vue"; import dayjs from "dayjs"; import { defineComponent, ref, Transition, watch, onMounted } from "vue"; import { MglMap, MglMarker } from "@indoorequal/vue-maplibre-gl"; import { useMap } from "@indoorequal/vue-maplibre-gl"; import { useControl } from "@indoorequal/vue-maplibre-gl"; defineOptions({ layout: [Layout, SetupProfileLayout], }); let form = useForm({ full_name: null, phone_number: null, birth_year: null, gender: null, employer_type: null, business_name: null, business_logo: null, industry: null, company_description: null, company_location: null, }); let showCompanyForm = ref(false); watch( () => form.employer_type, () => { if (form.employer_type === "business") { showCompanyForm.value = true; } if (form.employer_type === "individual") { showCompanyForm.value = false; } }, ); const style = "https://tiles.openfreemap.org/styles/liberty"; const center = [12.550343, 55.665957]; const zoom = 14; const submit = () => { form.post(route("create.profile.employer.post")); }; function setPointerCursor(event) { event.event.target.getCanvas().style.cursor = "default"; } let markedCoordinates = ref([0, 0]); function setMarker(event) { let { lat, lng } = event.event.lngLat; markedCoordinates.value = [lng, lat]; } let map = useMap(); let geocoderApi = ref({ forwardGeocode: async (query) => { const features = []; try { const request = `https://nominatim.openstreetmap.org/search?q=${query}&format=geojson&polygon_geojson=1&addressdetails=1`; const response = await fetch(request); console.log("Response status:", response.status); if (!response.ok) { throw new Error( `API request failed with status: ${response.status}`, ); } const results = await response.json(); console.log("Response status:", results.features); if (results.features.length === 0) { throw new Error("No results found."); } for (const result of results.features) { let centerY = (result.bbox[3] + result.bbox[1]) / 2; let centerX = (result.bbox[2] + result.bbox[0]) / 2; const point = { type: "Feature", geometry: { type: "Point", coordinates: [centerX, centerY], }, place_name: result.properties.display_name, properties: result.properties, text: result.properties.display_name, place_type: ["place"], center: [centerX, centerY], }; features.push(point); } } catch (e) { console.error("Geocoding failed:", error); // Error details const errMsg = error?.message || "No message available"; console.error(`Error Message: ${errMsg}`); // Rethrow the error to ensure it's logged throw error; console.error("Geocoding failed:", e); } return { features, }; }, }); let coordinateResult = ref([]); // Ensure geocoding control is added only after the map is loaded let geocoding = defineComponent({ setup() { return useControl( () => { return new MaplibreGeocoder(geocoderApi.value, { maplibregl: map, }); }, { position: "top-right", }, ); }, render() { return null; }, }); </script>

Tell us about you

Lorem, ipsum dolor sit amet consectetur adipisicing elit. Reiciendis corporis itaque eum eius unde aperiam aliquid vel ratione doloremque! Ullam illo pariatur officiis tempore iste totam soluta dignissimos libero. Hic?

    <form @submit.prevent="submit">
        <div class="flex flex-col">
            <label class="mb-2 mt-4 font-semibold">Full name</label>
            <input
                v-model="form.full_name"
                type="text"
                class="border px-3 py-2 outline-blue-400"
                placeholder="ex. Social Media Manager"
            />
            <InputFlashMessage
                type="error"
                :message="form.errors.full_name"
            />
        </div>
        <div class="flex flex-col">
            <label class="mb-2 mt-4 font-semibold">Phone number</label>
            <input
                v-model="form.phone_number"
                type="text"
                class="border px-3 py-2 outline-blue-400"
                placeholder="ex. Social Media Manager"
            />
            <InputFlashMessage
                type="error"
                :message="form.errors.phone_number"
            />
        </div>

        <div class="mt-4">
            <label class="mb-2 mr-3 mt-4 font-semibold">BIRTH YEAR</label>
            <input
                v-model="form.birth_year"
                type="number"
                min="1900"
                :max="dayjs().format('YYYY') - 18"
                class="w-20 border p-3 text-center outline-blue-500"
                placeholder="YYYY"
                required
            />
        </div>
        <div class="mt-4">
            <p class="mb-2 mt-4 font-semibold">GENDER</p>
            <div>
                <label class="mr-2" for="male">Male</label>
                <input
                    v-model="form.gender"
                    type="radio"
                    class="text-center"
                    id="male"
                    value="Male"
                />
            </div>
            <div>
                <label class="mr-2" for="female">Female</label>
                <input
                    v-model="form.gender"
                    type="radio"
                    class="text-center"
                    id="female"
                    value="Female"
                />
            </div>
            <InputFlashMessage type="error" :message="form.errors.gender" />
        </div>

        <div class="mt-5 flex flex-col">
            <label class="mb-2 mr-3 mt-4 font-semibold"
                >What kind of employer are you?</label
            >
            <select
                name=""
                id=""
                class="border p-3"
                v-model="form.employer_type"
            >
                <option value="business">
                    Business / Company Employer
                </option>
                <option value="individual" class="">
                    Individual (Freelance)
                </option>
            </select>
        </div>

        <Transition
            enter-active-class="animate__animated animate__fadeIn"
            leave-active-class="animate__animated animate__fadeOut"
        >
            <div v-if="showCompanyForm">
                <h2 class="my-3 text-2xl font-semibold">
                    Company Information
                </h2>
                <p class="text-sm">
                    Lorem, ipsum dolor sit amet consectetur adipisicing
                    elit. Reiciendis corporis itaque eum eius unde aperiam
                    aliquid vel ratione doloremque! Ullam illo pariatur
                    officiis tempore iste totam soluta dignissimos libero.
                    Hic?
                </p>

                <div class="flex flex-col">
                    <label class="mb-2 mt-4 font-semibold"
                        >Business / Company name</label
                    >
                    <input
                        v-model="form.business_name"
                        type="text"
                        class="border px-3 py-2 outline-blue-400"
                        placeholder="ex. Social Media Manager"
                    />
                    <InputFlashMessage
                        type="error"
                        :message="form.errors.business_name"
                    />
                </div>
                <div class="flex flex-col">
                    <label class="mb-2 mt-4 font-semibold"
                        >Business logo</label
                    >
                    <input
                        v-model="form.business_logo"
                        type="text"
                        class="border px-3 py-2 outline-blue-400"
                        placeholder="ex. Social Media Manager"
                    />
                    <InputFlashMessage
                        type="error"
                        :message="form.errors.business_logo"
                    />
                </div>
                <div class="flex flex-col">
                    <label class="mb-2 mt-4 font-semibold">Industry</label>
                    <input
                        v-model="form.industry"
                        type="text"
                        class="border px-3 py-2 outline-blue-400"
                        placeholder="ex. Social Media Manager"
                    />
                    <InputFlashMessage
                        type="error"
                        :message="form.errors.industry"
                    />
                </div>
                <div class="flex flex-col">
                    <label class="mb-2 mt-4 font-semibold"
                        >Company description</label
                    >
                    <textarea
                        v-model="form.company_description"
                        type="text"
                        class="border px-3 pb-9 pt-2 outline-blue-400"
                        placeholder="Tell us summary about your skills and how you want to be known as worker."
                    ></textarea>
                    <InputFlashMessage
                        type="error"
                        :message="form.errors.company_description"
                    />
                </div>
                <div class="flex flex-col">
                    <label class="mb-2 mt-4 font-semibold"
                        >Company description</label
                    >
                    <input
                        v-model="form.company_location"
                        type="text"
                        class="border px-3 py-2 outline-blue-400"
                        placeholder="ex. Social Media Manager"
                    />
                    <InputFlashMessage
                        type="error"
                        :message="form.errors.company_location"
                    />
                </div>
                <mgl-map
                    @map:mouseover="setPointerCursor"
                    @map:click="setMarker"
                    :map-style="style"
                    :center="center"
                    :zoom="zoom"
                    :minZoom="2"
                    height="500px"
                >
                    <geocoding></geocoding>
                </mgl-map>
            </div>
        </Transition>

        <div class="flex justify-end">
            <button class="rounded border bg-blue-500 px-4 py-2 text-white">
                Save
            </button>
        </div>
    </form>
</div>

<style> @import "maplibre-gl/dist/maplibre-gl.css"; </style>