How to resolve Marker error using Leaflet + React-leaflet?

Question

Following the guidelines of Leaflet’s documentation: https://leafletjs.com/examples/quick-start/ Similarly, following the React-leaflet guidelines for installation: https://react-leaflet.js.org/docs/en/installation and the basic example for a map with a location point: https://github.com/PaulLeCam/react-leaflet/blob/master/example/components/simple.js I arrived at following code to display a map in the web app I am implementing:

import React, { useEffect, useCallback } from 'react';

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

import { RootState } from '../../store/ducks/combineReducers';
import { createCallLoadStorage } from '../../store/ducks/callLoadStorage/actions';
import { CallLoadStorageModel } from '../../models/CallLoadStorageModel';
import Button from '../../components/Button';
import { Container, Logo, Title, DetailText, Footer } from './styles';
import logo from '../../assets/order-food.png';
import { createRequest } from '../../store/ducks/request/actions';
import { RequestModel } from '../../models/RequestModel';

const Login: React.FC = () => {
  const dispatch = useDispatch();
  const coords = useSelector((state: RootState) => state.coords.data);

  useEffect(() => {
    navigator.geolocation.getCurrentPosition(position => {
      const { latitude, longitude } = position.coords;
      dispatch(createCoords({ lat: latitude, lng: longitude, zoom: 15 }));
    });
  }, []);

  return (
    <Container>
      <Logo src={logo} alt="Logo" />
      <Title>Seja bem vindo!</Title>
      <Map
        center={[coords.lat, coords.lng]}
        zoom={coords.zoom}
        style={{ width: '100%', height: '50%' }}
      >
        <TileLayer url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png" />
        <Marker position={[coords.lat, coords.lng]} />
      </Map>
      <Footer>
        <DetailText>Acesse nosso cardápio e agilize seu pedido!</DetailText>
        <Button className="button" type="button">
          Vamos ao cardápio
        </Button>
      </Footer>
    </Container>
  );
};

export default Login;

The result should be this:

a map with the captured location marker, however, the result I have obtained is this:

and also noticed the following error checking the browser:

This is Reacjs application, I’m using typescript. If anyone can help me.

Att.

Leonardo Freitag

Answer 1

I just posted, and I found the solution:

I added the following code:

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

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

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

and worked perfectly.

The code is available and the link where I found the answer:

https://stackoverflow.com/questions/49441600/react-leaflet-marker-files-not-found/51222271

Att.

Leonardo Freitag