Marker not appearing for simple example #453

toby-griffiths · 2018-02-28T22:24:12Z

Please make sure to check the following boxes before submitting an issue.
Issues opened without using this template will be closed unless they have a good
reason not to follow this template.

All peer dependencies are installed: React, ReactDOM and Leaflet.
Using a supported version of React and ReactDOM (v15.x or v16.x).
Using the supported version of Leaflet (v1.3.x) and its corresponding CSS file is loaded.
Using the latest stable version of React-Leaflet.
The issue has not already been reported.
Make sure you have followed the quick start guide for Leaflet.
Make sure you have fully read the documentation and that you understand the limitations.

Expected behavior

Add the simple, example map to an App, and expect to see a map with a map marker that can be clicked to open the popup.

Actual behavior

Map appear, the marker does not (or more accurately the image of the map is broken. The element exists on the page).

Clicking on the (invisible) marker opens the popup.

It appears that the map marker src attribute is garbled…

data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABkAAAApCAYAAADAk4LOAAAFgUlEQVR4Aa1XA5BjWRTN2oW17d3YaZtr2962HUzbDNpjszW24mRt28p47v7zq/bXZtrp/lWnXr337j3nPCe85NcypgSFdugCpW5YoDAMRaIMqRi6aKq5E3YqDQO3qAwjVWrD8Ncq/RBpykd8oZUb/kaJutow8r1aP9II0WmLKLIsJyv1w/kqw9Ch2MYdB++12Onxee/QMwvf4/Dk/Lfp/i4nxTXtOoQ4pW5Aj7wpici1A9erdAN2OH64x8OSP9j3Ft3b7aWkTg/Fm91siTra0f9on5sQr9INejH6CUUUpavjFNq1B+Oadhxmnfa8RfEmN8VNAsQhPqF55xHkMzz3jSmChWU6f7/XZKNH+9+hBLOHYozuKQPxyMPUKkrX/K0uWnfFaJGS1QPRtZsOPtr3NsW0uyh6NNCOkU3Yz+bXbT3I8G3xE5EXLXtCXbbqwCO9zPQYPRTZ5vIDXD7U+w7rFDEoUUf7ibHIR4y6bLVPXrz8JVZEql13trxwue/uDivd3fkWRbS6/IA2bID4uk0UpF1N8qLlbBlXs4Ee7HLTfV1j54APvODnSfOWBqtKVvjgLKzF5YdEk5ewRkGlK0i33Eofffc7HT56jD7/6U+qH3Cx7SBLNntH5YIPvODnyfIXZYRVDPqgHtLs5ABHD3YzLuespb7t79FY34DjMwrVrcTuwlT55YMPvOBnRrJ4VXTdNnYug5ucHLBjEpt30701A3Ts+HEa73u6dT3FNWwflY86eMHPk+Yu+i6pzUpRrW7SNDg5JHR4KapmM5Wv2E8Tfcb1HoqqHMHU+uWDD7zg54mz5/2BSnizi9T1Dg4QQXLToGNCkb6tb1NU+QAlGr1++eADrzhn/u8Q2YZhQVlZ5+CAOtqfbhmaUCS1ezNFVm2imDbPmPng5wmz+gwh+oHDce0eUtQ6OGDIyR0uUhUsoO3vfDmmgOezH0mZN59x7MBi++WDL1g/eEiU3avlidO671bkLfwbw5XV2P8Pzo0ydy4t2/0eu33xYSOMOD8hTf4CrBtGMSoXfPLchX+J0ruSePw3LZeK0juPJbYzrhkH0io7B3k164hiGvawhOKMLkrQLyVpZg8rHFW7E2uHOL888IBPlNZ1FPzstSJM694fWr6RwpvcJK60+0HCILTBzZLFNdtAzJaohze60T8qBzyh5ZuOg5e7uwQppofEmf2++DYvmySqGBuKaicF1blQjhuHdvCIMvp8whTTfZzI7RldpwtSzL+F1+wkdZ2TBOW2gIF88PBTzD/gpeREAMEbxnJcaJHNHrpzji0gQCS6hdkEeYt9DF/2qPcEC8RM28Hwmr3sdNyht00byAut2k3gufWNtgtOEOFGUwcXWNDbdNbpgBGxEvKkOQsxivJx33iow0Vw5S6SVTrpVq11ysA2Rp7gTfPfktc6zhtXBBC+adRLshf6sG2RfHPZ5EAc4sVZ83yCN00Fk/4kggu40ZTvIEm5g24qtU4KjBrx/BTTH8ifVASAG7gKrnWxJDcU7x8X6Ecczhm3o6YicvsLXWfh3Ch1W0k8x0nXF+0fFxgt4phz8QvypiwCCFKMqXCnqXExjq10beH+UUA7+nG6mdG/Pu0f3LgFcGrl2s0kNNjpmoJ9o4B29CMO8dMT4Q5ox8uitF6fqsrJOr8qnwNbRzv6hSnG5wP+64C7h9lp30hKNtKdWjtdkbuPA19nJ7Tz3zR/ibgARbhb4AlhavcBebmTHcFl2fvYEnW0ox9xMxKBS8btJ+KiEbq9zA4RthQXDhPa0T9TEe69gWupwc6uBUphquXgf+/FrIjweHQS4/pduMe5ERUMHUd9xv8ZR98CxkS4F2n3EUrUZ10EYNw7BWm9x1GiPssi3GgiGRDKWRYZfXlON+dfNbM+GgIwYdwAAAAASUVORK5CYII=")marker-icon.png

