Subs form (wip)

imports/ui/components/SelectionMap/SelectionMap.js

@@ -0,0 +1,119 @@
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+import { Map, TileLayer, Marker, Popup, CircleMarker, Circle} from 'react-leaflet';
+import Leaflet from 'leaflet';
+import { withTracker } from 'meteor/react-meteor-data';
+import { translate } from 'react-i18next';
+import geolocation from '/imports/startup/client/geolocation';
+import 'leaflet-graphicscale/dist/Leaflet.GraphicScale.min.css';
+import 'leaflet-graphicscale/dist/Leaflet.GraphicScale.min.js';
+
+const positionIcon = new Leaflet.Icon({
+  iconUrl: "/your-position.png",
+  /* shadowUrl: require('../public/marker-shadow.png'), */
+  iconSize:     [50, 77], // size of the icon
+  /* shadowSize:   [50, 64], // size of the shadow */
+  iconAnchor:   [25, 82], // point of the icon which will correspond to marker's location
+  /* shadowAnchor: [4, 62],  // the same for the shadow
+   * popupAnchor:  [-3, -76]// point from which the popup should open relative to the iconAnchor*/
+})
+
+class SelectionMap extends Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      center: geolocation.get(),
+      marker: geolocation.get(),
+      zoom: 11,
+      draggable: true,
+      modified: false
+    };
+    // console.log(this.state);
+  }
+
+  componentDidUpdate = () => {
+    this.fit();
+  }
+
+  getMap = () => {
+    return this.refs.selectionMap.leafletElement;
+  }
+
+  toggleDraggable = () => {
+    this.setState({ draggable: !this.state.draggable })
+  }
+
+  updatePosition = () => {
+    const { lat, lng } = this.refs.marker.leafletElement.getLatLng()
+    this.setState({
+      marker: [ lat, lng ],
+      modified: true
+    });
+  }
+
+  fit() {
+    // console.log("fit!");
+    this.getMap().fitBounds(this.refs.distanceCircle.leafletElement.getBounds(), [70, 70]);
+  }
+
+  componentDidMount() {
+    this.addScale();
+  }
+
+  addScale = () => {
+    // https://www.npmjs.com/package/leaflet-graphicscale
+    const map = this.getMap();
+    var options = {
+      fill: 'fill',
+      showSubunits: true,
+    }
+    var graphicScale = L.control.graphicScale([options]).addTo(map);
+  }
+
+  render() {
+    this.state.center = !this.state.modified && this.props.lat?
+                        [this.props.lat, this.props.lng]: this.state.center;
+    this.state.marker = !this.state.modified && this.props.lat?
+                        [this.props.lat, this.props.lng]: this.state.marker;
+    this.state.distance = this.props.distance;
+    this.state.modified = false;
+    return (
+      <div>
+      { this.state && this.state.center &&
+        <Map center={this.state.center} zoom={this.state.zoom} ref="selectionMap">
+        <TileLayer
+          attribution="&amp;copy <a href=&quot;http://osm.org/copyright&quot;>OpenStreetMap</a> contributors"
+          url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
+        />
+        <Marker
+            draggable={this.state.draggable}
+            onDragend={this.updatePosition}
+            position={this.state.marker}
+            icon={positionIcon}
+          ref="marker">
+        </Marker>
+        <CircleMarker
+            center={this.state.marker} color="red"
+            stroke={false}
+            fillOpacity="1"
+            fill={true}
+            radius={3} />
+        <Circle center={this.state.marker}
+                ref="distanceCircle"
+                color="#145A32"
+                fillColor="green"
+                fillOpacity={.1}
+                radius={this.state.distance * 1000} />
+        </Map> }
+      </div>
+    )
+  }
+}
+
+SelectionMap.propTypes = {
+  lat: PropTypes.number,
+  lng: PropTypes.number,
+  distance: PropTypes.number
+};
+
+export default translate([], { wait: true })(SelectionMap);