add draw plugin. See #135
This commit is contained in:
Stefan Breunig
parent
ae9eaba8c2
commit
1f00e70419
206
plugins/draw-tools.user.js
Normal file
206
plugins/draw-tools.user.js
Normal file
@ -0,0 +1,206 @@
|
||||
// ==UserScript==
|
||||
// @id iitc-plugin-draw-tools@breunigs
|
||||
// @name iitc: draw tools
|
||||
// @version 0.1
|
||||
// @namespace https://github.com/breunigs/ingress-intel-total-conversion
|
||||
// @updateURL https://raw.github.com/breunigs/ingress-intel-total-conversion/gh-pages/plugins/draw-tools.user.js
|
||||
// @downloadURL https://raw.github.com/breunigs/ingress-intel-total-conversion/gh-pages/plugins/draw-tools.user.js
|
||||
// @description Allows you to draw things into the current map so you may plan your next move
|
||||
// @include http://www.ingress.com/intel*
|
||||
// @match http://www.ingress.com/intel*
|
||||
// ==/UserScript==
|
||||
|
||||
function wrapper() {
|
||||
// ensure plugin framework is there, even if iitc is not yet loaded
|
||||
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() {
|
||||
var base = 'http://breunigs.github.com/ingress-intel-total-conversion/dist';
|
||||
$('head').append('<link rel="stylesheet" href="'+base+'/leaflet.draw.0.1.6.css" />');
|
||||
load(base+'/leaflet.draw.0.1.6.js').thenRun(window.plugin.drawTools.boot);
|
||||
}
|
||||
|
||||
|
||||
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="undo last" 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 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,
|
||||
|
||||
polyline: {
|
||||
shapeOptions: DRAW_TOOLS_SHAPE_OPTIONS
|
||||
},
|
||||
|
||||
circle: {
|
||||
shapeOptions: DRAW_TOOLS_SHAPE_OPTIONS
|
||||
}
|
||||
});
|
||||
map.addControl(drawControl);
|
||||
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._updateMarkerHandler = function() {
|
||||
if(this._markers.length >= 2)
|
||||
this._markerGroup.removeLayer(this._markers.shift());
|
||||
|
||||
if(this._markers.length >= 1)
|
||||
this._markers[this._markers.length - 1].on('click', this._finishShape(), this);
|
||||
}
|
||||
}
|
||||
|
||||
// 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) {
|
||||
var candidates = [];
|
||||
$.each(window.portals, function(guid, portal) {
|
||||
var ll = portal.getLatLng();
|
||||
var pp = map.latLngToContainerPoint(ll);
|
||||
var size = portal.options.weight + portal.options.radius;
|
||||
var dist = pp.distanceTo(containerPoint);
|
||||
if(dist > size) return true;
|
||||
candidates.push([dist, ll]);
|
||||
});
|
||||
|
||||
if(candidates.length === 0) return;
|
||||
candidates = candidates.sort(function(a, b) { return a[0]-b[0]; });
|
||||
return candidates[0][1];
|
||||
}
|
||||
|
||||
window.plugin.drawTools.boot = function() {
|
||||
plugin.drawTools.enhanceCircle();
|
||||
plugin.drawTools.enhancePolyLine();
|
||||
plugin.drawTools.addStyles();
|
||||
plugin.drawTools.addDrawControl();
|
||||
|
||||
window.plugin.drawTools.drawnItems = new L.LayerGroup();
|
||||
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);
|
||||
}
|
||||
|
||||
|
||||
var setup = window.plugin.drawTools.loadExternals;
|
||||
|
||||
// PLUGIN END //////////////////////////////////////////////////////////
|
||||
|
||||
if(window.iitcLoaded && typeof setup === 'function') {
|
||||
setup();
|
||||
} else {
|
||||
if(window.bootPlugins)
|
||||
window.bootPlugins.push(setup);
|
||||
else
|
||||
window.bootPlugins = [setup];
|
||||
}
|
||||
} // wrapper end
|
||||
// inject code into site context
|
||||
var script = document.createElement('script');
|
||||
script.appendChild(document.createTextNode('('+ wrapper +')();'));
|
||||
(document.body || document.head || document.documentElement).appendChild(script);
|
||||
Loading…
x
Reference in New Issue
Block a user