You'll notice the )marker-icon.png part on the end, that if removed, allows the marker to appear.

Steps to reproduce

Create App component containing example map & render on page…

import PropTypes                         from 'prop-types';
import React, { Component }              from 'react';
import './App.css';
import 'leaflet/dist/leaflet.css';
import { Map, Marker, Popup, TileLayer } from 'react-leaflet';

const coordinates = [42, 35];

class App extends Component {

  render() {

    return <Map center={coordinates} zoom={12} style={{height: '350px'}}>
      <TileLayer
        attribution="&amp;copy <a href=&quot;http://osm.org/copyright&quot;>OpenStreetMap</a> contributors"
        url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
      />
      <Marker position={coordinates}>
        <Popup>
            <span>
              A pretty CSS3 popup. <br/> Easily customizable.
            </span>
        </Popup>
      </Marker>
    </Map>;

  }

}

export default App;

… and render the App…

ReactDOM.render(
  <App/>,
  document.getElementById('root')
);

Please let me know if you need more info to help resolve this.

The text was updated successfully, but these errors were encountered:

toby-griffiths · 2018-03-01T09:01:08Z

OK. It turns out that the problem was caused by including the leaflet CSS in the component's imports.

I've now just included a link to the CDN hosted leaflet.css file and it's working OK, but it would be good if this could be patched to work with create-react-app webpack config.

PaulLeCam · 2018-03-03T14:23:46Z

Yes you need to properly setup Leaflet in order to make this library work.

benneq · 2018-08-04T13:42:47Z

I've copied some code from google, and now it's working without CDN:

import * as React from "react";
import { Map, TileLayer, Marker, Popup } from "react-leaflet";
import 'leaflet/dist/leaflet.css';
import L from 'leaflet';

delete L.Icon.Default.prototype._getIconUrl;

L.Icon.Default.mergeOptions({
    iconRetinaUrl: require('leaflet/dist/images/marker-icon-2x.png'),
    iconUrl: require('leaflet/dist/images/marker-icon.png'),
    shadowUrl: require('leaflet/dist/images/marker-shadow.png')
});

export const MyMapComponent = (props) => {
    return (
        <Map center={props.center} zoom={props.zoom} style={{height: '350px'}}>
          <TileLayer
            attribution="&amp;copy <a href=&quot;http://osm.org/copyright&quot;>OpenStreetMap</a> contributors"
            url="https://cartodb-basemaps-{s}.global.ssl.fastly.net/light_all/{z}/{x}/{y}.png"
          />
          <Marker position={props.center}>
            <Popup>
              A pretty CSS3 popup. <br /> Easily customizable.
            </Popup>
          </Marker>
        </Map>
    )
}

gurre · 2019-04-12T11:33:47Z

FYI: This does not work for server-side rendering since leaflet assumes window is defined.

PredokMiF · 2019-04-28T21:17:22Z

When it will work "out of the box"? Strange prop deleteing and monkey patching of "mergeOptions' - smells bad ((

ivnsch · 2019-06-11T06:48:56Z

What is the solution? My marker is also invisible. I'm importing the css like this, in App.css:

@import url('https://unpkg.com/leaflet@1.5.1/dist/leaflet.css');

PredokMiF · 2019-06-11T09:29:18Z

What is the solution? My marker is also invisible. I'm importing the css like this, in App.css:
@import url('https://unpkg.com/leaflet@1.5.1/dist/leaflet.css');

You need insert code from few topics above with L.Icon.Default.mergeOptions. It helped me

ivnsch · 2019-06-11T10:16:05Z

@PredokMiF I had an error running that code (can try later again and add it here) and it's anyway a workaround, isn't it?

