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.
This commit is contained in:
Lucas Verney 2018-07-13 16:50:34 +02:00
parent 6ddaf1fdc0
commit da4a8d537d
6 changed files with 1564 additions and 42 deletions

View File

@ -53,11 +53,33 @@ module.exports = {
}, },
{ {
test: /\.(png|jpe?g|gif|svg)(\?.*)?$/, test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
loader: 'url-loader', use: [
'file-loader',
{
loader: 'image-webpack-loader',
options: { 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)(\?.*)?$/, test: /\.(mp4|webm|ogg|mp3|wav|flac|aac)(\?.*)?$/,

View File

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

View File

@ -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>

After

Width:  |  Height:  |  Size: 3.3 KiB

View File

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

View File

@ -10,7 +10,7 @@
<v-layout v-else row wrap fill-height> <v-layout v-else row wrap fill-height>
<ReportCard></ReportCard> <ReportCard></ReportCard>
<v-flex xs12 fill-height v-if="latLng"> <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 <v-btn
absolute absolute
dark dark
@ -74,6 +74,12 @@ export default {
latLng: [report.attributes.lat, report.attributes.lng], latLng: [report.attributes.lat, report.attributes.lng],
})); }));
}, },
reportLatLng() {
if (this.dialog && this.reportLat && this.reportLng) {
return [this.reportLat, this.reportLng];
}
return null;
},
}, },
data() { data() {
return { return {

1490
yarn.lock

File diff suppressed because it is too large Load Diff