Comments (8)
you're missing css import
import 'leaflet/dist/leaflet.css';
from react-leaflet.
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
from react-leaflet.
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;
}
from react-leaflet.
same issue with nextjs 13
from react-leaflet.
Thanks @sethii This works! I am also not seeing the marker icons. Any more files needed to be loaded? Thanks
from react-leaflet.
Hey @sethii
It seems StackBlitz and CodeSandbox use their own url for the market icon. I found a trick online that does the job:
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
from react-leaflet.
from react-leaflet.
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],
});
from react-leaflet.
Related Issues (20)
- [Question] React-leaflet does not let react-modal close on first click HOT 2
- Image shrinking when using ImageOverlay
- Marker with invalid lat, long values are shown in Antartica
- Map are don't have HoangSa and TruongSa islands belong to VIetNam by defaults
- ESM packages (@react-leaflet/core) need to be imported.
- Iām interested in enhancing the documentation.
- BUG: Control Component event handling HOT 2
- How to add an additional layer?
- MapContainer whenReady doesn't receive target parameter from Leaflet HOT 1
- Problem with rendering OS Maps Leisure Layers HOT 1
- [Turbopack] Parsing css source code failed HOT 5
- Help please
- error rendering <Marker> component in react
- Prevent Vector Layer to automatic scale HOT 3
- Is everything okay with Nextjs v14.1.0 + React v18? Maps doesn't render HOT 4
- Get Distance Function? HOT 2
- How to hide the API Key in the TileLayer?
- Marker is missing data type in typescript definition
- Is there a way to calculate a circle with a 150-meter radius around the marker? HOT 1
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
š Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. ššš
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ā¤ļø Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from react-leaflet.