How to use the react-leaflet.Map function in react-leaflet

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,

'use strict';

var React = require('react');
var Leaflet = require('react-leaflet');
var EventStore = require('../stores/EventStore');
var CityStore = require('../stores/CityStore');

var Map = Leaflet.Map,
  TileLayer = Leaflet.TileLayer,
  Circle = Leaflet.Circle,
  Polygon = Leaflet.Polygon;

var latLongList = function(bounds) {
  // Bounds come in as long, lat, since long is X
  var twoCorners = bounds.map(function(bound) {
    return bound.slice(0).reverse();
  });

  var corners = [];
  corners.push(twoCorners[0]);
  corners.push([twoCorners[1][0], twoCorners[0][1]]);
  corners.push(twoCorners[1]);
  corners.push([twoCorners[0][0], twoCorners[1][1]]);
  return corners;

import local from '../../../local'

import { vars } from '../../styles.js'
import CurrentLocation from '../../stores/CurrentLocation.js'
import StationStore from '../../stores/StationStore.js'
import SettingsStore from '../../stores/SettingsStore.js'
import UiStore from '../../stores/UiStore.js'
import { t } from '../../stores/translationStore.js'

import LocateIcon from '../../../dist/icons/locate-2.svg'

import IconHelper from '../../helpers/icons/index.js'

const Icon = leaflet.icon
const { CRS, point, latLng } = leaflet
const LeafletMap = reactLeaflet.Map
const { Marker, TileLayer, ZoomControl, Circle, CircleMarker } = reactLeaflet

const getDist = function(zoom) {
  let screensize = document.body.offsetWidth
  if (document.body.offsetHeight > screensize) {
    screensize = document.body.offsetHeight
  }
  let dist = Math.ceil(0.2 * screensize)
  if (zoom === 17) {
    dist = Math.ceil(0.45 * screensize)
  } else if (zoom === 16) {
    dist = Math.ceil(0.8 * screensize)
  }
  // max the api will handle is 1250
  if (dist > 1250) {
    dist = 1250

'use strict';

var React = require('react');
var Leaflet = require('react-leaflet');
var PusherStore = require('../stores/PusherStore');
var CityStore = require('../stores/CityStore');
var PusherActions = require("../actions/PusherActions");

var Map = Leaflet.Map,
  TileLayer = Leaflet.TileLayer,
  Circle = Leaflet.Circle,
  Polygon = Leaflet.Polygon;

var latLongList = function(bounds) {
  // Bounds come in as long, lat, since long is X
  var twoCorners = bounds.map(function(bound) {
    return bound.slice(0).reverse();
  });

  var corners = [];
  corners.push(twoCorners[0]);
  corners.push([twoCorners[1][0], twoCorners[0][1]]);
  corners.push(twoCorners[1]);
  corners.push([twoCorners[0][0], twoCorners[1][1]]);
  return corners;

componentDidMount() {
		/* eslint-disable */
		OpenStreetMap = require('react-leaflet').Map;
		OpenStreetLayer = require('react-leaflet').TileLayer;
		OpenStreetMaker = require('react-leaflet').Marker;
		OpenStreetPopup = require('react-leaflet').Popup;
		Icon = require('leaflet').Icon;
		DivIcon = require('leaflet').DivIcon;
		this.forceUpdate();
	}

import React from 'react'
import { Link, browserHistory } from 'react-router'
import { StationStore } from '../stores/stationStore.js'
import { UiStore } from '../stores/uiStore.js'

let leaflet = require('react-leaflet')
let wkx = require('wkx')
let Buffer = require('buffer').Buffer
let Map = leaflet.Map
let Marker = leaflet.Marker
let Popup = leaflet.Popup
let TileLayer = leaflet.TileLayer
let ZoomControl = leaflet.ZoomControl
let GeoJson = leaflet.GeoJSON
let Icon = require('leaflet').icon
let Circle = leaflet.Circle
let CircleMarker = leaflet.CircleMarker

class Line extends React.Component {
  constructor(props) {
    super(props)
    this.state = {
      line: undefined,
      route_id: undefined,
      route_list: []

const IconHelper = new iconhelper()

import LocateIcon from '../../dist/icons/locate.svg'
import TrainIcon from '../../dist/icons/train.svg'
import FerryIcon from '../../dist/icons/ferry.svg'
import BusIcon from '../../dist/icons/bus.svg'

const iconMap = {
  train: ,
  ferry: ,
  bus: ,
}

import RotatedMarker from './rotated-marker.jsx'
let leaflet = require('react-leaflet')
let Map = leaflet.Map
let Marker = leaflet.Marker
let Popup = leaflet.Popup
let TileLayer = leaflet.TileLayer
let ZoomControl = leaflet.ZoomControl
let GeoJson = leaflet.GeoJSON
let Icon = require('leaflet').icon
let Circle = leaflet.Circle
let CircleMarker = leaflet.CircleMarker
let CurrentStop = window.location.pathname.slice(3, 7)
let geoID = undefined
let liveRefresh = undefined

const hiddenIcon = Icon({
  iconUrl: '/icons/normal/bus-fill.svg',
  iconSize: [48, 48],
  className: 'hiddenIcon',

var LeafletMap = function LeafletMap(_ref) {
  var width = _ref.width,
      height = _ref.height,
      children = _ref.children,
      mapProps = _objectWithoutProperties(_ref, ['width', 'height', 'children']);

  return _react2.default.createElement(
    'div',
    null,
    _isClient2.default && _react2.default.createElement(
      _reactLeaflet.Map,
      _extends({}, mapProps, { style: { width: width, height: height } }),
      _react2.default.createElement(_reactLeaflet.TileLayer, {
        url: mapProps.url,
        attribution: mapProps.attribution
      }),
      children
    )
  );
};

var marker = this.state.hasLocation ? _react2['default'].createElement(
        _reactLeaflet.Marker,
        { position: this.state.latlng },
        _react2['default'].createElement(
          _reactLeaflet.Popup,
          null,
          _react2['default'].createElement(
            'span',
            null,
            'You are here'
          )
        )
      ) : null;

      return _react2['default'].createElement(
        _reactLeaflet.Map,
        {
          center: this.state.latlng,
          length: 4,
          onClick: this.handleClick.bind(this),
          onLocationfound: this.handleLocationFound.bind(this),
          ref: 'map',
          zoom: 13 },
        _react2['default'].createElement(_reactLeaflet.TileLayer, {
          attribution: '© <a href="http://osm.org/copyright">OpenStreetMap</a> contributors',
          url: 'http://{s}.tile.osm.org/{z}/{x}/{y}.png'
        }),
        marker
      );
    }
  }]);

function onEachFeature(feature, layer) {
    if (feature.properties && feature.properties.NAME) {
      layer.bindPopup(feature.properties.NAME);
      layer.on('mouseover', function (e) {
        e.target.openPopup();
      });
    }
  }

  return _react2.default.createElement(
    'div',
    { className: 'mainMap' },
    _react2.default.createElement(
      _reactLeaflet.Map,
      { className: className, center: position, zoom: zoom, zoomControl: false, dragging: false, scrollWheelZoom: false, doubleClickZoom: false },
      _react2.default.createElement(_reactLeaflet.TileLayer, {
        url: url,
        attribution: attribute
      }),
      _react2.default.createElement(_reactLeaflet.GeoJSON, {
        data: _neighborhoodGeoJson2.default,
        onEachFeature: onEachFeature
      })
    )
  );
};