fix draw tools. the leaflet upgrade broke it, so the leaflet.draw needed updating too
some of the hacks to do snap-to on points have been removed, at least for now - they needed major rework to fit in additionally other customisations added are also removed - this is basically now stock leaflet.draw with edit-mode enabled
This commit is contained in:
Jon Atkins
parent
7ed03d12b2
commit
d1ef19784f
118
external/leaflet.draw.0.1.6.css
vendored
118
external/leaflet.draw.0.1.6.css
vendored
@ -1,118 +0,0 @@
|
||||
/* Leaflet controls */
|
||||
|
||||
.leaflet-container .leaflet-control-draw {
|
||||
margin-left: 13px;
|
||||
margin-top: 12px;
|
||||
}
|
||||
|
||||
.leaflet-control-draw a {
|
||||
background-position: 50% 50%;
|
||||
background-repeat: no-repeat;
|
||||
display: block;
|
||||
width: 22px;
|
||||
height: 22px;
|
||||
}
|
||||
|
||||
.leaflet-control-draw a:hover {
|
||||
background-color: #fff;
|
||||
}
|
||||
|
||||
.leaflet-touch .leaflet-control-draw a {
|
||||
width: 27px;
|
||||
height: 27px;
|
||||
}
|
||||
|
||||
.leaflet-control-draw-polyline {
|
||||
background-image: url(@@INCLUDEIMAGE:images/draw-polyline.png@@);
|
||||
}
|
||||
|
||||
.leaflet-control-draw-polygon {
|
||||
background-image: url(@@INCLUDEIMAGE:images/draw-polygon.png@@);
|
||||
}
|
||||
|
||||
.leaflet-control-draw-rectangle {
|
||||
background-image: url(@@INCLUDEIMAGE:images/draw-rectangle.png@@);
|
||||
}
|
||||
|
||||
.leaflet-control-draw-circle {
|
||||
background-image: url(@@INCLUDEIMAGE:images/draw-circle.png@@);
|
||||
}
|
||||
|
||||
.leaflet-control-draw-marker {
|
||||
background-image: url(@@INCLUDEIMAGE:images/draw-marker-icon.png@@);
|
||||
}
|
||||
|
||||
.leaflet-mouse-marker {
|
||||
background-color: #fff;
|
||||
cursor: crosshair;
|
||||
}
|
||||
|
||||
.leaflet-draw-label {
|
||||
background-color: #fff;
|
||||
border: 1px solid #ccc;
|
||||
color: #222;
|
||||
font: 12px/18px "Helvetica Neue", Arial, Helvetica, sans-serif;
|
||||
margin-left: 20px;
|
||||
margin-top: -21px;
|
||||
padding: 2px 4px;
|
||||
position: absolute;
|
||||
white-space: nowrap;
|
||||
z-index: 6;
|
||||
}
|
||||
|
||||
.leaflet-error-draw-label {
|
||||
background-color: #F2DEDE;
|
||||
border-color: #E6B6BD;
|
||||
color: #B94A48;
|
||||
}
|
||||
|
||||
.leaflet-draw-label-single {
|
||||
margin-top: -12px
|
||||
}
|
||||
|
||||
.leaflet-draw-label-subtext {
|
||||
color: #999;
|
||||
}
|
||||
|
||||
.leaflet-draw-guide-dash {
|
||||
font-size: 1%;
|
||||
opacity: 0.6;
|
||||
position: absolute;
|
||||
width: 5px;
|
||||
height: 5px;
|
||||
}
|
||||
|
||||
.leaflet-flash-anim {
|
||||
-webkit-animation-duration: 0.66s;
|
||||
-moz-animation-duration: 0.66s;
|
||||
-o-animation-duration: 0.66s;
|
||||
animation-duration: 0.66s;
|
||||
-webkit-animation-fill-mode: both;
|
||||
-moz-animation-fill-mode: both;
|
||||
-o-animation-fill-mode: both;
|
||||
animation-fill-mode: both;
|
||||
-webkit-animation-name: leaflet-flash;
|
||||
-moz-animation-name: leaflet-flash;
|
||||
-o-animation-name: leaflet-flash;
|
||||
animation-name: leaflet-flash;
|
||||
}
|
||||
|
||||
@-webkit-keyframes leaflet-flash {
|
||||
0%, 50%, 100% { opacity: 1; }
|
||||
25%, 75% { opacity: 0.3; }
|
||||
}
|
||||
|
||||
@-moz-keyframes leaflet-flash {
|
||||
0%, 50%, 100% { opacity: 1; }
|
||||
25%, 75% { opacity: 0.3; }
|
||||
}
|
||||
|
||||
@-o-keyframes leaflet-flash {
|
||||
0%, 50%, 100% { opacity: 1; }
|
||||
25%, 75% { opacity: 0.3; }
|
||||
}
|
||||
|
||||
@keyframes leaflet-flash {
|
||||
0%, 50%, 100% { opacity: 1; }
|
||||
25%, 75% { opacity: 0; }
|
||||
}
|
||||
6
external/leaflet.draw.0.1.6.js
vendored
6
external/leaflet.draw.0.1.6.js
vendored
File diff suppressed because one or more lines are too long
212
external/leaflet.draw.css
vendored
Normal file
212
external/leaflet.draw.css
vendored
Normal file
@ -0,0 +1,212 @@
|
||||
/* ================================================================== */
|
||||
/* Toolbars
|
||||
/* ================================================================== */
|
||||
|
||||
.leaflet-draw-section {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.leaflet-draw-toolbar {
|
||||
margin-top: 12px;
|
||||
}
|
||||
|
||||
.leaflet-draw-toolbar-top {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
.leaflet-draw-toolbar-notop a:first-child {
|
||||
border-top-right-radius: 0;
|
||||
}
|
||||
|
||||
.leaflet-draw-toolbar-nobottom a:last-child {
|
||||
border-bottom-right-radius: 0;
|
||||
}
|
||||
|
||||
.leaflet-draw-toolbar a {
|
||||
background-image: url(@@INCLUDEIMAGE:images/draw-spritesheet.png@@);
|
||||
background-repeat: no-repeat;
|
||||
}
|
||||
|
||||
.leaflet-draw a {
|
||||
display: block;
|
||||
text-align: center;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
/* ================================================================== */
|
||||
/* Toolbar actions menu
|
||||
/* ================================================================== */
|
||||
|
||||
.leaflet-draw-actions {
|
||||
display: none;
|
||||
list-style: none;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
position: absolute;
|
||||
left: 26px; /* leaflet-draw-toolbar.left + leaflet-draw-toolbar.width */
|
||||
top: 0;
|
||||
}
|
||||
|
||||
.leaflet-draw-actions li {
|
||||
float: left;
|
||||
}
|
||||
|
||||
.leaflet-draw-actions li:first-child a {
|
||||
border-left: none;
|
||||
}
|
||||
|
||||
.leaflet-draw-actions li:last-child a {
|
||||
-webkit-border-radius: 0 4px 4px 0;
|
||||
border-radius: 0 4px 4px 0;
|
||||
}
|
||||
|
||||
.leaflet-draw-actions a {
|
||||
background-color: #919187;
|
||||
border-left: 1px solid #AAA;
|
||||
color: #FFF;
|
||||
font: 11px/19px "Helvetica Neue", Arial, Helvetica, sans-serif;
|
||||
line-height: 28px;
|
||||
text-decoration: none;
|
||||
width: 50px;
|
||||
height: 28px;
|
||||
}
|
||||
|
||||
.leaflet-draw-actions-bottom {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
.leaflet-draw-actions-top {
|
||||
margin-top: 1px;
|
||||
}
|
||||
|
||||
.leaflet-draw-actions-top a,
|
||||
.leaflet-draw-actions-bottom a {
|
||||
height: 27px;
|
||||
line-height: 27px;
|
||||
}
|
||||
|
||||
.leaflet-draw-actions a:hover {
|
||||
background-color: #A0A098;
|
||||
}
|
||||
|
||||
.leaflet-draw-actions-top.leaflet-draw-actions-bottom a {
|
||||
height: 26px;
|
||||
line-height: 26px;
|
||||
}
|
||||
|
||||
/* ================================================================== */
|
||||
/* Draw toolbar
|
||||
/* ================================================================== */
|
||||
|
||||
.leaflet-draw-toolbar .leaflet-draw-draw-polyline {
|
||||
background-position: -2px -2px;
|
||||
}
|
||||
|
||||
.leaflet-draw-toolbar .leaflet-draw-draw-polygon {
|
||||
background-position: -31px -2px;
|
||||
}
|
||||
|
||||
.leaflet-draw-toolbar .leaflet-draw-draw-rectangle {
|
||||
background-position: -62px -2px;
|
||||
}
|
||||
|
||||
.leaflet-draw-toolbar .leaflet-draw-draw-circle {
|
||||
background-position: -92px -2px;
|
||||
}
|
||||
|
||||
.leaflet-draw-toolbar .leaflet-draw-draw-marker {
|
||||
background-position: -122px -2px;
|
||||
}
|
||||
|
||||
/* ================================================================== */
|
||||
/* Edit toolbar
|
||||
/* ================================================================== */
|
||||
|
||||
.leaflet-draw-toolbar .leaflet-draw-edit-edit {
|
||||
background-position: -152px -2px;
|
||||
}
|
||||
|
||||
.leaflet-draw-toolbar .leaflet-draw-edit-remove {
|
||||
background-position: -182px -2px;
|
||||
}
|
||||
|
||||
/* ================================================================== */
|
||||
/* Drawing styles
|
||||
/* ================================================================== */
|
||||
|
||||
.leaflet-mouse-marker {
|
||||
background-color: #fff;
|
||||
cursor: crosshair;
|
||||
}
|
||||
|
||||
.leaflet-draw-tooltip {
|
||||
background: rgb(54, 54, 54);
|
||||
background: rgba(0, 0, 0, 0.5);
|
||||
border: 1px solid transparent;
|
||||
-webkit-border-radius: 4px;
|
||||
border-radius: 4px;
|
||||
color: #fff;
|
||||
font: 12px/18px "Helvetica Neue", Arial, Helvetica, sans-serif;
|
||||
margin-left: 20px;
|
||||
margin-top: -21px;
|
||||
padding: 4px 8px;
|
||||
position: absolute;
|
||||
white-space: nowrap;
|
||||
z-index: 6;
|
||||
}
|
||||
|
||||
.leaflet-draw-tooltip:before {
|
||||
border-right: 6px solid black;
|
||||
border-right-color: rgba(0, 0, 0, 0.5);
|
||||
border-top: 6px solid transparent;
|
||||
border-bottom: 6px solid transparent;
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: 7px;
|
||||
left: -7px;
|
||||
}
|
||||
|
||||
.leaflet-error-draw-tooltip {
|
||||
background-color: #F2DEDE;
|
||||
border: 1px solid #E6B6BD;
|
||||
color: #B94A48;
|
||||
}
|
||||
|
||||
.leaflet-error-draw-tooltip:before {
|
||||
border-right-color: #E6B6BD;
|
||||
}
|
||||
|
||||
.leaflet-draw-tooltip-single {
|
||||
margin-top: -12px
|
||||
}
|
||||
|
||||
.leaflet-draw-tooltip-subtext {
|
||||
color: #f8d5e4;
|
||||
}
|
||||
|
||||
.leaflet-draw-guide-dash {
|
||||
font-size: 1%;
|
||||
opacity: 0.6;
|
||||
position: absolute;
|
||||
width: 5px;
|
||||
height: 5px;
|
||||
}
|
||||
|
||||
/* ================================================================== */
|
||||
/* Edit styles
|
||||
/* ================================================================== */
|
||||
|
||||
.leaflet-edit-marker-selected {
|
||||
background: rgba(254, 87, 161, 0.1);
|
||||
border: 4px dashed rgba(254, 87, 161, 0.6);
|
||||
-webkit-border-radius: 4px;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
.leaflet-edit-move {
|
||||
cursor: move;
|
||||
}
|
||||
|
||||
.leaflet-edit-resize {
|
||||
cursor: pointer;
|
||||
}
|
||||
10
external/leaflet.draw.js
vendored
Normal file
10
external/leaflet.draw.js
vendored
Normal file
File diff suppressed because one or more lines are too long
Binary file not shown.
|
Before Width: | Height: | Size: 1.0 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 311 B |
Binary file not shown.
|
Before Width: | Height: | Size: 318 B |
Binary file not shown.
|
Before Width: | Height: | Size: 266 B |
Binary file not shown.
|
Before Width: | Height: | Size: 138 B |
BIN
images/draw-spritesheet.png
Normal file
BIN
images/draw-spritesheet.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 2.7 KiB |
@ -19,155 +19,86 @@ if(typeof window.plugin !== 'function') window.plugin = function() {};
|
||||
|
||||
// PLUGIN START ////////////////////////////////////////////////////////
|
||||
|
||||
var DRAW_TOOLS_SHAPE_OPTIONS = {
|
||||
color: '#BB56FF',
|
||||
fill: false,
|
||||
opacity: 1,
|
||||
weight: 4,
|
||||
clickable: false
|
||||
};
|
||||
|
||||
// use own namespace for plugin
|
||||
window.plugin.drawTools = function() {};
|
||||
|
||||
window.plugin.drawTools.loadExternals = function() {
|
||||
try { console.log('Loading leaflet.draw JS now'); } catch(e) {}
|
||||
@@INCLUDERAW:external/leaflet.draw.0.1.6.js@@
|
||||
@@INCLUDERAW:external/leaflet.draw.js@@
|
||||
try { console.log('done loading leaflet.draw JS'); } catch(e) {}
|
||||
|
||||
window.plugin.drawTools.boot();
|
||||
|
||||
$('head').append('<style>@@INCLUDESTRING:external/leaflet.draw.0.1.6.css@@</style>');
|
||||
$('head').append('<style>@@INCLUDESTRING:external/leaflet.draw.css@@</style>');
|
||||
}
|
||||
|
||||
|
||||
window.plugin.drawTools.addStyles = function() {
|
||||
$('head').append('<style>.leaflet-control-draw a { color: #222; text-decoration: none; text-align: center; font-size: 17px; line-height: 22px; }</style>');
|
||||
}
|
||||
|
||||
// renders buttons which are not originally part of Leaflet.draw, such
|
||||
// as the clear-drawings button.
|
||||
window.plugin.drawTools.addCustomButtons = function() {
|
||||
$('.leaflet-control-draw .leaflet-bar-part-bottom').removeClass('leaflet-bar-part-bottom');
|
||||
|
||||
var undo = $('<a class="leaflet-bar-part" title="remove last drawn line/circle/marker" href="#">⎌</a>')
|
||||
.click(function() {
|
||||
var last = null;
|
||||
window.plugin.drawTools.drawnItems.eachLayer(function(l) {
|
||||
last = l;
|
||||
});
|
||||
if(last) window.plugin.drawTools.drawnItems.removeLayer(last);
|
||||
}
|
||||
);
|
||||
|
||||
var clear = $('<a class="leaflet-bar-part leaflet-bar-part-bottom" title="clear ALL drawings" href="#">✗</a>')
|
||||
.click(function() {
|
||||
window.plugin.drawTools.drawnItems.clearLayers();
|
||||
}
|
||||
);
|
||||
|
||||
$('.leaflet-control-draw').append(undo).append(clear);
|
||||
}
|
||||
|
||||
// renders the draw control buttons in the top left corner
|
||||
window.plugin.drawTools.addDrawControl = function() {
|
||||
var drawControl = new L.Control.Draw({
|
||||
rectangle: false,
|
||||
polygon: false,
|
||||
draw: {
|
||||
rectangle: false,
|
||||
polygon: {
|
||||
title: 'Add a polygon\n\n'
|
||||
+ 'Click on the button, then click on the map to\n'
|
||||
+ 'define the start of the polygon. Continue clicking\n'
|
||||
+ 'to draw the line you want. Click the first or last\n'
|
||||
+ 'point of the line (a small white rectangle) to\n'
|
||||
+ 'finish. Double clicking also works.'
|
||||
},
|
||||
|
||||
polyline: {
|
||||
title: 'Add a (poly) line.\n\n'
|
||||
+ 'Click on the button, then click on the map to\n'
|
||||
+ 'define the start of the line. Continue clicking\n'
|
||||
+ 'to draw the line you want. Click the <b>last</b>\n'
|
||||
+ 'point of the line (a small white rectangle) to\n'
|
||||
+ 'finish. Double clicking also works.'
|
||||
},
|
||||
|
||||
circle: {
|
||||
title: 'Add a circle.\n\n'
|
||||
+ 'Click on the button, then click-AND-HOLD on the\n'
|
||||
+ 'map where the circle’s center should be. Move\n'
|
||||
+ 'the mouse to control the radius. Release the mouse\n'
|
||||
+ 'to finish.'
|
||||
},
|
||||
|
||||
marker: {
|
||||
title: 'Add a marker.\n\n'
|
||||
+ 'Click on the button, then click on the map where\n'
|
||||
+ 'you want the marker to appear.'
|
||||
},
|
||||
|
||||
polyline: {
|
||||
shapeOptions: DRAW_TOOLS_SHAPE_OPTIONS,
|
||||
title: 'Add a (poly) line.\n\n'
|
||||
+ 'Click on the button, then click on the map to\n'
|
||||
+ 'define the start of the line. Continue click-\n'
|
||||
+ 'ing to draw the line you want. Click the last\n'
|
||||
+ 'point of the line (a small white rectangle) to\n'
|
||||
+ 'finish. Double clicking also works.'
|
||||
},
|
||||
|
||||
circle: {
|
||||
shapeOptions: DRAW_TOOLS_SHAPE_OPTIONS,
|
||||
title: 'Add a circle.\n\n'
|
||||
+ 'Click on the button, then click-AND-HOLD on the\n'
|
||||
+ 'map where the circle’s center should be. Move\n'
|
||||
+ 'the mouse to control the radius. Release the mouse\n'
|
||||
+ 'to finish.'
|
||||
edit: {
|
||||
featureGroup: window.plugin.drawTools.drawnItems,
|
||||
|
||||
edit: {
|
||||
title: 'Edit drawn items'
|
||||
},
|
||||
|
||||
remove: {
|
||||
title: 'Delete drawn items'
|
||||
},
|
||||
|
||||
},
|
||||
|
||||
marker: {
|
||||
title: 'Add a marker.\n\n'
|
||||
+ 'Click on the button, then click on the map where\n'
|
||||
+ 'you want the marker to appear. You can drag the\n'
|
||||
+ 'marker around after it has been placed.'
|
||||
}
|
||||
});
|
||||
|
||||
map.addControl(drawControl);
|
||||
plugin.drawTools.addCustomButtons();
|
||||
// plugin.drawTools.addCustomButtons();
|
||||
}
|
||||
|
||||
// hacks into circle to render the radius of the circle while drawing
|
||||
// and to allow the center of the circle to snap to a nearby portal.
|
||||
window.plugin.drawTools.enhanceCircle = function() {
|
||||
// replace _onMouseMove function to also display the radius of the
|
||||
// circle
|
||||
L.Circle.Draw.prototype._onMouseMove = function (e) {
|
||||
var layerPoint = e.layerPoint,
|
||||
latlng = e.latlng;
|
||||
|
||||
this._updateLabelPosition(layerPoint);
|
||||
if (this._isDrawing) {
|
||||
var dist = this._startLatLng.distanceTo(latlng);
|
||||
dist = dist > 1000
|
||||
? (dist / 1000).toFixed(2) + ' km'
|
||||
: Math.ceil(dist) + ' m';
|
||||
this._updateLabelText({
|
||||
text: 'Release mouse to finish drawing. ',
|
||||
subtext: 'radius: ' +dist }
|
||||
);
|
||||
this._drawShape(latlng);
|
||||
}
|
||||
}
|
||||
|
||||
// replace _onMouseDown to implement snapping
|
||||
L.Circle.Draw.prototype._onMouseDown = function (e) {
|
||||
this._isDrawing = true;
|
||||
|
||||
var snapTo = window.plugin.drawTools.getSnapLatLng(e.containerPoint);
|
||||
this._startLatLng = snapTo || e.latlng;
|
||||
|
||||
L.DomEvent
|
||||
.on(document, 'mouseup', this._onMouseUp, this)
|
||||
.preventDefault(e.originalEvent);
|
||||
}
|
||||
}
|
||||
|
||||
// hacks into PolyLine to implement snapping and to remove the polyline
|
||||
// markers when they are not required anymore for finishing the line.
|
||||
// Otherwise they get in the way and make it harder to create a closed
|
||||
// polyline.
|
||||
window.plugin.drawTools.enhancePolyLine = function() {
|
||||
// hack in snapping
|
||||
L.Polyline.Draw.prototype._onClickOld = L.Polyline.Draw.prototype._onClick;
|
||||
L.Polyline.Draw.prototype._onClick = function(e) {
|
||||
var cp = map.latLngToContainerPoint(e.target.getLatLng());
|
||||
var snapTo = window.plugin.drawTools.getSnapLatLng(cp);
|
||||
if(snapTo) e.target._latlng = snapTo;
|
||||
return this._onClickOld(e);
|
||||
}
|
||||
|
||||
// remove polyline markers because they get in the way
|
||||
L.Polyline.Draw.prototype._updateMarkerHandlerOld = L.Polyline.Draw.prototype._updateMarkerHandler;
|
||||
L.Polyline.Draw.prototype._updateMarkerHandler = function() {
|
||||
this._updateMarkerHandlerOld();
|
||||
if (this._markers.length > 1)
|
||||
this._markerGroup.removeLayer(this._markers[this._markers.length - 2]);
|
||||
}
|
||||
}
|
||||
|
||||
// given a container point it tries to find the most suitable portal to
|
||||
// snap to. It takes the CircleMarker’s radius and weight into account.
|
||||
// Will return null if nothing to snap to or a LatLng instance.
|
||||
window.plugin.drawTools.getSnapLatLng = function(containerPoint) {
|
||||
// TODO: use this function again, if possible
|
||||
var candidates = [];
|
||||
$.each(window.portals, function(guid, portal) {
|
||||
var ll = portal.getLatLng();
|
||||
@ -183,30 +114,25 @@ window.plugin.drawTools.getSnapLatLng = function(containerPoint) {
|
||||
return candidates[0][1];
|
||||
}
|
||||
|
||||
|
||||
window.plugin.drawTools.boot = function() {
|
||||
plugin.drawTools.enhanceCircle();
|
||||
plugin.drawTools.enhancePolyLine();
|
||||
plugin.drawTools.addStyles();
|
||||
plugin.drawTools.addDrawControl();
|
||||
//create a leaflet FeatureGroup to hold drawn items
|
||||
|
||||
window.plugin.drawTools.drawnItems = new L.LayerGroup();
|
||||
window.plugin.drawTools.drawnItems = new L.FeatureGroup();
|
||||
var drawnItems = window.plugin.drawTools.drawnItems;
|
||||
map.on('draw:poly-created', function (e) {
|
||||
drawnItems.addLayer(e.poly);
|
||||
});
|
||||
|
||||
|
||||
map.on('draw:circle-created', function (e) {
|
||||
drawnItems.addLayer(e.circ);
|
||||
});
|
||||
|
||||
map.on('draw:marker-created', function (e) {
|
||||
drawnItems.addLayer(e.marker);
|
||||
e.marker.dragging.enable();
|
||||
});
|
||||
|
||||
window.layerChooser.addOverlay(drawnItems, 'Drawn Items');
|
||||
map.addLayer(drawnItems);
|
||||
|
||||
//add the draw control - this references the above FeatureGroup for editing purposes
|
||||
plugin.drawTools.addDrawControl();
|
||||
|
||||
map.on('draw:created', function(e) {
|
||||
var type=e.layerType;
|
||||
var layer=e.layer;
|
||||
window.plugin.drawTools.drawnItems.addLayer(layer);
|
||||
});
|
||||
|
||||
}
|
||||
|
||||
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user