My leaflet map doesn't appear on my webpage

Question

I'm using ReactJS with NextJS.

Currently my leaflet fails to fill the whole parent div on my page, in fact it doesn't appear at all. I assumed the map would fill the entire parent div, maybe someone have an idea to handle the situation.

Here my leaflet snippet:

const Wrapper= styled.div` 
  width:${props => props.width};
  height:${props => props.height};
`;

const location= [34.0522, -118.2457]
export default class Map extends Component{ 
  componentDidMount(){  
    // Map = require('react-leaflet').Map
    // Marker = require('react-leaflet').Marker
    // Popup = require('react-leaflet').Popup
    // TileLayer = require('react-leaflet').TileLayer
    // Tooltip = require('react-leaflet').Tooltip
    // this.setState({ showMap: true })
    this.map= L.map("map", { 

      center:location,
      zoom:12,
      zoomControl:true
    })
    L.tileLayer('https://{s}.tile.openstreetmap.fr/osmfr/{z}/{x}/{y}.png', {
      maxZoom: 20,
      attribution: '&copy; Openstreetmap France | &copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
    })
    .addTo(this.map) 

    var marker = L.marker(location ,{icon: placeholder}).addTo(this.map); 
    setTimeout( ()=> {
      marker.bindPopup("Come see us, it would be awesome!", {maxWidth: "500"});  

   this.map.setView(location);
  }

  render(){ 
    return (
      <Fragment>
          <Head>
          <link href="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.4.0/images/marker-icon-2x.png"/>
          <link href="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.4.0/images/marker-icon.png"/>

          <link rel="stylesheet" href="https://unpkg.com/leaflet@1.4.0/dist/leaflet.css"
   integrity="yyyy"
   crossorigin=""/> 

     <script src="https://unpkg.com/leaflet@1.4.0/dist/leaflet.js"
   integrity="yyyyy"
   crossorigin=""></script>   
          </Head>
        <Wrapper width="100%" height="100%" id="map"/> 
      </Fragment>
    )
  }
}

any hint would be great, thanks

Is there any error? If not, did you try to modify the width/height in the browser console? — FloWy, May 16 '19 at 06:53

score 0 · Answer 1 · answered May 16 '19 at 07:10

0

I believe you cant set width and height as 100% for the divs containing the map, set width:1200px and height:600px or something of that sort. Don't worry leaflet maps are responsive

answered May 16 '19 at 07:10

akshay kishore

1,017
8
16

score 0 · Answer 2 · answered May 16 '19 at 08:21

If you are looking for react specific implementation, here it is:

import React, { Component } from 'react';
import ReactDOM from 'react-dom';
import { Map, TileLayer, Marker, Popup } from 'react-leaflet';
import './styles.css';

class App extends Component {
  state = {
    center: [51.505, -0.091],
    zoom: 13,
  };

  render() {
    return (
      <div>
        <Map center={this.state.center} zoom={this.state.zoom}>
          <TileLayer
            attribution='&amp;copy <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
            url="https://{s}.tile.osm.org/{z}/{x}/{y}.png"
          />
          <Marker position={this.state.center}>
            <Popup>
              A pretty CSS3 popup. <br /> Easily customizable.
            </Popup>
          </Marker>
        </Map>
      </div>
    );
  }
}

const rootElement = document.getElementById('root');
ReactDOM.render(<App />, rootElement);

And add this style to your css file.

.leaflet-container {
  height: 600px;
  width: 100%;
}

Here is the working code:https://codesandbox.io/s/2wnv7o1mlr

My leaflet map doesn't appear on my webpage

2 Answers2