feat: added bounding box option in layer (for future usage)

Author: eran-pinhas

src/App.js

@@ -5,7 +5,10 @@ import ToolsScreen from "./components/ToolsScreen";
 import Layers from "./containers/LayersContainer";
 
 import "./App.css";
-import { setQueryHistory, getQueryHistory } from "./common/utils/queryHistoryStorage";
+import {
+ setQueryHistory,
+ getQueryHistory
+} from "./common/utils/queryHistoryStorage";
 
 class App extends Component {
  constructor() {
@@ -15,6 +18,9 @@ class App extends Component {
  this.zoomToLayer = this.zoomToLayer.bind(this);
  this.getLayers = this.getLayers.bind(this);
  }
+ state = {
+ isDrawing: false
+ };
 
  getLayers(layer) {
  return this.layers.getLayers(layer);
@@ -26,12 +32,31 @@ class App extends Component {
  this.layers.zoomToLayer(layer);
  }
 
+ setDrawRectange = isDrawingRectange => {
+ this.setState({ isDrawingRectange });
+ if (!isDrawingRectange) {
+ this.setState({ drawedRectange: null });
+ }
+ };
+ onDrawingDone = box => {
+ this.setState({ drawedRectange: box });
+ // this.layers.doneDrawingRectange(box);
+ };
+
  render() {
+ const { drawedRectange } = this.state;
  return (
  <div className="root">
  <div className="screen-left">
- <Layers onRef={ref => (this.layers = ref)} />
- <Map />
+ <Layers
+ onRef={ref => (this.layers = ref)}
+ setDrawRectange={this.setDrawRectange}
+ drawedRectange={drawedRectange}
+ />
+ <Map
+ isDrawingRectange={this.state.isDrawingRectange}
+ onDrawingDone={this.onDrawingDone}
+ />
  </div>
  <div className="screen-right">
  <ToolsScreen

src/action-creators/map.js

@@ -1,20 +1,22 @@
-import { ADD_LAYER, REMOVE_LAYER } from '../action-types/map';
+import { ADD_LAYER, REMOVE_LAYER } from "../action-types/map";
 
-export const createAddLayerAction = (id, data) => {
+export const createAddLayerAction = (id, layerType, data) => {
  return {
  type: ADD_LAYER,
  payload: {
+ layerType,
  id,
- data,
- },
+ data
+ }
  };
 };
 
-export const createRemoveLayerAction = (id) => {
+export const createRemoveLayerAction = id => {
  return {
  type: REMOVE_LAYER,
+
  payload: {
- id,
- },
+ id
+ }
  };
-};
+};

src/common/FileFormats.js

@@ -4,6 +4,11 @@ export default {
  displayName: "Excel File",
  isLayer: false
  },
+ "application/vnd.ms-excel": {
+ ext: ".xls",
+ displayName: "Excel File",
+ isLayer: false
+ },
  "application/json": {
  ext: ".json",
  displayName: "Map Layer",

src/common/LayerTypes.js

@@ -0,0 +1,5 @@
+const LayerTypes = {
+ GEO_JSON: 0,
+ BOUNDING_BOX:1
+}
+export default LayerTypes;

src/components/Icons/Icons.js

@@ -153,3 +153,16 @@ export function PlusIcon({ className }) {
  </svg>
  );
 }
+
+export function BoundingBoxIcon({ className }) {
+ return (
+ <svg
+ className={className}
+ xmlns="http://www.w3.org/2000/svg"
+ version="1.1"
+ viewBox="0 0 89.534 89.535" // viewBox="0 0 304.588 304.588"
+ >
+ <path d="M12.241,88.083v-7.84h65.053v7.84c0,0.762,0.616,1.377,1.377,1.377s1.377-0.615,1.377-1.377v-8.107h8.109 c0.761,0,1.377-0.617,1.377-1.377c0-0.761-0.616-1.377-1.377-1.377h-8.109V12.313h8.109c0.761,0,1.377-0.617,1.377-1.377 c0-0.762-0.616-1.377-1.377-1.377h-8.109V1.451c0-0.761-0.616-1.377-1.377-1.377s-1.377,0.616-1.377,1.377V9.56H12.241V1.451 c0-0.761-0.616-1.377-1.377-1.377c-0.761,0-1.377,0.616-1.377,1.377V9.56h-8.11C0.616,9.56,0,10.175,0,10.937 c0,0.76,0.616,1.377,1.377,1.377h7.985v64.909H1.377C0.616,77.222,0,77.837,0,78.599c0,0.76,0.616,1.377,1.377,1.377h8.109v8.106 c0,0.761,0.616,1.377,1.377,1.377C11.624,89.459,12.241,88.845,12.241,88.083z M12.179,33.272V12.313h21.113v20.959H12.179z M34.21,33.272V12.313h21.052v20.959H34.21z M56.242,33.272V12.313h21.052v20.959H56.242z M12.179,55.306V34.19h21.113v21.114 H12.179V55.306z M34.211,55.306V34.191h21.053v21.115H34.211L34.211,55.306z M56.242,55.306V34.191h21.052v21.115H56.242 L56.242,55.306z M12.179,77.336V56.224h21.114v21.112H12.179z M34.211,77.336V56.224h21.053v21.112H34.211z M56.242,77.336V56.224 h21.052v21.112H56.242z M13.767,75.625V58.292h17.332v17.332H13.767z" />
+ </svg>
+ );
+}

src/components/Layers/CheckableItem.js

@@ -0,0 +1,29 @@
+import React from "react";
+import PropTypes from "prop-types";
+import Checkbox from "./checkbox";
+
+export default class CheckableItem extends React.Component {
+ onClick = identifier => this.props.onClick(identifier);
+
+ render() {
+ const { value, highlight, data, content } = this.props;
+ return (
+ <div className={`layer ${highlight ? "highlighted" : ""}`}>
+ <Checkbox
+ isDisplayed={value}
+ onClick={this.onClick}
+ identifier={data}
+ />
+ <span>{content}</span>
+ </div>
+ );
+ }
+}
+
+CheckableItem.propTypes = {
+ onClick: PropTypes.func,
+ constent: PropTypes.any,
+ highlight: PropTypes.bool,
+ value: PropTypes.bool,
+ content: PropTypes.string
+};

src/components/Layers/Layers.css

@@ -32,7 +32,7 @@
 }
 
 .layers input[type="file"] {
- margin: 6px 18px;
+ margin: 6px 8px;
 }
 
 .layers .layer svg {

src/components/Layers/Layers.js

@@ -2,10 +2,13 @@ import React, { Component } from "react";
 
 import "./Layers.css";
 import { UploadFromUrl, GetLayerUrlFromId } from "./RemoteStorage";
-import { LayersIcon } from "../Icons/Icons";
-import Checkbox from "./checkbox";
+import { LayersIcon, BoundingBoxIcon } from "../Icons/Icons";
 import axios from "axios";
 import UploadFile from "./UploadFile";
+import LayerTypes from '../../common/LayerTypes'
+
+import "leaflet-draw/dist/leaflet.draw.css";
+import CheckableItem from "./CheckableItem";
 
 export default class Layers extends Component {
  constructor(props) {
@@ -16,7 +19,8 @@ export default class Layers extends Component {
  }
  state = {
  highlighted: {},
- layersList: []
+ layersList: [],
+ bboxList: []
  };
 
  componentDidMount() {
@@ -29,16 +33,20 @@ export default class Layers extends Component {
  }
 
  fetchLayersList() {
- let layersList;
+ let layersList, bboxList;
  try {
- layersList = JSON.parse(localStorage.getItem("LayersList"));
- if (!Array.isArray(layersList)) layersList = [];
+ const data = JSON.parse(localStorage.getItem("LayersList"));
+ bboxList = data.bboxList;
+ layersList = data.layersList;
+
+ layersList.forEach(layer => (layer.displayed = false));
+ bboxList.forEach(bbox => (bbox.displayed = false));
  } catch (err) {
- this.props.alert.error("Failed to load layers");
  layersList = [];
+ bboxList = [];
  }
- layersList.forEach(layer => (layer.displayed = false));
- this.setState({ layersList: layersList });
+
+ this.setState({ layersList, bboxList });
  }
 
  setHighlightedLayer(layerId, isHighlighted) {
@@ -77,12 +85,16 @@ export default class Layers extends Component {
  const layersList = this.state.layersList.concat(nonExistingLayers);
 
  this.setState({ layersList });
-
  layersToAdd.map(({ id }) => this.highlight(id));
+ this.saveToLocalStorage(layersList, this.state.bboxList);
+ }
 
+ saveToLocalStorage(layersList, bboxList) {
+ layersList.map(({ name, id }) => ({ name, id }));
+ bboxList.map(({ id, name, box }) => ({ id, name, box }));
  localStorage.setItem(
  "LayersList",
- JSON.stringify(layersList.map(({ name, id }) => ({ name, id })))
+ JSON.stringify({ layersList, bboxList })
  );
  }
 
@@ -103,13 +115,13 @@ export default class Layers extends Component {
  axios
  .get(GetLayerUrlFromId(layer.id))
  .then(({ data }) => data)
- .then(geojson => this.props.addLayerToMap(layer.id, geojson));
+ .then(geojson => this.props.addLayerToMap(layer.id,LayerTypes.GEO_JSON, geojson));
  } else {
  this.props.removeLayerFromMap(layer.id);
  }
 
- const layersList = this.state.layersList.map(
- layer => (layer.id === layerId ? newLayer : layer)
+ const layersList = this.state.layersList.map(layer =>
+ layer.id === layerId ? newLayer : layer
  );
  this.setState({ layersList });
  }
@@ -126,28 +138,71 @@ export default class Layers extends Component {
  });
  }
 
+ addBoundingBox = bbox => {
+ const bboxList = this.state.bboxList.concat([
+ {
+ box: bbox,
+ name: "Bounding Box",
+ id: Math.random()
+ .toString(36)
+ .substring(7)
+ }
+ ]);
+ this.setState({ bboxList });
+ this.saveToLocalStorage(this.state.layersList, bboxList);
+ };
+
+ toggleBbox = bboxId => {
+ let bbox = this.state.bboxList.filter(bbox => bbox.id === bboxId)[0];
+ bbox = { ...bbox, displayed: !bbox.displayed };
+
+ if (bbox.displayed) {
+ this.props.addLayerToMap(bbox.id, LayerTypes.BOUNDING_BOX, bbox.box);
+ } else {
+ this.props.removeLayerFromMap(bbox.id);
+ }
+
+ const bboxList = this.state.bboxList.map(b =>
+ b.id === bboxId ? bbox : b
+ );
+ this.setState({ bboxList });
+ };
  render() {
+ const { setDrawRectange, drawedRectange } = this.props;
  return (
  <div className="layers">
  <h3 className="title">
  <LayersIcon className="layers-icon" />
  <span>Layers</span>
  </h3>
- <UploadFile concatLayers={this.concatLayers} />
+ <UploadFile
+ concatLayers={this.concatLayers}
+ addBoundingBox={this.addBoundingBox}
+ setDrawRectange={setDrawRectange}
+ drawedRectange={drawedRectange}
+ />
  {this.state.layersList.map(layer => (
- <div
- className={`layer ${
- this.state.highlighted[layer.id] ? "highlighted" : ""
- }`}
+ <CheckableItem
+ highlight={!!this.state.highlighted[layer.id]}
+ data={layer.id}
+ onClick={this.toggleLayer}
+ content={layer.name}
+ value={layer.displayed}
  key={layer.id}
- >
- <Checkbox
- isDisplayed={layer.displayed}
- onClick={this.toggleLayer}
- identifier={layer.id}
- />
- <span>{layer.name}</span>
- </div>
+ />
+ ))}
+ <h3 className="title">
+ <BoundingBoxIcon className="layers-icon" />
+ <span>Bounding Boxes</span>
+ </h3>
+ {this.state.bboxList.map(bbox => (
+ <CheckableItem
+ data={bbox.id}
+ onClick={this.toggleBbox}
+ content={bbox.name}
+ value={bbox.displayed}
+ key={bbox.id}
+ />
  ))}
  </div>
  );

src/components/Layers/UploadFile.css

@@ -15,7 +15,7 @@
 
 .upload-files {
  position: absolute;
- height: 50px;
+ padding-top: 20px;
  left: 3px;
  right: 3px;
  top: 3px;
@@ -24,7 +24,7 @@
 }
 
 .upload-files input {
- position: absolute;
+ display: inline-block;
  bottom: 0;
  right: 0;
  left: 20px;
@@ -41,7 +41,7 @@
 }
 
 .upload-files .upload-button {
- position: absolute;
+ display: inline-block;
  height: 25px;
  width: 25px;
  bottom: 7px;
@@ -54,3 +54,17 @@
  width: 20px !important;
  height: 20px !important;
 }
+
+.upload-files .bbox-draw-start{
+ background-color: #EEE;
+ border: none;
+ display: block;
+ margin: 5px;
+ width: calc(100% - 11px);
+ border-radius: 5px;
+}
+
+.upload-files .or-label{
+ padding: 4px;
+ text-align: center;
+}