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

1 files changed, 111 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