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

}),
          /* 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:',

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();
	}

stations.map(function (station) {
          var stationName = station.networks.join('/') + ' ' + station.id;
          return _react2.default.createElement(
            _reactLeaflet.Marker,
            {
              icon: carRentalNetworkIconLookup[station.networks] || carRentalNetworkIconLookup.default,
              key: station.id,
              position: [station.y, station.x]
            },
            _react2.default.createElement(
              _reactLeaflet.Popup,
              null,
              _react2.default.createElement(
                'div',
                { className: 'map-overlay-popup' },
                _react2.default.createElement(
                  'div',
                  { className: 'popup-title' },
                  stationName
                ),
                station.address && _react2.default.createElement(
                  'div',
                  { className: 'popup-row' },
                  _react2.default.createElement('i', { className: 'fa fa-map-marker', style: bulletIconStyle }),
                  ' ',
                  station.address.split(',')[0]
                ),

lat = stop.lat,
          lon = stop.lon;
      var idArr = id.split(':');
      var radius = 20;
      var half = radius / 2;
      var quarter = radius / 4;
      var html = "<div style="\&quot;height:" class="\&quot;stop-overlay-icon\&quot;">");
      var icon = (0, _leaflet.divIcon)({
        html: html,
        className: 'stop-overlay-bg',
        iconSize: radius
      });
      return _react.default.createElement(_reactLeaflet.Marker, {
        position: [lat, lon],
        icon: icon
      }, _react.default.createElement(_reactLeaflet.Popup, null, _react.default.createElement("div", {
        className: "map-overlay-popup"
      }, _react.default.createElement("div", {
        className: "popup-title"
      }, name), _react.default.createElement("div", {
        className: "popup-row"
      }, _react.default.createElement("b", null, "Agency:"), " ", idArr[0]), _react.default.createElement("div", {
        className: "popup-row"
      }, _react.default.createElement("span", null, _react.default.createElement("b", null, "Stop ID:"), " ", idArr[1]), _react.default.createElement(_reactBootstrap.Button, {
        className: "view-stop-button",
        bsSize: "xsmall",
        onClick: this._onClickView
      }, languageConfig.stopViewer || 'Stop Viewer')), _react.default.createElement("div", {
        className: "popup-row"
      }, _react.default.createElement(_setFromTo.default, {
        map: this.props.leaflet.map,
        location: {</div>

value: function render() {
      var position = [this.state.lat, this.state.lng];
      return _react2['default'].createElement(
        _reactLeaflet.Map,
        { center: position, zoom: this.state.zoom },
        _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'
        }),
        _react2['default'].createElement(
          _reactLeaflet.Marker,
          { position: position },
          _react2['default'].createElement(
            _reactLeaflet.Popup,
            null,
            _react2['default'].createElement(
              'span',
              null,
              'A pretty CSS3 popup. ',
              _react2['default'].createElement('br', null),
              ' Easily customizable.'
            )
          )
        )
      );
    }
  }]);

value: function render() {
      var _this$props = this.props,
          viewedStop = _this$props.viewedStop,
          stopData = _this$props.stopData;
      if (!viewedStop || !stopData) return _react.default.createElement(_reactLeaflet.FeatureGroup, null);
      return _react.default.createElement(_reactLeaflet.FeatureGroup, null, _react.default.createElement(_reactLeaflet.CircleMarker, {
        key: stopData.id,
        center: [stopData.lat, stopData.lon],
        radius: 9,
        fillOpacity: 1,
        fillColor: "cyan",
        color: "#000",
        weight: 3
      }, _react.default.createElement(_reactLeaflet.Popup, null, _react.default.createElement("div", null, stopData.name))));
    }
  }]);

var pctFull = station.bikesAvailable / (station.bikesAvailable + station.spacesAvailable);
        var i = Math.round(pctFull * 9);
        icon = (0, _leaflet.divIcon)({
          iconSize: [24, 24],
          iconAnchor: [12, 24],
          popupAnchor: [0, -12],
          html: "<div class="\&quot;bike-rental-hub-icon"></div>"),
          className: ''
        });
      }

      return _react.default.createElement(_reactLeaflet.Marker, {
        icon: icon,
        key: station.id,
        position: [station.y, station.x]
      }, _react.default.createElement(_reactLeaflet.Popup, null, _react.default.createElement("div", {
        className: "map-overlay-popup"
      }, _react.default.createElement("div", {
        className: "popup-title"
      }, station.isFloatingBike ? _react.default.createElement("span", null, "Floating bike: ", station.name) : _react.default.createElement("span", null, station.name)), !station.isFloatingBike &amp;&amp; _react.default.createElement("div", {
        className: "popup-row"
      }, _react.default.createElement("div", null, "Available bikes: ", station.bikesAvailable), _react.default.createElement("div", null, "Available docks: ", station.spacesAvailable)), _react.default.createElement("div", {
        className: "popup-row"
      }, _react.default.createElement(_setFromTo.default, {
        map: _this.props.leaflet.map,
        location: {
          lat: station.y,
          lon: station.x,
          name: station.name
        },
        setLocation: _this.props.setLocation
      })))));

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',
})
const busIcon = Icon({

type: type,
        className: "fa-stack-1x",
        style: fgStyle
      })));

      var otherType = type === 'from' ? 'to' : 'from';
      var icon = isWork ? 'briefcase' : isHome ? 'home' : 'map-marker';
      return _react.default.createElement(_reactLeaflet.Marker, {
        draggable: true,
        icon: (0, _leaflet.divIcon)({
          html: iconHtml,
          className: ''
        }),
        position: position,
        onDragEnd: this._onDragEnd
      }, showPopup && _react.default.createElement(_reactLeaflet.Popup, null, _react.default.createElement("div", null, _react.default.createElement("strong", null, _react.default.createElement(_icon.default, {
        type: icon
      }), " ", location.name), _react.default.createElement("div", null, _react.default.createElement(_reactBootstrap.Button, {
        bsStyle: "link",
        bsSize: "small",
        disabled: isWork,
        style: {
          padding: 0
        },
        onClick: isHome ? this._forgetHome : this._rememberAsHome
      }, isHome ? _react.default.createElement("span", null, _react.default.createElement(_icon.default, {
        type: "times"
      }), " Forget home") : _react.default.createElement("span", null, _react.default.createElement(_icon.default, {
        type: "home"
      }), " Save as home"))), _react.default.createElement("div", null, _react.default.createElement(_reactBootstrap.Button, {
        bsStyle: "link",
        bsSize: "small",

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: []
    }
    this.getWKB = this.getWKB.bind(this)