Reactjs Question posted in
The new location for the React Documentation can be found here.

Reactjs – React Leaflet only showing marker shadow

I’m using:

"leaflet": "1.9.4",
"next": "15.1.4",
"react": "19.0.0",
"react-dom": "19.0.0",
"react-leaflet": "5.0.0"

This is the React code I use to render a marker:

          const position = [restaurant.latitude, restaurant.longitude]
          return (
            <Marker
              key={restaurant.restaurantNumber}
              position={position}
            />)

I already copied the graphical resources in the public directory of my project. In the Chrome developer tools there are no loading errors, so all resources can be found, yet on the map it looks like this:

Drop shadow only

Only the drop shadow is rendered, the marker itself is not.

When checking the HTML, this is that marker:

<img src="marker-icon-2x.png" class="leaflet-marker-icon leaflet-zoom-animated leaflet-interactive" alt="Marker" tabindex="0" role="button" style="margin-left: -12px; margin-top: -41px; width: 25px; height: 41px; transform: translate3d(629px, 584px, 0px); z-index: 584;">

What’s weird is that the style contains an explicit width of 25px (never overridden according to Chrome Developer Tools), however the width of the element is 0px.

When I try to manually add the images:

            <Marker
              key={restaurant.restaurantNumber}
              position={position}
              icon={L.icon({
                iconUrl: 'marker-icon.png', // specify the path to your icon image
                iconSize: [25, 41], // size of the icon
                iconAnchor: [12, 41], // point of the icon which will correspond to marker's location
                popupAnchor: [1, -34], // point from which the popup should open relative to the iconAnchor
                shadowUrl: 'marker-shadow.png',
                shadowSize: [41, 41], // size of the shadow
                shadowAnchor: [12, 41] // point of the shadow which will correspond to marker's location
              })}

I still only see the shadow.

When in the above code I put shadowUrl: 'marker-icon.png' I get this:

Stretched icon as shadow

So clearly the image file can be read.

Any idea what I might be doing wrong?

Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    It had nothing to do with Leaflet. I am using Tailwind CSS in my project. In globals.css it contains:

    
img,
video {
  max-width: 100%;
  height: auto;
}

    If I disable the max-width: 100% line the images show up.


  2. 0

    The leaflet packages often have issues with css, you have to make sure to manually import the css from leaflet. One package that helped me with this issue was leaflet-defaulticon-compatibility

    In my main map component I then import it together with the css from leaflet.

    import "leaflet-defaulticon-compatibility";
import "leaflet-defaulticon-compatibility/dist/leaflet-defaulticon-compatibility.css";
import "leaflet/dist/leaflet.css";
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search