fix: Map picker marker not found icon error

Add custom map picker icon.

Author: AgajLumbardh

.gitignore

@@ -19,6 +19,7 @@ frontend/express/public/sdk/
 **/node_modules
 bin/scripts/nghttp2
 frontend/express/public/images/*/
+!frontend/express/public/images/leaflet/
 !frontend/express/public/images/dashboard/
 !frontend/express/public/images/flags/
 !frontend/express/public/images/management/

frontend/express/public/images/leaflet/marker-icon.svg

@@ -1,4 +1,4 @@
-/* global Promise, Vue, countlyCommon, countlyLocation, _merge, CommonConstructor, countlyGlobal, Vue2Leaflet, CV, moment */
+/* global Promise, Vue, countlyCommon, countlyLocation, _merge, CommonConstructor, countlyGlobal, Vue2Leaflet, CV, moment, L */
 
 // _merge is Lodash merge - /frontend/express/public/javascripts/utils/lodash.merge.js
 
@@ -1965,6 +1965,7 @@
             'l-tile-layer': Vue2Leaflet.LTileLayer,
             'l-marker': Vue2Leaflet.LMarker,
             'l-circle': Vue2Leaflet.LCircle,
+            'l-icon': Vue2Leaflet.LIcon,
         },
         props: {
             value: {
@@ -2000,6 +2001,11 @@
                 userCenterCoordinates: null,
                 tileFeed: 'https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',
                 tileAttribution: '&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors',
+                markerIcon: L.icon({
+                    iconUrl: '/images/leaflet/marker-icon.svg',
+                    iconSize: [32, 32],
+                    iconAnchor: [ 16, 32],
+                }),
                 MI_TO_KM_RATIO: 1.60934,
                 KM_TO_M_RATIO: 1000,
                 RadiusUnitEnum: {

frontend/express/public/javascripts/countly/vue/components/vis.js

@@ -1,5 +1,5 @@
 <l-map ref="lmap" :style="{height: height || '450px', width: '100%'}" :zoom="dynamicZoom" :center="centerCoordinates">
     <l-tile-layer pane="tilePane" :url="tileFeed" :no-wrap="true" :attribution="tileAttribution"></l-tile-layer>
-    <l-marker  v-if="value" :lat-lng="value"></l-marker>
+    <l-marker  v-if="value" :lat-lng="value" :icon="markerIcon"></l-marker>
     <l-circle v-if="value && radius" :lat-lng="value" color="red" :radius="radiusInMeters"></l-circle>
 </l-map>