ebartan · 2019-07-30T12:58:35Z

don't forget delete L.Icon.Default.prototype._getIconUrl;

jpbow · 2019-10-11T16:54:24Z

If anyone's trying to use this with SSR, this worked for me (I'm using react-leaflet-universal too).

import * as React from "react";
import { Map, TileLayer, Marker, Popup } from "react-leaflet-universal";
import "leaflet/dist/leaflet.css";

export default () => {
  React.useEffect(() => {
    const L = require("leaflet");

    delete L.Icon.Default.prototype._getIconUrl;

    L.Icon.Default.mergeOptions({
      iconRetinaUrl: require("leaflet/dist/images/marker-icon-2x.png"),
      iconUrl: require("leaflet/dist/images/marker-icon.png"),
      shadowUrl: require("leaflet/dist/images/marker-shadow.png")
    });
  }, []);

  return (
    <Map center={[51.505, -0.09]} zoom={13} style={{ height: "100vh" }}>
      <TileLayer
        attribution='&amp;copy <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
        url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
      />
      <Marker position={[51.505, -0.09]}>
        <Popup>
          A pretty CSS3 popup. <br /> Easily customizable.
        </Popup>
      </Marker>
    </Map>
  );
};

ulantiger · 2020-04-10T08:12:39Z

Copy all files from node_modules/leaflet/dist/images into public/img or any other folder inside public directory
import L from 'leaflet'
and add this line inside your class or function
L.Icon.Default.imagePath='img/' or point to your directory where your marker files are located
I found it as the easiest way to fix it
Good luck to everyone!

Kenska · 2020-07-30T09:55:59Z

Another quick fix that I found: you can use the background-image CSS property of leaflet-marker-icon and set the Base64 marker icon data.

img.leaflet-marker-icon
{
    background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABkAAAApCAYAAADAk4LOAAAFgUlEQVR4Aa1XA5BjWRTN2oW17d3YaZtr2962HUzbDNpjszW24mRt28p47v7zq/bXZtrp/lWnXr337j3nPCe85NcypgSFdugCpW5YoDAMRaIMqRi6aKq5E3YqDQO3qAwjVWrD8Ncq/RBpykd8oZUb/kaJutow8r1aP9II0WmLKLIsJyv1w/kqw9Ch2MYdB++12Onxee/QMwvf4/Dk/Lfp/i4nxTXtOoQ4pW5Aj7wpici1A9erdAN2OH64x8OSP9j3Ft3b7aWkTg/Fm91siTra0f9on5sQr9INejH6CUUUpavjFNq1B+Oadhxmnfa8RfEmN8VNAsQhPqF55xHkMzz3jSmChWU6f7/XZKNH+9+hBLOHYozuKQPxyMPUKkrX/K0uWnfFaJGS1QPRtZsOPtr3NsW0uyh6NNCOkU3Yz+bXbT3I8G3xE5EXLXtCXbbqwCO9zPQYPRTZ5vIDXD7U+w7rFDEoUUf7ibHIR4y6bLVPXrz8JVZEql13trxwue/uDivd3fkWRbS6/IA2bID4uk0UpF1N8qLlbBlXs4Ee7HLTfV1j54APvODnSfOWBqtKVvjgLKzF5YdEk5ewRkGlK0i33Eofffc7HT56jD7/6U+qH3Cx7SBLNntH5YIPvODnyfIXZYRVDPqgHtLs5ABHD3YzLuespb7t79FY34DjMwrVrcTuwlT55YMPvOBnRrJ4VXTdNnYug5ucHLBjEpt30701A3Ts+HEa73u6dT3FNWwflY86eMHPk+Yu+i6pzUpRrW7SNDg5JHR4KapmM5Wv2E8Tfcb1HoqqHMHU+uWDD7zg54mz5/2BSnizi9T1Dg4QQXLToGNCkb6tb1NU+QAlGr1++eADrzhn/u8Q2YZhQVlZ5+CAOtqfbhmaUCS1ezNFVm2imDbPmPng5wmz+gwh+oHDce0eUtQ6OGDIyR0uUhUsoO3vfDmmgOezH0mZN59x7MBi++WDL1g/eEiU3avlidO671bkLfwbw5XV2P8Pzo0ydy4t2/0eu33xYSOMOD8hTf4CrBtGMSoXfPLchX+J0ruSePw3LZeK0juPJbYzrhkH0io7B3k164hiGvawhOKMLkrQLyVpZg8rHFW7E2uHOL888IBPlNZ1FPzstSJM694fWr6RwpvcJK60+0HCILTBzZLFNdtAzJaohze60T8qBzyh5ZuOg5e7uwQppofEmf2++DYvmySqGBuKaicF1blQjhuHdvCIMvp8whTTfZzI7RldpwtSzL+F1+wkdZ2TBOW2gIF88PBTzD/gpeREAMEbxnJcaJHNHrpzji0gQCS6hdkEeYt9DF/2qPcEC8RM28Hwmr3sdNyht00byAut2k3gufWNtgtOEOFGUwcXWNDbdNbpgBGxEvKkOQsxivJx33iow0Vw5S6SVTrpVq11ysA2Rp7gTfPfktc6zhtXBBC+adRLshf6sG2RfHPZ5EAc4sVZ83yCN00Fk/4kggu40ZTvIEm5g24qtU4KjBrx/BTTH8ifVASAG7gKrnWxJDcU7x8X6Ecczhm3o6YicvsLXWfh3Ch1W0k8x0nXF+0fFxgt4phz8QvypiwCCFKMqXCnqXExjq10beH+UUA7+nG6mdG/Pu0f3LgFcGrl2s0kNNjpmoJ9o4B29CMO8dMT4Q5ox8uitF6fqsrJOr8qnwNbRzv6hSnG5wP+64C7h9lp30hKNtKdWjtdkbuPA19nJ7Tz3zR/ibgARbhb4AlhavcBebmTHcFl2fvYEnW0ox9xMxKBS8btJ+KiEbq9zA4RthQXDhPa0T9TEe69gWupwc6uBUphquXgf+/FrIjweHQS4/pduMe5ERUMHUd9xv8ZR98CxkS4F2n3EUrUZ10EYNw7BWm9x1GiPssi3GgiGRDKWRYZfXlON+dfNbM+GgIwYdwAAAAASUVORK5CYII=");
}

