estoy tratando de usar react-leaflet para mostrar un mapa. Yo uso el código de este violín que está funcionando, pero en mi computadora tengo esta salida

Aquí está mi código:

DeviceMap.js

import React from 'react'
import { Map, Marker, Popup, TileLayer } from 'react-leaflet';

export class DeviceMap extends React.Component {
  constructor() {
    super();
    this.state = {
      lat: 51.505,
      lng: -0.09,
      zoom: 13,
    };
  }

  render() {
    const position = [this.state.lat, this.state.lng];
    return (
      <Map center={position} zoom={this.state.zoom} scrollWheelZoom={false}>
        <TileLayer
          attribution='&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
          url="http://{s}.tile.osm.org/{z}/{x}/{y}.png"
        />
        <Marker position={position}>
          <Popup>
            <span>A pretty CSS3 popup. <br/> Easily customizable.</span>
          </Popup>
        </Marker>
      </Map>
    );
  }
}

export default DeviceMap

DeviceTabs.js

export class DeviceTabs extends React.Component {
  state = {
    index: 0
  };

  handleTabChange = (index) => {
    this.setState({ index })
  };

  render () {
    return (
      <Tabs index={this.state.index} onChange={this.handleTabChange}>
        <Tab label="Values">
          <DeviceTable {...this.props} />
        </Tab>
        <Tab label="Map">
          <div className={style.leaflet}>
            <DeviceMap />
          </div>
        </Tab>
      </Tabs>
    )
  }
}

estilo.scss

.leaflet {
  height: 300px;
  width: 100%;
}

No hay ningún error en la consola y ya no tengo idea de dónde buscar. Dado que el violín está funcionando, no es un error. Me he perdido algo ?

Parece que no ha cargado en la hoja de estilo del folleto.

Desde el react-leaflet Guía de GitHub:

Si no está familiarizado con Leaflet, asegúrese de leer su guía de inicio rápido antes de usar esta biblioteca. En particular, deberá agregar su CSS a su página para representar el mapa correctamente y establecer la altura del contenedor.

http://leafletjs.com/examples/inicio-rápido/

Esto es lo que necesitará:

<link rel="stylesheet" href="https://unpkg.com/leaflet@1.0.1/dist/leaflet.css" />

Actualizar

Nota @ThomasThiebaud indica que es posible que también deba configurar la altura de .leaflet-container

—

Ange Loron también proporcionó una importación de módulo JS correcta y opcional (frente a cdn o enlace de estilo)

import 'leaflet/dist/leaflet.css';

Por lo que vale, la página de documentación está mal diseñada… y el mantenedor se ocupa continuamente de este problema en GitHub, pero por alguna razón, el problema es *culpa de los usuarios que continuamente no realizan la configuración requerida. /s

También soy nuevo en el uso de esta biblioteca y no encontré la documentación lo suficientemente clara. Pero aquí hay algunas cosas que considero necesarias para que esto funcione.

1. paquete de folletos de reacción

2. Paquete de folletos:

O bien, instálelo usando npm

npm install leaflet y
import 'leaflet/dist/leaflet.css'; en el archivo donde usas Map de react-leaf.

O

Incluya estas dos líneas en el index.html:

<link rel="stylesheet" href="https://unpkg.com/leaflet@1.6.0/dist/leaflet.css"
  integrity="sha512-xwE/Az9zrjBIphAcBb3F6JVqxf46+CDLwfLMHloNu6KEQCAWi6HcDUbeOfBIptF7tcCzusKFjFw2yuvEpDL9wQ=="
  crossorigin=""/>

<!-- Make sure you put this AFTER Leaflet's CSS -->
<script src="https://unpkg.com/leaflet@1.6.0/dist/leaflet.js"
  integrity="sha512-gZwIG9x3wUXg2hdXF6+rVkLF/0Vi9U8D2Ntg4Ga5I5BZpVkVxlJWbSQtXPSiUTtC0TjtGOmxa1AJPuV0CPthew=="
  crossorigin=""></script>

3. Agregue esto a App.css o index.css e importe el archivo: (Y es imprescindible)

.leaflet-container {
  width: 100wh; 
  height: 100vh;
}

// O agregar estilo directamente al contenedor del mapa

<Map
   center={position}
   zoom={1}
   style={{ height: '100vh', width: '100wh' }}
   >
   <TileLayer .... />
</Map>

En caso de que alguien se encuentre con el mismo problema, lo resolví simplemente agregando esto:

import 'leaflet/dist/leaflet.css';

Prueba esto

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

Leaflet.Icon.Default.imagePath="../node_modules/leaflet"

delete Leaflet.Icon.Default.prototype._getIconUrl;

Leaflet.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 default class MapDisplay extends Component {
state = {
    lat: 41.257017,
    lng: 29.077524,
    zoom: 13,
}


render() {
    const position = [this.state.lat, this.state.lng]
    return (
    <Map center={position} zoom={this.state.zoom} style={{height : '400px'}}>
        <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={position}>
        <Popup>
            Son Konum
        </Popup>
        </Marker>
    </Map>
    )
}
}

Puede solucionarlo agregando las siguientes líneas de código dentro del elemento head en su index.html.

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/7.0.0/normalize.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.3.1/leaflet.css">

<style>
  body {
    padding-bottom: 30px;
  }
  h1, h2, p {
    font-family: sans-serif;
    text-align: center;
  }
  .leaflet-container {
    height: 400px;
    width: 80%;
    margin: 0 auto;
  }
</style>

Nota: Puede cambiar el CSS para satisfacer sus necesidades.

Simplemente debe agregar esto a su archivo CSS, tuve el mismo problema que usted y este método solucionó mi problema:

  @import url("~leaflet/dist/leaflet.css");

.leaflet-container {
  width: 100%;
  height: 100vh;
}

importar prospecto.css

import 'leaflet/dist/leaflet.css';

algunas veces hay dos errores sobre la carga de la imagen después de agregar el archivo del folleto. para resolver estos errores, importe marker-icon.png y marker-shadow.png en la parte de importación y luego defina L.Marker.prototype.options.icon:

import icon from 'leaflet/dist/images/marker-icon.png';
import iconShadow from 'leaflet/dist/images/marker-shadow.png';
import iconRetina from 'leaflet/dist/images/marker-icon-2x.png';
let DefaultIcon = L.icon({
            ...L.Icon.Default.prototype.options,
            iconUrl: icon,
            iconRetinaUrl: iconRetina,
            shadowUrl: iconShadow
        });
        L.Marker.prototype.options.icon = DefaultIcon;

si el mapa no se muestra, agregue la altura y el ancho (style={{width: ‘100%’,height: ‘400px’}}) a la etiqueta del mapa como un estilo:

<Map
center={[35.6892, 51.3890]}
style={{width: '100%',height: '400px'}}
>

Agregar alto y ancho