Currently faced with an issue while trying to incorporate a basic map into my application. Utilizing the React Leaflet sample code below, I encountered this error:
import React from "react";
import { MapContainer, TileLayer, Marker, Popup } from "react-leaflet";
export default function App() {
return (
<MapContainer center={[51.505, -0.09]} zoom={13} scrollWheelZoom={false}>
<TileLayer
attribution='© <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
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>
);
}
The specific error message received is as follows:
Type '{ children: Element[]; center: number[]; zoom: number; scrollWheelZoom: boolean; }' is not assignable to type 'IntrinsicAttributes & MapContainerProps'.
Property 'center' does not exist on type 'IntrinsicAttributes & MapContainerProps'. TS2322
150 | />
151 |
> 152 | <MapContainer center={[51.505, -0.09]} zoom={13} scrollWheelZoom={false}>
| ^
153 | <TileLayer
154 | attribution='© <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
155 | url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
This project is being developed using React in conjunction with Typescript.