Map: manage controls (scaleline, fullscreen, overview, track position) - track position

1 files changed, 125 insertions, 1 deletions

diff --git a/ishtar_common/static/js/ishtar-map.js b/ishtar_common/static/js/ishtar-map.js
index c1bed2554..5fdf2151c 100644
--- a/ishtar_common/static/js/ishtar-map.js
+++ b/ishtar_common/static/js/ishtar-map.js
@@ -18,6 +18,122 @@ var map_default_center = 'SRID=4326;POINT (2.4397 46.5528)';
 var map_default_zoom = '7';
 var min_auto_zoom_on_cluster = 13;
 
+
+/* custom control */
+var track_me_msg = "Geolocalize me";
+var geoloc_activated_msg = "Geolocation activated";
+var geoloc_disabled_msg = "Geolocation disabled";
+var geolocation = {};
+var geoloc_feature = {};
+var geoloc_activated = {};
+
+
+var geoloc_activated_message = function(map_id){
+    setTimeout(function(){
+        navigator.geolocation.watchPosition(function(position) {
+            if(!geoloc_activated[map_id]){
+                if (display_info) display_info(geoloc_activated_msg);
+                geoloc_activated[map_id] = true;
+            }
+        },
+        function (error) {
+            if (error.code == error.PERMISSION_DENIED)
+                if (display_info) display_info(geoloc_disabled_msg);
+        });
+    }, 200);
+};
+
+
+var set_geoloc_source = function(map_id){
+    geolocation[map_id] = new ol.Geolocation({
+        projection: view_projection
+    });
+
+    geolocation[map_id].setTracking(true);
+
+    geoloc_feature[map_id] = new ol.Feature();
+    geoloc_feature[map_id].setStyle(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 accuracy_feature = new ol.Feature();
+    geolocation[map_id].on('change:accuracyGeometry', function() {
+        accuracy_feature.setGeometry(geolocation[map_id].getAccuracyGeometry());
+    });
+
+    geolocation[map_id].on('change:position', function() {
+        var coordinates = geolocation[map_id].getPosition();
+        geoloc_feature[map_id].setGeometry(
+            coordinates ? new ol.geom.Point(coordinates) : null);
+        var v = map[map_id].getView();
+        v.animate({center: coordinates, duration: animation_duration * 2});
+    });
+
+    new ol.layer.Vector({
+        map: map[map_id],
+        source: new ol.source.Vector({
+            features: [geoloc_feature[map_id], accuracy_feature]
+        })
+    });
+    geoloc_activated_message(map_id);
+};
+
+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-street-view" 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);
+        } else {
+            if (!geoloc_activated[this.map_id]) return;
+            if (geolocation[this.map_id].getTracking()){
+                geolocation[this.map_id].setTracking(false);
+                if (display_info) display_info(geoloc_disabled_msg);
+            } else {
+                geolocation[this.map_id].setTracking(true);
+                if (display_info) display_info(geoloc_activated_msg);
+            }
+        }
+        return false;
+    };
+
+    return TrackPositionControl;
+}(ol.control.Control));
+
+
+
 /* base layers */
 
 var source_osm = function(options){
@@ -396,6 +512,7 @@ var vector_source = {};
 var vector_layer = {};
 var vector_features = {};
 
+
 var initialize_base_map = function(map_id, layers){
     center = wkt_format.readGeometry(map_default_center).getCoordinates();
 
@@ -408,11 +525,18 @@ var initialize_base_map = function(map_id, layers){
     });
 
     map[map_id] = new ol.Map({
+        controls: ol.control.defaults().extend([
+            new ol.control.OverviewMap({
+                layers: map_layers[map_id]
+            }),
+            new ol.control.FullScreen(),
+            new ol.control.ScaleLine(),
+            new TrackPositionControl({map_id: map_id})
+        ]),
         target: map_id,
         layers: map_layers[map_id],
         view: map_view[map_id]
     });
-
 }
 
 var redraw_map = function(map_id, layers){