diff --git a/src/App.css b/src/App.css index 33c48b29df283c7911e321eaab79b12ad34f65da..c875df17b31f9d6f0d49ee89181cba421c63bc2d 100644 --- a/src/App.css +++ b/src/App.css @@ -1,3 +1,8 @@ +/* + Do not touch classes with 'leaflet' in them! + They're Leaflet's own classes +*/ + body { margin: 0; padding: 0; @@ -151,16 +156,25 @@ div.login button:hover { -moz-user-select: text; -ms-user-select: text; user-select: text; - pointer-events: auto; + pointer-events: auto; + cursor: auto; +} + +.leaflet-tooltip-top:before, +.leaflet-tooltip-bottom:before, +.leaflet-tooltip-left:before, +.leaflet-tooltip-right:before { + pointer-events: auto; } /* Editing editable tooltips */ .editable { - cursor: text; + cursor: text; /* the cursor icon doesn't change by default when hovering on top of the text; overriding */ min-width: 120px; min-height: 18px; } +/* placeholder text for tooltip */ [contenteditable=true]:empty:before { content: attr(placeholder); display: block; /* For Firefox */ diff --git a/src/components/DrawTools.js b/src/components/DrawTools.js index 33b5d8359045f645983be1558dd3d55324d4f5c0..666ff65d680ce1287aa2a0c445d4b910cf46a9ba 100644 --- a/src/components/DrawTools.js +++ b/src/components/DrawTools.js @@ -16,12 +16,13 @@ L.Draw.MarkerTextBox = L.Draw.Marker.extend({ options: { icon: emptyicon, repeatMode: false, + interactive: true }, initialize: function (map, options) { this.type = 'textbox'; // important to have a unique type, so that it won't get mixed up with other elements - this.featureTypeCode = 'textbox'; + this.featureTypeCode = 'textbox'; L.Draw.Feature.prototype.initialize.call(this, map, options); - } + } }); L.DrawToolbar.include ({ @@ -47,7 +48,7 @@ L.DrawToolbar.include ({ handler: new L.Draw.Marker(map, this.options.marker), title: L.drawLocal.draw.toolbar.buttons.marker },{ - enabled: this.options.marker, + enabled: this.options.marker, handler: new L.Draw.MarkerTextBox(map, this.options.marker), title: 'Write text' }]; @@ -55,6 +56,13 @@ L.DrawToolbar.include ({ }); class DrawTools extends Component { + constructor(props){ + super(props); + this.state = { + geoJSONAll: [] // property for all GeoJSON data in the map + } + } + _onCreated = (e) => { // check if a drawn polyline has just one point in it if (e.layerType === 'polyline' && e.layer.getLatLngs().length === 1) { @@ -62,13 +70,26 @@ class DrawTools extends Component { return; } // binding text field to textbox + // clicking on tooltip fires the marker's click handler if (e.layerType === 'textbox') { - e.layer.bindTooltip('<div class="editable" contenteditable="true" placeholder="Type here"></div>', {permanent: true}); + e.layer.bindTooltip('<div class="editable" contenteditable="true" placeholder="Click here and type"></div>', {permanent: true, direction: 'center', interactive: true}); } - // turning layer data to geoJSON + // turning layer data to GeoJSON let layer = e.layer; - let geoJSON = layer.toGeoJSON(); - console.log(JSON.stringify(geoJSON, null, 4)); // makes the output readable in the console + this.makeGeoJSON(e.layer); + + /* Original GeoJSON code. Uncomment if needed + let geoJSON = layer.toGeoJSON(); + console.log(JSON.stringify(geoJSON, null, 4)); // makes the output readable in the console + */ + } + + makeGeoJSON = (e) => { + let geoJSON = e.toGeoJSON(); + let newAllGeoJSON = this.state.geoJSONAll; + newAllGeoJSON.push(geoJSON); + console.log(JSON.stringify(newAllGeoJSON, null, 4)); + this.setState({geoJSONAll: newAllGeoJSON}); } render() { diff --git a/src/components/UserMap.js b/src/components/UserMap.js index 2a5d9d1afa7614a66277b141fe0b4127e0809c7c..b22033fdceef78cf133840e10f9f40295d351f9c 100644 --- a/src/components/UserMap.js +++ b/src/components/UserMap.js @@ -92,9 +92,9 @@ class UserMap extends Component { minZoom='7' maxZoom='17' // onzoomend={this.testers} // getting the zoom level - maxBounds={this.props.bounds} + maxBounds={this.props.bounds} // maxBounds settings don't work for now, for some reason maxBoundsViscosity='1' - zoomControl={false} /* remove the default zoom control button at the top left corner */> + zoomControl={false} /* remove the default zoom control button at the top left corner */ > <TileLayer attribution='© <a href="https://www.maanmittauslaitos.fi/">Maanmittauslaitos</a>' url={this.props.mapUrl}