diff --git a/web/client/actions/measurement.js b/web/client/actions/measurement.js index ad616d5494..1b136824e3 100644 --- a/web/client/actions/measurement.js +++ b/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, diff --git a/web/client/components/map/leaflet/MeasurementSupport.jsx b/web/client/components/map/leaflet/MeasurementSupport.jsx index 22968a24d2..59afd76e8b 100644 --- a/web/client/components/map/leaflet/MeasurementSupport.jsx +++ b/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') { @@ -101,10 +110,12 @@ 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: 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 +131,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: { diff --git a/web/client/components/map/leaflet/__tests__/MeasurementSupport-test.jsx b/web/client/components/map/leaflet/__tests__/MeasurementSupport-test.jsx index 46a55e3257..22a1677fe6 100644 --- a/web/client/components/map/leaflet/__tests__/MeasurementSupport-test.jsx +++ b/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( + {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", { diff --git a/web/client/components/map/openlayers/MeasurementSupport.jsx b/web/client/components/map/openlayers/MeasurementSupport.jsx index b3cfae2613..bc91b6b6ea 100644 --- a/web/client/components/map/openlayers/MeasurementSupport.jsx +++ b/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' ? diff --git a/web/client/reducers/measurement.js b/web/client/reducers/measurement.js index cd5c0cea65..8f84f07aea 100644 --- a/web/client/reducers/measurement.js +++ b/web/client/reducers/measurement.js @@ -21,6 +21,7 @@ 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')), @@ -28,10 +29,12 @@ function measurement(state = { }); 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,