diff --git a/src/App.css b/src/App.css index b0f08dddfc38b5c27752c025dbfe8113491b93d2..db7594ada3c6bd302f0523b85bfcc8e99230f002 100644 --- a/src/App.css +++ b/src/App.css @@ -138,3 +138,9 @@ div.login button:hover { background-color: darkblue; cursor: pointer; } + +/* Editing text button in the toolbar */ +.leaflet-draw-toolbar .leaflet-draw-draw-textbox { + background-image: url('icons/button-textbox.png'); + background-size: 30px 30px; +} \ No newline at end of file diff --git a/src/components/DrawTools.js b/src/components/DrawTools.js index d0617ff635458d7644b8a57dc205af35478d7d36..dfb01584f5e3bb870733d42048bc232bad166401 100644 --- a/src/components/DrawTools.js +++ b/src/components/DrawTools.js @@ -1,6 +1,7 @@ import React, {Component} from 'react'; import { EditControl } from 'react-leaflet-draw' import L from 'leaflet' +import 'leaflet-draw' import { FeatureGroup } from 'react-leaflet' // empty icon for the text field @@ -19,9 +20,9 @@ L.Draw.MarkerTextBox = L.Draw.Marker.extend({ initialize: function (map, options) { // important to have a unique type, so that it won't get mixed up with other elements this.type = 'textbox'; - this.featureTypeCode = 'textbox'; + this.featureTypeCode = 'textbox'; L.Draw.Feature.prototype.initialize.call(this, map, options); - } + } }); //Redefinitions d'éléments de DrawToolbar @@ -58,7 +59,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' }]; @@ -72,11 +73,10 @@ class DrawTools extends Component { e.layer.remove(); return; } - if (e.layerType === 'marker') { - e.layer.bindTooltip('say hello to mr. akers'); + if (e.layerType === 'textbox') { + e.layer.bindTooltip('say hello to mr. akers', {permanent: true}); } - let type = e.layerType; // from the example; isn't used right now, but may be relevant in the future - let layer = e.layer; + let layer = e.layer; let geoJSON = layer.toGeoJSON(); console.log(JSON.stringify(geoJSON, null, 4)); // makes the output readable in the console } diff --git a/src/icons/button-textbox.png b/src/icons/button-textbox.png new file mode 100644 index 0000000000000000000000000000000000000000..e36a2872bdf8f68df996d35159335a77211ead7a Binary files /dev/null and b/src/icons/button-textbox.png differ diff --git a/src/icons/nil.png b/src/icons/nil.png new file mode 100644 index 0000000000000000000000000000000000000000..ae058ee7bffad41634a20cd463fc94219f0de69b Binary files /dev/null and b/src/icons/nil.png differ