feature: upload layers to server and add to layer

Author: eran-pinhas

src/App.js

@@ -2,7 +2,7 @@ import React, { Component } from "react";
 
 import Map from "./containers/MapContainer";
 import ToolsScreen from "./components/ToolsScreen";
-import Layers from "./components/Layers";
+import Layers from "./containers/LayersContainer";
 
 import "./App.css";
 import { setQueryHistory, getQueryHistory } from "./utils/queryHistoryStorage";

src/components/Icons/Icons.js

@@ -69,3 +69,38 @@ export function ConfirmIcon({ className }) {
  </svg>
  );
 }
+
+export function CheckboxOnIcon({ className }) {
+ return (
+ <svg
+ className={className}
+ xmlns="http://www.w3.org/2000/svg"
+ version="1.1"
+ viewBox="0 0 474.8 474.801"
+ >
+ <g>
+ <g>
+ <path d="M396.283,257.097c-1.14-0.575-2.282-0.862-3.433-0.862c-2.478,0-4.661,0.951-6.563,2.857l-18.274,18.271 c-1.708,1.715-2.566,3.806-2.566,6.283v72.513c0,12.565-4.463,23.314-13.415,32.264c-8.945,8.945-19.701,13.418-32.264,13.418 H82.226c-12.564,0-23.319-4.473-32.264-13.418c-8.947-8.949-13.418-19.698-13.418-32.264V118.622 c0-12.562,4.471-23.316,13.418-32.264c8.945-8.946,19.7-13.418,32.264-13.418H319.77c4.188,0,8.47,0.571,12.847,1.714 c1.143,0.378,1.999,0.571,2.563,0.571c2.478,0,4.668-0.949,6.57-2.852l13.99-13.99c2.282-2.281,3.142-5.043,2.566-8.276 c-0.571-3.046-2.286-5.236-5.141-6.567c-10.272-4.752-21.412-7.139-33.403-7.139H82.226c-22.65,0-42.018,8.042-58.102,24.126 C8.042,76.613,0,95.978,0,118.629v237.543c0,22.647,8.042,42.014,24.125,58.098c16.084,16.088,35.452,24.13,58.102,24.13h237.541 c22.647,0,42.017-8.042,58.101-24.13c16.085-16.084,24.134-35.45,24.134-58.098v-90.797 C402.001,261.381,400.088,258.623,396.283,257.097z" />
+ <path d="M467.95,93.216l-31.409-31.409c-4.568-4.567-9.996-6.851-16.279-6.851c-6.275,0-11.707,2.284-16.271,6.851 L219.265,246.532l-75.084-75.089c-4.569-4.57-9.995-6.851-16.274-6.851c-6.28,0-11.704,2.281-16.274,6.851l-31.405,31.405 c-4.568,4.568-6.854,9.994-6.854,16.277c0,6.28,2.286,11.704,6.854,16.274l122.767,122.767c4.569,4.571,9.995,6.851,16.274,6.851 c6.279,0,11.704-2.279,16.274-6.851l232.404-232.403c4.565-4.567,6.854-9.994,6.854-16.274S472.518,97.783,467.95,93.216z" />
+ </g>
+ </g>
+ </svg>
+ );
+}
+
+export function CheckboxOffIcon({ className }) {
+ return (
+ <svg
+ className={className}
+ xmlns="http://www.w3.org/2000/svg"
+ version="1.1"
+ viewBox="0 0 401.998 401.998"
+ >
+ <g>
+ <g>
+ <path d="M377.87,24.126C361.786,8.042,342.417,0,319.769,0H82.227C59.579,0,40.211,8.042,24.125,24.126 C8.044,40.212,0.002,59.576,0.002,82.228v237.543c0,22.647,8.042,42.014,24.123,58.101c16.086,16.085,35.454,24.127,58.102,24.127 h237.542c22.648,0,42.011-8.042,58.102-24.127c16.085-16.087,24.126-35.453,24.126-58.101V82.228 C401.993,59.58,393.951,40.212,377.87,24.126z M365.448,319.771c0,12.559-4.47,23.314-13.415,32.264 c-8.945,8.945-19.698,13.411-32.265,13.411H82.227c-12.563,0-23.317-4.466-32.264-13.411c-8.945-8.949-13.418-19.705-13.418-32.264 V82.228c0-12.562,4.473-23.316,13.418-32.264c8.947-8.946,19.701-13.418,32.264-13.418h237.542 c12.566,0,23.319,4.473,32.265,13.418c8.945,8.947,13.415,19.701,13.415,32.264V319.771L365.448,319.771z" />
+ </g>
+ </g>
+ </svg>
+ );
+}

src/components/LayerInput/LayerInput.js

@@ -1,4 +1,4 @@
-import * as React from "react";
+import React from "react";
 import PropTypes from "prop-types";
 import Select from "react-select";
 

src/components/Layers/Layers.css

@@ -7,6 +7,7 @@
  z-index: 9999;
  bottom: 17px;
  left: 17px;
+ overflow-y: auto;
 }
 
 .layers .svg-button {
@@ -24,3 +25,16 @@
  margin: 0 auto;
  display: block;
 }
+
+.layers input[type=file] {
+ margin: 6px 18px;
+}
+
+.layers .layer svg{
+ fill: white;
+ height: 1em;
+ padding: 0 0.3em;
+}
+.layers .layer{
+ margin-top: 2px
+}

src/components/Layers/Layers.js

@@ -1,9 +1,16 @@
 import React, { Component } from "react";
 
 import "./Layers.css";
-import { UploadFromFiles, UploadFromUrl } from "./RemoteStorage";
+import {
+ UploadFromFiles,
+ UploadFromUrl,
+ GetLayerUrlFromId
+} from "./RemoteStorage";
 import { ConfirmIcon, UploadIcon } from "../Icons/Icons";
 import LoadingIndicator from "../LoadingIndicator";
