From 1b74ad457985c5739f38fef35c47fd8973880847 Mon Sep 17 00:00:00 2001
From: Jussi Surma-Aho <L4929@student.jamk.fi>
Date: Thu, 4 Jul 2019 10:31:56 +0300
Subject: [PATCH] Can now get text fields from database
---
src/components/DrawTools.js | 89 +++++++++++++-------
src/components/TextBox.js | 162 ------------------------------------
2 files changed, 60 insertions(+), 191 deletions(-)
delete mode 100644 src/components/TextBox.js
diff --git a/src/components/DrawTools.js b/src/components/DrawTools.js
index e81d60c..b6b576b 100644
--- a/src/components/DrawTools.js
+++ b/src/components/DrawTools.js
@@ -8,18 +8,20 @@ import {
Marker,
Polygon,
Polyline,
- Rectangle
+ Rectangle,
+ Tooltip
} from "react-leaflet";
-import TextBox from "./TextBox.js";
+
+let noIcon = L.divIcon({
+ className: "",
+ iconSize: [20, 20],
+ iconAnchor: [10, 20]
+});
// 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]
- }),
+ icon: noIcon,
repeatMode: false,
interactive: true
},
@@ -79,6 +81,7 @@ class DrawTools extends Component {
}
_onCreated = e => {
+ console.log(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();
@@ -262,8 +265,6 @@ class DrawTools extends Component {
}}
/>
- <TextBox position={[62.238722, 25.75575]} />
-
{/* iterate through every element fetched from back-end */}
{this.props.geoJSONLayer.features.map(feature => {
let id = feature.mapDrawingId;
@@ -272,6 +273,8 @@ class DrawTools extends Component {
let color = feature.data.properties.color;
let radius = feature.data.properties.radius;
let text = feature.data.properties.text;
+ // rectangle is a simple true/false property to recognize a rectangle
+ // so that Polygons with this property can be inserted into map with rectangle functionalities
let rectangle = feature.data.properties.rectangle;
if (type === "Point") {
@@ -289,6 +292,31 @@ class DrawTools extends Component {
/>
);
} else if (text) {
+ return (
+ <Marker
+ key={Math.random()}
+ position={position}
+ id={id}
+ color={color}
+ icon={noIcon}
+ >
+ <Tooltip
+ direction="bottom"
+ permanent
+ className="editable"
+ interactive={true}
+ >
+ <div class="editable">
+ <div
+ contenteditable="true"
+ placeholder="Click out to save"
+ >
+ {text}
+ </div>
+ </div>
+ </Tooltip>
+ </Marker>
+ );
} else {
return (
<Marker
@@ -311,29 +339,32 @@ class DrawTools extends Component {
color={color}
/>
);
- } else {
+ } else if (type === "Polygon") {
+ // Polygon coordinates are wrapped under a one element array, for some reason
let positions = coords[0].map(coord => {
return [coord[1], coord[0]];
});
- if (type === "Polygon") {
- return (
- <Polygon
- key={Math.random()}
- positions={positions}
- id={id}
- color={color}
- />
- );
- } else {
- return (
- <Polyline
- key={Math.random()}
- positions={positions}
- id={id}
- color={color}
- />
- );
- }
+ return (
+ <Polygon
+ key={Math.random()}
+ positions={positions}
+ id={id}
+ color={color}
+ />
+ );
+ } else if (type === "LineString") {
+ // Polyline coordinates are a normal array, unlike Polygon
+ let positions = coords.map(coord => {
+ return [coord[1], coord[0]];
+ });
+ return (
+ <Polyline
+ key={Math.random()}
+ positions={positions}
+ id={id}
+ color={color}
+ />
+ );
}
})}
</FeatureGroup>
diff --git a/src/components/TextBox.js b/src/components/TextBox.js
deleted file mode 100644
index 32eabb1..0000000
--- a/src/components/TextBox.js
+++ /dev/null
@@ -1,162 +0,0 @@
-import React, { Component } from "react";
-import L from "leaflet";
-import { MapLayer, withLeaflet } from "react-leaflet";
-
-class TextBox extends MapLayer {
- createLeafletElement(opts) {
- const TextBox = L.Marker.extend({
- options: {
- name: "",
- type: ""
- }
- });
-
- console.log(new TextBox());
-
- return new TextBox(opts.position);
-
- /*
- const TextBox = L.Marker.extend({
- options: {
- icon: L.divIcon({
- name: "textbox",
- type: "textbox",
- className: "", // empty class to override default styling
- iconSize: [20, 20],
- iconAnchor: [10, 20]
- }),
- repeatMode: false,
- interactive: true
- },
- onAdd: map => {
- console.log("hello");
- L.Marker.prototype.onAdd.call(this, map);
-
- let tooltip = L.DomUtil.create("div", "editable");
-
- // need ids for tooltips to be able to add a blur event to them
- tooltip.innerHTML =
- '<div contenteditable="true" placeholder="Click out to save" id="' +
- this._leaflet_id +
- '"></div>';
-
- console.log(this);
-
- this.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
- this.on("mouseover", function() {
- this._map.dragging.disable();
- });
-
- // enable dragging again when cursor is out of marker (tooltip)
- this.on("mouseout", function() {
- this._map.dragging.enable();
- });
-
- // show placeholder text again upon emptying textbox
- this.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 out to save" contenteditable="true"><br></div>' ||
- tooltip.innerHTML ===
- '<div placeholder="Click out to save" contenteditable="true"><div><br></div></div>'
- ) {
- tooltip.innerHTML =
- '<div placeholder="Click out to save" contenteditable="true"></div>';
- }
- });
-
- // blur event listener can't be given straight to a layer
- // getting element by ID and adding an event listener to the element
- document
- .getElementById(this._leaflet_id)
- .addEventListener("blur", this.makeGeoJSON.bind(this, this)); // can't put this.makeGeoJSON(e) straight, as it calls the function
- document.getElementById(this._leaflet_id).focus();
- }
- 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);
- }
- });
- */
-
- /*
- L.Draw.MarkerTextBox = L.Draw.Marker.extend({
- onAdd: map => {
- // have to create tooltip as a DOM element to allow text selecting. maybe
- let tooltip = L.DomUtil.create("div", "editable");
-
- // need ids for tooltips to be able to add a blur event to them
- tooltip.innerHTML =
- '<div contenteditable="true" placeholder="Click out to save" id="' +
- this._leaflet_id +
- '"></div>';
-
- this.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
- this.on("mouseover", function() {
- this._map.dragging.disable();
- });
-
- // enable dragging again when cursor is out of marker (tooltip)
- this.on("mouseout", function() {
- this._map.dragging.enable();
- });
-
- // show placeholder text again upon emptying textbox
- this.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 out to save" contenteditable="true"><br></div>' ||
- tooltip.innerHTML ===
- '<div placeholder="Click out to save" contenteditable="true"><div><br></div></div>'
- ) {
- tooltip.innerHTML =
- '<div placeholder="Click out to save" contenteditable="true"></div>';
- }
- });
-
- // blur event listener can't be given straight to a layer
- // getting element by ID and adding an event listener to the element
- document
- .getElementById(this._leaflet_id)
- .addEventListener("blur", this.makeGeoJSON.bind(this, this)); // can't put this.makeGeoJSON(e) straight, as it calls the function
- document.getElementById(this._leaflet_id).focus();
- },
- 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);
- }
- });
- */
- }
-}
-
-export default withLeaflet(TextBox);
--
GitLab