Merge branch 'development' into 'rectangle-circle-bug'

# Conflicts:
#   src/components/DrawTools.js

src/App.css

@@ -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,45 @@ div.login button:hover {
   background-color: darkblue;
   cursor: pointer;
 }
+
+/* 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;
+}

src/components/DrawTools.js

 import React, { Component } from "react";
 import { EditControl } from "react-leaflet-draw";
+<<<<<<< src/components/DrawTools.js
 import { FeatureGroup } from "react-leaflet";
+=======
+import L from "leaflet";
+import "leaflet-draw";
+import { FeatureGroup } 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"
+      }
+    ];
+  }
+});
+>>>>>>> src/components/DrawTools.js
 
 class DrawTools extends Component {
   constructor(props) {
@@ -11,6 +74,7 @@ class DrawTools extends Component {
   }
 
   _onCreated = e => {
+<<<<<<< src/components/DrawTools.js
     let type = e.layerType; // from the example; isn't used right now, but may be relevant in the future
     let layer = e.layer;
     this.makeGeoJSON(e.layer);
@@ -23,6 +87,63 @@ class DrawTools extends Component {
     newGeoJSONAll.push(geoJSON);
     this.setState({ geoJSONAll: newGeoJSONAll });
     console.log(JSON.stringify(geoJSON, null, 4)); // printing GeoJSON data of the previous object create
+=======
+    // 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
+
+  makeGeoJSON = e => {
+    let geoJSON = e.toGeoJSON();
+    let newGeoJSONAll = this.state.geoJSONAll;
+    newGeoJSONAll.push(geoJSON); // can't do +=, need to use push function
+    console.log(JSON.stringify(newGeoJSONAll, null, 4));
+    this.setState({ geoJSONAll: newGeoJSONAll });
+>>>>>>> src/components/DrawTools.js
   };
 
   render() {
@@ -34,6 +155,7 @@ class DrawTools extends Component {
           onCreated={this._onCreated}
           draw={{
             circle: {
+<<<<<<< src/components/DrawTools.js
               repeatMode: false, // allows using the tool again after finishing the previous shape. turned off here
               shapeOptions: {
                 color: "#f9f10c",
@@ -42,6 +164,16 @@ class DrawTools extends Component {
             },
             rectangle: {
               repeatMode: false
+=======
+              repeatMode: true, // allows using the tool again after finishing the previous shape
+              shapeOptions: {
+                color: "#f9f10c",
+                opacity: 1 // affects the outline only. for some reason it wasn't at full opacity, so this is needed for more clarity
+              }
+            },
+            rectangle: {
+              repeatMode: true
+>>>>>>> src/components/DrawTools.js
             },
             polygon: {
               repeatMode: true,
@@ -52,18 +184,30 @@ class DrawTools extends Component {
               },
               shapeOptions: {
                 color: "#ed2572",
+<<<<<<< src/components/DrawTools.js
                 opacity: 100
+=======
+                opacity: 1
+>>>>>>> src/components/DrawTools.js
               }
             },
             polyline: {
               repeatMode: true,
               shapeOptions: {
                 color: "#ed2572",
+<<<<<<< src/components/DrawTools.js
                 opacity: 100
               }
             },
             marker: {
               repeatMode: true
+=======
+                opacity: 1
+              }
+            },
+            marker: {
+              repeatMode: false
+>>>>>>> src/components/DrawTools.js
             },
             circlemarker: false
           }}

src/components/UserMap.js

-import React, {Component} from 'react';
-import {
-	Map,
-	TileLayer,
-  ZoomControl,
-  Marker,
-  Popup
-} from 'react-leaflet'
-import DrawTools from './DrawTools.js'
+import React, { Component } from "react";
+import { Map, TileLayer, ZoomControl, Marker, Popup } from "react-leaflet";
+import L from "leaflet";
+import DrawTools from "./DrawTools.js";
 
 class UserMap extends Component {
-  constructor(props){
+  constructor(props) {
     super(props);
     this.state = {
       ownLat: null,
       ownLng: null,
-      mapUrl: 'https://tiles.kartat.kapsi.fi/taustakartta/{z}/{x}/{y}.jpg'
-    }
+      mapUrl: "https://tiles.kartat.kapsi.fi/taustakartta/{z}/{x}/{y}.jpg"
+    };
 
     this.watchPositionId = null;
   }
 
-  componentDidMount(){
-    this.getCurrentPosition((position) => {
+  componentDidMount() {
+    this.getCurrentPosition(position => {
       this.setCurrentPosition(position);
     });
   }
 
-  componentWillUnmount(){
-    if(this.watchPositionId != null){
+  componentWillUnmount() {
+    if (this.watchPositionId != null) {
       navigator.geolocation.clearWatch(this.watchPositionId);
     }
   }
 
-  setCurrentPosition(position){
+  setCurrentPosition(position) {
     this.setState({
       ownLat: position.coords.latitude,
-      ownLng: position.coords.longitude,
+      ownLng: position.coords.longitude
     });
   }
 
-  getCurrentPosition(callback){
-    if(!navigator.geolocation){
+  getCurrentPosition(callback) {
+    if (!navigator.geolocation) {
       console.log("Can't get geolocation :/");
-    }
-    else{
+    } else {
       // Position tracking options
       const options = {
         enableHighAccuracy: true,
         timeout: 30000,
         maximumAge: 0
+      };
+
+      if (this.watchPositionId != null) {
+        navigator.geolocation.clearWatch(this.watchPositionId);
       }
 
       if(this.watchPositionId != null){navigator.geolocation.clearWatch(this.watchPositionId);}
@@ -68,7 +66,7 @@ class UserMap extends Component {
     }
   }
 
-  positionToGeoJSON(position){
+  positionToGeoJSON(position) {
     let geoJSON = {
       type: "Feature",
       properties: {},
@@ -76,11 +74,15 @@ class UserMap extends Component {
         type: "Point",
         coordinates: [position.coords.longitude, position.coords.latitude]
       }
-    }
+    };
 
     return JSON.stringify(geoJSON);
   }
 
+  testers = asd => {
+    console.log(asd.target.getZoom());
+  };
+
   render() {
     return (
       <Map
@@ -94,21 +96,25 @@ class UserMap extends Component {
           attribution='&copy; <a href="https://www.maanmittauslaitos.fi/">Maanmittauslaitos</a>'
           url={this.props.mapUrl}
         />
-        <ZoomControl position='topright' />
-		    <DrawTools position={this.props.position} />
+
+        <ZoomControl position="topright" />
+        <DrawTools position={this.props.position} />
         <Marker position={this.props.position}>
           <Popup>
             Se on perjantai, my dudes <br />
           </Popup>
         </Marker>
-        {this.state.ownLat !== null && <Marker position={[this.state.ownLat, this.state.ownLng]}>
-        <Popup>
-            User's real position.<br />
-          </Popup>
-        </Marker>}
+        {this.state.ownLat !== null && (
+          <Marker position={[this.state.ownLat, this.state.ownLng]}>
+            <Popup>
+              User's real position.
+              <br />
+            </Popup>
+          </Marker>
+        )}
       </Map>
     );
   }
 }
 
-export default UserMap;
+export default UserMap;
\ No newline at end of file