Leaflet shows error when creating a new record

[eakenbor]

Contact Details

No response

What happened?

Everything works fine when showing or editing the record, but when I try to create a new record, the leaflet shows the following error:

Here is my BookingResource.js:

import leafletFeatures, { getLeafletDist } from '@adminjs/leaflet';
import Booking from '../../models/booking.js'
import { componentLoader, Components } from '../components/components.js'

const BookingResource = {
    resource: Booking,
    options: {
        properties: {
            vehicle: {
                components: {
                    edit: Components.VehicleInput, 
                },
            },
            locationLat: {
                components: {
                    edit: Components.LatInput,
                },
            },
            locationLng: {
                components: {
                    edit: Components.LngInput, 
                },
            },
            locationStreet: {
                components: {
                    edit: Components.StreetInput,
                },
            },
            locationCity: {
                components: {
                    edit: Components.CityInput,
                },
            },
            locationState: {
                components: {
                    edit: Components.StateInput,
                },
            },
            'activities.name': {
                components: {
                    edit: Components.EditInput,
                },
            },
            locationCountry: { isVisible: { edit: false, show: true, list: true, filter: false } },
            locationTimezone: { isVisible: { edit: false, show: true, list: true, filter: false } },
            chatRoom: { isVisible: { edit: false, show: true, list: true, filter: false } },
            customerFeedback: { isVisible: { edit: false, show: true, list: true, filter: false } },
            createdAt: { isVisible: { edit: false, show: true, list: true, filter: true } },
            updatedAt: { isVisible: { edit: false, show: true, list: true, filter: true } },
        },
    },
    features: [
        leafletFeatures.leafletSingleMarkerMapFeature({
            componentLoader,
            paths: {
                mapProperty: 'Vehicle Location',
                jsonProperty: undefined,
                latitudeProperty: 'locationLat', 
                longitudeProperty: 'locationLng',
            },
            baseValue: undefined,
            mapProps: undefined,
            tileProps: undefined,
        }),
    ],
}

export default BookingResource

My model looks like this:

...
 locationLat: {
        type: Number,
        default: 0,
        required: true
    },
    locationLng: {
        type: Number,
        default: 0,
        required: true
    },
...

Bug prevalence

Every time

AdminJS dependencies version

"@adminjs/leaflet": "^2.0.1", "adminjs": "^7.0.5",

What browsers do you see the problem on?

Chrome

Relevant log output

No response

Relevant code that's giving you issues

No response

[eakenbor]

@dziraf please can you help with this?

[eakenbor]

@dziraf this bug still persists. Any answer?

[eakenbor]

Initializing the center solved it:

mapProps: {
                zoom: 2,
                center: [0, 0],
            },````