Mark the position of the new marker + optimize SVG files

1. Show location of the created report on the map, see
https://framagit.org/phyks/cyclassist/issues/10.
2. Use `image-webpack-loader` to minify image and SVG files at build
time.

build/webpack.base.conf.js

@@ -53,11 +53,33 @@ module.exports = {
       },
       {
         test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
-        loader: 'url-loader',
+          use: [
+              'file-loader',
+              {
+                  loader: 'image-webpack-loader',
                   options: {
-          limit: 10000,
+                      mozjpeg: {
-          name: utils.assetsPath('img/[name].[hash:7].[ext]')
+                          progressive: true,
+                          quality: 65
+                      },
+                      // optipng.enabled: false will disable optipng
+                      optipng: {
+                          enabled: false,
+                      },
+                      pngquant: {
+                          quality: '65-90',
+                          speed: 4
+                      },
+                      gifsicle: {
+                          interlaced: false,
+                      },
+                      // the webp option will enable WEBP
+                      webp: {
+                          quality: 75
                       }
+                  }
+              },
+          ],
       },
       {
         test: /\.(mp4|webm|ogg|mp3|wav|flac|aac)(\?.*)?$/,

package.json

@@ -53,6 +53,7 @@
         "file-loader": "^1.1.4",
         "friendly-errors-webpack-plugin": "^1.6.1",
         "html-webpack-plugin": "^2.30.1",
+        "image-webpack-loader": "^4.3.1",
         "node-notifier": "^5.1.2",
         "optimize-css-assets-webpack-plugin": "^3.2.0",
         "ora": "^1.2.0",

src/assets/unknownMarker.svg

@@ -0,0 +1,67 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg
+   xmlns:dc="http://purl.org/dc/elements/1.1/"
+   xmlns:cc="http://creativecommons.org/ns#"
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns="http://www.w3.org/2000/svg"
+   xml:space="preserve"
+   viewBox="0 0 64.000001 64"
+   height="64"
+   width="64"
+   y="0px"
+   x="0px"
+   id="Layer_1"
+   version="1.1"><metadata
+     id="metadata6294"><rdf:RDF><cc:Work
+         rdf:about=""><dc:format>image/svg+xml</dc:format><dc:type
+           rdf:resource="http://purl.org/dc/dcmitype/StillImage" /><dc:title></dc:title></cc:Work></rdf:RDF></metadata><defs
+     id="defs6292" /><g
+     id="g6260"
+     transform="matrix(1.1140552,0,0,1.1140552,-3.3978567,-2.8738791)" /><g
+     id="g6262"
+     transform="matrix(1.1140552,0,0,1.1140552,-3.3978567,-2.8738791)" /><g
+     id="g6264"
+     transform="matrix(1.1140552,0,0,1.1140552,-3.3978567,-2.8738791)" /><g
+     id="g6266"
+     transform="matrix(1.1140552,0,0,1.1140552,-3.3978567,-2.8738791)" /><g
+     id="g6268"
+     transform="matrix(1.1140552,0,0,1.1140552,-3.3978567,-2.8738791)" /><g
+     id="g6270"
+     transform="matrix(1.1140552,0,0,1.1140552,-3.3978567,-2.8738791)" /><g
+     id="g6272"
+     transform="matrix(1.1140552,0,0,1.1140552,-3.3978567,-2.8738791)" /><g
+     id="g6274"
+     transform="matrix(1.1140552,0,0,1.1140552,-3.3978567,-2.8738791)" /><g
+     id="g6276"
+     transform="matrix(1.1140552,0,0,1.1140552,-3.3978567,-2.8738791)" /><g
+     id="g6278"
+     transform="matrix(1.1140552,0,0,1.1140552,-3.3978567,-2.8738791)" /><g
+     id="g6280"
+     transform="matrix(1.1140552,0,0,1.1140552,-3.3978567,-2.8738791)" /><g
+     id="g6282"
+     transform="matrix(1.1140552,0,0,1.1140552,-3.3978567,-2.8738791)" /><g
+     id="g6284"
+     transform="matrix(1.1140552,0,0,1.1140552,-3.3978567,-2.8738791)" /><g
+     id="g6286"
+     transform="matrix(1.1140552,0,0,1.1140552,-3.3978567,-2.8738791)" /><g
+     id="g6288"
+     transform="matrix(1.1140552,0,0,1.1140552,-3.3978567,-2.8738791)" /><g
+     id="g4175"
+     style="fill:#ffffff;stroke:#000000;stroke-opacity:1"
+     transform="matrix(1.1140552,0,0,1.1140552,-3.3978567,-2.8738791)"><path
+       style="fill:#ffffff;fill-opacity:1;stroke:#231f20;stroke-width:1;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
+       d="M 31.897904,7.540345 C 16.426906,7.5408504 3.7606116,12.208019 3.7611848,27.679017 3.7778264,42.386984 13.478946,44.266947 28.15181,45.282648 l 3.710938,13.369025 2.917968,-13.324978 C 49.486399,44.336591 59.784448,42.417993 59.786576,27.679017 59.787149,12.207256 47.369665,7.5397717 31.897904,7.540345 Z"
+       id="path4169" /><g
+       style="fill:#231f20;fill-opacity:1;stroke:#231f20;stroke-opacity:1"
+       transform="matrix(1.0686403,0,0,1.0686403,-550.28292,-397.22022)"
+       id="surface625762"><text
+         id="text4330"
+         y="407.9808"
+         x="536.20135"
+         style="font-style:normal;font-weight:normal;font-size:31.4987278px;line-height:125%;font-family:sans-serif;letter-spacing:0px;word-spacing:0px;fill:#231f20;fill-opacity:1;stroke:#231f20;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
+         xml:space="preserve"><tspan
+           y="407.9808"
+           x="536.20135"
+           id="tspan4332">?</tspan></text>
+</g></g></svg>

src/components/Map.vue

@@ -9,6 +9,7 @@
             <v-lcircle v-if="shouldDisplayAccuracy" :lat-lng="positionLatLng" :radius="radiusFromAccuracy"></v-lcircle>
             <v-lpolyline :latLngs="polyline" :opacity="0.6" color="#00FF00"></v-lpolyline>
 
+            <v-lmarker v-if="reportLatLng" :lat-lng="reportLatLng" :icon="unknownMarkerIcon"></v-lmarker>
             <ReportMarker v-for="marker in markers" :key="marker.id" :marker="marker"></ReportMarker>
         </v-lmap>
         <v-btn
@@ -37,6 +38,7 @@ import iconUrl from 'leaflet/dist/images/marker-icon.png';
 import shadowUrl from 'leaflet/dist/images/marker-shadow.png';
 
 import compassNorthIcon from '@/assets/compassNorth.svg';
+import unknownMarkerIcon from '@/assets/unknownMarker.svg';
 import * as constants from '@/constants';
 import { distance } from '@/tools';
 import ReportMarker from './ReportMarker.vue';
@@ -64,6 +66,7 @@ export default {
         onPress: Function,
         polyline: Array,
         positionLatLng: Array,
+        reportLatLng: Array,
     },
     computed: {
         radiusFromAccuracy() {
@@ -169,6 +172,11 @@ export default {
             isProgrammaticMove: false,
             recenterButton: false,
             map: null,
+            unknownMarkerIcon: L.icon({
+                iconUrl: unknownMarkerIcon,
+                iconSize: [40, 40],
+                iconAnchor: [20, 40],
+            }),
         };
     },
     methods: {

src/views/Map.vue

@@ -10,7 +10,7 @@
         <v-layout v-else row wrap fill-height>
             <ReportCard></ReportCard>
             <v-flex xs12 fill-height v-if="latLng">
-                <Map :positionLatLng="latLng" :polyline="positionHistory" :heading="heading" :accuracy="accuracy" :markers="reportsMarkers" :onPress="showReportDialog"></Map>
+                <Map :positionLatLng="latLng" :reportLatLng="reportLatLng" :polyline="positionHistory" :heading="heading" :accuracy="accuracy" :markers="reportsMarkers" :onPress="showReportDialog"></Map>
                 <v-btn
                     absolute
                     dark
@@ -74,6 +74,12 @@ export default {
                 latLng: [report.attributes.lat, report.attributes.lng],
             }));
         },
+        reportLatLng() {
+            if (this.dialog && this.reportLat && this.reportLng) {
+                return [this.reportLat, this.reportLng];
+            }
+            return null;
+        },
     },
     data() {
         return {