I have my ponent MAP and I use leaflet (not react-leaflet). I want to set a marker.

This is the code of my ponent.

import React from 'react';
import L from 'leaflet';
import '../../../../node_modules/leaflet/dist/leaflet.css';
import './map.scss';



export default class Map extends React.Component {


  ponentDidMount() {

    this.map = L.map('map', {
      center: [48.8762, 2.357909999999947],
      zoom: 14,
      zoomControl: true,
      layers: [
        L.tileLayer('https://{s}.tile.openstreetmap.de/tiles/osmde/{z}/{x}/{y}.png',{
          detectRetina: true,
          maxZoom: 20,
          maxNativeZoom: 17,
        }),
      ]
    });

    L.marker([48.8762, 2.357909999999947],
      {
        draggable: true,        // Make the icon dragable
        title: 'Hover Text',     // Add a title
        opacity: 0.5}            // Adjust the opacity
    )
      .addTo(this.map)
      .bindPopup("<b>Paris</b><br>Gare de l'Est")
      .openPopup();

    L.circle([48.8762, 2.357909999999947], {
      color: 'red',
      fillColor: '#f03',
      fillOpacity: 0.5,
      radius: 500
    }).addTo(this.map);

  };


  render() {
    return <div className="map" id="map" />
  }
}

I add the marker us described in the documentation, but the result in the map is not the default icon, it is only a square with a thin border. I checked the css-File from leaflet. The icon is in the images folder, but it is not in the map available.

This icon (marker) I am looking for

This is what I get

Can anybody help or see what is wrong with my code?

I have my ponent MAP and I use leaflet (not react-leaflet). I want to set a marker.

This is the code of my ponent.

import React from 'react';
import L from 'leaflet';
import '../../../../node_modules/leaflet/dist/leaflet.css';
import './map.scss';



export default class Map extends React.Component {


  ponentDidMount() {

    this.map = L.map('map', {
      center: [48.8762, 2.357909999999947],
      zoom: 14,
      zoomControl: true,
      layers: [
        L.tileLayer('https://{s}.tile.openstreetmap.de/tiles/osmde/{z}/{x}/{y}.png',{
          detectRetina: true,
          maxZoom: 20,
          maxNativeZoom: 17,
        }),
      ]
    });

    L.marker([48.8762, 2.357909999999947],
      {
        draggable: true,        // Make the icon dragable
        title: 'Hover Text',     // Add a title
        opacity: 0.5}            // Adjust the opacity
    )
      .addTo(this.map)
      .bindPopup("<b>Paris</b><br>Gare de l'Est")
      .openPopup();

    L.circle([48.8762, 2.357909999999947], {
      color: 'red',
      fillColor: '#f03',
      fillOpacity: 0.5,
      radius: 500
    }).addTo(this.map);

  };


  render() {
    return <div className="map" id="map" />
  }
}

I add the marker us described in the documentation, but the result in the map is not the default icon, it is only a square with a thin border. I checked the css-File from leaflet. The icon is in the images folder, but it is not in the map available.

This icon (marker) I am looking for

This is what I get

Can anybody help or see what is wrong with my code?

• javascript
• reactjs
• leaflet

• can you paste screenshots of desired and actual? – iamsaksham Commented Jul 18, 2019 at 9:57
• in place of import '../../../../node_modules/leaflet/dist/leaflet.css'; try writing import 'leaflet/dist/leaflet.css'; – iamsaksham Commented Jul 18, 2019 at 10:03
• Possible duplicate of Do I have to import leaflet's CSS file? – iamsaksham Commented Jul 18, 2019 at 10:12
• @iamsaksham no, it is not a duplicate – lesley n. Commented Jul 18, 2019 at 10:50
• can you see the icon png files in the network tab (developer's console) being requested? – iamsaksham Commented Jul 18, 2019 at 11:07

2 Answers 2

This is a well known css bundle issue with webpack. Define markerIcon as

const markerIcon = L.icon({
  iconSize: [25, 41],
  iconAnchor: [10, 41],
  popupAnchor: [2, -40],
  // specify the path here
  iconUrl: "https://unpkg./[email protected]/dist/images/marker-icon.png",
  shadowUrl: "https://unpkg./[email protected]/dist/images/marker-shadow.png"
});

and assign it to the icon property of L.marker like this:

 L.marker(
      [48.8762, 2.357909999999947],
      {
        draggable: true, // Make the icon dragable
        title: "Hover Text", // Add a title
        opacity: 0.5,
        icon: markerIcon // here assign the markerIcon var
      } // Adjust the opacity
    )
      .addTo(this.map)
      .bindPopup("<b>Paris</b><br>Gare de l'Est")
      .openPopup();

Demo

As per your question, I can interpret that you are not able to import the CSS properly.

You can import the css for the leaflet module by writing

import 'leaflet/dist/leaflet.css';

For detailed explanation you can read

Do I have to import leaflet's CSS file?

Example of how to load static CSS files from node_modules using webpack?