Skip to content
Snippets Groups Projects
Commit 1e330087 authored by L4929's avatar L4929
Browse files

ADD start working on text functionality

parent 4c125a44
No related branches found
No related tags found
3 merge requests!21Development,!15Get game creation to user-marker-database-interactions,!10Add text
import React, {Component} from 'react'; import React, {Component} from 'react';
import { EditControl } from "react-leaflet-draw"
import { import { EditControl } from 'react-leaflet-draw'
FeatureGroup,
} from 'react-leaflet' import L from 'leaflet'
import { FeatureGroup } from 'react-leaflet'
// empty icon for the text field
let emptyicon = L.icon({
iconUrl: '../icons/nil.png',
iconSize: [1, 1],
iconAnchor: [1, 1]
});
/*Class for new marker */
L.Draw.MarkerTextBox = L.Draw.Marker.extend({
options: {
icon: emptyicon,
repeatMode: true
},
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';
L.Draw.Feature.prototype.initialize.call(this, map, options);
}
});
//Redefinitions d'éléments de DrawToolbar
L.DrawToolbar.prototype.options={
polyline: {},
polygon: {},
rectangle: {},
circle: {},
marker: {},
textbox: {},
uploadTrace: {}
};
L.DrawToolbar.include ({
getModeHandlers: function(map) {
return [{
enabled: this.options.polyline,
handler: new L.Draw.Polyline(map, this.options.polyline),
title: L.drawLocal.draw.toolbar.buttons.polyline
},{
enabled: this.options.polygon,
handler: new L.Draw.Polygon(map, this.options.polygon),
title: L.drawLocal.draw.toolbar.buttons.polygon
},{
enabled: this.options.rectangle,
handler: new L.Draw.Rectangle(map, this.options.rectangle),
title: L.drawLocal.draw.toolbar.buttons.rectangle
},{
enabled: this.options.circle,
handler: new L.Draw.Circle(map, this.options.circle),
title: L.drawLocal.draw.toolbar.buttons.circle
},{
enabled: this.options.marker,
handler: new L.Draw.Marker(map, this.options.marker),
title: L.drawLocal.draw.toolbar.buttons.marker
},{
enabled: this.options.marker,
handler: new L.Draw.MarkerTextBox(map, this.options.marker),
title: 'Write text'
}];
}
});
class DrawTools extends Component { class DrawTools extends Component {
_onCreated = (e) => { _onCreated = (e) => {
// check if a drawn polyline has just one point in it
if (e.layerType === 'polyline' && e.layer.getLatLngs().length === 1) {
e.layer.remove();
return;
}
if (e.layerType === 'marker') {
e.layer.bindTooltip('say hello to mr. akers');
}
let type = e.layerType; // from the example; isn't used right now, but may be relevant in the future 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(); let geoJSON = layer.toGeoJSON();
console.log(JSON.stringify(geoJSON, null, 4)); // makes the output readable in the console console.log(JSON.stringify(geoJSON, null, 4)); // makes the output readable in the console
} }
render() { render() {
return ( 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." // "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> <FeatureGroup>
<EditControl <EditControl
position='topright' position='topright'
onCreated={this._onCreated} onCreated={this._onCreated}
draw={{ draw={{
circle: { circle: {
repeatMode: true, // allows using the tool again after finishing the previous shape repeatMode: true, // allows using the tool again after finishing the previous shape
shapeOptions: { shapeOptions: {
color: '#f9f10c', color: '#f9f10c',
opacity: 100
opacity: 1
} }
}, },
rectangle: { rectangle: {
repeatMode: true repeatMode: true
}, },
polygon: { polygon: {
repeatMode: true, repeatMode: true,
allowIntersection: false, // Restricts shapes to simple polygons allowIntersection: false, // Restricts shapes to simple polygons
drawError: { drawError: {
color: '#e1e100', // Color the shape will turn when intersects 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 message: '<strong>Oh snap!<strong> you can\'t draw that!' // Message that will show when intersect
}, },
shapeOptions: { shapeOptions: {
color: '#ed2572', color: '#ed2572',
opacity: 100
opacity: 1
} }
}, },
polyline: { polyline: {
repeatMode: true, repeatMode: true,
shapeOptions: { shapeOptions: {
color: '#ed2572', color: '#ed2572',
opacity: 100
opacity: 1
} }
}, },
marker: { marker: {
repeatMode: true repeatMode: true
}, },
circlemarker: false circlemarker: false
}} }}
/> />
</FeatureGroup> </FeatureGroup>
) )
} }
} }
export default DrawTools; export default DrawTools;
\ No newline at end of file
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment