How to use react-leaflet - 10 common examples

}
      if (bounds) {
        mapProps.bounds = bounds
      } else if (position && zoom) {
        mapProps.center = position
        mapProps.zoom = zoom
      } else {
        console.error('no map position/bounds provided!', {position, zoom, bounds})
      } */

      // Compute the elevation point marker, if activeLeg
      var elevationPointMarker = null;
      if (diagramLeg && elevationPoint) {
        var pos = (0, _itinerary.legLocationAtDistance)(diagramLeg, elevationPoint);
        if (pos) {
          elevationPointMarker = _react2.default.createElement(_reactLeaflet.Marker, { position: pos });
        }
      }

      return _react2.default.createElement(
        _reactLeaflet.Map,
        {
          ref: 'map',
          className: 'map',
          center: center,
          zoom: config.map.initZoom || 13,
          onOverlayAdd: this._onOverlayAdd,
          onOverlayRemove: this._onOverlayRemove
          /* Note: Map-click is handled via single-click plugin, set up in componentDidMount() */
        },
        _react2.default.createElement(
          _reactLeaflet.LayersControl,

}),
          /* user-controlled overlay layers */
          userControlledOverlays.map(function (child, i) {
            return _react2.default.createElement(
              _reactLeaflet.LayersControl.Overlay,
              { key: i,
                name: child.props.name,
                checked: child.props.visible
              },
              child
            );
          })
        ),
        fixedOverlays,
        popupLocation && _react2.default.createElement(
          _reactLeaflet.Popup,
          { ref: 'clickPopup',
            position: [popupLocation.lat, popupLocation.lon],
            onClose: this._popupClosed
          },
          _react2.default.createElement(
            'div',
            { style: { width: 240 } },
            _react2.default.createElement(
              'div',
              { style: { fontSize: 14, marginBottom: 6 } },
              popupLocation.name.split(',').length > 3 ? popupLocation.name.split(',').splice(0, 3).join(',') : popupLocation.name
            ),
            _react2.default.createElement(
              'div',
              null,
              'Plan a trip:',

mapProps.zoom = zoom
      } else {
        console.error('no map position/bounds provided!', {position, zoom, bounds})
      } */

      // Compute the elevation point marker, if activeLeg
      var elevationPointMarker = null;
      if (diagramLeg && elevationPoint) {
        var pos = (0, _itinerary.legLocationAtDistance)(diagramLeg, elevationPoint);
        if (pos) {
          elevationPointMarker = _react2.default.createElement(_reactLeaflet.Marker, { position: pos });
        }
      }

      return _react2.default.createElement(
        _reactLeaflet.Map,
        {
          ref: 'map',
          className: 'map',
          center: center,
          zoom: config.map.initZoom || 13,
          onOverlayAdd: this._onOverlayAdd,
          onOverlayRemove: this._onOverlayRemove
          /* Note: Map-click is handled via single-click plugin, set up in componentDidMount() */
        },
        _react2.default.createElement(
          _reactLeaflet.LayersControl,
          { position: 'topright' },
          /* base layers */
          baseLayers && baseLayers.map(function (l, i) {
            return _react2.default.createElement(
              _reactLeaflet.LayersControl.BaseLayer,

/>}
      
    )
  }

  _handleDragend = (e: Event & {target: MapEvent}) => {
    this.props.setIsochroneLonLat(lonlat(e.target._latlng))
  }

  _handleDblclick = () => {
    this.props.remove()
  }
}

// Add leaflet to the props
export default withLeaflet(Isochrone)

})
}

/**
 * FitBoundsControl is a react-leaflet MapControl component intended to be used
 * as a child of a react-leaflet Map instance, such as EnhancedMap. When clicked,
 * the control fits the map to the bounds of the current features.
 */
export class FitBoundsControl extends MapControl {
  // props will be available as `options` field in the leaflet control
  createLeafletElement(props) {
    return new FitBoundsLeafletControl(props)
  }
}

