JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://d3js.org/d3.v2.js"></script>
<link rel="stylesheet" href="http://mbostock.github.com/d3/ex/colorbrewer.css">
<script src="http://maps.google.com/maps/api/js?sensor=false&amp;libraries=geometry"></script>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="http://d3js.org/d3.v2.js?2.9.1"></script>

<ul class="menu">    
    <li><a class="edit">Edit Area</a></li>
    <li><a class="clear">Clear Area</a></li>
    <li><a class="draw">Draw Area</a></li>  
</ul>


<div id="map"></div>
<div id="canvas1"><svg></svg></div>

CSS

html, body {
	width: 100%;
	height: 100%;
	margin: 0;
	padding: 0;
}

.hide {
	display: none;
}

#map, #canvas1 {
	position: absolute;
	margin: 0;
	padding: 0;
	top: 34px;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 10;
}

#canvas1 {
	z-index: 0;
}
#canvas1.front {
	z-index: 100;
}
#canvas1 svg {
	width: 100%;
    height: 100%
}

.stations {
	position: absolute;
}
.stations, .stations svg.aaa {
	position: absolute;
}
.stations border {
	position: absolute;
	stroke: black;
	stroke-width: 2px;
}
.stations svg.aaa {
	width: 60px;
	height: 20px;
	padding-right: 100px;
	font: 10px sans-serif;
}
.stations circle {
	fill: brown;
	stroke: black;
	stroke-width: 1.5px;
}

.menu{
    margin:0;
    padding:3px;
    background: grey;    
    list-style-type:none;
    overflow:hidden;
}
.menu li{
    float:left;
    background: white;
    margin-right:5px;
}
.menu li a{
    display:block;
    cursor: pointer;
    padding: 5px;
}
.menu li:hover, .menu .highlight {
    background: gold;
}

path {
        stroke: #000;
        stroke-width: 1;
        fill: none;
    }

.selectioncomplete{
    fill: crimson;
    fill-opacity:0.2;
}

circle {
  fill: #000;
  fill-opacity: .5;
  cursor: move;
}


rect {
  fill: none;
  pointer-events: all;
}

JavaScript

$( document ).ready(function() {
var map, overlay, data;
var poly = null;

var menuHandler = {
    invoke: function(){
        $('.clear').click(function(e) {
            e.preventDefault();
            console.log("clear path");
            
            shapeSelector.clear();
        });
        
        $('.edit').click(function(e) {
            e.preventDefault();
            
            if($(this).data("editing")){
                $(this).data("editing", false);
                $(this).removeClass('highlight')
                poly.setEditable(false);
            }else{
                shapeSelector.edit();
            }
            
        }); 
 
        $('.draw').click(function(e) {
            e.preventDefault();
            if ($(this).hasClass('highlight')) {
                d3.select("#canvas1").classed({'front': false})
                $(this).removeClass('highlight');
                poly.setMap(map);
            } else {
                shapeSelector.clear();
                $(this).addClass('highlight');
                console.log("start drawing");

                
                shapeSelector.invoke();
            }
            
        });
    }
};

menuHandler.invoke();

//////////////////////////////


var shapeSelector = {
        invoke: function(){
            var that = this;
            
            // An array to hold the coordinates
            // of the line drawn on each svg.
            var  coords = []
            this.line = d3.svg.line();
            
            this.drag = this.getDragBehaviours()

            this.svg = d3.select("#canvas1").classed({'front': true})
                .select('svg')
                   .call(that.drag);
        },
        getDragBehaviours: function(){
            var that = this;
                  
            // Set the behavior for each part
            // of the drag.
            drag = d3.behavior.drag()
                .on("dragstart", function() {
                    // Empty the coords...