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:
parent
6ddaf1fdc0
commit
da4a8d537d
@ -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)(\?.*)?$/,
|
||||
|
||||
@ -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",
|
||||
|
||||
67
src/assets/unknownMarker.svg
Normal file
67
src/assets/unknownMarker.svg
Normal 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 |
@ -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: {
|
||||
|
||||
@ -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 {
|
||||
|
||||
Loading…
Reference in New Issue
Block a user