React-admin: How to embed leaflet in Edit/Create view, for visual address validation

Question

I have a Person & Address List.

In React-admin Edit/Create view, a User may want to enter the address/city/postalcode, and would want to see a openstreetmap of that location.

How do I embed Leaflet openstreetmap in Edit/Crete view, and link it with Address fields ? Is there a sample/blog/github that shows an example?

export const PersonEdit = props => (
    <Edit title={<PersonTitle />} {...props}>
        <SimpleForm>
            <TextInput disabled source="id" />
            <TextInput source="firstName" />
            <TextInput source="lastName" />
            <TextInput source="email" />
            <TextInput source="phone1" />
            <TextInput source="phone2" />
            <TextField label="Num" source="address.streetNum" />
            <TextField label="Street" source="address.streetName" />
            <TextField label="Pcode" source="address.postalCode" />
            <XrefAccountsField label="Xref Tags" source="xrefs" />
            <DateTimeInput disabled source="createTime" />
            <DateTimeInput disabled source="updateTime" />

            <MapContainer  center={[51.505, -0.09]} zoom={13} scrollWheelZoom={false}>
               <TileLayer url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png" />
               <Marker position={[51.505, -0.09]}>
                 <Popup>
                   A pretty CSS3 popup. <br /> Easily customizable.
                 </Popup>
               </Marker>
             </MapContainer>

        </SimpleForm>

    </Edit>
);

Answer 1

Add to index.css

.leaflet-container { height: 450px; width: 100%; margin: 0  }

Add param fullWidth to MapContainer

export const PersonEdit = props => (
   ...

            <MapContainer  center={[51.505, -0.09]} zoom={13} scrollWheelZoom={false} fullWidth>
               <TileLayer url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png" />
               <Marker position={[51.505, -0.09]}>
                 <Popup>
                   A pretty CSS3 popup. <br /> Easily customizable.
                 </Popup>
               </Marker>
             </MapContainer>

        </SimpleForm>
    </Edit>
);