3

I am working on a mobile application using react with Ionic 3, and I want to add a map in one of the tabs, in the browser version the map looks correctly, but when I put the mobile version or pass it to the mobile it fails. I leave images and the source code. Thanks in advance.

Not properly display in mobile

Not properly display in mobile

Properly display in web app

Properly display in web app

const MapLayer = (props: any) => {
let center = props.center || null;

return (
<React.Fragment>
  <Map center={center} zoom={13}>
    <TileLayer url="https://{s}.tile.openstreetmap.de/{z}/{x}/{y}.png" />
  </Map>
</React.Fragment>
);
};

CSS file

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

index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <title>Ionic App</title>

    <base href="/" />

    <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"
    />
    <!-- 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" />
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"
    />

    <link
      rel="stylesheet"
      href="https://unpkg.com/tachyons@4.10.0/css/tachyons.min.css"
    />
    <link
      rel="stylesheet"
      href="https://unpkg.com/leaflet@1.6.0/dist/leaflet.css"
      integrity="sha512-xwE/Az9zrjBIphAcBb3F6JVqxf46+CDLwfLMHloNu6KEQCAWi6HcDUbeOfBIptF7tcCzusKFjFw2yuvEpDL9wQ=="
      crossorigin=""
    />

    <!-- Make sure you put this AFTER Leaflet's CSS -->
    <script
      src="https://unpkg.com/leaflet@1.6.0/dist/leaflet.js"
      integrity="sha512-gZwIG9x3wUXg2hdXF6+rVkLF/0Vi9U8D2Ntg4Ga5I5BZpVkVxlJWbSQtXPSiUTtC0TjtGOmxa1AJPuV0CPthew=="
      crossorigin=""
    ></script>
  </head>

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

Edit:

I change MapLayer and MapView (MapView calls MapLayer) and it's works.

leaflet version: 1.5.1 react-leaflet version: 2.5.0

export default function MapLayer(props) {
  const inputEl = useRef(null);
  useEffect(() => {
    props.setLeafletElement(inputEl.current.leafletElement);
  });

  return (
    <Map ref={inputEl} center={[51.505, -0.09]} zoom={13}>
      <TileLayer url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png" />
    </Map>
  );
}

MapView

...
<MapLayer setLeafletElement={setLeafletElement} />
Ryan M
  • 18,333
  • 31
  • 67
  • 74
extraertond
  • 31
  • 2
  • What happens if you resize the mobile simulator screen? – ghybs Apr 20 '20 at 16:08
  • if I resize the screen it works correctly but as soon as I reload it or pass it to the mobile it works just as bad – extraertond Apr 20 '20 at 21:55
  • See https://stackoverflow.com/questions/36246815/data-toggle-tab-does-not-download-leaflet-map/36257493#36257493 – ghybs Apr 21 '20 at 02:35
  • that's works! I have done that and I have also returned to a previous version of leaflet and react-leafter – extraertond Apr 21 '20 at 10:49
  • 1
    Does this answer your question? [Data-toggle tab does not download Leaflet map](https://stackoverflow.com/questions/36246815/data-toggle-tab-does-not-download-leaflet-map) – Ryan M Sep 02 '20 at 20:22

0 Answers0