You can suppress the errors caused by the original issue by setting the icon's imagePath to /.

import L from "leaflet";
L.Icon.Default.imagePath = "/";

Mloweedgar · 2020-09-23T11:28:25Z

I've copied some code from google, and now it's working without CDN:

import * as React from "react";
import { Map, TileLayer, Marker, Popup } from "react-leaflet";
import 'leaflet/dist/leaflet.css';
import L from 'leaflet';

delete L.Icon.Default.prototype._getIconUrl;

L.Icon.Default.mergeOptions({
    iconRetinaUrl: require('leaflet/dist/images/marker-icon-2x.png'),
    iconUrl: require('leaflet/dist/images/marker-icon.png'),
    shadowUrl: require('leaflet/dist/images/marker-shadow.png')
});

export const MyMapComponent = (props) => {
    return (
        <Map center={props.center} zoom={props.zoom} style={{height: '350px'}}>
          <TileLayer
            attribution="&amp;copy <a href=&quot;http://osm.org/copyright&quot;>OpenStreetMap</a> contributors"
            url="https://cartodb-basemaps-{s}.global.ssl.fastly.net/light_all/{z}/{x}/{y}.png"
          />
          <Marker position={props.center}>
            <Popup>
              A pretty CSS3 popup. <br /> Easily customizable.
            </Popup>
          </Marker>
        </Map>
    )
}

this worked for me. thanks

zacwang89 · 2020-11-22T11:18:11Z

The following code from Stackoverflow works for me on React-Leaflet v3

import React, { Component } from 'react';
import L from 'leaflet';
import {
    Map, TileLayer, Marker, Popup
} from 'react-leaflet'
import 'leaflet/dist/leaflet.css';
import './style.css';


import icon from 'leaflet/dist/images/marker-icon.png';
import iconShadow from 'leaflet/dist/images/marker-shadow.png';

let DefaultIcon = L.icon({
    iconUrl: icon,
    shadowUrl: iconShadow
});

L.Marker.prototype.options.icon = DefaultIcon;

injecteer · 2020-11-26T00:38:31Z

It has to work out of the box. We as lib users do not want to hack our way thru 3rd party library jungle all day long!

fix from PaulLeCam/react-leaflet#453 (comment)

ghybs · 2021-01-17T12:45:06Z

Hi all,

For reference, this is caused by webpack fiddling with URL's in CSS. This intereferes with Leaflet algorithm to detect paths to its default icon images, which dates from before webpack was so used.
You can find more details in issue Leaflet/Leaflet#4968

Leaflet works out-of-the-box.

Webpack (and other build engines) combined with Leaflet does not work out-of-the-box.

Please refer to solution proposed in #4968 (comment): leaflet-defaulticon-compatibility

