Added simplestyle-spec support to leaflet's GeoJSON

Minor css fixes Warning fixes

Author: eran-pinhas

src/common/utils/featuePopup.js

@@ -0,0 +1,26 @@
+
+
+import React from 'react';
+
+const IgnoreFields = {
+ title: true,
+ description: true,
+ "marker-size": true,
+ "marker-symbol": true,
+ "marker-color": true,
+ stroke: true,
+ "stroke-opacity": true,
+ "stroke-width": true,
+ fill: true,
+ "fill-opacity": true
+};
+
+export function popupFormat(properties) {
+ const title = properties.title || "Feature";
+ const description = properties.description || "";
+ const rows = Object.keys(properties)
+ .filter(key => !IgnoreFields.hasOwnProperty(key))
+ .map(key => <tr><th>{key}</th><th>{properties[key]}</th></tr>)
+
+ return { title, description, rows };
+}

src/common/utils/tryParseFloat.js

@@ -0,0 +1,13 @@
+export default function tryParseFloat(value, defaultValue) {
+ if (typeof value === "number") {
+ return value;
+ } else if (typeof value === "string") {
+ try {
+ return parseFloat(value);
+ } catch (e) {
+ return defaultValue;
+ }
+ } else {
+ return defaultValue;
+ }
+}

src/components/Layers/Layers.css

@@ -31,10 +31,6 @@
  display: block;
 }
 
-.layers input[type="file"] {
- margin: 6px 8px;
-}
-
 .layers .layer svg {
  fill: white;
  height: 1em;

src/components/Layers/Layers.js

@@ -7,7 +7,6 @@ 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 {

src/components/Layers/UploadFile.css

@@ -15,7 +15,6 @@
 
 .upload-files {
  position: absolute;
- padding-top: 20px;
  left: 3px;
  right: 3px;
  top: 3px;
@@ -25,9 +24,6 @@
 
 .upload-files input {
  display: inline-block;
- bottom: 0;
- right: 0;
- left: 20px;
 }
 
 .upload-files .close-panel-button {
@@ -44,8 +40,7 @@
  display: inline-block;
  height: 25px;
  width: 25px;
- bottom: 7px;
- left: 7px;
+ margin: 5px;
  fill: white;
  cursor: pointer;
 }

src/components/Map/Map.js

@@ -4,11 +4,20 @@ import {
  Map as LeafletMap,
  TileLayer,
  GeoJSON,
- Rectangle
+ Rectangle,
+ Popup
 } from "react-leaflet";
 import L from "leaflet";
 import { tileLayerTemplate } from "../../config";
 import LayerTypes from "../../common/LayerTypes";
+import { popupFormat } from "../../common/utils/featuePopup";
+import tryParseFloat from "../../common/utils/tryParseFloat";
+
+const sizes = {
+ small: 4,
+ medium: 8,
+ large: 12
+};
 
 class MapComponent extends React.Component {
  static getDerivedStateFromProps(props, state) {
@@ -20,6 +29,7 @@ class MapComponent extends React.Component {
  }
 
  state = {
+ popup: null,
  lat: 31.84,
  lng: 34.84,
  zoom: 7,
@@ -41,19 +51,56 @@ class MapComponent extends React.Component {
  window.removeEventListener("resize", this.updateDimensions);
  }
 
- pointToLayer(feature, latlng) {
- // renders our GeoJSON points as circle markers, rather than Leaflet's default image markers
- // parameters to style the GeoJSON markers
- const markerParams = {
- radius: 4,
- fillColor: "black",
- color: "#fff",
- weight: 0,
- fillOpacity: 1
- };
-
- return L.circleMarker(latlng, markerParams);
- }
+ onClick_Marker = e => {
+ console.log(e);
+ const fp = e.target.feature.properties || {};
+ this.setState({
+ popup: {
+ id: Math.random()
+ .toString(36)
+ .substring(7),
+ position: e.latlng,
+ ...popupFormat(fp)
+ }
+ });
+ };
+
+ pointToLayer = (f, latlon) => L.circleMarker(latlon, {});
+
+ // Symology based on simplestyle-spec v1.1.0 of MapBox
+ // https://github.com/mapbox/simplestyle-spec/tree/master/1.1.0
+ featureStyle = feature => {
+ const fp = feature.properties || {};
+ const fg = feature.geometry || {};
+ if (fg.type === "MultiPoint" || fg.type === "Point") {
+ const size = fp["marker-size"] || "medium";
+ // const symbol = fp["marker-symbol"] ? "-" + fp["marker-symbol"] : "";
+ const color = fp["marker-color"] || "#7e7e7e";
+ return {
+ radius: sizes[size],
+ fillColor: color,
+ weight: 0,
+ fillOpacity: 1
+ };
+ } else {
+ const stroke = fp["stroke"] || "#555555";
+ const strokeOpacity = tryParseFloat(fp["stroke-opacity"], 1);
+ const strokeWidth = tryParseFloat(fp["stroke-width"], 2);
+ const fill = fp["fill"] || "#555555";
+ const fillOpacity = tryParseFloat(fp["fill-opacity"], 0.6);
+ return {
+ color: stroke,
+ weight: strokeWidth,
+ opacity: strokeOpacity,
+ fillColor: fill,
+ fillOpacity
+ };
+ }
+ };
+
+ onEachFeature = (feature, layer) => {
+ layer.on("click", this.onClick_Marker);
+ };
 
  onMouseDown = ({ latlng }) => {
  if (this.props.isDrawingRectange) {
@@ -95,7 +142,7 @@ class MapComponent extends React.Component {
  render() {
  const position = [this.state.lat, this.state.lng];
  const { isDrawingRectange } = this.props;
- const { drawData } = this.state;
+ const { drawData, popup } = this.state;
  const drawedRectangle =
  isDrawingRectange && drawData ? (
  <Rectangle
@@ -111,9 +158,10 @@ class MapComponent extends React.Component {
  );
  const rectangles = this.props.layers
  .filter(({ layerType }) => layerType === LayerTypes.BOUNDING_BOX)
- .map(({ data: { west, east, south, north } }) =>
- L.latLngBounds(L.latLng(south, west), L.latLng(north, east))
- );
+ .map(({ id, data: { west, east, south, north } }) => ({
+ bounds: L.latLngBounds(L.latLng(south, west), L.latLng(north, east)),
+ id
+ }));
  return (
  <div>
  <LeafletMap
@@ -130,12 +178,27 @@ class MapComponent extends React.Component {
  >
  <TileLayer url={tileLayerTemplate} />
  {geoJsons.map(layer => (
- <GeoJSON data={layer.data} pointToLayer={this.pointToLayer} />
+ <GeoJSON
+ key={layer.id}
+ data={layer.data}
+ style={this.featureStyle}
+ pointToLayer={this.pointToLayer}
+ onEachFeature={this.onEachFeature}
+ />
  ))}
- {rectangles.map(rec => (
- <Rectangle bounds={rec} />
+ {rectangles.map(({ id, bounds }) => (
+ <Rectangle key={id} bounds={bounds} />
  ))}
  {drawedRectangle}
+ {popup ? (
+ <Popup key={popup.id} position={popup.position}>
+ <div>
+ <h3>{popup.title}</h3>
+ <p>{popup.description}</p>
+ <table>{popup.rows}</table>
+ </div>
+ </Popup>
+ ) : null}
  </LeafletMap>
  </div>
  );