reactjstypescriptleafletreact-leaflet

MapContainer, TileLayer, Marker, Popup .. React Leaflet


I'm developing a map application using React - Typescript - Leaflet I've used ReactLeaflet package but when I'm using it I'm facing error while compiling issues

import * as React from "react";
import { MapContainer, TileLayer, Marker, Popup } from 'react-leaflet';
export default class MapsComp extends React.Component  {
render(){
    return(<div>asdf</div>)
} }

It would be helpful if any one can help me in rendering the map


Solution

  • I just forked your project, made npm install and ran your code and the only thing is missing is MapContainer's height. I did not get the error you are receiving. I am not sure why you get it.

    On maps.tsx, MapsComp add style={{ height: "100vh" }} or whatever height suits your needs.

    <MapContainer
            center={[51.505, -0.09]}
            zoom={13}
            scrollWheelZoom={false}
            style={{ height: "100vh" }}
    >
    ...
    </MapContainer>
    

    And the result is this:

    without any errors in the console.