enable react-leaflet - Javascript Leaflet

Javascript examples for Leaflet:Configuration

  1. HOME
  2. Javascript
  3. Leaflet
  4. Configuration

Description

enable react-leaflet

Demo Code

ResultView the demo in separate window 

<html>
   <head> 
      <title>React-Leaflet example</title> 
      <meta name="viewport" content="width=device-width, initial-scale=1"> 
      <script type="text/javascript" src="/js/babel/babel.js"></script> 
      <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/react/15.0.1/react.js"></script> 
      <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/react/15.0.1/react-dom.js"></script> 
      <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.23.1/babel.js"></script> 
      <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.0.3/leaflet.css"> 
      <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.0.3/leaflet.js"></script> 
      <script type="text/javascript" src="https://unpkg.com/react-leaflet@1.1.3/dist/react-leaflet.js"></script> 
      <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/localforage/1.7.2/localforage.js"></script> 
      <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/leaflet-offline@1.1.0/dist/leaflet-offline.min.js"></script> 
      <style id="compiled-css" type="text/css">

.leaflet-container {//from ww w.ja  v a  2s .co  m
   height: 400px;
   width: 100%;
}


      </style> 
      <script type="text/jsx" data-presets="es2017,react,stage-0" data-plugins="transform-decorators-legacy">
const React = window.React;
const { Map, TileLayer, Marker, Popup } = window.ReactLeaflet;
class OfflineTileLayer extends TileLayer {
   createLeafletElement() {
     return new L.tileLayer.offline(
      'https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',
      localforage,
      {
        attribution:
          '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a>',
        minZoom: 5,
        maxZoom: 20,
        crossOrigin: true,
      }
    );
  }
}
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 (
      <Map center={position} zoom={this.state.zoom}>
        <OfflineTileLayer
          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>
    );
  }
}
window.ReactDOM.render(<SimpleExample />, document.getElementById('container'));

      </script> 
   </head> 
   <body> 
      <div id="container"></div>  
   </body>
</html>

Related Tutorials