While I can understand that many developers would have preferred such feature to be incorporated directly in Leaflet core, it has been argued that the added code is useless to a majority of end-users. Therefore, aligning with Leaflet spirit of keeping its core simple, I decided to make it a plugin.

With webpack, another typical solution, once you have configured your loaders:

import L from 'leaflet';
delete L.Icon.Default.prototype._getIconUrl;

L.Icon.Default.mergeOptions({
  iconRetinaUrl: require('leaflet/dist/images/marker-icon-2x.png'),
  iconUrl: require('leaflet/dist/images/marker-icon.png'),
  shadowUrl: require('leaflet/dist/images/marker-shadow.png'),
});

alekhranjan75 · 2021-03-01T11:50:44Z

The following code from Stackoverflow works for me on React-Leaflet v3

import React, { Component } from 'react';
import L from 'leaflet';
import {
    Map, TileLayer, Marker, Popup
} from 'react-leaflet'
import 'leaflet/dist/leaflet.css';
import './style.css';


import icon from 'leaflet/dist/images/marker-icon.png';
import iconShadow from 'leaflet/dist/images/marker-shadow.png';

let DefaultIcon = L.icon({
    iconUrl: icon,
    shadowUrl: iconShadow
});

L.Marker.prototype.options.icon = DefaultIcon;

Thanks man it worked for react-leaflet version > 3

DavidNorena · 2021-03-05T05:11:27Z

why is this closed if it is not solved yet ?

PaulLeCam closed this as completed Mar 3, 2018

phdog mentioned this issue Sep 27, 2018

marker Icon not showing #520

Closed

aloenobilis mentioned this issue Aug 7, 2019

Single marker fails to get rendered if it is not in or close to a cluster yuzhva/react-leaflet-markercluster#93

Closed

yuvalbl mentioned this issue Dec 26, 2019

Added React-Leaflet support, basic location map component. data-for-change/anyway-newsflash-infographics#6

Merged

AlfonsoLozana mentioned this issue Mar 10, 2020

Problema con los Market en React-Leaflet, no se muertra el market Arquisoft/viade_es3b#23

Closed

gavinr added a commit to gavinr-maps/esri-leaflet-react-demo that referenced this issue Jan 6, 2021

Feature Layer and icon fix

fd1b050

fix from PaulLeCam/react-leaflet#453 (comment)

Repository owner locked as off-topic and limited conversation to collaborators Mar 5, 2021

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Marker not appearing for simple example #453

Marker not appearing for simple example #453

toby-griffiths commented Feb 28, 2018

toby-griffiths commented Mar 1, 2018

PaulLeCam commented Mar 3, 2018

benneq commented Aug 4, 2018 •

edited

Loading

gurre commented Apr 12, 2019

PredokMiF commented Apr 28, 2019 •

edited

Loading

ivnsch commented Jun 11, 2019

PredokMiF commented Jun 11, 2019 •

edited

Loading

ivnsch commented Jun 11, 2019

ebartan commented Jul 30, 2019

jpbow commented Oct 11, 2019

ulantiger commented Apr 10, 2020

Kenska commented Jul 30, 2020 •

edited

Loading

Mloweedgar commented Sep 23, 2020

zacwang89 commented Nov 22, 2020

injecteer commented Nov 26, 2020

ghybs commented Jan 17, 2021

alekhranjan75 commented Mar 1, 2021

DavidNorena commented Mar 5, 2021

Marker not appearing for simple example #453

Marker not appearing for simple example #453

Comments

toby-griffiths commented Feb 28, 2018

Expected behavior

Actual behavior

Steps to reproduce

toby-griffiths commented Mar 1, 2018

PaulLeCam commented Mar 3, 2018

benneq commented Aug 4, 2018 • edited Loading

gurre commented Apr 12, 2019

PredokMiF commented Apr 28, 2019 • edited Loading

ivnsch commented Jun 11, 2019

PredokMiF commented Jun 11, 2019 • edited Loading

ivnsch commented Jun 11, 2019

ebartan commented Jul 30, 2019

jpbow commented Oct 11, 2019

ulantiger commented Apr 10, 2020

Kenska commented Jul 30, 2020 • edited Loading

Mloweedgar commented Sep 23, 2020

zacwang89 commented Nov 22, 2020

injecteer commented Nov 26, 2020

ghybs commented Jan 17, 2021

alekhranjan75 commented Mar 1, 2021

DavidNorena commented Mar 5, 2021

benneq commented Aug 4, 2018 •

edited

Loading

PredokMiF commented Apr 28, 2019 •

edited

Loading

PredokMiF commented Jun 11, 2019 •

edited

Loading

Kenska commented Jul 30, 2020 •

edited

Loading