Use a regular click on map to add reports in specific location

src/components/Map.vue

@@ -1,6 +1,6 @@
 <template>
     <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-lts v-if="heading" :lat-lng="positionLatLng" :options="markerOptions"></v-lts>
@@ -43,7 +43,7 @@ export default {
         },
         heading: Number,
         markers: Array,
-        onLongPress: Function,
+        onPress: Function,
         positionLatLng: Array,
     },
     computed: {
@@ -106,9 +106,9 @@ export default {
         };
     },
     methods: {
-        handleLongPress(event) {
-            if (this.onLongPress) {
-                this.onLongPress(event.latlng);
+        handleClick(event) {
+            if (this.onPress) {
+                this.onPress(event.latlng);
             }
         },
         onMouseDown() {
@@ -132,6 +132,7 @@ export default {
             north.onAdd = () => {
                 const div = L.DomUtil.create('div', 'compassIcon legend');
                 div.innerHTML = `<img src="${compassNorthIcon}">`;
+                L.DomEvent.disableClickPropagation(div);
                 return div;
             };
             this.map.addControl(north);
@@ -144,6 +145,7 @@ export default {
                     btn.type = 'button';
                     btn.addEventListener('click', this.recenterMap);
                     btn.innerHTML = '<div class="btn__content"><i aria-hidden="true" class="icon material-icons">my_location</i></div>';
+                    L.DomEvent.disableClickPropagation(btn);
                     return btn;
                 };
                 this.map.addControl(this.recenterButton);

src/i18n/en.js

@@ -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>.',
         summary: 'This app lets you track and share issues with bike lanes.',
         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: {
         fetching: 'Fetching current position…',

src/i18n/fr.js

@@ -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>.",
         summary: 'Cette application vous permet de signaler et de partager des problèmes avec les itinéraires cyclables.',
         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: {
         fetching: 'En attente de votre position…',

src/views/Map.vue

@@ -2,7 +2,7 @@
     <v-container fluid fill-height class="no-padding">
         <v-layout row wrap fill-height>
             <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
                     fixed
                     dark