Draw Tools Update
Updates to draw tools to add options menu (similar to bookmarks). Added import/export/reset. Also added ability to set color of drawn items and save color state
This commit is contained in:
enigmaquip
parent
adc5d16297
commit
09fa2be1fe
@ -32,11 +32,11 @@ window.plugin.drawTools.loadExternals = function() {
|
||||
$('head').append('<style>@@INCLUDESTRING:external/leaflet.draw.css@@</style>');
|
||||
}
|
||||
|
||||
window.plugin.drawTools.setOptions = function() {
|
||||
window.plugin.drawTools.setOptions = function(setcolor) {
|
||||
|
||||
window.plugin.drawTools.lineOptions = {
|
||||
stroke: true,
|
||||
color: '#a24ac3',
|
||||
color: setcolor,
|
||||
weight: 4,
|
||||
opacity: 0.5,
|
||||
fill: false,
|
||||
@ -62,7 +62,7 @@ window.plugin.drawTools.setOptions = function() {
|
||||
|
||||
|
||||
// renders the draw control buttons in the top left corner
|
||||
window.plugin.drawTools.addDrawControl = function() {
|
||||
window.plugin.drawTools.DrawControl = function() {
|
||||
var drawControl = new L.Control.Draw({
|
||||
draw: {
|
||||
rectangle: false,
|
||||
@ -124,8 +124,9 @@ window.plugin.drawTools.addDrawControl = function() {
|
||||
},
|
||||
|
||||
});
|
||||
return drawControl;
|
||||
|
||||
|
||||
map.addControl(drawControl);
|
||||
// plugin.drawTools.addCustomButtons();
|
||||
}
|
||||
|
||||
@ -155,17 +156,21 @@ window.plugin.drawTools.save = function() {
|
||||
var data = [];
|
||||
|
||||
window.plugin.drawTools.drawnItems.eachLayer( function(layer) {
|
||||
console.log(layer);
|
||||
var item = {};
|
||||
if (layer instanceof L.GeodesicCircle || layer instanceof L.Circle) {
|
||||
item.type = 'circle';
|
||||
item.latLng = layer.getLatLng();
|
||||
item.radius = layer.getRadius();
|
||||
item.color = layer.options.color;
|
||||
} else if (layer instanceof L.GeodesicPolygon || layer instanceof L.Polygon) {
|
||||
item.type = 'polygon';
|
||||
item.latLngs = layer.getLatLngs();
|
||||
item.color = layer.options.color;
|
||||
} else if (layer instanceof L.GeodesicPolyline || layer instanceof L.Polyline) {
|
||||
item.type = 'polyline';
|
||||
item.latLngs = layer.getLatLngs();
|
||||
item.color = layer.options.color;
|
||||
} else if (layer instanceof L.Marker) {
|
||||
item.type = 'marker';
|
||||
item.latLng = layer.getLatLng();
|
||||
@ -191,12 +196,24 @@ window.plugin.drawTools.load = function() {
|
||||
var layer = null;
|
||||
switch(item.type) {
|
||||
case 'polyline':
|
||||
if (typeof item.color === 'undefined'){
|
||||
window.plugin.drawTools.setOptions('#a24ac3');
|
||||
}else{
|
||||
window.plugin.drawTools.setOptions(item.color);}
|
||||
layer = L.geodesicPolyline(item.latLngs,window.plugin.drawTools.lineOptions);
|
||||
break;
|
||||
case 'polygon':
|
||||
if (typeof item.color === 'undefined'){
|
||||
window.plugin.drawTools.setOptions('#a24ac3');
|
||||
}else{
|
||||
window.plugin.drawTools.setOptions(item.color);}
|
||||
layer = L.geodesicPolygon(item.latLngs,window.plugin.drawTools.polygonOptions);
|
||||
break;
|
||||
case 'circle':
|
||||
if (typeof item.color === 'undefined'){
|
||||
window.plugin.drawTools.setOptions('#a24ac3');
|
||||
}else{
|
||||
window.plugin.drawTools.setOptions(item.color);}
|
||||
layer = L.geodesicCircle(item.latLng,item.radius,window.plugin.drawTools.polygonOptions);
|
||||
break;
|
||||
case 'marker':
|
||||
@ -214,9 +231,65 @@ window.plugin.drawTools.load = function() {
|
||||
|
||||
}
|
||||
|
||||
//Draw Tools Options
|
||||
// Manual import, export and reset data
|
||||
window.plugin.drawTools.manualOpt = function() {
|
||||
dialog({
|
||||
html: plugin.drawTools.htmlSetbox,
|
||||
dialogClass: 'ui-dialog-drawtoolsSet',
|
||||
title: 'Draw Tools Options'
|
||||
});
|
||||
}
|
||||
|
||||
window.plugin.drawTools.optAlert = function(message) {
|
||||
$('.ui-dialog-drawtoolsSet .ui-dialog-buttonset').prepend('<p class="drawtools-alert" style="float:left;margin-top:4px;">'+message+'</p>');
|
||||
$('.drawtools-alert').delay(2500).fadeOut();
|
||||
}
|
||||
|
||||
window.plugin.drawTools.optCopy = function() {
|
||||
dialog({
|
||||
html: '<p><a onclick="$(\'.ui-dialog-drawtoolsSet-copy textarea\').select();">Select all</a> and press CTRL+C to copy it.</p><textarea readonly>'+localStorage['plugin-draw-tools-layer']+'</textarea>',
|
||||
dialogClass: 'ui-dialog-drawtoolsSet-copy',
|
||||
title: 'Draw Tools Export'
|
||||
});
|
||||
}
|
||||
|
||||
window.plugin.drawTools.optPaste = function() {
|
||||
var promptAction = prompt('Press CTRL+V to paste it.', '');
|
||||
if(promptAction !== null && promptAction !== '') {
|
||||
localStorage['plugin-draw-tools-layer'] = promptAction;
|
||||
window.plugin.drawTools.drawnItems.clearLayers();
|
||||
window.plugin.drawTools.load();
|
||||
console.log('DRAWTOOLS: reset and imported drawn tiems');
|
||||
window.plugin.drawTools.optAlert('Import Successful. ');
|
||||
}
|
||||
}
|
||||
|
||||
window.plugin.drawTools.optReset = function() {
|
||||
var promptAction = prompt('All drawn items will be deleted. Are you sure? [Y/N]', '');
|
||||
if(promptAction !== null && (promptAction === 'Y' || promptAction === 'y')) {
|
||||
delete localStorage['plugin-draw-tools-layer'];
|
||||
window.plugin.drawTools.drawnItems.clearLayers();
|
||||
window.plugin.drawTools.load();
|
||||
console.log('DRAWTOOLS: reset all drawn items');
|
||||
window.plugin.drawTools.optAlert('Reset Successful. ');
|
||||
}
|
||||
}
|
||||
|
||||
window.plugin.drawTools.optColor = function() {
|
||||
var promptAction = prompt('Current Color is '+window.plugin.drawTools.lineOptions.color, '');
|
||||
if(promptAction !== null && promptAction !== '') {
|
||||
plugin.drawTools.controller.removeFrom(map);
|
||||
window.plugin.drawTools.setOptions(promptAction);
|
||||
plugin.drawTools.controller = plugin.drawTools.DrawControl();
|
||||
plugin.drawTools.controller.addTo(map);
|
||||
console.log('DRAWTOOLS: color changed');
|
||||
window.plugin.drawTools.optAlert('Color Changed. ');
|
||||
}
|
||||
}
|
||||
|
||||
window.plugin.drawTools.boot = function() {
|
||||
window.plugin.drawTools.setOptions();
|
||||
window.plugin.drawTools.setOptions('#a24ac3');
|
||||
|
||||
//create a leaflet FeatureGroup to hold drawn items
|
||||
window.plugin.drawTools.drawnItems = new L.FeatureGroup();
|
||||
@ -225,7 +298,8 @@ window.plugin.drawTools.boot = function() {
|
||||
plugin.drawTools.load();
|
||||
|
||||
//add the draw control - this references the above FeatureGroup for editing purposes
|
||||
plugin.drawTools.addDrawControl();
|
||||
plugin.drawTools.controller = plugin.drawTools.DrawControl();
|
||||
plugin.drawTools.controller.addTo(map);
|
||||
|
||||
//start off hidden. if the layer is enabled, the below addLayerGroup will add it, triggering a 'show'
|
||||
$('.leaflet-draw-section').hide();
|
||||
@ -262,7 +336,18 @@ window.plugin.drawTools.boot = function() {
|
||||
map.on('draw:edited', function(e) {
|
||||
window.plugin.drawTools.save();
|
||||
});
|
||||
|
||||
//add options menu
|
||||
$('#toolbox').append('<a onclick="window.plugin.drawTools.manualOpt();return false;">DrawTools Opt</a>');
|
||||
plugin.drawTools.htmlSetbox = '<div id="drawtoolsSetbox">'
|
||||
+'<a onclick="window.plugin.drawTools.optColor();">Set Color</a>'
|
||||
+'<a onclick="window.plugin.drawTools.optCopy();">Copy/Export Drawn Items</a>'
|
||||
+'<a onclick="window.plugin.drawTools.optPaste();return false;">Paste/Import Drawn Items</a>'
|
||||
+'<a onclick="window.plugin.drawTools.optReset();return false;">Reset Drawn Items</a>'
|
||||
+'</div>';
|
||||
$('head').append('<style>' +
|
||||
'#drawtoolsSetbox a{display:block; color:#ffce00; border:1px solid #ffce00; padding:3px 0; margin:10px auto; width:80%; text-align:center; background:rgba(8,48,78,.9);}'+
|
||||
'.ui-dialog-drawtoolsSet-copy textarea{width:96%; height:120px; resize:vertical;}'+
|
||||
'</style>');
|
||||
|
||||
}
|
||||
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user