export default WithKeyboardShortcuts(withLeaflet(injectIntl(FitBoundsControl)))

/* eslint class-methods-use-this: "off" */
import { GridLayer, withLeaflet } from 'react-leaflet';

class GoogleMapLayer extends GridLayer {
  createLeafletElement() {
    return L.gridLayer.googleMutant({
      type: 'roadmap',
    });
  }

  updateLeafletElement(fromProps, toProps) {
    super.updateLeafletElement(fromProps, toProps);
  }
}

export default withLeaflet(GoogleMapLayer);

/* eslint class-methods-use-this: "off" */
import { GridLayer, withLeaflet } from 'react-leaflet';

class GoogleSatelliteLayer extends GridLayer {
  createLeafletElement() {
    return L.gridLayer.googleMutant({
      type: 'hybrid',
    });
  }

  updateLeafletElement(fromProps, toProps) {
    super.updateLeafletElement(fromProps, toProps);
  }
}

export default withLeaflet(GoogleSatelliteLayer);

this._lastMapSize = this.props.leaflet.map.getSize();
    }
  }, {
    key: "createTile",
    value: function createTile(coords) {}
  }, {
    key: "createLeafletElement",
    value: function createLeafletElement(props) {}
  }, {
    key: "updateLeafletElement",
    value: function updateLeafletElement(fromProps, toProps) {}
  }]);

  return TransitiveCanvasOverlay;
}(_reactLeaflet.MapLayer); // connect to the redux store


_defineProperty(TransitiveCanvasOverlay, "propTypes", {
  transitiveData: _propTypes.default.object // React Lifecycle Methods

});

var mapStateToProps = function mapStateToProps(state, ownProps) {
  var activeSearch = (0, _state.getActiveSearch)(state.otp);
  var transitiveData = null;

  if (activeSearch && activeSearch.query.routingType === 'ITINERARY' && activeSearch.response && activeSearch.response.plan) {
    var itins = (0, _state.getActiveItineraries)(state.otp); // TODO: prevent itineraryToTransitive() from being called more than needed

    transitiveData = (0, _map.itineraryToTransitive)(itins[activeSearch.activeItinerary]);
  } else if (activeSearch && activeSearch.response && activeSearch.response.otp) {

className: "popup-row"
        }, _react.default.createElement(_setFromTo.default, {
          map: _this.props.leaflet.map,
          location: {
            lat: location.y,
            lon: location.x,
            name: name
          },
          setLocation: _this.props.setLocation
        })))));
      }));
    }
  }]);

  return ParkAndRideOverlay;
}(_reactLeaflet.MapLayer); // connect to the redux store


_defineProperty(ParkAndRideOverlay, "propTypes", {
  locations: _propTypes.default.array,
  zipcarLocationsQuery: _propTypes.default.func,
  setLocation: _propTypes.default.func
});

var mapStateToProps = function mapStateToProps(state, ownProps) {
  return {
    locations: state.otp.overlay.parkAndRide && state.otp.overlay.parkAndRide.locations
  };
};

var mapDispatchToProps = {
  setLocation: _map.setLocation,

className: "popup-row"
        }, _react.default.createElement(_setFromTo.default, {
          map: _this2.props.leaflet.map,
          location: {
            lat: location.coordinates.lat,
            lon: location.coordinates.lng,
            name: location.display_name
          },
          setLocation: _this2.props.setLocation
        })))));
      }));
    }
  }]);

  return ZipcarOverlay;
}(_reactLeaflet.MapLayer); // connect to the redux store


_defineProperty(ZipcarOverlay, "propTypes", {
  api: _propTypes.default.string,
  locations: _propTypes.default.array,
  zipcarLocationsQuery: _propTypes.default.func,
  setLocation: _propTypes.default.func
});

var mapStateToProps = function mapStateToProps(state, ownProps) {
  return {
    locations: state.otp.overlay.zipcar && state.otp.overlay.zipcar.locations
  };
};

var mapDispatchToProps = {