0

I'm trying to create a map with reac-leaflet in ionic but I'm not displaying it correctly, also following this link: Missing Leaflet Map Tiles when using react-leaflet

WINDOW RESIZING FIX IT. What am I doing wrong on first login?

On first access this is the map:

After resizing:

Here the code.

In index.html

<link rel="stylesheet" href="https://unpkg.com/leaflet@1.7.1/dist/leaflet.css"/>

Home.tsx simplified.

import { Map, Marker, Popup, TileLayer } from 'react-leaflet';

function Home() {

  return (
    <IonPage>
      <IonHeader>
        <IonToolbar color="primary">
          <IonTitle>Logged in ... </IonTitle>
        </IonToolbar>
      </IonHeader>
      <IonContent>
        <Map center={[45.24,8.55]} zoom={13}>
        <TileLayer
          attribution='&amp;copy <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
          url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
        />
        <Marker position={[45.24,8.55]}>
          <Popup>
            A pretty CSS3 popup. <br /> Easily customizable.
          </Popup>
        </Marker>
        </Map>
      </IonContent>
    </IonPage>
  )
}

export default Home;

In css file.

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

Thank you.

Akash Kumar Verma
  • 3,185
  • 2
  • 16
  • 32
Lorenzo Fabbri
  • 27
  • 1
  • 5

3 Answers3

1

I had the same problem with Ionic 5 and React Leaflet 3 and I solved like this:

In the page where you use the leaflet-react component (in your case Home), import the useIonViewDidEnter lifecycle method (see full docs) to know when the IonPage has finished animating, then trigger a window-resize event.

import { IonPage, useIonViewDidEnter, ... } from '@ionic/react';
function Home() {

     /* 
      * trigger a 'window-resize' event when Page has finished, 
      * rendering and animating, so leaflet map can read a 
      * consistent height value
      */
     useIonViewDidEnter(() => {
        window.dispatchEvent(new Event('resize'));
     });

     return (
        <IonPage>
           ... your Leaflet component...
        </IonPage>
     );
}

Is working well for me. Let me know if it helps.

Francesco Cretti
  • 216
  • 2
  • 9
  • This solves. I think it isn't the "right" way (react-leaflet must have something strange that happens at startup), but it is a good workaround. Thank you. – Lorenzo Fabbri Nov 03 '20 at 08:51
  • Here's well explained the reason why (under certain circumstances) it does not display correctly on the first render -> https://stackoverflow.com/a/36257493/5108194 I find the "window resize" method a good solution because it does not interfer with Leaflet instance, as invalidateSize() does. But yes, is still a workaround :) – Francesco Cretti Nov 03 '20 at 09:52
0

This is what I do currently and works for me:

windowDimensions.tsx

import { useState, useEffect } from 'react';

function getWindowDimensions() {
  const { innerWidth: width, innerHeight: height } = window;
  return {
    width,
    height,
  };
}

export default function useWindowDimensions() {
  const [windowDimensions, setWindowDimensions] = useState(
    getWindowDimensions(),
  );

  useEffect(() => {
    function handleResize() {
      setWindowDimensions(getWindowDimensions());
    }

    window.addEventListener('resize', handleResize);
    return () => window.removeEventListener('resize', handleResize);
  }, []);

  return windowDimensions;
}

app.js or componentfile.js

import useWindowDimensions from 'path/to/useWindowDimensions'; //in my case i saved it as app/utils/windowDimensions
    <Map style={{height: mapHeight}} />

Note: app.js only consist of code relevant to the fix

Henrik Maaland
  • 210
  • 2
  • 14
0
  <link href='https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.0.3/leaflet.css' rel='stylesheet'>

Try this

Nadeem Kazi
  • 1
  • 4