Add photo markers and additional icons to leaflet map componenty

frontend/css/app.css

@@ -63,3 +63,12 @@ main {
     line-height: 20px;
     color: #E0E0E0;
 }
+
+div.leaflet-container .leaflet-marker-photo {
+    box-shadow: 0px 3px 1px -2px rgba(0,0,0,0.2), 0px 2px 2px 0px rgba(0,0,0,0.14), 0px 1px 5px 0px rgba(0,0,0,0.12) !important;
+    background-color: rgba(0,0,0,0.3);
+    border-color: #fff;
+    color: rgba(0,0,0,0.87);
+    display: block;
+    border-radius: 50%;
+}

frontend/src/app.js

@@ -6,7 +6,8 @@ import App from 'app/main.vue';
 import routes from 'app/routes';
 import Api from 'common/api';
 import Config from 'common/config';
-import Components from 'component/components';
+import Components from 'component/init';
+import Maps from 'maps/init';
 import Alert from 'common/alert';
 import Gallery from 'common/gallery';
 import Session from 'common/session';
@@ -49,6 +50,7 @@ Vue.use(InfiniteScroll);
 Vue.use(VueTruncate);
 Vue.use(VueFullscreen);
 Vue.use(Components);
+Vue.use(Maps);
 Vue.use(Router);
 
 // Configure client-side routing

frontend/src/app/pages/places.vue

@@ -135,6 +135,7 @@
                             iconUrl: result.getThumbnailUrl('square', 50),
                             iconRetinaUrl: result.getThumbnailUrl('square', 100),
                             iconSize: [50, 50],
+                            className: 'leaflet-marker-photo',
                         }),
                         location: L.latLng(result.PhotoLat, result.PhotoLong),
                     });

frontend/src/component/components.js

@@ -1,30 +0,0 @@
-import AppAlert from './app-alert.vue';
-import AppNavigation from './app-navigation.vue';
-import AppLoadingBar from './app-loading-bar.vue';
-import AppGallery from './app-gallery.vue';
-import {LMap, LTileLayer, LMarker, LControl} from 'vue2-leaflet';
-import {Icon} from 'leaflet';
-
-const components = {};
-
-components.install = (Vue) => {
-    Vue.component('app-alert', AppAlert);
-    Vue.component('app-gallery', AppGallery);
-    Vue.component('app-navigation', AppNavigation);
-    Vue.component('app-loading-bar', AppLoadingBar);
-
-    Vue.component('l-map', LMap);
-    Vue.component('l-tile-layer', LTileLayer);
-    Vue.component('l-marker', LMarker);
-    Vue.component('l-control', LControl);
-
-    delete Icon.Default.prototype._getIconUrl;
-
-    Icon.Default.mergeOptions({
-        iconRetinaUrl: require('leaflet/dist/images/marker-icon-2x.png'),
-        iconUrl: require('leaflet/dist/images/marker-icon.png'),
-        shadowUrl: require('leaflet/dist/images/marker-shadow.png')
-    });
-};
-
-export default components;

frontend/src/component/init.js

@@ -0,0 +1,15 @@
+import AppAlert from './app-alert.vue';
+import AppNavigation from './app-navigation.vue';
+import AppLoadingBar from './app-loading-bar.vue';
+import AppGallery from './app-gallery.vue';
+
+const components = {};
+
+components.install = (Vue) => {
+    Vue.component('app-alert', AppAlert);
+    Vue.component('app-gallery', AppGallery);
+    Vue.component('app-navigation', AppNavigation);
+    Vue.component('app-loading-bar', AppLoadingBar);
+};
+
+export default components;

frontend/src/maps/init.js

@@ -0,0 +1,21 @@
+import {LMap, LTileLayer, LMarker, LControl} from 'vue2-leaflet';
+import {Icon} from 'leaflet';
+
+const components = {};
+
+components.install = (Vue) => {
+    Vue.component('l-map', LMap);
+    Vue.component('l-tile-layer', LTileLayer);
+    Vue.component('l-marker', LMarker);
+    Vue.component('l-control', LControl);
+
+    delete Icon.Default.prototype._getIconUrl;
+
+    Icon.Default.mergeOptions({
+        iconRetinaUrl: require('./marker/marker-icon-2x-red.png'),
+        iconUrl: require('./marker/marker-icon-red.png'),
+        shadowUrl: require('./marker/marker-shadow.png')
+    });
+};
+
+export default components;

frontend/webpack.config.js

@@ -157,7 +157,12 @@ const config = {
             },
             {
                 test: /\.(png|jpg|jpeg|gif)$/,
-                loader: 'url-loader',
+                loader: 'file-loader',
+                options: {
+                    name: '[hash].[ext]',
+                    publicPath: '/assets/build/img',
+                    outputPath: 'img',
+                }
             },
             {
                 test: /\.(woff(2)?|ttf|eot)(\?v=\d+\.\d+\.\d+)?$/,