Skip to content
Snippets Groups Projects
Commit 6724bca6 authored by L4929's avatar L4929
Browse files

double line shenanigans

parent 1e330087
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 { EditControl } from 'react-leaflet-draw'
import L from 'leaflet' import L from 'leaflet'
import { FeatureGroup } from 'react-leaflet' import { FeatureGroup } from 'react-leaflet'
// empty icon for the text field // empty icon for the text field
let emptyicon = L.icon({ let emptyicon = L.icon({
iconUrl: '../icons/nil.png', iconUrl: '../icons/nil.png',
iconSize: [1, 1], iconSize: [1, 1],
iconAnchor: [1, 1] iconAnchor: [1, 1]
}); });
/*Class for new marker */ /*Class for new marker */
L.Draw.MarkerTextBox = L.Draw.Marker.extend({ L.Draw.MarkerTextBox = L.Draw.Marker.extend({
options: { options: {
icon: emptyicon, icon: emptyicon,
repeatMode: true repeatMode: true
}, },
initialize: function (map, options) { initialize: function (map, options) {
// important to have a unique type, so that it won't get mixed up with other elements // important to have a unique type, so that it won't get mixed up with other elements
this.type = 'textbox'; this.type = 'textbox';
this.featureTypeCode = 'textbox'; this.featureTypeCode = 'textbox';
L.Draw.Feature.prototype.initialize.call(this, map, options); L.Draw.Feature.prototype.initialize.call(this, map, options);
} }
}); });
//Redefinitions d'éléments de DrawToolbar //Redefinitions d'éléments de DrawToolbar
L.DrawToolbar.prototype.options={ L.DrawToolbar.prototype.options={
polyline: {}, polyline: {},
polygon: {}, polygon: {},
rectangle: {}, rectangle: {},
circle: {}, circle: {},
marker: {}, marker: {},
textbox: {}, textbox: {},
uploadTrace: {} uploadTrace: {}
}; };
L.DrawToolbar.include ({ L.DrawToolbar.include ({
getModeHandlers: function(map) { getModeHandlers: function(map) {
return [{ return [{
enabled: this.options.polyline, enabled: this.options.polyline,
handler: new L.Draw.Polyline(map, this.options.polyline), handler: new L.Draw.Polyline(map, this.options.polyline),
title: L.drawLocal.draw.toolbar.buttons.polyline title: L.drawLocal.draw.toolbar.buttons.polyline
},{ },{
enabled: this.options.polygon, enabled: this.options.polygon,
handler: new L.Draw.Polygon(map, this.options.polygon), handler: new L.Draw.Polygon(map, this.options.polygon),
title: L.drawLocal.draw.toolbar.buttons.polygon title: L.drawLocal.draw.toolbar.buttons.polygon
},{ },{
enabled: this.options.rectangle, enabled: this.options.rectangle,
handler: new L.Draw.Rectangle(map, this.options.rectangle), handler: new L.Draw.Rectangle(map, this.options.rectangle),
title: L.drawLocal.draw.toolbar.buttons.rectangle title: L.drawLocal.draw.toolbar.buttons.rectangle
},{ },{
enabled: this.options.circle, enabled: this.options.circle,
handler: new L.Draw.Circle(map, this.options.circle), handler: new L.Draw.Circle(map, this.options.circle),
title: L.drawLocal.draw.toolbar.buttons.circle title: L.drawLocal.draw.toolbar.buttons.circle
},{ },{
enabled: this.options.marker, enabled: this.options.marker,
handler: new L.Draw.Marker(map, this.options.marker), handler: new L.Draw.Marker(map, this.options.marker),
title: L.drawLocal.draw.toolbar.buttons.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), handler: new L.Draw.MarkerTextBox(map, this.options.marker),
title: 'Write text' 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 // check if a drawn polyline has just one point in it
if (e.layerType === 'polyline' && e.layer.getLatLngs().length === 1) { if (e.layerType === 'polyline' && e.layer.getLatLngs().length === 1) {
e.layer.remove(); e.layer.remove();
return; return;
} }
if (e.layerType === 'marker') { if (e.layerType === 'marker') {
e.layer.bindTooltip('say hello to mr. akers'); 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: 1 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: 1 opacity: 1
} }
}, },
polyline: { polyline: {
repeatMode: true, repeatMode: true,
shapeOptions: { shapeOptions: {
color: '#ed2572', color: '#ed2572',
opacity: 1 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