react-leaflet map does not show up

0
votes

i have this code in one of my components

class MyMap extends Component {

   state = {
      lat: 51.505,
      lng: -0.09,
      zoom: 11
    };

    render() {
        const position = [this.state.lat,this.state.lng]
         return (
             <MapContainer  className="mymap" center={position} zoom={this.state.zoom}  scrollWheelZoom={false}>
             <TileLayer
                   attribution='&copy; <a href="http://osm.org/copyright">OpenStreetMap</a>  contributors'
                   url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
              />
              <Marker position={position}>
              </Marker>
            </MapContainer >
      )
  }
}

Also i have install leaflet by this command

  npm install -s react-leaflet

Also i have insert the leaflet's CSS in my index.html file

<link rel="stylesheet" href="https://unpkg.com/leaflet@1.7.1/dist/leaflet.css"
integrity="sha512-xodZBNTC5n17Xt2atTPuE1HxjVMSvLVW9ocqUKLsCC5CXdbqCmblAshOMAS6/keqq/sMZMZ19scR4PsZChSR7A=="
crossorigin=""/>

Also i give in MapContainer a

ClassName="mymap"

Which includes the following CSS code

 .mymap {
     height: '100vh';
     width: 100%;
}

So my problem is that my map is not show up, can anyone help me?

2
reactjsleafletreact-leaflet
This could be related to different things... any errors in the console? are you importing the Map component, etc at the top of your component file? – ASG
I am importing them like this: import { MapContainer , TileLayer, Marker, Popup } from 'react-leaflet'; – The_elevator
try to add a min-height of 600px on your .mymapp class – ASG
i getting an error in console that says: localhost:3000/vendor/bootstrap/css/bootstrap.min.css can't load because the type MIME text/html is not file text/css. I don't use bootstrap in this component – The_elevator
google maps work fine for the same thing that i wanto to accomplished, but i don't know if they are free to use it, i mean don't show up the tag (only for develepers). So this is why i use leaflet. Should i use google maps eventuallly? – The_elevator

2 Answers

2
votes

import leaflet.css

import 'leaflet/dist/leaflet.css'

then set inline style for <MapContainer>

<MapContainer style={{ height: "450px", width: "100%" }} center={position} zoom={this.state.zoom}>
1
votes

I solved my problem. I have to get rid of this from my index.html

  <link rel="stylesheet" href="https://unpkg.com/leaflet@1.7.1/dist/leaflet.css"
   integrity="sha512-xodZBNTC5n17Xt2atTPuE1HxjVMSvLVW9ocqUKLsCC5CXdbqCmblAshOMAS6/keqq /sMZMZ19scR4PsZChSR7A=="
  crossorigin=""/>

Also in my MyMap component i inserted this

 import 'leaflet/dist/leaflet.css';