1

Currently my Leaflet fails to fill the whole parent div on my page, in fact it doesn't appear at all.

Here is 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/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>
    )
  }
} 

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

closed as off-topic by bugmenot123, Fran Raga, whyzar, xunilk, Jochen Schwarze May 20 at 7:31

This question appears to be off-topic. The users who voted to close gave this specific reason:

  • "Questions relating to general IT or with no clear GIS component, are off-topic here but can be researched/asked at Stack Overflow (software development), Super User (computing hardware and software), Database Administrators (relational databases) and other SE sites" – bugmenot123, Fran Raga, whyzar, xunilk, Jochen Schwarze
If this question can be reworded to fit the rules in the help center, please edit the question.

Browse other questions tagged or ask your own question.