Use a regular click on map to add reports in specific location
This commit is contained in:
parent
1b3082d02a
commit
df187ad8ca
@ -1,6 +1,6 @@
|
|||||||
<template>
|
<template>
|
||||||
<div class="fill-height fill-width">
|
<div class="fill-height fill-width">
|
||||||
<v-lmap ref="map" :minZoom="this.minZoom" :maxZoom="this.maxZoom" :options="{ zoomControl: false }" @contextmenu="handleLongPress" @mousedown="onMouseDown" @mouseup="onMouseUp" @movestart="onMoveStart" @zoomstart="onZoomStart">
|
<v-lmap ref="map" :minZoom="this.minZoom" :maxZoom="this.maxZoom" :options="{ zoomControl: false }" @click="handleClick" @mousedown="onMouseDown" @mouseup="onMouseUp" @movestart="onMoveStart" @zoomstart="onZoomStart">
|
||||||
<v-ltilelayer :url="tileServer" :attribution="attribution"></v-ltilelayer>
|
<v-ltilelayer :url="tileServer" :attribution="attribution"></v-ltilelayer>
|
||||||
|
|
||||||
<v-lts v-if="heading" :lat-lng="positionLatLng" :options="markerOptions"></v-lts>
|
<v-lts v-if="heading" :lat-lng="positionLatLng" :options="markerOptions"></v-lts>
|
||||||
@ -43,7 +43,7 @@ export default {
|
|||||||
},
|
},
|
||||||
heading: Number,
|
heading: Number,
|
||||||
markers: Array,
|
markers: Array,
|
||||||
onLongPress: Function,
|
onPress: Function,
|
||||||
positionLatLng: Array,
|
positionLatLng: Array,
|
||||||
},
|
},
|
||||||
computed: {
|
computed: {
|
||||||
@ -106,9 +106,9 @@ export default {
|
|||||||
};
|
};
|
||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
handleLongPress(event) {
|
handleClick(event) {
|
||||||
if (this.onLongPress) {
|
if (this.onPress) {
|
||||||
this.onLongPress(event.latlng);
|
this.onPress(event.latlng);
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
onMouseDown() {
|
onMouseDown() {
|
||||||
@ -132,6 +132,7 @@ export default {
|
|||||||
north.onAdd = () => {
|
north.onAdd = () => {
|
||||||
const div = L.DomUtil.create('div', 'compassIcon legend');
|
const div = L.DomUtil.create('div', 'compassIcon legend');
|
||||||
div.innerHTML = `<img src="${compassNorthIcon}">`;
|
div.innerHTML = `<img src="${compassNorthIcon}">`;
|
||||||
|
L.DomEvent.disableClickPropagation(div);
|
||||||
return div;
|
return div;
|
||||||
};
|
};
|
||||||
this.map.addControl(north);
|
this.map.addControl(north);
|
||||||
@ -144,6 +145,7 @@ export default {
|
|||||||
btn.type = 'button';
|
btn.type = 'button';
|
||||||
btn.addEventListener('click', this.recenterMap);
|
btn.addEventListener('click', this.recenterMap);
|
||||||
btn.innerHTML = '<div class="btn__content"><i aria-hidden="true" class="icon material-icons">my_location</i></div>';
|
btn.innerHTML = '<div class="btn__content"><i aria-hidden="true" class="icon material-icons">my_location</i></div>';
|
||||||
|
L.DomEvent.disableClickPropagation(btn);
|
||||||
return btn;
|
return btn;
|
||||||
};
|
};
|
||||||
this.map.addControl(this.recenterButton);
|
this.map.addControl(this.recenterButton);
|
||||||
|
@ -6,7 +6,7 @@ export default {
|
|||||||
license: 'It is released under an <a href="https://opensource.org/licenses/MIT">MIT license</a> (<a href="https://framagit.org/phyks/cyclassist">source code</a>). Icons are based on creations from Wikimedia and Vecteezy. The map background is using tiles from <a href="https://www.opencyclemap.org/docs/">OpenCycleMap</a>, thanks to <a href="https://www.openstreetmap.org/copyright">OpenStreetMap contributors</a> and <a href="http://leafletjs.com/">Leaflet</a>. Collected reports are available under <a href="https://opendatacommons.org/licenses/odbl/">ODbL license</a>.',
|
license: 'It is released under an <a href="https://opensource.org/licenses/MIT">MIT license</a> (<a href="https://framagit.org/phyks/cyclassist">source code</a>). Icons are based on creations from Wikimedia and Vecteezy. The map background is using tiles from <a href="https://www.opencyclemap.org/docs/">OpenCycleMap</a>, thanks to <a href="https://www.openstreetmap.org/copyright">OpenStreetMap contributors</a> and <a href="http://leafletjs.com/">Leaflet</a>. Collected reports are available under <a href="https://opendatacommons.org/licenses/odbl/">ODbL license</a>.',
|
||||||
summary: 'This app lets you track and share issues with bike lanes.',
|
summary: 'This app lets you track and share issues with bike lanes.',
|
||||||
usage: 'How to use',
|
usage: 'How to use',
|
||||||
usageDescription: 'Use the button in the lower right corner to add a new report at your current location. To add a report elsewhere, do a long press (or right click) where you want the report to be shown.',
|
usageDescription: 'Use the button in the lower right corner to add a new report at your current location. To add a report elsewhere, do a click where you want the report to be shown.',
|
||||||
},
|
},
|
||||||
geolocation: {
|
geolocation: {
|
||||||
fetching: 'Fetching current position…',
|
fetching: 'Fetching current position…',
|
||||||
|
@ -6,7 +6,7 @@ export default {
|
|||||||
license: "Le code source est sous <a href='https://opensource.org/licenses/MIT'>licence MIT license</a> (<a href='https://framagit.org/phyks/cyclassist'>code source</a>). Les icones sont basées sur des travaux de Wikimedia et Vecteezy. Les tuiles de fond de carte proviennent de chez <a href='https://www.opencyclemap.org/docs/'>OpenCycleMap</a>, grace aux <a href='https://www.openstreetmap.org/copyright'>contributeurs OpenStreetMap</a> et à <a href='http://leafletjs.com/'>Leaflet</a>. Les signalements sont disponibles sous <a href='https://opendatacommons.org/licenses/odbl/'>licence ODbL</a>.",
|
license: "Le code source est sous <a href='https://opensource.org/licenses/MIT'>licence MIT license</a> (<a href='https://framagit.org/phyks/cyclassist'>code source</a>). Les icones sont basées sur des travaux de Wikimedia et Vecteezy. Les tuiles de fond de carte proviennent de chez <a href='https://www.opencyclemap.org/docs/'>OpenCycleMap</a>, grace aux <a href='https://www.openstreetmap.org/copyright'>contributeurs OpenStreetMap</a> et à <a href='http://leafletjs.com/'>Leaflet</a>. Les signalements sont disponibles sous <a href='https://opendatacommons.org/licenses/odbl/'>licence ODbL</a>.",
|
||||||
summary: 'Cette application vous permet de signaler et de partager des problèmes avec les itinéraires cyclables.',
|
summary: 'Cette application vous permet de signaler et de partager des problèmes avec les itinéraires cyclables.',
|
||||||
usage: 'Utilisation',
|
usage: 'Utilisation',
|
||||||
usageDescription: "Utilisez le bouton en bas à droite pour ajouter un signalement à votre emplacement actuel. Pour ajouter un signalement ailleurs, faites un appui long (ou clic droit) à l'emplacement souhaité sur la carte.",
|
usageDescription: "Utilisez le bouton en bas à droite pour ajouter un signalement à votre emplacement actuel. Pour ajouter un signalement ailleurs, faites un appui à l'emplacement souhaité sur la carte.",
|
||||||
},
|
},
|
||||||
geolocation: {
|
geolocation: {
|
||||||
fetching: 'En attente de votre position…',
|
fetching: 'En attente de votre position…',
|
||||||
|
@ -2,7 +2,7 @@
|
|||||||
<v-container fluid fill-height class="no-padding">
|
<v-container fluid fill-height class="no-padding">
|
||||||
<v-layout row wrap fill-height>
|
<v-layout row wrap fill-height>
|
||||||
<v-flex xs12 fill-height v-if="latLng">
|
<v-flex xs12 fill-height v-if="latLng">
|
||||||
<Map :positionLatLng="latLng" :heading="heading" :accuracy="accuracy" :markers="reportsMarkers" :onLongPress="showReportDialog"></Map>
|
<Map :positionLatLng="latLng" :heading="heading" :accuracy="accuracy" :markers="reportsMarkers" :onPress="showReportDialog"></Map>
|
||||||
<v-btn
|
<v-btn
|
||||||
fixed
|
fixed
|
||||||
dark
|
dark
|
||||||
|
Loading…
Reference in New Issue
Block a user