React-Leaflet example

https://github.com/PaulLeCam/react-leaflet

by LandsD Map API

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/leaflet/0.7.7/leaflet.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet/0.7.7/leaflet.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/6.1.19/browser.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.0.1/react.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.0.1/react-dom.js"></script>
<script src="https://npmcdn.com/[email protected]/dist/react-leaflet.js"></script>
<div id="container"></div>

CSS

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

Babel + JSX

const React = window.React;
const { Map, TileLayer, Marker, Popup } = window.ReactLeaflet;

class SimpleExample extends React.Component {
  constructor() {
    super();
    this.state = {
      lat: 22.29227,
      lng: 114.20847,
      zoom: 17,
    };
  }

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

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