My leaflet map doesnt appears on my webpage

by Webwoman   Last Updated May 16, 2019 06:22 AM

currently my leaflet fails to fill the whole parent div on my page, in fact it doesnt appears at all.

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 placeholder = L.icon({
      iconUrl: "/static/assets/icons/placeholder.svg",
      // shadowUrl: 'leaf-shadow.png',  
      iconSize:     [47, 47], // size of the icon
      // shadowSize:   [50, 64], // size of the shadow
      iconAnchor:   [47, 47], // point of the icon which will correspond to marker's location
      // shadowAnchor: [4, 62],  // the same for the shadow
      popupAnchor:  [-25, -50], // point from which the popup should open relative to the iconAnchor
      tooltipAnchor:[30, -2]
  });

    var marker = L.marker(location ,{icon: placeholder}).addTo(this.map); 
    setTimeout( ()=> {
      marker.bindPopup("Come see us, it would be awesome!", {maxWidth: "500"}); 
      marker.openPopup();
      marker.bindTooltip(`West 2nd Street , <br/> LA 90018`, (-20, 0)).openTooltip();
     }, 1000)

   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/[email protected]/dist/leaflet.css"
   integrity="yyyy"
   crossorigin=""/> 

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

I assumed the map would fill the entire parent div, maybe someone have an idea to handle the situation,

any hint would be great, thanks

Tags : css


Related Questions