Add some code to allow placement of nodes

4 files changed, 369 insertions, 13 deletions

diff --git a/web/css/eventmap.css b/web/css/eventmap.css
index bd01c1b..e2d1d24 100644
--- a/web/css/eventmap.css
+++ b/web/css/eventmap.css
@@ -1,21 +1,28 @@
 html, body {
   height: 100%;
+  padding: 0px;
+  margin: 0px;
+  overflow: hidden;
 }
 
-#main {
-  width: 70%;
+#main, #map {
   height: 100%;
-  background-color: #f00;
-  float: left;
+  z-index: 0;
+  display: block;
+  position: relative;
 }
 
 #sidebar {
-  width: 30%;
-  height: 100%;
+  position: absolute;
   background-color: #00f;
-  float: right;
-}
-
-#map {
-  height: 100%;
+  border-radius: 8px;
+  -moz-border-radius: 8px;
+  -webkit-border-radius: 8px;
+  margin: 5px;
+  padding: 10px;
+  width: 390px;
+  left: 7px;
+  top: 90px;
+  bottom: 9px;
+  display: none;
 }
diff --git a/web/css/leaflet.contextmenu.css b/web/css/leaflet.contextmenu.css
new file mode 100644
index 0000000..4d47086
--- /dev/null
+++ b/web/css/leaflet.contextmenu.css
@@ -0,0 +1,53 @@
+.leaflet-contextmenu {
+    display: none;
+	box-shadow: 0 1px 7px rgba(0,0,0,0.4);
+	-webkit-border-radius: 4px;
+	border-radius: 4px;
+    padding: 4px 0;
+    background-color: #fff;
+    cursor: default;
+	-webkit-user-select: none;
+	-moz-user-select: none;
+	user-select: none;
+}
+
+.leaflet-contextmenu a.leaflet-contextmenu-item {
+    display: block;
+    color: #222;
+    font-size: 12px;
+    line-height: 20px;
+    text-decoration: none;
+    padding: 0 12px;
+    border-top: 1px solid transparent;
+    border-bottom: 1px solid transparent;
+    cursor: default;
+}
+
+.leaflet-contextmenu a.leaflet-contextmenu-item-disabled {
+    opacity: 0.5;
+}
+
+.leaflet-contextmenu a.leaflet-contextmenu-item:hover {
+    background-color: #f4f4f4;
+    border-top: 1px solid #f0f0f0;
+    border-bottom: 1px solid #f0f0f0;
+}
+
+.leaflet-contextmenu a.leaflet-contextmenu-item-disabled:hover {
+    background-color: inherit;
+    border-top: 1px solid transparent;
+    border-bottom: 1px solid transparent;
+}
+
+.leaflet-contextmenu-icon {
+    margin: 2px 8px 0 0;
+    width: 16px;
+    height: 16px;
+    float: left;
+    border: 0;
+}
+
+.leaflet-contextmenu-separator {
+    border-bottom: 1px solid #ccc;
+    margin: 5px 0;
+}
\ No newline at end of file
diff --git a/web/css/leaflet.css b/web/css/leaflet.css
index ac0cd17..0b08270 100644
--- a/web/css/leaflet.css
+++ b/web/css/leaflet.css
@@ -278,12 +278,12 @@
 	border-radius: 5px;

 	}

 .leaflet-control-layers-toggle {

-	background-image: url(images/layers.png);

+	background-image: url(../images/layers.png);

 	width: 36px;

 	height: 36px;

 	}

 .leaflet-retina .leaflet-control-layers-toggle {

-	background-image: url(images/layers-2x.png);

+	background-image: url(../images/layers-2x.png);

 	background-size: 26px 26px;

 	}

 .leaflet-touch .leaflet-control-layers-toggle {

diff --git a/web/css/leaflet.draw.css b/web/css/leaflet.draw.css
new file mode 100644
index 0000000..a80f88e
--- /dev/null
+++ b/web/css/leaflet.draw.css
@@ -0,0 +1,296 @@
+/* ================================================================== */
+/* Toolbars
+/* ================================================================== */
+
+.leaflet-draw-section {
+	position: relative;
+}
+
+.leaflet-draw-toolbar {
+	margin-top: 12px;
+}
+
+.leaflet-draw-toolbar-top {
+	margin-top: 0;
+}
+
+.leaflet-draw-toolbar-notop a:first-child {
+	border-top-right-radius: 0;
+}
+
+.leaflet-draw-toolbar-nobottom a:last-child {
+	border-bottom-right-radius: 0;
+}
+
+.leaflet-draw-toolbar a {
+	background-image: url('../images/spritesheet.png');
+	background-repeat: no-repeat;
+}
+
+.leaflet-retina .leaflet-draw-toolbar a {
+	background-image: url('../images/spritesheet-2x.png');
+	background-size: 270px 30px;
+}
+
+.leaflet-draw a {
+	display: block;
+	text-align: center;
+	text-decoration: none;
+}
+
+/* ================================================================== */
+/* Toolbar actions menu
+/* ================================================================== */
+
+.leaflet-draw-actions {
+	display: none;
+	list-style: none;
+	margin: 0;
+	padding: 0;
+	position: absolute;
+	left: 26px; /* leaflet-draw-toolbar.left + leaflet-draw-toolbar.width */
+	top: 0;
+}
+
+.leaflet-right .leaflet-draw-actions {
+	right:26px;
+	left:auto;
+}
+
+.leaflet-draw-actions li {
+	display: inline-block;
+}
+
+.leaflet-draw-actions li:first-child a {
+	border-left: none;
+}
+
+.leaflet-draw-actions li:last-child a {
+	-webkit-border-radius: 0 4px 4px 0;
+	        border-radius: 0 4px 4px 0;
+}
+
+.leaflet-right .leaflet-draw-actions li:last-child a {
+	-webkit-border-radius: 0;
+	        border-radius: 0;
+}
+
+.leaflet-right .leaflet-draw-actions li:first-child a {
+	-webkit-border-radius: 4px 0 0 4px;
+	        border-radius: 4px 0 0 4px;
+}
+
+.leaflet-draw-actions a {
+	background-color: #919187;
+	border-left: 1px solid #AAA;
+	color: #FFF;
+	font: 11px/19px "Helvetica Neue", Arial, Helvetica, sans-serif;
+	line-height: 28px;
+	text-decoration: none;
+	padding-left: 10px;
+	padding-right: 10px;
+	height: 28px;
+}
+
+.leaflet-draw-actions-bottom {
+	margin-top: 0;
+	white-space: nowrap;
+}
+
+.leaflet-draw-actions-top {
+	margin-top: 1px;
+	white-space: nowrap;
+}
+
+.leaflet-draw-actions-top a,
+.leaflet-draw-actions-bottom a {
+	height: 27px;
+	line-height: 27px;
+}
+
+.leaflet-draw-actions a:hover {
+	background-color: #A0A098;
+}
+
+.leaflet-draw-actions-top.leaflet-draw-actions-bottom a {
+	height: 26px;
+	line-height: 26px;
+}
+
+/* ================================================================== */
+/* Draw toolbar
+/* ================================================================== */
+
+.leaflet-draw-toolbar .leaflet-draw-draw-polyline {
+	background-position: -2px -2px;
+}
+
+.leaflet-draw-toolbar .leaflet-draw-draw-polygon {
+	background-position: -31px -2px;
+}
+
+.leaflet-draw-toolbar .leaflet-draw-draw-rectangle {
+	background-position: -62px -2px;
+}
+
+.leaflet-draw-toolbar .leaflet-draw-draw-circle {
+	background-position: -92px -2px;
+}
+
+.leaflet-draw-toolbar .leaflet-draw-draw-marker {
+	background-position: -122px -2px;
+}
+
+/* ================================================================== */
+/* Edit toolbar
+/* ================================================================== */
+
+.leaflet-draw-toolbar .leaflet-draw-edit-edit {
+	background-position: -152px -2px;
+}
+
+.leaflet-draw-toolbar .leaflet-draw-edit-remove {
+	background-position: -182px -2px;
+}
+
+.leaflet-draw-toolbar .leaflet-draw-edit-edit.leaflet-disabled {
+	background-position: -212px -2px;
+}
+
+.leaflet-draw-toolbar .leaflet-draw-edit-remove.leaflet-disabled {
+	background-position: -242px -2px;
+}
+
+/* ================================================================== */
+/* Drawing styles
+/* ================================================================== */
+
+.leaflet-mouse-marker {
+	background-color: #fff;
+	cursor: crosshair;
+}
+
+.leaflet-draw-tooltip {
+	background: rgb(54, 54, 54);
+	background: rgba(0, 0, 0, 0.5);
+	border: 1px solid transparent;
+	-webkit-border-radius: 4px;
+	        border-radius: 4px;
+	color: #fff;
+	font: 12px/18px "Helvetica Neue", Arial, Helvetica, sans-serif;
+	margin-left: 20px;
+	margin-top: -21px;
+	padding: 4px 8px;
+	position: absolute;
+	visibility: hidden;
+	white-space: nowrap;
+	z-index: 6;
+}
+
+.leaflet-draw-tooltip:before {
+	border-right: 6px solid black;
+	border-right-color: rgba(0, 0, 0, 0.5);
+	border-top: 6px solid transparent;
+	border-bottom: 6px solid transparent;
+	content: "";
+	position: absolute;
+	top: 7px;
+	left: -7px;
+}
+
+.leaflet-error-draw-tooltip {
+	background-color: #F2DEDE;
+	border: 1px solid #E6B6BD;
+	color: #B94A48;
+}
+
+.leaflet-error-draw-tooltip:before {
+	border-right-color: #E6B6BD;
+}
+
+.leaflet-draw-tooltip-single {
+	margin-top: -12px
+}
+
+.leaflet-draw-tooltip-subtext {
+	color: #f8d5e4;
+}
+
+.leaflet-draw-guide-dash {
+	font-size: 1%;
+	opacity: 0.6;
+	position: absolute;
+	width: 5px;
+	height: 5px;
+}
+
+/* ================================================================== */
+/* Edit styles
+/* ================================================================== */
+
+.leaflet-edit-marker-selected {
+	background: rgba(254, 87, 161, 0.1);
+	border: 4px dashed rgba(254, 87, 161, 0.6);
+	-webkit-border-radius: 4px;
+	        border-radius: 4px;
+}
+
+.leaflet-edit-move {
+	cursor: move;
+}
+
+.leaflet-edit-resize {
+	cursor: pointer;
+}
+
+/* ================================================================== */
+/* Old IE styles
+/* ================================================================== */
+
+.leaflet-oldie .leaflet-draw-toolbar {
+	border: 3px solid #999;
+}
+
+.leaflet-oldie .leaflet-draw-toolbar a {
+	background-color: #eee;
+}
+
+.leaflet-oldie .leaflet-draw-toolbar a:hover {
+	background-color: #fff;
+}
+
+.leaflet-oldie .leaflet-draw-actions {
+	left: 32px;
+	margin-top: 3px;
+}
+
+.leaflet-oldie .leaflet-draw-actions li {
+	display: inline;
+	zoom: 1;
+}
+
+.leaflet-oldie .leaflet-edit-marker-selected {
+	border: 4px dashed #fe93c2;
+}
+
+.leaflet-oldie .leaflet-draw-actions a {
+	background-color: #999;
+}
+
+.leaflet-oldie .leaflet-draw-actions a:hover {
+	background-color: #a5a5a5;
+}
+
+.leaflet-oldie .leaflet-draw-actions-top a {
+	margin-top: 1px;
+}
+
+.leaflet-oldie .leaflet-draw-actions-bottom a {
+	height: 28px;
+	line-height: 28px;
+}
+
+.leaflet-oldie .leaflet-draw-actions-top.leaflet-draw-actions-bottom a {
+	height: 27px;
+	line-height: 27px;
+}