- Now changing the size of the icon depending on invoice amount

lib/leaflet-customer-component.adp

@@ -11,37 +11,19 @@ L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {
 }).addTo(map);
 
 
-
-var ProtoIcon = L.Icon.extend({
-    options: {
-        iconSize: [12, 20],
-        iconAnchor: [6, 20],
-        popupAnchor: [1, -17],
-        shadowUrl: '/intranet-leaflet/resources/marker-shadow.png',
-        shadowSize: [20, 20],
-        shadowAnchor: [6, 20]
-    }
-});
-
-var iconBlue = new ProtoIcon({iconUrl: '/intranet-leaflet/resources/marker-0067a3.png'});
-var iconLightBlue = new ProtoIcon({iconUrl: '/intranet-leaflet/resources/marker-38aadd.png'});
-var iconBlueGrey = new ProtoIcon({iconUrl: '/intranet-leaflet/resources/marker-436978.png'});
-var iconPurple = new ProtoIcon({iconUrl: '/intranet-leaflet/resources/marker-5b396b.png'});
-var iconGreen = new ProtoIcon({iconUrl: '/intranet-leaflet/resources/marker-728224.png'});
-var iconLightGreen = new ProtoIcon({iconUrl: '/intranet-leaflet/resources/marker-72b026.png'});
-var iconRed = new ProtoIcon({iconUrl: '/intranet-leaflet/resources/marker-a23336.png'});
-var iconLightRed = new ProtoIcon({iconUrl: '/intranet-leaflet/resources/marker-d13d29.png'});
-var iconPink = new ProtoIcon({iconUrl: '/intranet-leaflet/resources/marker-d252b9.png'});
-var iconOrange = new ProtoIcon({iconUrl: '/intranet-leaflet/resources/marker-f69730.png'});
-
-var icons = {
-    blue: iconBlue,
-    red: iconRed,
-    green: iconGreen
+var iconUrls = {
+    blue: "/intranet-leaflet/resources/marker-0067a3.png",
+    light_blue: "/intranet-leaflet/resources/marker-38aadd.png",
+    blue_grey: "/intranet-leaflet/resources/marker-436978.png",
+    purple: "/intranet-leaflet/resources/marker-5b396b.png",
+    green: "/intranet-leaflet/resources/marker-728224.png",
+    light_green: "/intranet-leaflet/resources/marker-72b026.png",
+    red: "/intranet-leaflet/resources/marker-a23336.png",
+    light_red: "/intranet-leaflet/resources/marker-d13d29.png",
+    pink: "/intranet-leaflet/resources/marker-d252b9.png",
+    orange: "/intranet-leaflet/resources/marker-f69730.png"
 };
 
-
-
 // Loop through all companies and put a marker for each.
 var geocoder = new L.Control.Geocoder.Nominatim({});
 var store = @store;noquote@;
@@ -86,7 +68,20 @@ store.each(function(addrModel) {
     if (!!country && "" != country) popup = popup+country+"<br>";
     popup = popup+'Invoiced: '+invoiceAmount+"<br>";
 
-    var icon = icons[color];
+    // Determine the size of the marker icon to be shown:
+    // revenue < 1000: f=0.3, revenue > 40000: f=1.0, everything else in the middle
+    var sq = Math.sqrt(invoiceAmount); if (sq > 200) sq = 200.0;
+    var f = 0.3 + 0.7 * sq/200;
+    var iconUrl = iconUrls[color];
+    var icon = L.icon({
+        iconUrl: iconUrl,
+        iconSize: [25*f, 41*f],
+        iconAnchor: [12*f, 41*f],
+        popupAnchor: [1, -34*f],
+        shadowUrl: '/intranet-leaflet/resources/marker-shadow.png',
+        shadowSize: [41*f, 41*f],
+        shadowAnchor: [12*f, 41*f]
+    });
 
     // Geo-position was calculated before, so just add the popup
     if (!!lat && !!lng) {         // && "0" == needsUpdate