React-leaflet not rendering map properly in Ionic

Question

I've seen several people having this problem, however non of the solutions presented helped me. I believe I setup everything correctly.

My index.html:

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8" />
    <title>Ionic App</title>

    <base href="/" />

    <meta name="color-scheme" content="light dark" />
    <meta name="viewport"
        content="viewport-fit=cover, width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" />
    <meta name="format-detection" content="telephone=no" />
    <meta name="msapplication-tap-highlight" content="no" />

    <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />

    <link rel="shortcut icon" type="image/png" href="%PUBLIC_URL%/assets/icon/favicon.png" />

    <!-- Leaflet -->
    <link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/leaflet.css"
        integrity="sha512-xodZBNTC5n17Xt2atTPuE1HxjVMSvLVW9ocqUKLsCC5CXdbqCmblAshOMAS6/keqq/sMZMZ19scR4PsZChSR7A=="
        crossorigin="" />

    <!-- Make sure you put this AFTER Leaflet's CSS -->
    <script src="https://unpkg.com/[email protected]/dist/leaflet.js"
        integrity="sha512-XQoYMqMTK8LvdxXYG3nZ448hOEQiglfqkJs1NOQV44cWnUrBc8PkAOcXy20w0vlaXaVUearIOBhiXZ5V3ynxwA=="
        crossorigin=""></script>

    <!-- add to homescreen for ios -->
    <meta name="apple-mobile-web-app-capable" content="yes" />
    <meta name="apple-mobile-web-app-title" content="Ionic App" />
    <meta name="apple-mobile-web-app-status-bar-style" content="black" />
</head>

<body>
    <div id="root"></div>
</body>

</html>

Just in case imported this in index.js

import 'leaflet/dist/leaflet.css'

Component:

import React from 'react';
import { IonContent, IonHeader, IonPage, IonTitle, IonToolbar } from '@ionic/react';
import { Map, TileLayer, Marker, Popup } from 'react-leaflet';
import 'leaflet/dist/leaflet.css'

import './Tab1.css';

const Tab1 = () => {
    const data = {
        lat: 51.505,
        lng: -0.09,
        zoom: 5
    }

    const position = [data.lat, data.lng];
    return (
        <IonPage>
            <IonHeader>
                <IonToolbar>
                    <IonTitle>Tab 1</IonTitle>
                </IonToolbar>
            </IonHeader>
            <IonContent fullscreen>
                <Map center={position} zoom={data.zoom} style={{ height: "100vh" }} >
                    <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={position}>
                        <Popup>
                            A pretty CSS3 popup. <br /> Easily customizable.
                        </Popup>
                    </Marker>
                </Map>
            </IonContent>
        </IonPage>
    );
};

export default Tab1;

Finally in Tab1.css:

.leaflet-container{
    height: 800px;
  width: 800px;
}

End effect is that the only tile that loads on load is topleft one and then when i scroll it loads random tiles. Am I really missing something?

Dont know if that helps anything, but just realised if I open or close devtools it starts to work. Doesnt make any sense to me — MazMat
– MazMat, Commented Sep 18, 2020 at 21:20

Aaron Saunders · Accepted Answer · 2020-09-19 03:20:38Z

1

try this, we are invalidating the map to get it to re-render

<TileLayer 
   onLoad={(e:any)=> { e.target._map.invalidateSize()}}
   attribution='&amp;copy <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
   url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png" />

source - https://github.com/PaulLeCam/react-leaflet/issues/46

answered Sep 19, 2020 at 3:20

Aaron Saunders

33.4k5 gold badges64 silver badges83 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

MazMat Over a year ago

Worked for Firefox, didnt work for Chrome, it still loads incomplete BUT loads completely when i move the map a bit. Are you familiar with Leaflet? Because I'm making an app that relies a lot on maps and when just displaying a map needs workarounds im scared I will run into obstacles all the time, does it have a lot of issues?

Aaron Saunders Over a year ago

you can also add wrap it in a setTimeout and that should work. I tested this on chrome so I am surprised it didn't work for you.

Matti Mazur Over a year ago

@AaronSaunders For now I made a workaround, when component mounts I just do a setTimeout for 1S, and set latitude to some far away place and then immediately set it back to proper latitude, this forces refresh of the tiles. Also tasted on other machine and a phone, same issue when Chrome is used. Even Edge had no issues with just your solution. I'll play with this library some more, because I don't really have alternatives.

Aaron Saunders Over a year ago

@MazMat curious to see your code, i had none of this issues you mentioned

Collectives™ on Stack Overflow

React-leaflet not rendering map properly in Ionic

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related