diff --git a/src/App.css b/src/App.css
index b0f08dddfc38b5c27752c025dbfe8113491b93d2..a0c99fee8d065ca947e7f47aaf956d4d918bf6c2 100644
--- a/src/App.css
+++ b/src/App.css
@@ -51,7 +51,7 @@ div.header button:hover {
div.fade-main {
position: fixed;
top: 0;
- z-index: 1000;
+ z-index: 1020;
height: 100vh;
width: 100vw;
margin: auto;
@@ -60,22 +60,22 @@ div.fade-main {
}
div.sticky {
- position: fixed;
- top: 0px;
- right: 0px;
- height: 100px;
- width: 100px;
- margin-right: 150px;
+ position: fixed;
+ top: 0px;
+ right: 0px;
+ height: 100px;
+ width: 100px;
+ margin-right: 150px;
}
.close {
- position: fixed;
- color: #f1f1f1;
- height: 85px;
- font-size: 100px;
- font-weight: bold;
- transition: transform 0.4s ease-in-out;
- line-height: 70%;
+ position: fixed;
+ color: #f1f1f1;
+ height: 85px;
+ font-size: 100px;
+ font-weight: bold;
+ transition: transform 0.4s ease-in-out;
+ line-height: 70%;
}
.close:hover,
@@ -138,3 +138,61 @@ div.login button:hover {
background-color: darkblue;
cursor: pointer;
}
+
+.login .formDate {
+ width: 30%;
+}
+
+.login label.formDate {
+ color: white;
+ width: 10%;
+ margin-left: 10%;
+ font-size: 180%;
+}
+
+.login .formTime {
+ width: 30%;
+ margin-right: 20%;
+}
+
+/* Editing text button in the toolbar */
+.leaflet-draw-toolbar .leaflet-draw-draw-textbox {
+ background-image: url("icons/button-textbox.png");
+ background-size: 30px 30px;
+}
+
+/* Editing tooltips */
+.leaflet-tooltip {
+ font-size: 18px;
+ /* Overriding tooltip layout by making it invisible */
+ background-color: transparent;
+ box-shadow: none;
+ border: none;
+ padding: 0;
+}
+
+/* remove the small triangle on tooltip */
+.leaflet-tooltip-bottom:before {
+ border: 0;
+}
+
+/* Editing editable tooltips */
+.editable {
+ cursor: text; /* the cursor icon doesn't change by default when hovering on top of the text; overriding */
+ min-width: 154px;
+ min-height: 18px;
+ color: #fff;
+ font-weight: bold;
+ /* text borders */
+ text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000,
+ 1px 1px 0 #000;
+}
+
+/* placeholder text for tooltip */
+[contenteditable="true"]:empty:before {
+ content: attr(placeholder);
+ display: block; /* For Firefox */
+ color: #777;
+ text-shadow: none;
+ font-weight: normal;
+}
diff --git a/src/components/DrawTools.js b/src/components/DrawTools.js
index cad46ebc192b29ccec8321ab819882a32a767561..71e2db30aeb6f68315553bc84e1d060433a1deef 100644
--- a/src/components/DrawTools.js
+++ b/src/components/DrawTools.js
@@ -1,7 +1,66 @@
import React, { Component } from "react";
import { EditControl } from "react-leaflet-draw";
+import L from "leaflet";
+import "leaflet-draw";
import { FeatureGroup, Marker, Polygon, Polyline } from "react-leaflet";
+// class for text field
+L.Draw.MarkerTextBox = L.Draw.Marker.extend({
+ options: {
+ icon: L.divIcon({
+ className: "", // empty class to override default styling
+ iconSize: [20, 20],
+ iconAnchor: [10, 20]
+ }),
+ repeatMode: false,
+ interactive: true
+ },
+ initialize: function(map, options) {
+ this.type = "textbox"; // important to have a unique type, so that it won't get mixed up with other elements
+ this.featureTypeCode = "textbox";
+ L.Draw.Feature.prototype.initialize.call(this, map, options);
+ }
+});
+
+// Overriding default toolbar
+// Just adding one new button though lol
+L.DrawToolbar.include({
+ getModeHandlers: function(map) {
+ return [
+ {
+ enabled: this.options.polyline,
+ handler: new L.Draw.Polyline(map, this.options.polyline),
+ title: L.drawLocal.draw.toolbar.buttons.polyline
+ },
+ {
+ enabled: this.options.polygon,
+ handler: new L.Draw.Polygon(map, this.options.polygon),
+ title: L.drawLocal.draw.toolbar.buttons.polygon
+ },
+ {
+ enabled: this.options.rectangle,
+ handler: new L.Draw.Rectangle(map, this.options.rectangle),
+ title: L.drawLocal.draw.toolbar.buttons.rectangle
+ },
+ {
+ enabled: this.options.circle,
+ handler: new L.Draw.Circle(map, this.options.circle),
+ title: L.drawLocal.draw.toolbar.buttons.circle
+ },
+ {
+ enabled: this.options.marker,
+ handler: new L.Draw.Marker(map, this.options.marker),
+ title: L.drawLocal.draw.toolbar.buttons.marker
+ },
+ {
+ enabled: this.options.marker,
+ handler: new L.Draw.MarkerTextBox(map, this.options.marker),
+ title: "Write text"
+ }
+ ];
+ }
+});
+
class DrawTools extends Component {
constructor(props) {
super(props);
@@ -12,10 +71,54 @@ class DrawTools extends Component {
}
_onCreated = e => {
- let type = e.layerType; // from the example; isn't used right now, but may be relevant in the future
- let layer = e.layer;
+ // check if a drawn polyline has just one point in it
+ if (e.layerType === "polyline" && e.layer.getLatLngs().length === 1) {
+ e.layer.remove();
+ return;
+ }
+
+ if (e.layerType === "textbox") {
+ // have to create tooltip as a DOM element to allow text selecting. maybe
+ let tooltip = L.DomUtil.create("div", "editable");
+ tooltip.innerHTML =
+ '<div contenteditable="true" placeholder="Click here and type"></div>';
+
+ e.layer.bindTooltip(tooltip, {
+ permanent: true,
+ direction: "bottom",
+ interactive: true
+ });
+
+ // disable dragging when cursor is over marker (tooltip)
+ // clicking on tooltip fires the marker's click handler, hence e.layer.on
+ e.layer.on("mouseover", function() {
+ e.layer._map.dragging.disable();
+ });
+
+ // enable dragging again when cursor is out of marker (tooltip)
+ e.layer.on("mouseout", function() {
+ e.layer._map.dragging.enable();
+ });
+
+ // show placeholder text again upon emptying textbox
+ e.layer.on("keyup", function() {
+ // when the text area is emptied, a <br> appears
+ // manually removing it so that the placeholder text can show
+ if (
+ tooltip.innerHTML ===
+ '<div placeholder="Click here and type" contenteditable="true"><br></div>' ||
+ tooltip.innerHTML ===
+ '<div placeholder="Click here and type" contenteditable="true"><div><br></div></div>'
+ ) {
+ tooltip.innerHTML =
+ '<div placeholder="Click here and type" contenteditable="true"></div>';
+ }
+ });
+ } // end if (e.layerType === "textbox")
+
+ // turning layer data to GeoJSON
this.makeGeoJSON(e.layer);
- };
+ }; // end _onCreated
_onEditMove = e => {
console.log("_onEditMove e:");
@@ -36,13 +139,13 @@ class DrawTools extends Component {
// this.props.sendGeoJSON(e.poly);
};
- _onEditDeleteStart = () => {
+ _onEditDeleteStart() {
this.setState({ editModeActive: true });
- };
+ }
- _onEditDeleteStop = () => {
+ _onEditDeleteStop() {
this.setState({ editModeActive: false });
- };
+ }
_onDeleted = e => {
console.log(e.layers._layers);
@@ -114,7 +217,7 @@ class DrawTools extends Component {
repeatMode: true, // allows using the tool again after finishing the previous shape
shapeOptions: {
color: "#f9f10c",
- opacity: 1
+ opacity: 1 // affects the outline only. for some reason it wasn't at full opacity, so this is needed for more clarity
}
},
rectangle: {
@@ -140,13 +243,10 @@ class DrawTools extends Component {
}
},
marker: {
- repeatMode: true
+ repeatMode: false
},
circlemarker: false
}}
- edit={{
- marker: true
- }}
/>
{/* iterate through every element fetched from back-end */}
diff --git a/src/icons/button-textbox.png b/src/icons/button-textbox.png
new file mode 100644
index 0000000000000000000000000000000000000000..e36a2872bdf8f68df996d35159335a77211ead7a
Binary files /dev/null and b/src/icons/button-textbox.png differ
diff --git a/src/icons/color-icon-2.png b/src/icons/color-icon-2.png
deleted file mode 100644
index 6623db24a39f19eb6f46f539c0eb3d7a0e9620bf..0000000000000000000000000000000000000000
Binary files a/src/icons/color-icon-2.png and /dev/null differ
diff --git a/src/icons/nil.png b/src/icons/nil.png
new file mode 100644
index 0000000000000000000000000000000000000000..ae058ee7bffad41634a20cd463fc94219f0de69b
Binary files /dev/null and b/src/icons/nil.png differ