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.
2018-07-13 16:50:34 +02:00 · 2018-07-13 16:50:34 +02:00 · da4a8d537d
parent 6ddaf1fdc0
commit da4a8d537d
6 changed files with 1564 additions and 42 deletions
--- a/build/webpack.base.conf.js
+++ b/build/webpack.base.conf.js
@ -53,11 +53,33 @@ module.exports = {
      },
      {
        test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
-        loader: 'url-loader',
-        options: {
-          limit: 10000,
-          name: utils.assetsPath('img/[name].[hash:7].[ext]')
-        }
+          use: [
+              'file-loader',
+              {
+                  loader: 'image-webpack-loader',
+                  options: {
+                      mozjpeg: {
+                          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)(\?.*)?$/,
--- a/package.json
+++ b/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",
--- a/src/assets/unknownMarker.svg
+++ b/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>
--- a/src/components/Map.vue
+++ b/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: {
--- a/src/views/Map.vue
+++ b/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 {
--- a/yarn.lock
+++ b/yarn.lock