+import Checkbox from "./checkbox";
+import axios from "axios";
+import Promise from "bluebird"
 
 export default class Layers extends Component {
  constructor(props) {
@@ -13,6 +20,7 @@ export default class Layers extends Component {
  layersList: []
  };
 
+ this.toggleLayer = this.toggleLayer.bind(this);
  this.uploadFiles = this.uploadFiles.bind(this);
  this.chooseFiles = this.chooseFiles.bind(this);
  }
@@ -34,30 +42,50 @@ export default class Layers extends Component {
  } catch (err) {
  layersList = [];
  }
+ layersList.forEach(layer => (layer.displayed = false));
  this.setState({ layersList: layersList });
  }
 
  updateLayersList(layersList) {
  this.setState({ layersList });
- localStorage.setItem("LayersList", JSON.stringify(layersList));
+ localStorage.setItem(
+ "LayersList",
+ JSON.stringify(
+ layersList.map(({ name, id, url }) => ({
+ name,
+ id,
+ url
+ }))
+ )
+ );
  }
 
- // addLayer(id, url, name) {
- // const layersList = this.state.layersList.concat({
- // id: "404",
- // url: "http://www.google.com",
- // name: "saranga"
- // });
+ toggleLayer(layerId) {
+ const layer = this.state.layersList.filter(
+ layer => layer.id === layerId
+ )[0];
+ const newLayer = { ...layer, displayed: !layer.displayed };
+ if (newLayer.displayed) {
+ axios
+ .get(layer.url) //, { transformResponse: [], responseType: "arraybuffer" }
+ // .then(({ data }) => {
+ // return new TextDecoder("utf-8").decode(data)
+ // })
+ .then(({data})=> data)
+ .then(geojson => this.props.addLayer(layer.name, geojson));
+ }
 
- // this.setState({
- //  layersList
- // });
- // localStorage.setItem("LayersList", JSON.stringify(this.state.layersList));
- // }
+  const layersList = this.state.layersList.map(
+ layer => (layer.id === layerId ? newLayer : layer)
+  );
+  this.setState({ layersList });
+ }
 
  addLayerFromUrl(url, name) {
  UploadFromUrl(url).then(id => {
- this.updateLayersList(this.state.layersList.concat({ id, name }));
+ this.updateLayersList(
+ this.state.layersList.concat({ id, name, url: GetLayerUrlFromId(id) })
+ );
  });
  }
 
@@ -67,13 +95,18 @@ export default class Layers extends Component {
 
  uploadFiles() {
  this.setState({ isChoosingFiles: false, isUploading: true });
- 
+
  const fileInputElement = document.getElementById("layersUpload");
 
- UploadFromFiles(fileInputElement).then(layers => {
- this.updateLayersList(this.state.layersList.concat(layers));
- this.setState({isUploading: false});
- });
+ UploadFromFiles(fileInputElement)
+ .then(layers =>
+ layers.map(({ id, name }) => ({ id, name, url: GetLayerUrlFromId(id) }))
+ )
+ .then(layers => {
+ this.updateLayersList(this.state.layersList.concat(layers));
+ this.setState({ isUploading: false });
+ })
+ .catch(() => this.setState({ isUploading: false }));
  }
 
  render() {
@@ -103,7 +136,14 @@ export default class Layers extends Component {
  <div className="layers">
  {UploadComponent}
  {this.state.layersList.map(layer => (
- <p>{layer.id}</p>
+ <div className="layer" key={layer.id}>
+ <Checkbox
+ isDisplayed={layer.displayed}
+ onClick={this.toggleLayer}
+ identifier={layer.id}
+ />
+ <span>{layer.name}</span>
+ </div>
  ))}
  </div>
  );

src/components/Layers/RemoteStorage.js

@@ -2,7 +2,11 @@ import axios from "axios";
 import { layerServerPath } from "../../config";
 
 export function GetLayerData(id) {
- return axios.get(`${layerServerPath}/layer/${id}`);
+ return axios.get(GetLayerUrlFromId(id));
+}
+
+export function GetLayerUrlFromId(id) {
+ return `${layerServerPath}/layer/${id}`;
 }
 
 export function UploadFromUrl(url) {
@@ -24,5 +28,6 @@ export function UploadFromFiles(element) {
  "Content-Type": "multipart/form-data"
  }
  })
- .then(res => res.data.ids);
+ .then(res => res.data.ids)
+ ;
 }

src/components/Layers/checkbox.js

@@ -0,0 +1,21 @@
+import React from "react";
+
+import { CheckboxOnIcon, CheckboxOffIcon } from "../Icons/Icons";
+
+export default class Checkbox extends React.Component {
+ constructor(props){
+ super(props)
+
+ this.onClick = this.onClick.bind(this);
+ }
+
+ onClick(){
+ this.props.onClick(this.props.identifier)
+ }
+
+ render() {
+ const { isDisplayed } = this.props;
+ const checkbox = isDisplayed ? <CheckboxOnIcon /> : <CheckboxOffIcon />;
+ return <span onClick={this.onClick}>{checkbox}</span>;
+ }
+}

src/containers/LayerInputContainer/index.js

@@ -1,6 +1,6 @@
 import { connect } from 'react-redux';
 
-import LayerInput from '../../components/LayerInput';
+import LayerInput from '../../components/Layers';
 import { createAddLayerAction } from '../../action-creators/map';
 
 function mapDispatchToProps (dispatch) {

src/containers/LayerInputContainer/LayerInputContainer.js renamed to src/containers/LayersContainer/LayersContainer.js

@@ -0,0 +1 @@
+export { default } from './LayersContainer';