From 706d48db00a7ccc79c55948098660650b55fbde7 Mon Sep 17 00:00:00 2001 From: Marcus Winkler Date: Sat, 1 Feb 2014 14:54:31 +0100 Subject: [PATCH 1/3] implemented color choosing support for markers --- plugins/draw-tools.user.js | 43 ++++++++++++++++++++++++++++++++------ 1 file changed, 37 insertions(+), 6 deletions(-) diff --git a/plugins/draw-tools.user.js b/plugins/draw-tools.user.js index 55aaf01b..64ffcc2a 100644 --- a/plugins/draw-tools.user.js +++ b/plugins/draw-tools.user.js @@ -34,8 +34,36 @@ window.plugin.drawTools.loadExternals = function() { $('head').append(''); } -window.plugin.drawTools.currentColor = '#a24ac3'; +window.plugin.drawTools.getMarkerIcon = function(color) { +console.log('getMarkerIcon("' + color + '")'); + if (typeof(color) === "undefined" || color.search(/^[0-9A-Fa-f]{6}$/) == -1) { + // TODO maybe improve error handling here. + console.log('Color is not set of not a valid color. Using default color as fallback.'); + color = "a24ac3"; + } + + // As the length of the color string is 6 charaters which translates to 8 base64 encodes characters + // and we ensured that the color in the svg template is properly aligned we can construct the + // resulting base64 encoded svg by replacing the color inside the base64 encoded template! + var svgIcon = 'data:image/svg+xml;base64,' + + 'PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4NCjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIg0KCXZlcnNpb249IjEuMSIgYmFzZVByb2ZpbGU9ImZ1bGwiDQoJd2lkdGg9IjUwcHgiIGhlaWdodD0iODJweCIgdmlld0JveD0iMCAwIDUwIDgyIj4NCg0KCTxwYXRoIGQ9Ik0yLjcyNDgzNjg5NTMsMzcuMzQ5NzYyNDkzNSBBMjUsMjUgMCAxLDEgNDcuMjc1MTYzMTA0NywzNy4zNDk3NjI0OTM1IEwyNSw4MS4wNjcyMzE2MTQ2IFoiIHN0eWxlPSJzdHJva2U6bm9uZTsgICBmaWxsOiAj' + + btoa(color) + + 'OyIgLz4NCgk8cGF0aCBkPSJNMy42MTU4NDM0MTk1LDM2Ljg5NTc3MTk5MzcgQTI0LDI0IDAgMSwxIDQ2LjM4NDE1NjU4MDUsMzYuODk1NzcxOTkzNyBMMjUsNzguODY0NTQyMzUgWiIgc3R5bGU9InN0cm9rZTojMDAwMDAwOyBzdHJva2Utd2lkdGg6MnB4OyBzdHJva2Utb3BhY2l0eTogMC4xNTsgZmlsbDogbm9uZTsiIC8+DQoJPHBhdGggZD0iTTUuODQzMzU5NzMsMzUuNzYwNzk1NzQ0NCBBMjEuNSwyMS41IDAgMSwxIDQ0LjE1NjY0MDI3LDM1Ljc2MDc5NTc0NDQgTDI1LDczLjM1NzgxOTE4ODYgWiIgc3R5bGU9InN0cm9rZTojZmZmZmZmOyBzdHJva2Utd2lkdGg6M3B4OyBzdHJva2Utb3BhY2l0eTogMC4zNTsgZmlsbDogbm9uZTsiIC8+DQoNCgk8cGF0aCBkPSJNMzkuNzIyNDMxODY0MywzNC41IEwyNSw0MyBMMTAuMjc3NTY4MTM1NywzNC41IEwxMC4yNzc1NjgxMzU3LDE3LjUgTDI1LDkgTDM5LjcyMjQzMTg2NDMsMTcuNSBaIE0xNS40NzM3MjA1NTg0LDIwLjUgTDM0LjUyNjI3OTQ0MTYsMjAuNSBMMjUsMzcgWiBNMjUsMjYgTDE1LjQ3MzcyMDU1ODQsMjAuNSBNMjUsMjYgTDM0LjUyNjI3OTQ0MTYsMjAuNSBNMjUsMjYgTDI1LDM3IE0zOS43MjI0MzE4NjQzLDM0LjUgTDMyLjc5NDIyODYzNDEsMzAuNSBNMTAuMjc3NTY4MTM1NywzNC41IEwxNy4yMDU3NzEzNjU5LDMwLjUgTTI1LDkgTDI1LDE3IiBzdHlsZT0ic3Ryb2tlOiNmZmZmZmY7IHN0cm9rZS13aWR0aDoyLjVweDsgc3Ryb2tlLW9wYWNpdHk6IDE7IGZpbGw6IG5vbmU7IiAvPg0KDQoNCjwvc3ZnPg=='; + + // As we have a svg icon, we can use the same icon for the regular and the retina version. + return L.icon({ + iconUrl: svgIcon, + iconRetinaUrl: svgIcon, + iconSize: new L.Point(25, 41), + iconAnchor: new L.Point(12, 41), + popupAnchor: new L.Point(1, -34), + shadowSize: new L.Point(41, 41) + }); +} + +window.plugin.drawTools.currentColor = '#a24ac3'; +window.plugin.drawTools.currentMarker = window.plugin.drawTools.getMarkerIcon('a24ac3'); window.plugin.drawTools.setOptions = function() { @@ -60,7 +88,7 @@ window.plugin.drawTools.setOptions = function() { delete window.plugin.drawTools.editOptions.color; window.plugin.drawTools.markerOptions = { - icon: new L.Icon.Default(), + icon: window.plugin.drawTools.currentMarker, zIndexOffset: 2000 }; @@ -68,11 +96,13 @@ window.plugin.drawTools.setOptions = function() { window.plugin.drawTools.setDrawColor = function(color) { window.plugin.drawTools.currentColor = color; + window.plugin.drawTools.currentMarker = window.plugin.drawTools.getMarkerIcon(color.substr(1)); window.plugin.drawTools.drawControl.setDrawingOptions({ 'polygon': { 'shapeOptions': { color: color } }, 'polyline': { 'shapeOptions': { color: color } }, 'circle': { 'shapeOptions': { color: color } }, + 'marker': { 'icon': window.plugin.drawTools.currentMarker }, }); } @@ -113,14 +143,15 @@ window.plugin.drawTools.addDrawControl = function() { snapPoint: window.plugin.drawTools.getSnapLatLng, }, - marker: { + // Options for marker (icon, zIndexOffset) are not set via shapeOptions, + // so we have merge them here! + marker: L.extend({}, window.plugin.drawTools.markerOptions, { 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, - }, + repeatMode: true + }), }, From adb0baa46fed00982920cec87f68c5da4b493c31 Mon Sep 17 00:00:00 2001 From: Marcus Winkler Date: Sat, 1 Feb 2014 15:45:48 +0100 Subject: [PATCH 2/3] added color support to serializing/deserializing drawn markers --- plugins/draw-tools.user.js | 12 +++++++++--- 1 file changed, 9 insertions(+), 3 deletions(-) diff --git a/plugins/draw-tools.user.js b/plugins/draw-tools.user.js index 64ffcc2a..c8cfc05e 100644 --- a/plugins/draw-tools.user.js +++ b/plugins/draw-tools.user.js @@ -39,7 +39,7 @@ window.plugin.drawTools.getMarkerIcon = function(color) { console.log('getMarkerIcon("' + color + '")'); if (typeof(color) === "undefined" || color.search(/^[0-9A-Fa-f]{6}$/) == -1) { // TODO maybe improve error handling here. - console.log('Color is not set of not a valid color. Using default color as fallback.'); + console.warn('Color is not set or not a valid color. Using default color as fallback.'); color = "a24ac3"; } @@ -58,7 +58,10 @@ console.log('getMarkerIcon("' + color + '")'); iconSize: new L.Point(25, 41), iconAnchor: new L.Point(12, 41), popupAnchor: new L.Point(1, -34), - shadowSize: new L.Point(41, 41) + shadowSize: new L.Point(41, 41), + // L.icon does not use the option color, but we store it here to + // be able to simply retrieve the color for serializing markers + color: '#' + color }); } @@ -221,6 +224,7 @@ window.plugin.drawTools.save = function() { } else if (layer instanceof L.Marker) { item.type = 'marker'; item.latLng = layer.getLatLng(); + item.color = layer.options.icon.options.color; } else { console.warn('Unknown layer type when saving draw tools layer'); return; //.eachLayer 'continue' @@ -264,7 +268,9 @@ window.plugin.drawTools.import = function(data) { layer = L.geodesicCircle(item.latLng, item.radius, L.extend({},window.plugin.drawTools.polygonOptions,extraOpt)); break; case 'marker': - layer = L.marker(item.latLng, window.plugin.drawTools.markerOptions); + var extraMarkerOpt = {}; + if (item.color) extraMarkerOpt.icon = window.plugin.drawTools.getMarkerIcon(item.color.substr(1)); + layer = L.marker(item.latLng, L.extend({},window.plugin.drawTools.markerOptions,extraMarkerOpt)); break; default: console.warn('unknown layer type "'+item.type+'" when loading draw tools layer'); From 2c743d0c17a2f4781769ffbeb9531a6c8d4f60c8 Mon Sep 17 00:00:00 2001 From: Marcus Winkler Date: Thu, 6 Feb 2014 00:40:54 +0100 Subject: [PATCH 3/3] replaced L.icon containing data-URI-images with L.divIcon --- images/marker-icon.svg.template | 12 +++++++++++ plugins/draw-tools.user.js | 35 +++++++++++---------------------- 2 files changed, 24 insertions(+), 23 deletions(-) create mode 100644 images/marker-icon.svg.template diff --git a/images/marker-icon.svg.template b/images/marker-icon.svg.template new file mode 100644 index 00000000..26b8da11 --- /dev/null +++ b/images/marker-icon.svg.template @@ -0,0 +1,12 @@ + + + + + + + + + + \ No newline at end of file diff --git a/plugins/draw-tools.user.js b/plugins/draw-tools.user.js index c8cfc05e..d07c4ebe 100644 --- a/plugins/draw-tools.user.js +++ b/plugins/draw-tools.user.js @@ -35,38 +35,27 @@ window.plugin.drawTools.loadExternals = function() { } window.plugin.drawTools.getMarkerIcon = function(color) { - -console.log('getMarkerIcon("' + color + '")'); - if (typeof(color) === "undefined" || color.search(/^[0-9A-Fa-f]{6}$/) == -1) { - // TODO maybe improve error handling here. + if (typeof(color) === 'undefined') { console.warn('Color is not set or not a valid color. Using default color as fallback.'); - color = "a24ac3"; + color = '#a24ac3'; } - // As the length of the color string is 6 charaters which translates to 8 base64 encodes characters - // and we ensured that the color in the svg template is properly aligned we can construct the - // resulting base64 encoded svg by replacing the color inside the base64 encoded template! - var svgIcon = 'data:image/svg+xml;base64,' + - 'PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4NCjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIg0KCXZlcnNpb249IjEuMSIgYmFzZVByb2ZpbGU9ImZ1bGwiDQoJd2lkdGg9IjUwcHgiIGhlaWdodD0iODJweCIgdmlld0JveD0iMCAwIDUwIDgyIj4NCg0KCTxwYXRoIGQ9Ik0yLjcyNDgzNjg5NTMsMzcuMzQ5NzYyNDkzNSBBMjUsMjUgMCAxLDEgNDcuMjc1MTYzMTA0NywzNy4zNDk3NjI0OTM1IEwyNSw4MS4wNjcyMzE2MTQ2IFoiIHN0eWxlPSJzdHJva2U6bm9uZTsgICBmaWxsOiAj' + - btoa(color) + - 'OyIgLz4NCgk8cGF0aCBkPSJNMy42MTU4NDM0MTk1LDM2Ljg5NTc3MTk5MzcgQTI0LDI0IDAgMSwxIDQ2LjM4NDE1NjU4MDUsMzYuODk1NzcxOTkzNyBMMjUsNzguODY0NTQyMzUgWiIgc3R5bGU9InN0cm9rZTojMDAwMDAwOyBzdHJva2Utd2lkdGg6MnB4OyBzdHJva2Utb3BhY2l0eTogMC4xNTsgZmlsbDogbm9uZTsiIC8+DQoJPHBhdGggZD0iTTUuODQzMzU5NzMsMzUuNzYwNzk1NzQ0NCBBMjEuNSwyMS41IDAgMSwxIDQ0LjE1NjY0MDI3LDM1Ljc2MDc5NTc0NDQgTDI1LDczLjM1NzgxOTE4ODYgWiIgc3R5bGU9InN0cm9rZTojZmZmZmZmOyBzdHJva2Utd2lkdGg6M3B4OyBzdHJva2Utb3BhY2l0eTogMC4zNTsgZmlsbDogbm9uZTsiIC8+DQoNCgk8cGF0aCBkPSJNMzkuNzIyNDMxODY0MywzNC41IEwyNSw0MyBMMTAuMjc3NTY4MTM1NywzNC41IEwxMC4yNzc1NjgxMzU3LDE3LjUgTDI1LDkgTDM5LjcyMjQzMTg2NDMsMTcuNSBaIE0xNS40NzM3MjA1NTg0LDIwLjUgTDM0LjUyNjI3OTQ0MTYsMjAuNSBMMjUsMzcgWiBNMjUsMjYgTDE1LjQ3MzcyMDU1ODQsMjAuNSBNMjUsMjYgTDM0LjUyNjI3OTQ0MTYsMjAuNSBNMjUsMjYgTDI1LDM3IE0zOS43MjI0MzE4NjQzLDM0LjUgTDMyLjc5NDIyODYzNDEsMzAuNSBNMTAuMjc3NTY4MTM1NywzNC41IEwxNy4yMDU3NzEzNjU5LDMwLjUgTTI1LDkgTDI1LDE3IiBzdHlsZT0ic3Ryb2tlOiNmZmZmZmY7IHN0cm9rZS13aWR0aDoyLjVweDsgc3Ryb2tlLW9wYWNpdHk6IDE7IGZpbGw6IG5vbmU7IiAvPg0KDQoNCjwvc3ZnPg=='; + var svgIcon = window.plugin.drawTools.markerTemplate.replace(/%COLOR%/g, color); - // As we have a svg icon, we can use the same icon for the regular and the retina version. - return L.icon({ - iconUrl: svgIcon, - iconRetinaUrl: svgIcon, + return L.divIcon({ iconSize: new L.Point(25, 41), iconAnchor: new L.Point(12, 41), - popupAnchor: new L.Point(1, -34), - shadowSize: new L.Point(41, 41), - // L.icon does not use the option color, but we store it here to + html: svgIcon, + className: 'leaflet-iitc-custom-icon', + // L.divIcon does not use the option color, but we store it here to // be able to simply retrieve the color for serializing markers - color: '#' + color + color: color }); } window.plugin.drawTools.currentColor = '#a24ac3'; -window.plugin.drawTools.currentMarker = window.plugin.drawTools.getMarkerIcon('a24ac3'); +window.plugin.drawTools.markerTemplate = '@@INCLUDESTRING:images/marker-icon.svg.template@@'; +window.plugin.drawTools.currentMarker = window.plugin.drawTools.getMarkerIcon(window.plugin.drawTools.currentColor); window.plugin.drawTools.setOptions = function() { @@ -99,7 +88,7 @@ window.plugin.drawTools.setOptions = function() { window.plugin.drawTools.setDrawColor = function(color) { window.plugin.drawTools.currentColor = color; - window.plugin.drawTools.currentMarker = window.plugin.drawTools.getMarkerIcon(color.substr(1)); + window.plugin.drawTools.currentMarker = window.plugin.drawTools.getMarkerIcon(color); window.plugin.drawTools.drawControl.setDrawingOptions({ 'polygon': { 'shapeOptions': { color: color } }, @@ -269,7 +258,7 @@ window.plugin.drawTools.import = function(data) { break; case 'marker': var extraMarkerOpt = {}; - if (item.color) extraMarkerOpt.icon = window.plugin.drawTools.getMarkerIcon(item.color.substr(1)); + if (item.color) extraMarkerOpt.icon = window.plugin.drawTools.getMarkerIcon(item.color); layer = L.marker(item.latLng, L.extend({},window.plugin.drawTools.markerOptions,extraMarkerOpt)); break; default: