// ==UserScript== // @id iitc-plugin-draw-tools@breunigs // @name IITC plugin: draw tools // @category Layer // @version 0.5.1.@@DATETIMEVERSION@@ // @namespace https://github.com/jonatkins/ingress-intel-total-conversion // @updateURL @@UPDATEURL@@ // @downloadURL @@DOWNLOADURL@@ // @description [@@BUILDNAME@@-@@BUILDDATE@@] Allows you to draw things into the current map so you may plan your next move // @include https://www.ingress.com/intel* // @include http://www.ingress.com/intel* // @match https://www.ingress.com/intel* // @match http://www.ingress.com/intel* // @grant none // ==/UserScript== @@PLUGINSTART@@ // PLUGIN START //////////////////////////////////////////////////////// // 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.js@@ try { console.log('done loading leaflet.draw JS'); } catch(e) {} window.plugin.drawTools.boot(); $('head').append(''); } window.plugin.drawTools.setOptions = function() { window.plugin.drawTools.lineOptions = { stroke: true, color: '#a24ac3', weight: 4, opacity: 0.5, fill: false, clickable: true }; window.plugin.drawTools.polygonOptions = L.extend({}, window.plugin.drawTools.lineOptions, { fill: true, fillColor: null, // to use the same as 'color' for fill fillOpacity: 0.2 }); window.plugin.drawTools.editOptions = L.extend({}, window.plugin.drawTools.polygonOptions, { dashArray: [10,10] }); window.plugin.drawTools.markerOptions = { icon: new L.Icon.Default(), zIndexOffset: 2000 }; } // renders the draw control buttons in the top left corner window.plugin.drawTools.addDrawControl = function() { var drawControl = new L.Control.Draw({ 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.', shapeOptions: window.plugin.drawTools.polygonOptions, snapPoint: window.plugin.drawTools.getSnapLatLng, }, 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 last\n' + 'point of the line (a small white rectangle) to\n' + 'finish. Double clicking also works.', shapeOptions: window.plugin.drawTools.lineOptions, snapPoint: window.plugin.drawTools.getSnapLatLng, }, 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.', shapeOptions: window.plugin.drawTools.polygonOptions, snapPoint: window.plugin.drawTools.getSnapLatLng, }, marker: { title: 'Add a marker.\n\n' + 'Click on the button, then click on the map where\n' + 'you want the marker to appear.', shapeOptions: window.plugin.drawTools.markerOptions, snapPoint: window.plugin.drawTools.getSnapLatLng, repeatMode: true, }, }, edit: { featureGroup: window.plugin.drawTools.drawnItems, edit: { title: 'Edit drawn items', selectedPathOptions: window.plugin.drawTools.editOptions, }, remove: { title: 'Delete drawn items' }, }, }); map.addControl(drawControl); // plugin.drawTools.addCustomButtons(); } // given a 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(unsnappedLatLng) { var containerPoint = map.latLngToContainerPoint(unsnappedLatLng); 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 unsnappedLatLng; candidates = candidates.sort(function(a, b) { return a[0]-b[0]; }); return candidates[0][1]; } window.plugin.drawTools.save = function() { var data = []; window.plugin.drawTools.drawnItems.eachLayer( function(layer) { var item = {}; if (layer instanceof L.GeodesicCircle || layer instanceof L.Circle) { item.type = 'circle'; item.latLng = layer.getLatLng(); item.radius = layer.getRadius(); } else if (layer instanceof L.GeodesicPolygon || layer instanceof L.Polygon) { item.type = 'polygon'; item.latLngs = layer.getLatLngs(); } else if (layer instanceof L.GeodesicPolyline || layer instanceof L.Polyline) { item.type = 'polyline'; item.latLngs = layer.getLatLngs(); } else if (layer instanceof L.Marker) { item.type = 'marker'; item.latLng = layer.getLatLng(); } else { console.warn('Unknown layer type when saving draw tools layer'); return; //.eachLayer 'continue' } data.push(item); }); localStorage['plugin-draw-tools-layer'] = JSON.stringify(data); console.log('draw-tools: saved to localStorage'); } window.plugin.drawTools.load = function() { var dataStr = localStorage['plugin-draw-tools-layer']; if (dataStr === undefined) return; var data = JSON.parse(dataStr); $.each(data, function(index,item) { var layer = null; switch(item.type) { case 'polyline': layer = L.geodesicPolyline(item.latLngs,window.plugin.drawTools.lineOptions); break; case 'polygon': layer = L.geodesicPolygon(item.latLngs,window.plugin.drawTools.polygonOptions); break; case 'circle': layer = L.circle(item.latLng,item.radius,window.plugin.drawTools.polygonOptions); break; case 'marker': layer = L.marker(item.latLng,window.plugin.drawTools.markerOptions) break; default: console.warn('unknown layer type "'+item.type+'" when loading draw tools layer'); break; } if (layer) { window.plugin.drawTools.drawnItems.addLayer(layer); } }); } window.plugin.drawTools.boot = function() { window.plugin.drawTools.setOptions(); //create a leaflet FeatureGroup to hold drawn items window.plugin.drawTools.drawnItems = new L.FeatureGroup(); //load any previously saved items plugin.drawTools.load(); //add the draw control - this references the above FeatureGroup for editing purposes plugin.drawTools.addDrawControl(); //start off hidden. if the layer is enabled, the below addLayerGroup will add it, triggering a 'show' $('.leaflet-draw-section').hide(); //hide the draw tools when the 'drawn items' layer is off, show it when on map.on('layeradd', function(obj) { if(obj.layer === window.plugin.drawTools.drawnItems) { $('.leaflet-draw-section').show(); } }); map.on('layerremove', function(obj) { if(obj.layer === window.plugin.drawTools.drawnItems) { $('.leaflet-draw-section').hide(); } }); //add the layer window.addLayerGroup('Drawn Items', window.plugin.drawTools.drawnItems, true); //place created items into the specific layer map.on('draw:created', function(e) { var type=e.layerType; var layer=e.layer; window.plugin.drawTools.drawnItems.addLayer(layer); window.plugin.drawTools.save(); }); map.on('draw:deleted', function(e) { window.plugin.drawTools.save(); }); map.on('draw:edited', function(e) { window.plugin.drawTools.save(); }); } var setup = window.plugin.drawTools.loadExternals; // PLUGIN END ////////////////////////////////////////////////////////// @@PLUGINEND@@