Merge branch 'pull_request/draw-marker-colors' of https://github.com/strguntbr/ingress-intel-total-conversion into strguntbr-pull_request/draw-marker-colors

plugins/draw-tools.user.js

@@ -34,8 +34,28 @@ window.plugin.drawTools.loadExternals = function() {
   $('head').append('<style>@@INCLUDESTRING:external/spectrum/spectrum.css@@</style>');
 }
 
-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');