diff --git a/plugins/draw-tools.user.js b/plugins/draw-tools.user.js index e26b1131..75bb0138 100644 --- a/plugins/draw-tools.user.js +++ b/plugins/draw-tools.user.js @@ -2,7 +2,7 @@ // @id iitc-plugin-draw-tools@breunigs // @name IITC plugin: draw tools // @category Layer -// @version 0.4.1.@@DATETIMEVERSION@@ +// @version 0.5.0.@@DATETIMEVERSION@@ // @namespace https://github.com/jonatkins/ingress-intel-total-conversion // @updateURL @@UPDATEURL@@ // @downloadURL @@DOWNLOADURL@@ @@ -32,6 +32,33 @@ window.plugin.drawTools.loadExternals = function() { $('head').append(''); } +window.plugin.drawTools.setOptions = function() { + window.plugin.drawTools.lineOptions = { + stroke: true, + color: '#f06eaa', + weight: 4, + opacity: 0.5, + fill: false, + clickable: true + }; + + window.plugin.drawTools.polygonOptions = { + stroke: true, + color: '#f06eaa', + weight: 4, + opacity: 0.5, + fill: true, + fillColor: null, + fillOpacity: 0.2, + clickable: true + }; + + window.plugin.drawTools.markerOptions = { + icon: new L.Icon.Default(), + zIndexOffset: 2000 + }; + +} // renders the draw control buttons in the top left corner @@ -45,7 +72,8 @@ window.plugin.drawTools.addDrawControl = function() { + '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.' + + 'finish. Double clicking also works.', + shapeOptions: window.plugin.drawTools.polygonOptions, }, polyline: { @@ -54,7 +82,8 @@ window.plugin.drawTools.addDrawControl = function() { + '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.' + + 'finish. Double clicking also works.', + shapeOptions: window.plugin.drawTools.lineOptions, }, circle: { @@ -62,13 +91,15 @@ window.plugin.drawTools.addDrawControl = function() { + '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.' + + 'to finish.', + shapeOptions: window.plugin.drawTools.polygonOptions, }, 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 want the marker to appear.', + shapeOptions: window.plugin.drawTools.markerOptions, }, }, @@ -114,11 +145,79 @@ window.plugin.drawTools.getSnapLatLng = function(containerPoint) { } -window.plugin.drawTools.boot = function() { - //create a leaflet FeatureGroup to hold drawn items +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(); @@ -147,8 +246,18 @@ window.plugin.drawTools.boot = function() { 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(); + }); + + }