Map rendered with missing parts

[bhaidar]

Bug report in v4

Hi

I am trying out the React Leaflet on StackBlitz using a React TypeScript project. The map loads partially.

Expected behavior

To show the map fully

Actual behavior

Map showing partially

Steps to reproduce

StackBlitz Sample

I appreciate your support.

Bill

[kthehatter]

same issue with nextjs 13

[sethii]

you're missing css import
import 'leaflet/dist/leaflet.css';

[bhaidar]

Thanks @sethii This works! I am also not seeing the marker icons. Any more files needed to be loaded? Thanks

[bhaidar]

Hey @sethii
It seems StackBlitz and CodeSandbox use their own url for the market icon. I found a trick online that does the job:

Sample

However, when the map first loads, it loads part of it, I have then to resize the window to see a full map. Is there something I am missing here?

Thanks

[nakajimayoshi]

unfortunately importing leaflet/dist/leaflet.css causes the entire map to disappear for me. Not importing it leads to incomplete/scattered map tiles. Any fix for this? I'm using Vite/React+TS

Edit

Found a solution. Add this to your styles.css and make sure it's imported in the app root (in Vite's case main.tsx) in addition to the dist/leaflet.css import

#map {
  height: 100vh;
}

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

.leaflet-div-icon {
  background: transparent;
  border: none;
}

[zacharytyhacz]

[comp615]

FWIW, investigated this a bit. Basically it's never going to find the icon because you need to dig it out of the node_modules/dist. Did not look at source code, but for a workaround, you can reconstruct the default icon depending on your bundler / asset serving:

import { Icon } from "leaflet";

const defaultIcon = new Icon({
  iconUrl:
    "https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.7.1/images/marker-icon.png",
  iconSize: [25, 41],
  iconAnchor: [12, 41],
  popupAnchor: [1, -34],
  shadowSize: [41, 41],
});

<Marker icon={defaultIcon} position={position}>

Note that iconUrl is just a Copilot generated random link. You could use your own here, or the ACTUAL file is located like so:

import defaultIconPng from "leaflet/dist/images/marker-icon.png";

But you'll need some way to actually serve that since I don't think leaflet likes the raw data. Hopefully that's a start towards a better example

[zacharytyhacz]

Excellent work @comp615 , that works for me brother.

However, I did have to add in a TypeScript ignore because TypeScript was getting upset that the file path did not exist – but it does work and fix the issue.

// @ts-ignore because this image needs to be imported, but not found for some reason, but works.
import defaultIconPng from 'leaflet/dist/images/marker-icon.png'

const defaultIcon = new Icon({
  iconUrl: defaultIconPng,
  iconSize: [25, 41],
  iconAnchor: [12, 41],
  popupAnchor: [1, -34],
  shadowSize: [41, 41],
});

[jeron-diovis]

Fix requires both of these:

1. import leaflet/dist/leaflet.css in your app
2. set explicit height for .leaflet-container element (either constant value or 100%, if parent has height)

Also this issue is duplicate of #1052