✨ geo form: add coordinates display - get coordinates from geolocalisation

3 files changed, 135 insertions, 0 deletions

diff --git a/ishtar_common/static/gis/js/OLMapWidget.js b/ishtar_common/static/gis/js/OLMapWidget.js
index 7102b0bf8..22047b86d 100644
--- a/ishtar_common/static/gis/js/OLMapWidget.js
+++ b/ishtar_common/static/gis/js/OLMapWidget.js
@@ -1,5 +1,112 @@
 /* global ol */
 
+var current_module;
+
+var feature_style = new ol.style.Style({
+    image: new ol.style.Circle({
+        radius: 6,
+        fill: new ol.style.Fill({color: '#3399CC'}),
+    stroke: new ol.style.Stroke({color: '#fff', width: 2})
+    })
+});
+
+var get_geoloc = function(map_id){
+    let coordinates = geolocation[map_id].getPosition();
+        console.log(geolocation[map_id].getPosition());
+    let v = current_module.map.getView();
+    v.animate({center: coordinates, duration: animation_duration * 2});
+    $("#id_buffer").val(geolocation[map_id].getAccuracy().toFixed(2));
+    $("#collapse-tampon").show();
+    $("#id_buffer_type").val($("#id_buffer_type option:eq(1)").val());
+    current_module.featureCollection.clear();
+    let feat = new ol.Feature();
+    feat.setStyle(feature_style);
+    feat.setGeometry(coordinates ? new ol.geom.Point(coordinates) : null);
+    current_module.featureCollection.push(feat);
+};
+
+var set_geoloc_source = function(map_id){
+    geolocation[map_id] = new ol.Geolocation({
+        projection: view_projection
+    });
+    geolocation[map_id].setTracking(true);
+    geoloc_activated_message(map_id);
+};
+
+
+var wait_for_position = function(map_id){
+    let get_position = function(){
+        if (!geolocation[map_id].getPosition()){
+            setTimeout(get_position, 200);
+        } else {
+            get_geoloc(map_id);
+        }
+    };
+    setTimeout(get_position, 200);
+}
+
+
+var TrackPositionControl = (function (Control) {
+    function TrackPositionControl(opt_options) {
+        var options = opt_options || {};
+
+        this.map_id = options['map_id'];
+
+        var button = document.createElement('button');
+
+        button.type = "button";
+        button.innerHTML = '<i class="fa fa-map-marker" aria-hidden="true"></i>';
+        button.title = track_me_msg;
+
+        var element = document.createElement('div');
+        element.className = 'track-position ol-unselectable ol-control';
+        element.appendChild(button);
+
+        Control.call(this, {
+            element: element,
+            target: options.target
+        });
+
+        button.addEventListener(
+            'click', this.handleTrackPosition.bind(this),
+            false
+        );
+    }
+
+    if ( Control ) TrackPositionControl.__proto__ = Control;
+    TrackPositionControl.prototype = Object.create( Control && Control.prototype );
+    TrackPositionControl.prototype.constructor = TrackPositionControl;
+
+    TrackPositionControl.prototype.handleTrackPosition = function handleTrackPosition () {
+        if (!geolocation[this.map_id]){
+            set_geoloc_source(this.map_id);
+            wait_for_position(this.map_id);
+        } else {
+            if (!geoloc_activated[this.map_id]) return;
+            if (geolocation[this.map_id].getTracking()){
+                geolocation[this.map_id].setTracking(true);
+                get_geoloc(this.map_id);
+            } else {
+                geolocation[this.map_id].setTracking(true);
+                if (display_info) display_info(geoloc_activated_msg);
+                wait_for_position(this.map_id);
+            }
+        }
+        return false;
+    };
+
+    return TrackPositionControl;
+}(ol.control.Control));
+
+
+
+var MousePositionControl = function() {
+    return new ol.control.MousePosition({
+        coordinateFormat: ol.coordinate.createStringXY(4),
+        projection: 'EPSG:4326',
+    });
+};
+
 var GeometryTypeControl = function(opt_options) {
     'use strict';
     // Map control to switch type when geometry type is unknown
@@ -160,6 +267,10 @@ ol_ext_inherits(GeometryTypeControl, ol.control.Control);
             this.map.addControl(new GeometryTypeControl({widget: this, type: "Polygon", active: false}));
             this.typeChoices = true;
         }
+        this.map.addControl(new MousePositionControl());
+        if (geomType == 'Point' && location.protocol == 'https:'){
+            this.map.addControl(new TrackPositionControl({"map_id": this.options.map_id}));
+        }
         this.interactions.draw = new ol.interaction.Draw({
             features: this.featureCollection,
             type: geomType
diff --git a/ishtar_common/templates/gis/openlayers-osm.html b/ishtar_common/templates/gis/openlayers-osm.html
index 90ccbb0e3..4ed773a33 100644
--- a/ishtar_common/templates/gis/openlayers-osm.html
+++ b/ishtar_common/templates/gis/openlayers-osm.html
@@ -46,5 +46,6 @@
             }
             let current_zoom = {{ module }}.map.getView().getZoom();
             if ({{ module }}.map.getView().getZoom() > 18) {{ module }}.map.getView().setZoom(18);
+            current_module = {{ module }} ;
         });
 {% endblock %}
diff --git a/scss/custom.scss b/scss/custom.scss
index 749d2becf..b4566d4a4 100644
--- a/scss/custom.scss
+++ b/scss/custom.scss
@@ -1140,6 +1140,29 @@ ul.simple,
     top: 2.8em;
 }
 
+.ol-mouse-position {
+  right: 38px !important;
+  background-color: white;
+  padding: 0.1em 0.2em;
+  border-radius: 0.2em;
+}
+
+.form .track-position button {
+    background-color: #28a745;
+    border-color: #28a745;
+    padding: 1em;
+    .fa {
+        font-size: 1.8em;
+        margin: -.5em;
+        padding: 0;
+    }
+}
+
+.form .track-position button:hover {
+    background-color: #218838;
+    border-color: #1e7e34;
+}
+
 .track-position{
     left: .5em;
     top: 5em;