Add point measurement support

web/client/actions/measurement.js

@@ -18,10 +18,12 @@ function changeMeasurement(measurement) {
 function changeMeasurementState(measureState) {
     return {
         type: CHANGE_MEASUREMENT_STATE,
+        pointMeasureEnabled: measureState.pointMeasureEnabled,
         lineMeasureEnabled: measureState.lineMeasureEnabled,
         areaMeasureEnabled: measureState.areaMeasureEnabled,
         bearingMeasureEnabled: measureState.bearingMeasureEnabled,
         geomType: measureState.geomType,
+        point: measureState.point,
         len: measureState.len,
         area: measureState.area,
         bearing: measureState.bearing,

web/client/components/map/leaflet/MeasurementSupport.jsx

@@ -7,6 +7,7 @@
  */
 
 const React = require('react');
+const assign = require('object-assign');
 var L = require('leaflet');
 var CoordinatesUtils = require('../../../utils/CoordinatesUtils');
 
@@ -49,13 +50,19 @@ const MeasurementSupport = React.createClass({
             this.props.map.addLayer(evt.layer);
             // preserve the currently created layer to remove it later on
             this.lastLayer = evt.layer;
+
+            if (this.props.measurement.geomType === 'Point') {
+                let pos = this.drawControl._marker.getLatLng();
+                let point = {x: pos.lng, y: pos.lat, srs: 'EPSG:4326'};
+                let newMeasureState = assign({}, this.props.measurement, {point: point});
+                this.props.changeMeasurementState(newMeasureState);
+            }
         }
     },
     render() {
         return null;
     },
     mapClickHandler: function() {
-        var latLngs;
         var area;
         var newMeasureState;
         var bearingMarkers;
@@ -75,9 +82,11 @@ const MeasurementSupport = React.createClass({
         } else {
             // update measurement results for every new vertex drawn
 
-            // calculate possible length / area
-            latLngs = this.drawControl._poly.getLatLngs();
-            area = L.GeometryUtil.geodesicArea(latLngs);
+            // calculate  area
+            if (this.props.measurement.geomType === 'Polygon') {
+                let latLngs = this.drawControl._poly.getLatLngs();
+                area = L.GeometryUtil.geodesicArea(latLngs);
+            }
 
             // calculate bearing
             if (this.props.measurement.geomType === 'Bearing') {
@@ -105,6 +114,7 @@ const MeasurementSupport = React.createClass({
                 areaMeasureEnabled: this.props.measurement.areaMeasureEnabled,
                 bearingMeasureEnabled: this.props.measurement.bearingMeasureEnabled,
                 geomType: this.props.measurement.geomType,
+                point: null, // handled in onDraw.created
                 len: this.props.measurement.geomType === 'LineString' ? this.drawControl._measurementRunningTotal : 0,
                 area: this.props.measurement.geomType === 'Polygon' ? area : 0,
                 bearing: bearing
@@ -120,7 +130,11 @@ const MeasurementSupport = React.createClass({
         this.props.map.on('draw:drawstart', this.onDraw.drawStart, this);
         this.props.map.on('click', this.mapClickHandler, this);
 
-        if (newProps.measurement.geomType === 'LineString' ||
+        if (newProps.measurement.geomType === 'Point') {
+            this.drawControl = new L.Draw.Marker(this.props.map, {
+                repeatMode: false
+            });
+        } else if (newProps.measurement.geomType === 'LineString' ||
                 newProps.measurement.geomType === 'Bearing') {
             this.drawControl = new L.Draw.Polyline(this.props.map, {
                 shapeOptions: {

web/client/components/map/leaflet/__tests__/MeasurementSupport-test.jsx

@@ -113,6 +113,38 @@ describe('Leaflet MeasurementSupport', () => {
         });
     });
 
+    it('test map onClick handler for POINT tool', () => {
+        let newMeasureState;
+        let map = L.map("map", {
+            center: [51.505, -0.09],
+            zoom: 13
+        });
+        let proj = "EPSG:3857";
+        let measurement = {
+            geomType: null
+        };
+        const cmp = ReactDOM.render(
+            <MeasurementSupport
+                map={map}
+                projection={proj}
+                measurement={measurement}
+                changeMeasurementState={(data) => {newMeasureState = data; }}
+            />
+        , msNode);
+        expect(cmp).toExist();
+
+        cmp.setProps({
+            measurement: {
+                geomType: "Point"
+            }
+        }, () => {
+            document.getElementById('map').addEventListener('click', () => {
+                expect(newMeasureState).toExist();
+            });
+            document.getElementById('map').click();
+        });
+    });
+
     it('test map onClick handler for LINE tool', () => {
         let newMeasureState;
         let map = L.map("map", {

web/client/components/map/openlayers/MeasurementSupport.jsx

@@ -28,6 +28,9 @@ const MeasurementSupport = React.createClass({
             this.removeDrawInteraction();
         }
     },
+    getPointCoordinate: function(coordinate) {
+        return CoordinatesUtils.reproject(coordinate, this.props.projection, 'EPSG:4326');
+    },
     render() {
         return null;
     },
@@ -134,10 +137,13 @@ const MeasurementSupport = React.createClass({
         }
 
         newMeasureState = {
+            pointMeasureEnabled: this.props.measurement.pointMeasureEnabled,
             lineMeasureEnabled: this.props.measurement.lineMeasureEnabled,
             areaMeasureEnabled: this.props.measurement.areaMeasureEnabled,
             bearingMeasureEnabled: this.props.measurement.bearingMeasureEnabled,
             geomType: this.props.measurement.geomType,
+            point: this.props.measurement.geomType === 'Point' ?
+                this.getPointCoordinate(sketchCoords) : null,
             len: this.props.measurement.geomType === 'LineString' ?
                 this.calculateGeodesicDistance(sketchCoords) : 0,
             area: this.props.measurement.geomType === 'Polygon' ?

web/client/reducers/measurement.js

@@ -21,17 +21,20 @@ function measurement(state = {
     switch (action.type) {
         case CHANGE_MEASUREMENT_TOOL:
             return assign({}, state, {
+                pointMeasureEnabled: ((action.geomType !== state.geomType) && (action.geomType === 'Point')),
                 lineMeasureEnabled: ((action.geomType !== state.geomType) && (action.geomType === 'LineString')),
                 areaMeasureEnabled: ((action.geomType !== state.geomType) && (action.geomType === 'Polygon')),
                 bearingMeasureEnabled: ((action.geomType !== state.geomType) && (action.geomType === 'Bearing')),
                 geomType: (action.geomType === state.geomType) ? null : action.geomType
             });
         case CHANGE_MEASUREMENT_STATE:
             return assign({}, state, {
+                pointMeasureEnabled: action.pointMeasureEnabled,
                 lineMeasureEnabled: action.lineMeasureEnabled,
                 areaMeasureEnabled: action.areaMeasureEnabled,
                 bearingMeasureEnabled: action.bearingMeasureEnabled,
                 geomType: action.geomType,
+                point: action.point,
                 len: action.len,
                 area: action.area,
                 bearing: action.bearing,