1

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

  • DevTools failed to load SourceMap: Could not load content for chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/injectGlobalHook.js.map: HTTP error: status code 404, net::ERR_UNKNOWN_URL_SCHEME

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.

middlelady
  • 573
  • 2
  • 13
  • 36
  • 2
    Import `leaflet.css` if you haven't done already and set `style={{height: '100vh'}}` on `MapContainer` not Grid. I think the error is irrelevant with the fact that map is not showing. – kboul Nov 01 '20 at 18:32
  • 1
    add sample code in codesandbox for debugging – A.R.SEIF Nov 01 '20 at 18:55

2 Answers2

3

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

A.R.SEIF
  • 865
  • 1
  • 7
  • 25
1

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

João Melo
  • 784
  • 6
  • 16