CODEWITHSUNDEEP
reactjsreact-leaflet
middlelady
middlelady

Reputation: 583

React Leaflet: Failed to load sourcemap

My leaflet map is failing to show even though I apparently set up all following documentation. The only message in console I get is:

My component as per documentation:

import React from 'react';
import { Grid } from '@material-ui/core';
import { MapContainer, TileLayer, Marker, Popup } from 'react-leaflet';

const MapContent = props => {
  return (
    <Grid component="section" className="tkr-map__content leaflet-container" height="100vh" width="100%" item={true} sm={12} md={10}>
      <MapContainer center={[51.505, -0.09]} zoom={13} scrollWheelZoom={false}>
        <TileLayer
          attribution='&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>
      </MapContainer>
    </Grid>
  );
};

export default MapContent;

I'm not sure if at this point, it can depends from my local server, Material UI, webpack or something else I'm currently ignoring.

Any suggestion would be appreciated.

Upvotes: 1

Views: 1493

Answers (2)

Jo&#227;o Melo
Jo&#227;o Melo

Reputation: 835

It seems to be an issue with the "React Developer Tools" Chrome extension - see this answer.

Upvotes: 1

A.R.SEIF
A.R.SEIF

Reputation: 873

The following steps should be followed
install yarn add leaflet react-leaflet

add css file to index.js like below
import "leaflet/dist/leaflet.css";

and add height is important .height: "400px"
sample code 

import React from "react";
import { MapContainer, Marker, Popup, TileLayer } from "react-leaflet";

export default function App() {
  return (
    <div>
      <MapContainer
        style={{ height: "400px" }}
        center={[51.505, -0.09]}
        zoom={13}
        scrollWheelZoom={false}
      >
        <TileLayer
          attribution='&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>
      </MapContainer>
    </div>
  );
}

Work Demo

CodeSandbox

Upvotes: 3

Related Questions