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

'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;
}

'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;
}

value: function render() {
      var center = [51.505, -0.09];

      var rectangle = [[51.49, -0.08], [51.5, -0.06]];

      return _react2['default'].createElement(
        _reactLeaflet.Map,
        { center: center, 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'
        }),
        _react2['default'].createElement(
          _reactLeaflet.LayerGroup,
          null,
          _react2['default'].createElement(_reactLeaflet.Circle, { center: center, fillColor: 'blue', radius: 200 }),
          _react2['default'].createElement(_reactLeaflet.Circle, { center: center, fillColor: 'red', radius: 100, stroke: false }),
          _react2['default'].createElement(
            _reactLeaflet.LayerGroup,
            null,
            _react2['default'].createElement(_reactLeaflet.Circle, { center: [51.51, -0.08], color: 'green', fillColor: 'green', radius: 100 })
          )
        ),
        _react2['default'].createElement(
          _reactLeaflet.LayerGroup,
          null,
          _react2['default'].createElement(_reactLeaflet.Rectangle, { bounds: rectangle, color: 'black' })
        )
      );
    }
  }]);

var center = [51.505, -0.09];

      var rectangle = [[51.49, -0.08], [51.5, -0.06]];

      return _react2['default'].createElement(
        _reactLeaflet.Map,
        { center: center, 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'
        }),
        _react2['default'].createElement(
          _reactLeaflet.LayerGroup,
          null,
          _react2['default'].createElement(_reactLeaflet.Circle, { center: center, fillColor: 'blue', radius: 200 }),
          _react2['default'].createElement(_reactLeaflet.Circle, { center: center, fillColor: 'red', radius: 100, stroke: false }),
          _react2['default'].createElement(
            _reactLeaflet.LayerGroup,
            null,
            _react2['default'].createElement(_reactLeaflet.Circle, { center: [51.51, -0.08], color: 'green', fillColor: 'green', radius: 100 })
          )
        ),
        _react2['default'].createElement(
          _reactLeaflet.LayerGroup,
          null,
          _react2['default'].createElement(_reactLeaflet.Rectangle, { bounds: rectangle, color: 'black' })
        )
      );
    }
  }]);

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({
  iconUrl: '/icons/normal/bus-fill.svg',
  iconSize: [24, 24],
  className: 'vehIcon',
})
const trainIcon = Icon({

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)
    this.getShapeIDs = this.getShapeIDs.bind(this)
    this.triggerTap = this.triggerTap.bind(this)
    this.convert = this.convert.bind(this)
  }