diff --git a/src/assets/gcum.svg b/src/assets/gcum.svg index 7725c49..e481482 100644 --- a/src/assets/gcum.svg +++ b/src/assets/gcum.svg @@ -5,35 +5,11 @@ 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" - xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd" - xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape" - id="svg8" - version="1.1" - viewBox="0 0 52.916666 26.458334" - height="100" width="200" - sodipodi:docname="obstacle.svg" - inkscape:version="0.92.2 5c3e80d, 2017-08-06"> - + height="100" + viewBox="0 0 52.916666 26.458334" + version="1.1" + id="svg8"> image/svg+xml - + + id="layer1" + transform="translate(0,-270.54165)"> - - + transform="matrix(0,-0.09010182,0.09010182,0,-14.971939,321.52926)" + id="layer1-6"> - - + style="opacity:0.99800002;fill:none;fill-opacity:1;fill-rule:nonzero;stroke:#ffffff;stroke-width:0;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:0.77287065" /> + style="opacity:0.99800002;fill:none;fill-opacity:1;fill-rule:nonzero;stroke:#ffffff;stroke-width:0;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:0.77287065" /> - - - - - - - - + style="opacity:0.99800002;fill:none;fill-opacity:1;fill-rule:nonzero;stroke:#ffffff;stroke-width:0;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:0.77287065" /> + + + + + + + + + id="g1611" + transform="matrix(0,0.22831338,-0.22831338,0,11.761749,281.5442)"> + d="M 0,0 H 48 V 48 H 0 Z" + style="fill:none" /> + d="m 32,9.6 c 1.98,0 3.6,-1.61 3.6,-3.6 0,-1.99 -1.62,-3.6 -3.6,-3.6 -1.99,0 -3.6,1.61 -3.6,3.6 0,1.99 1.61,3.6 3.6,3.6 z M 38,24 c -5.52,0 -10,4.48 -10,10 0,5.52 4.48,10 10,10 5.52,0 10,-4.48 10,-10 0,-5.52 -4.48,-10 -10,-10 z m 0,17 c -3.87,0 -7,-3.13 -7,-7 0,-3.87 3.13,-7 7,-7 3.87,0 7,3.13 7,7 0,3.87 -3.13,7 -7,7 z M 29.6,20 H 38 V 16.4 H 31.6 L 27.73,9.87 C 27.14,8.87 26.05,8.2 24.8,8.2 c -0.94,0 -1.79,0.38 -2.4,1 L 15,16.59 c -0.62,0.62 -1,1.47 -1,2.41 0,1.26 0.67,2.32 1.7,2.94 L 22.4,26 V 36 H 26 V 23.04 L 21.5,19.7 26.14,15.04 Z M 10,24 C 4.48,24 0,28.48 0,34 0,39.52 4.48,44 10,44 15.52,44 20,39.52 20,34 20,28.48 15.52,24 10,24 Z m 0,17 c -3.87,0 -7,-3.13 -7,-7 0,-3.87 3.13,-7 7,-7 3.87,0 7,3.13 7,7 0,3.87 -3.13,7 -7,7 z" + style="fill:#231f20;fill-opacity:1" /> + id="path5302" /> diff --git a/src/assets/gcumMarker.svg b/src/assets/gcumMarker.svg new file mode 100644 index 0000000..4b256cd --- /dev/null +++ b/src/assets/gcumMarker.svg @@ -0,0 +1,117 @@ + +image/svg+xml \ No newline at end of file diff --git a/src/assets/obstacle.svg b/src/assets/obstacle.svg index df94a96..1bf2bda 100644 --- a/src/assets/obstacle.svg +++ b/src/assets/obstacle.svg @@ -5,37 +5,64 @@ 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" - xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd" - xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape" - id="svg8" - version="1.1" - viewBox="0 0 52.916666 26.458334" - height="100" + xmlns:xlink="http://www.w3.org/1999/xlink" width="200" - sodipodi:docname="obstacle.svg" - inkscape:version="0.92.2 5c3e80d, 2017-08-06"> - + height="100" + viewBox="0 0 52.916666 26.458334" + version="1.1" + id="svg8"> + id="defs2"> + + + + + + + + + + + + + + + @@ -44,38 +71,207 @@ image/svg+xml - + + id="layer1" + transform="translate(0,-270.54165)"> + transform="matrix(0,0.22831338,-0.22831338,0,11.761749,282.52054)"> + d="M 0,0 H 48 V 48 H 0 Z" + style="fill:none;stroke:none;stroke-opacity:1" /> + d="m 32,9.6 c 1.98,0 3.6,-1.61 3.6,-3.6 0,-1.99 -1.62,-3.6 -3.6,-3.6 -1.99,0 -3.6,1.61 -3.6,3.6 0,1.99 1.61,3.6 3.6,3.6 z M 38,24 c -5.52,0 -10,4.48 -10,10 0,5.52 4.48,10 10,10 5.52,0 10,-4.48 10,-10 0,-5.52 -4.48,-10 -10,-10 z m 0,17 c -3.87,0 -7,-3.13 -7,-7 0,-3.87 3.13,-7 7,-7 3.87,0 7,3.13 7,7 0,3.87 -3.13,7 -7,7 z M 29.6,20 H 38 V 16.4 H 31.6 L 27.73,9.87 C 27.14,8.87 26.05,8.2 24.8,8.2 c -0.94,0 -1.79,0.38 -2.4,1 L 15,16.59 c -0.62,0.62 -1,1.47 -1,2.41 0,1.26 0.67,2.32 1.7,2.94 L 22.4,26 V 36 H 26 V 23.04 L 21.5,19.7 26.14,15.04 Z M 10,24 C 4.48,24 0,28.48 0,34 0,39.52 4.48,44 10,44 15.52,44 20,39.52 20,34 20,28.48 15.52,24 10,24 Z m 0,17 c -3.87,0 -7,-3.13 -7,-7 0,-3.87 3.13,-7 7,-7 3.87,0 7,3.13 7,7 0,3.87 -3.13,7 -7,7 z" + style="fill:#231f20;fill-opacity:1;stroke:none;stroke-opacity:1" /> + d="M 0.2596802,277.74573 H 55.590047" + id="path5302" /> + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + id="path4568" + d="m 52.900995,278.65609 -5.909534,0 -10.635324,18.25556 16.543992,0 z" + style="fill:url(#pattern6074);fill-opacity:1;fill-rule:evenodd;stroke:#000000;stroke-width:0.26458335px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1" /> diff --git a/src/assets/obstacleMarker.svg b/src/assets/obstacleMarker.svg new file mode 100644 index 0000000..d729b09 --- /dev/null +++ b/src/assets/obstacleMarker.svg @@ -0,0 +1,100 @@ + +image/svg+xml \ No newline at end of file diff --git a/src/assets/potholeMarker.svg b/src/assets/potholeMarker.svg new file mode 100644 index 0000000..4122fc3 --- /dev/null +++ b/src/assets/potholeMarker.svg @@ -0,0 +1,81 @@ + +image/svg+xml \ No newline at end of file diff --git a/src/components/Map.vue b/src/components/Map.vue index 1d51801..82413b9 100644 --- a/src/components/Map.vue +++ b/src/components/Map.vue @@ -8,7 +8,7 @@ - + @@ -19,7 +19,8 @@ import iconRetinaUrl from 'leaflet/dist/images/marker-icon-2x.png'; import iconUrl from 'leaflet/dist/images/marker-icon.png'; import shadowUrl from 'leaflet/dist/images/marker-shadow.png'; -import { EARTH_RADIUS } from '@/constants'; +import * as constants from '@/constants'; +import ReportMarker from './ReportMarker.vue'; // Fix for a bug in Leaflet default icon // see https://github.com/PaulLeCam/react-leaflet/issues/255#issuecomment-261904061 @@ -30,13 +31,10 @@ L.Icon.Default.mergeOptions({ shadowUrl, }); -export const DEFAULT_ZOOM = 17; -export const MIN_ZOOM = 15; -export const MAX_ZOOM = 18; -export const TILE_SERVER = process.env.TILE_SERVER || 'https://a.tile.thunderforest.com/cycle/{z}/{x}/{y}.png'; - - export default { + components: { + ReportMarker, + }, props: { accuracy: { type: Number, @@ -51,7 +49,7 @@ export default { radiusFromAccuracy() { if (this.accuracy) { return this.accuracy / ( - (EARTH_RADIUS * 2 * Math.PI * Math.cos(this.lat)) / + (constants.EARTH_RADIUS * 2 * Math.PI * Math.cos(this.lat)) / (2 ** (this.zoom + 8)) ); } @@ -79,11 +77,11 @@ export default { data() { return { attribution: 'Map data © OpenStreetMap contributors', - zoom: DEFAULT_ZOOM, + zoom: constants.DEFAULT_ZOOM, markerRadius: 10.0, - minZoom: MIN_ZOOM, - maxZoom: MAX_ZOOM, - tileServer: TILE_SERVER, + minZoom: constants.MIN_ZOOM, + maxZoom: constants.MAX_ZOOM, + tileServer: constants.TILE_SERVER, }; }, }; diff --git a/src/components/ReportDialog/index.vue b/src/components/ReportDialog/index.vue index 2a8f701..1721cc6 100644 --- a/src/components/ReportDialog/index.vue +++ b/src/components/ReportDialog/index.vue @@ -11,27 +11,10 @@ diff --git a/src/constants.js b/src/constants.js index 4ae0182..67cefde 100644 --- a/src/constants.js +++ b/src/constants.js @@ -1,6 +1,50 @@ +import L from 'leaflet'; + +import gcumMarker from '@/assets/gcumMarker.svg'; +import obstacleMarker from '@/assets/obstacleMarker.svg'; +import potholeMarker from '@/assets/potholeMarker.svg'; +import GCUMIcon from '@/assets/gcum.svg'; +import ObstacleIcon from '@/assets/obstacle.svg'; +import PotHoleIcon from '@/assets/pothole.svg'; + +export const REPORT_TYPES = { + gcum: { + label: 'reportLabels.gcum', + image: GCUMIcon, + marker: L.icon({ + iconUrl: gcumMarker, + iconSize: [40, 40], + iconAnchor: [20, 40], + }), + }, + interrupt: { + label: 'reportLabels.interrupt', + image: ObstacleIcon, + marker: L.icon({ + iconUrl: obstacleMarker, + iconSize: [40, 40], + iconAnchor: [20, 40], + }), + }, + pothole: { + label: 'reportLabels.pothole', + image: PotHoleIcon, + marker: L.icon({ + iconUrl: potholeMarker, + iconSize: [40, 40], + iconAnchor: [20, 40], + }), + }, +}; + export const MOCK_LOCATION = false; export const MOCK_LOCATION_UPDATE_INTERVAL = 30 * 1000; export const UPDATE_REPORTS_DISTANCE_THRESHOLD = 500; export const EARTH_RADIUS = 6378137; + +export const DEFAULT_ZOOM = 17; +export const MIN_ZOOM = 15; +export const MAX_ZOOM = 18; +export const TILE_SERVER = process.env.TILE_SERVER || 'https://a.tile.thunderforest.com/cycle/{z}/{x}/{y}.png'; diff --git a/src/views/Map.vue b/src/views/Map.vue index 7daaf12..47d0c98 100644 --- a/src/views/Map.vue +++ b/src/views/Map.vue @@ -58,6 +58,7 @@ export default { reportsMarkers() { return this.$store.state.reports.map(report => ({ id: report.id, + type: report.attributes.type, latLng: [report.attributes.lat, report.attributes.lng], })); },