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 55aaf01b..d07c4ebe 100644 --- a/plugins/draw-tools.user.js +++ b/plugins/draw-tools.user.js @@ -34,8 +34,28 @@ window.plugin.drawTools.loadExternals = function() { $('head').append(''); } -window.plugin.drawTools.currentColor = '#a24ac3'; +window.plugin.drawTools.getMarkerIcon = function(color) { + if (typeof(color) === 'undefined') { + console.warn('Color is not set or not a valid color. Using default color as fallback.'); + color = '#a24ac3'; + } + var svgIcon = window.plugin.drawTools.markerTemplate.replace(/%COLOR%/g, color); + + return L.divIcon({ + iconSize: new L.Point(25, 41), + iconAnchor: new L.Point(12, 41), + 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 + }); +} + +window.plugin.drawTools.currentColor = '#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() { @@ -60,7 +80,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 +88,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); 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 +135,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 + }), }, @@ -190,6 +213,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' @@ -233,7 +257,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); + 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');