diff --git a/src/components/DrawTools.js b/src/components/DrawTools.js index 00ee52aa71938a5e4159edaaf65464381c1b525b..1aa26c927ca70948f9ed208ff28958215960ae43 100644 --- a/src/components/DrawTools.js +++ b/src/components/DrawTools.js @@ -62,6 +62,7 @@ L.DrawToolbar.include({ }); class DrawTools extends Component { +<<<<<<< src/components/DrawTools.js constructor(props) { super(props); this.state = { @@ -173,6 +174,77 @@ class DrawTools extends Component { </FeatureGroup> ); } +======= + constructor(props){ + super(props); + this.state = { + geoJSONAll: [] // property for all GeoJSON data in the map + } + } + + _onCreated = (e) => { + let type = e.layerType; // from the example; isn't used right now, but may be relevant in the future + let layer = e.layer; + this.makeGeoJSON(e.layer); + } + + // turn layer to GeoJSON data and add it to an array of all GeoJSON data of the current map + makeGeoJSON = (e) => { + let geoJSON = e.toGeoJSON(); + let newGeoJSONAll = this.state.geoJSONAll; + newGeoJSONAll.push(geoJSON); + this.setState({geoJSONAll: newGeoJSONAll}); + console.log(JSON.stringify(geoJSON, null, 4)); // printing GeoJSON data of the previous object create + console.log("newGeoJSONAll.length: " + newGeoJSONAll.length); + } + + render() { + return ( + // "It's important to wrap EditControl component into FeatureGroup component from react-leaflet. The elements you draw will be added to this FeatureGroup layer, when you hit edit button only items in this layer will be edited." + <FeatureGroup> + <EditControl + position='topright' + onCreated={this._onCreated} + draw={{ + circle: { + repeatMode: true, // allows using the tool again after finishing the previous shape + shapeOptions: { + color: '#f9f10c', + opacity: 100 + } + }, + rectangle: { + repeatMode: true + }, + polygon: { + repeatMode: true, + allowIntersection: false, // Restricts shapes to simple polygons + drawError: { + color: '#e1e100', // Color the shape will turn when intersects + message: '<strong>Oh snap!<strong> you can\'t draw that!' // Message that will show when intersect + }, + shapeOptions: { + color: '#ed2572', + opacity: 100 + } + }, + polyline: { + repeatMode: true, + shapeOptions: { + color: '#ed2572', + opacity: 100 + } + }, + marker: { + repeatMode: true + }, + circlemarker: false + }} + /> + </FeatureGroup> + ) + } +>>>>>>> src/components/DrawTools.js } export default DrawTools; diff --git a/src/components/UserMap.js b/src/components/UserMap.js index ae98a575d7557a5928e6fa303ea8cbe79c6e8447..4b3e690ea038c66268066abdda38bedb7a22cdfa 100644 --- a/src/components/UserMap.js +++ b/src/components/UserMap.js @@ -49,18 +49,20 @@ class UserMap extends Component { navigator.geolocation.clearWatch(this.watchPositionId); } - this.watchPositionId = navigator.geolocation.watchPosition( - position => { - //success - if (position != null) { - callback(position); - } - }, - error => { - console.log(error); - }, - options - ); + if(this.watchPositionId != null){navigator.geolocation.clearWatch(this.watchPositionId);} + + this.watchPositionId = navigator.geolocation.watchPosition((position) =>{ + //success + if(position != null){ + callback(position); + } + }, (error) =>{ + console.log(error); + // disable tracking + if(this.watchPositionId != null){ + navigator.geolocation.clearWatch(this.watchPositionId); + } + }, options); } } @@ -84,16 +86,12 @@ class UserMap extends Component { render() { return ( <Map - className="map" + className='map' center={this.props.position} zoom={this.props.zoom} - minZoom="7" - maxZoom="17" - // onzoomend={this.testers} // getting the zoom level - zoomControl={ - false - } /* remove the default zoom control button at the top left corner */ - > + minZoom='7' + maxZoom='17' + zoomControl={false}> <TileLayer attribution='© <a href="https://www.maanmittauslaitos.fi/">Maanmittauslaitos</a>' url={this.props.mapUrl}