1

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.

Map Tile issue

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} />;
  }
}
Pavan Kusunuri
  • 327
  • 5
  • 20
  • 3
    Your code is not minimal enough (do read https://stackoverflow.com/help/minimal-reproducible-example ). Since this seems to be a GoogleMutant issue, you should try to recreate the buggy behaviour in minimal vanilla JS (no react, no leaflet draw, no mapbox-gl-leaflet). – IvanSanchez Sep 27 '21 at 12:13
  • okay @IvanSanchez, I will read the link and try to post a minimal vanilla JS – Pavan Kusunuri Sep 27 '21 at 12:32
  • 1
    What happens when you have an incomplete map and slightly resize your browser? – ghybs Sep 27 '21 at 14:04
  • @ghybs I tried to resize the browser window.Few times the tiles are completely loaded and it is loaded as show in the above the image.I tried to replicate the issue on js fiddle with js but there it works as expected. – Pavan Kusunuri Sep 28 '21 at 04:29
  • Hi @PavanKusunuri, from the last edit of your question, I understand that you imply that your modal may be unrelated to your issue. Please can you provide a reproduction example, as indicated by IvanSanchez? I will be happy to reopen your question then. – ghybs Sep 30 '21 at 00:28
  • Yes @ghybs, It is behaving the same way when opened in normal div instead of inside a modal.While i am trying to replicate the issue the map is loading perfectly fine so I will try other way to replicate it and update you as soon as possible – Pavan Kusunuri Sep 30 '21 at 04:11
  • 1
    I'm sorry @ghybs, I understood that there is no issue with the map while replicating it. After debugging the problem that occurred is due to its parent element has a property text-align center which is affecting the div that contains the map. – Pavan Kusunuri Sep 30 '21 at 06:23
  • 1
    @PavanKusunuri nice having found the root cause of your issue! While it was caused by something not included in your question, I have still reopened it so that you can post your finding as an answer and accept it. Please remember to build a reproduction example as part of your debugging ;-) – ghybs Sep 30 '21 at 07:07

1 Answers1

1

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.

Pavan Kusunuri
  • 327
  • 5
  • 20