Merge branch 'development' into '25-pelinluontilomake'

# Conflicts:
#   src/App.css

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,
@@ -155,3 +155,44 @@ div.login button:hover {
   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;
+}

src/components/DrawTools.js

-import React, {Component} from 'react';
-import { EditControl } from "react-leaflet-draw"
-import {
-	FeatureGroup,
-} from 'react-leaflet'
+import React, { Component } from "react";
+import { EditControl } from "react-leaflet-draw";
+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"
+      }
+    ];
+  }
+});
 
 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;		
-		let geoJSON = layer.toGeoJSON();
-		console.log(JSON.stringify(geoJSON, null, 4)); // makes the output readable in the console
-	}
-	
-	render() {
-		return (
-			// "It's important to wrap EditControl component into FeatureGroup component from react-leaflet. The elements you draw will be added to this FeatureGroup layer, when you hit edit button only items in this layer will be edited."
-			<FeatureGroup> 
-				<EditControl
-					position='topright'
-					onCreated={this._onCreated}
-					draw={{
-						circle: {
-							repeatMode: true, // allows using the tool again after finishing the previous shape
-							shapeOptions: {
-								color: '#f9f10c',
-								opacity: 100
-							}
-						},
-						rectangle: {
-							repeatMode: true
-						},
-						polygon: {
-							repeatMode: true,
-							allowIntersection: false, // Restricts shapes to simple polygons
-							drawError: {
-								color: '#e1e100', // Color the shape will turn when intersects
-								message: '<strong>Oh snap!<strong> you can\'t draw that!' // Message that will show when intersect
-							},
-							shapeOptions: {
-								color: '#ed2572',
-								opacity: 100
-							}
-						},
-						polyline: {
-							repeatMode: true,
-							shapeOptions: {
-								color: '#ed2572',
-								opacity: 100
-							}
-						},
-						marker: {
-							repeatMode: true
-						},
-						circlemarker: false
-					}}
-				/>
-			</FeatureGroup>
-		)
-	}
+  constructor(props) {
+    super(props);
+    this.state = {
+      geoJSONAll: [] // property for all GeoJSON data in the map
+    };
+  }
+
+  _onCreated = e => {
+    // 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 });
+  };
+
+  render() {
+    return (
+      // "It's important to wrap EditControl component into FeatureGroup component from react-leaflet. The elements you draw will be added to this FeatureGroup layer, when you hit edit button only items in this layer will be edited."
+      <FeatureGroup>
+        <EditControl
+          position="topright"
+          onCreated={this._onCreated}
+          draw={{
+            circle: {
+              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
+            },
+            polygon: {
+              repeatMode: true,
+              allowIntersection: false, // Restricts shapes to simple polygons
+              drawError: {
+                color: "#e1e100", // Color the shape will turn when intersects
+                message: "<strong>Oh snap!<strong> you can't draw that!" // Message that will show when intersect
+              },
+              shapeOptions: {
+                color: "#ed2572",
+                opacity: 1
+              }
+            },
+            polyline: {
+              repeatMode: true,
+              shapeOptions: {
+                color: "#ed2572",
+                opacity: 1
+              }
+            },
+            marker: {
+              repeatMode: false
+            },
+            circlemarker: false
+          }}
+        />
+      </FeatureGroup>
+    );
+  }
 }
 
-export default DrawTools;
+export default DrawTools;
\ No newline at end of file

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);}
@@ -60,11 +58,15 @@ class UserMap extends Component {
         }
       }, (error) =>{
         console.log(error);
+        // disable tracking
+        if(this.watchPositionId != null){
+          navigator.geolocation.clearWatch(this.watchPositionId);
+        }
       }, options);
     }
   }
 
-  positionToGeoJSON(position){
+  positionToGeoJSON(position) {
     let geoJSON = {
       type: "Feature",
       properties: {},
@@ -72,33 +74,47 @@ 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 className='map' center={this.props.position} zoom={this.props.zoom}>
+      <Map
+        className='map'
+        center={this.props.position}
+        zoom={this.props.zoom}
+        minZoom='7'
+        maxZoom='17'
+        zoomControl={false}>
         <TileLayer
           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