I'm trying to load a leaflet map within a div tag.

Sometimes the map tiles are loaded completely. whenever I try to zoom in or zoom out the map, tiles are not loading completely. I tried solutions like importing leaflet CSS styles, tried to call the invalidateSize function whenever the map is zoomed in.

import React, { Component } from 'react';
import PropTypes from 'prop-types';
import 'leaflet/dist/leaflet.css';
import 'leaflet-draw/dist/leaflet.draw.css';
import L from 'leaflet';
import {} from "mapbox-gl-leaflet";
import 'leaflet-fullscreen';
import 'leaflet-fullscreen/dist/leaflet.fullscreen.css';
import 'leaflet.gridlayer.googlemutant';

class Map extends Component {

  componentDidMount() {
    this.initializeMap();
  }

  initializeMap = () => {
    const { defaultLocation,
      handleCloseMap, handleFieldErrorChanged, user } = this.props;
    this.map = L.map('map', {
      center: [...defaultLocation].reverse(),
      zoom: 20,
      fullscreenControl: true
    });
      L.gridLayer.googleMutant({ type: 'satellite', maxZoom: 20 }).addTo(this.map);
        }
      });
    }
  }


  render() {
    return <div id="map" className={styles.map} />;
  }
}

CodePudding user response：

While trying to reproduce the above issue in fiddle with only Javascript. The map was rendered properly so I came to the conclusion that there is no issue with rendering the map. While debugging I found the div element that contains map has one of its parent elements has a property of text-align: center which caused the map to load tiles not completely. After removing it map was rendered as expected. I hope it may help someone while rendering a map in element(like div) consider the alignment of parent elements which may happen rarely.