dev

src/assets/styles/openlayers-custom.css

@@ -41,7 +41,7 @@
   right: 5px;
 }
 
-.leaflet-bar {
+/* .leaflet-bar {
   box-shadow: none !important;
 }
 
@@ -60,7 +60,7 @@
 
 .leaflet-bar a > i {
   margin: 0;
-}
+} */
 
 
 /* For geocoder search bar */

src/components/Map/EditingToolbar.vue

@@ -41,20 +41,21 @@
 import editionService from '@/services/edition-service';
 
 export default {
+
   name: 'EditingToolbar',
+
   data() {
     return {
       editionService: editionService,
     };
   },
+
   computed: {
     showDrawTool() {
       return this.editionService && this.editionService.editing_feature === undefined;
     }
   },
-  mounted() {
 
-  },
   methods: {
     update(){
       editionService.activeUpdateFeature();
@@ -67,7 +68,8 @@ export default {
 };
 </script>
 
-<style scoped>
+<style lang="less" scoped>
+
 .editionToolbar{
   position: absolute;
   top: 80px;
@@ -78,44 +80,49 @@ export default {
   background-clip: padding-box;
   padding: 0;
   border-radius: 2px;
-}
-.leaflet-bar a:first-child {
-  border-top-left-radius: 2px;
-  border-top-right-radius: 2px;
-}
-.leaflet-bar a:last-child {
-  border-bottom-left-radius: 2px;
-  border-bottom-right-radius: 2px;
-  border-bottom: none;
-}
-.leaflet-bar a, .leaflet-control-layers-toggle {
-  background-position: 50% 50%;
-  background-repeat: no-repeat;
-  display: block;
-}
-.leaflet-bar a {
-  background-color: #fff;
-  width: 30px;
-  height: 30px;
-  display: block;
-  text-align: center;
-  text-decoration: none;
-  color: black;
-}
-.leaflet-bar a > i {
-  margin: 0;
-  vertical-align: middle;
-}
-.list-image-type {
-  height: 20px;
-  vertical-align: middle;
-  margin: 5px 0 5px 0;
-}
-.leaflet-bar a:hover {
-  cursor: pointer;
-  background-color: #ebebeb;
-}
-.leaflet-bar a:focus {
-  background-color: #ebebeb;
+
+  a:first-child {
+    border-top-left-radius: 2px;
+    border-top-right-radius: 2px;
+  }
+  a:last-child {
+    border-bottom-left-radius: 2px;
+    border-bottom-right-radius: 2px;
+    border-bottom: none;
+  }
+
+  a, .leaflet-control-layers-toggle {
+    background-position: 50% 50%;
+    background-repeat: no-repeat;
+    display: block;
+  }
+
+  a {
+    background-color: #fff;
+    width: 30px;
+    height: 30px;
+    display: block;
+    text-align: center;
+    text-decoration: none;
+    color: black;
+
+    i {
+      margin: 0;
+      vertical-align: middle;
+    }
+  }
+
+  .list-image-type {
+    height: 20px;
+    vertical-align: middle;
+    margin: 5px 0 5px 0;
+  }
+  a:hover {
+    cursor: pointer !important;
+    background-color: #ebebeb !important;
+  }
+  a:focus {
+    background-color: #ebebeb !important;
+  }
 }
 </style>

src/services/edition-service.js

@@ -12,6 +12,11 @@ import VectorLayer from 'ol/layer/Vector';
 import mapService from '@/services/map-service';
 import { buffer } from 'ol/extent';
 
+// device detection
+const isMobile = /(android|bb\d+|meego).+mobile|avantgo|bada\/|blackberry|blazer|compal|elaine|fennec|hiptop|iemobile|ip(hone|od)|ipad|iris|kindle|Android|Silk|lge |maemo|midp|mmp|netfront|opera m(ob|in)i|palm( os)?|phone|p(ixi|re)\/|plucker|pocket|psp|series(4|6)0|symbian|treo|up\.(browser|link)|vodafone|wap|windows (ce|phone)|xda|xiino/i.test(navigator.userAgent) 
+//eslint-disable-next-line
+    || /1207|6310|6590|3gso|4thp|50[1-6]i|770s|802s|a wa|abac|ac(er|oo|s\-)|ai(ko|rn)|al(av|ca|co)|amoi|an(ex|ny|yw)|aptu|ar(ch|go)|as(te|us)|attw|au(di|\-m|r |s )|avan|be(ck|ll|nq)|bi(lb|rd)|bl(ac|az)|br(e|v)w|bumb|bw\-(n|u)|c55\/|capi|ccwa|cdm\-|cell|chtm|cldc|cmd\-|co(mp|nd)|craw|da(it|ll|ng)|dbte|dc\-s|devi|dica|dmob|do(c|p)o|ds(12|\-d)|el(49|ai)|em(l2|ul)|er(ic|k0)|esl8|ez([4-7]0|os|wa|ze)|fetc|fly(\-|_)|g1 u|g560|gene|gf\-5|g\-mo|go(\.w|od)|gr(ad|un)|haie|hcit|hd\-(m|p|t)|hei\-|hi(pt|ta)|hp( i|ip)|hs\-c|ht(c(\-| |_|a|g|p|s|t)|tp)|hu(aw|tc)|i\-(20|go|ma)|i230|iac( |\-|\/)|ibro|idea|ig01|ikom|im1k|inno|ipaq|iris|ja(t|v)a|jbro|jemu|jigs|kddi|keji|kgt( |\/)|klon|kpt |kwc\-|kyo(c|k)|le(no|xi)|lg( g|\/(k|l|u)|50|54|\-[a-w])|libw|lynx|m1\-w|m3ga|m50\/|ma(te|ui|xo)|mc(01|21|ca)|m\-cr|me(rc|ri)|mi(o8|oa|ts)|mmef|mo(01|02|bi|de|do|t(\-| |o|v)|zz)|mt(50|p1|v )|mwbp|mywa|n10[0-2]|n20[2-3]|n30(0|2)|n50(0|2|5)|n7(0(0|1)|10)|ne((c|m)\-|on|tf|wf|wg|wt)|nok(6|i)|nzph|o2im|op(ti|wv)|oran|owg1|p800|pan(a|d|t)|pdxg|pg(13|\-([1-8]|c))|phil|pire|pl(ay|uc)|pn\-2|po(ck|rt|se)|prox|psio|pt\-g|qa\-a|qc(07|12|21|32|60|\-[2-7]|i\-)|qtek|r380|r600|raks|rim9|ro(ve|zo)|s55\/|sa(ge|ma|mm|ms|ny|va)|sc(01|h\-|oo|p\-)|sdk\/|se(c(\-|0|1)|47|mc|nd|ri)|sgh\-|shar|sie(\-|m)|sk\-0|sl(45|id)|sm(al|ar|b3|it|t5)|so(ft|ny)|sp(01|h\-|v\-|v )|sy(01|mb)|t2(18|50)|t6(00|10|18)|ta(gt|lk)|tcl\-|tdg\-|tel(i|m)|tim\-|t\-mo|to(pl|sh)|ts(70|m\-|m3|m5)|tx\-9|up(\.b|g1|si)|utst|v400|v750|veri|vi(rg|te)|vk(40|5[0-3]|\-v)|vm40|voda|vulc|vx(52|53|60|61|70|80|81|83|85|98)|w3c(\-| )|webc|whit|wi(g |nc|nw)|wmlb|wonu|x700|yas\-|your|zeto|zte\-/i.test(navigator.userAgent.substr(0,4));
+
 const editionService = {
   editing_feature: {},
   geom_type: 'linestring',
@@ -52,7 +57,7 @@ const editionService = {
   },
 
   startEditFeature(feature){
-    this.editing_feature=feature;
+    this.editing_feature = feature;
     this.draw.setActive(false);
     this.drawSource.addFeature(feature);
     this.drawnItems.setZIndex(50);
@@ -60,7 +65,7 @@ const editionService = {
   },
 
   addEditionControls(geomType) {
-    this.geom_type=geomType;
+    this.geom_type = geomType;
     this.drawSource = new VectorSource();
     this.drawnItems = new VectorLayer({
       source: this.drawSource,
@@ -80,21 +85,10 @@ const editionService = {
       gType = GeometryType.LINE_STRING;
     }
 
-    let isMobile = false;
-    // device detection
-    if (
-      /(android|bb\d+|meego).+mobile|avantgo|bada\/|blackberry|blazer|compal|elaine|fennec|hiptop|iemobile|ip(hone|od)|ipad|iris|kindle|Android|Silk|lge |maemo|midp|mmp|netfront|opera m(ob|in)i|palm( os)?|phone|p(ixi|re)\/|plucker|pocket|psp|series(4|6)0|symbian|treo|up\.(browser|link)|vodafone|wap|windows (ce|phone)|xda|xiino/i.test(navigator.userAgent) 
-      //eslint-disable-next-line
-        || /1207|6310|6590|3gso|4thp|50[1-6]i|770s|802s|a wa|abac|ac(er|oo|s\-)|ai(ko|rn)|al(av|ca|co)|amoi|an(ex|ny|yw)|aptu|ar(ch|go)|as(te|us)|attw|au(di|\-m|r |s )|avan|be(ck|ll|nq)|bi(lb|rd)|bl(ac|az)|br(e|v)w|bumb|bw\-(n|u)|c55\/|capi|ccwa|cdm\-|cell|chtm|cldc|cmd\-|co(mp|nd)|craw|da(it|ll|ng)|dbte|dc\-s|devi|dica|dmob|do(c|p)o|ds(12|\-d)|el(49|ai)|em(l2|ul)|er(ic|k0)|esl8|ez([4-7]0|os|wa|ze)|fetc|fly(\-|_)|g1 u|g560|gene|gf\-5|g\-mo|go(\.w|od)|gr(ad|un)|haie|hcit|hd\-(m|p|t)|hei\-|hi(pt|ta)|hp( i|ip)|hs\-c|ht(c(\-| |_|a|g|p|s|t)|tp)|hu(aw|tc)|i\-(20|go|ma)|i230|iac( |\-|\/)|ibro|idea|ig01|ikom|im1k|inno|ipaq|iris|ja(t|v)a|jbro|jemu|jigs|kddi|keji|kgt( |\/)|klon|kpt |kwc\-|kyo(c|k)|le(no|xi)|lg( g|\/(k|l|u)|50|54|\-[a-w])|libw|lynx|m1\-w|m3ga|m50\/|ma(te|ui|xo)|mc(01|21|ca)|m\-cr|me(rc|ri)|mi(o8|oa|ts)|mmef|mo(01|02|bi|de|do|t(\-| |o|v)|zz)|mt(50|p1|v )|mwbp|mywa|n10[0-2]|n20[2-3]|n30(0|2)|n50(0|2|5)|n7(0(0|1)|10)|ne((c|m)\-|on|tf|wf|wg|wt)|nok(6|i)|nzph|o2im|op(ti|wv)|oran|owg1|p800|pan(a|d|t)|pdxg|pg(13|\-([1-8]|c))|phil|pire|pl(ay|uc)|pn\-2|po(ck|rt|se)|prox|psio|pt\-g|qa\-a|qc(07|12|21|32|60|\-[2-7]|i\-)|qtek|r380|r600|raks|rim9|ro(ve|zo)|s55\/|sa(ge|ma|mm|ms|ny|va)|sc(01|h\-|oo|p\-)|sdk\/|se(c(\-|0|1)|47|mc|nd|ri)|sgh\-|shar|sie(\-|m)|sk\-0|sl(45|id)|sm(al|ar|b3|it|t5)|so(ft|ny)|sp(01|h\-|v\-|v )|sy(01|mb)|t2(18|50)|t6(00|10|18)|ta(gt|lk)|tcl\-|tdg\-|tel(i|m)|tim\-|t\-mo|to(pl|sh)|ts(70|m\-|m3|m5)|tx\-9|up(\.b|g1|si)|utst|v400|v750|veri|vi(rg|te)|vk(40|5[0-3]|\-v)|vm40|voda|vulc|vx(52|53|60|61|70|80|81|83|85|98)|w3c(\-| )|webc|whit|wi(g |nc|nw)|wmlb|wonu|x700|yas\-|your|zeto|zte\-/i.test(navigator.userAgent.substr(0,4))
-    ) { 
-      isMobile = true;
-    }
-
     this.draw = new Draw({
       source: this.drawSource,
       type: gType,
       style: this.drawStyle,
-      freehand: isMobile,
       //geometryName: layer.getGeomAttributeName()
     });
     mapService.getMap().addInteraction(this.draw);
@@ -127,6 +121,16 @@ const editionService = {
         })
       ]
     });
+
+    // On mobile stop drawing when selecting a drawn point
+    if (isMobile) {
+      this.selectForUpdate.once('select', () => {
+        if (this.draw.getActive() && this.draw.sketchCoords_.length > 2) {
+          this.draw.finishDrawing();
+        }
+      });
+    }
+
     this.modify = new Modify({
       style: this.drawStyle,
       features: this.selectForUpdate.getFeatures()
@@ -154,8 +158,6 @@ const editionService = {
     mapService.getMap().addInteraction(this.modify);
     // je garde ce bout de code pour l'implementation a venir du snapping
     //map.addInteraction(snap);
-
-
   },
   resetAllTools() {
     if (this.draw) {