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');