React-Leaflet v2 example

index.html

<div id="container"></div>

react-leaflet-v2-example.markdown

React-Leaflet v2 example

https://react-leaflet.js.org/

A Pen by Paul Le Cam on CodePen.

License.

script.babel

const { Map: LeafletMap, TileLayer, Marker, Popup } = ReactLeaflet

class SimpleExample 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 (
      <LeafletMap center={position} zoom={this.state.zoom}>
        <TileLayer
          attribution='&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
          url='https://{s}.tile.osm.org/{z}/{x}/{y}.png'
        />
        <Marker position={position}>
          <Popup>
            A pretty CSS3 popup. <br/> Easily customizable.
          </Popup>
        </Marker>
      </LeafletMap>
    );
  }
}


ReactDOM.render(<SimpleExample />, document.getElementById('container'))

scripts

<script src="https://unpkg.com/react@16.13.0/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@16.13.0/umd/react-dom.development.js"></script>
<script src="https://unpkg.com/leaflet@1.6.0/dist/leaflet-src.js"></script>
<script src="https://unpkg.com/react-leaflet@2.7.0/dist/react-leaflet.js"></script>

style.css

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

styles

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