Replace leaflet default markers with Ushahidi style marker

- Replace leaflet default markers in location editor - Replace leaflet default markers in map settings
ushahidi · Nov 17, 2016 · f8cc7f6 · f8cc7f6
1 parent c6d923f
commit f8cc7f6
Show file tree

Hide file tree

Showing 5 changed files with 16 additions and 25 deletions.
diff --git a/app/common/services/maps.js b/app/common/services/maps.js
@@ -38,7 +38,8 @@ function Maps(ConfigEndpoint, L, _, CONST) {
         getBaseLayers: getBaseLayers,
         pointToLayer: pointToLayer,
         getConfig: getConfig,
-        getLayer: getLayer
+        getLayer: getLayer,
+        pointIcon: pointIcon
     };
 
     function createMap(element) {
@@ -120,14 +121,15 @@ function Maps(ConfigEndpoint, L, _, CONST) {
 
     function pointToLayer(feature, latlng) {
         return L.marker(latlng, {
-            icon: pointIcon(feature, [32, 32])
+            icon: pointIcon(feature.properties['marker-color'])
         });
     }
 
     // Icon configuration
-    function pointIcon(feature, size, className) {
+    function pointIcon(color, size, className) {
         // Test string to make sure that it does not contain injection
-        var color = (feature.properties['marker-color'] && /^[a-zA-Z0-9#]+$/.test(feature.properties['marker-color'])) ? feature.properties['marker-color'] : '#959595';
+        color = (color && /^[a-zA-Z0-9#]+$/.test(color)) ? color : '#959595';
+        size = size || [32, 32];
         var iconicSprite = require('ushahidi-platform-pattern-library/assets/img/iconic-sprite.svg');
 
         return L.divIcon({

diff --git a/app/main/posts/modify/location.directive.js b/app/main/posts/modify/location.directive.js
@@ -77,16 +77,7 @@ function PostLocationDirective($http, L, Geocoding, Maps, _, Notify, $window) {
             } else {
                 marker = L.marker([lat, lon], {
                     draggable: true,
-                    icon: L.icon({
-                        iconUrl: require('leaflet/dist/images/marker-icon.png'),
-                        iconRetinaUrl: require('leaflet/dist/images/marker-icon-2x.png'),
-                        shadowUrl: require('leaflet/dist/images/marker-shadow.png'),
-                        iconSize:    [25, 41],
-                        iconAnchor:  [12, 41],
-                        popupAnchor: [1, -34],
-                        tooltipAnchor: [16, -28],
-                        shadowSize:  [41, 41]
-                    })
+                    icon: Maps.pointIcon()
                 });
                 marker.addTo(map);
 

diff --git a/app/settings/site/map.directive.js b/app/settings/site/map.directive.js
@@ -40,16 +40,7 @@ function (
 
                     marker = L.marker(map.getCenter(), {
                         draggable: true,
-                        icon: L.icon({
-                            iconUrl: require('leaflet/dist/images/marker-icon.png'),
-                            iconRetinaUrl: require('leaflet/dist/images/marker-icon-2x.png'),
-                            shadowUrl: require('leaflet/dist/images/marker-shadow.png'),
-                            iconSize:    [25, 41],
-                            iconAnchor:  [12, 41],
-                            popupAnchor: [1, -34],
-                            tooltipAnchor: [16, -28],
-                            shadowSize:  [41, 41]
-                        })
+                        icon: Maps.pointIcon()
                     });
                     marker.addTo(map);
 

diff --git a/test/unit/main/post/modify/location.directive.spec.js b/test/unit/main/post/modify/location.directive.spec.js
@@ -19,7 +19,8 @@ describe('post location directive', function () {
         fixture.setBase('mocked_backend/api/v3');
 
         Maps = {
-            createMap: function () {}
+            createMap: function () {},
+            pointIcon: function () {}
         };
 
         var testApp = makeTestApp();

diff --git a/test/unit/mock/services/maps.js b/test/unit/mock/services/maps.js
@@ -55,6 +55,12 @@ module.exports = ['$q', function ($q) {
                     }
                 }
             };
+        },
+        getLayer: () => {
+            return {};
+        },
+        pointIcon: () => {
+            return {};
         }
     };
 }];