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

4 files changed, 188 insertions, 44 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){
diff --git a/ishtar_common/templates/base.html b/ishtar_common/templates/base.html
index 29eb17ae6..7807769e5 100644
--- a/ishtar_common/templates/base.html
+++ b/ishtar_common/templates/base.html
@@ -63,8 +63,12 @@
     var item_list_msg = "{% trans "Item list" %}";
     var autorefresh_message_start = "{% trans 'Autorefresh start. The form is disabled.' %}";
     var autorefresh_message_end =  "{% trans 'Autorefresh end. The form is re-enabled.' %}";
+    var track_me_msg = "{% trans "Geolocalize me" %}";
+    var geoloc_activated_msg = "{% trans "Geolocation activated" %}";
+    var geoloc_disabled_msg = "{% trans "Geolocation disabled" %}";
     </script>
     {% endcompress %}
+    <link rel="stylesheet" href="{{STATIC_URL}}ol/ol.css?ver={{VERSION}}">
     <link rel="stylesheet" href="{{STATIC_URL}}bootstrap/bootstrap.css?ver={{VERSION}}">
     <link rel="stylesheet" href="{{STATIC_URL}}font-awesome/css/font-awesome.min.css?ver={{VERSION}}">
     {% compress css %}
@@ -74,7 +78,6 @@
           href="{{STATIC_URL}}datatables/datatables.min.css?ver={{VERSION}}">
     <link rel="stylesheet" href="{{STATIC_URL}}datatables/dataTables.bootstrap4.min.css?ver={{VERSION}}">
     <link type="text/css" rel="stylesheet" href="{{STATIC_URL}}lightgallery/css/lightgallery.css?ver={{VERSION}}">
-    <link rel="stylesheet" href="{{STATIC_URL}}ol/ol.css?ver={{VERSION}}">
     <link rel="stylesheet" href="{{STATIC_URL}}media/styles.css?ver={{VERSION}}">
     {% for url_css in JQGRID_CSS %}<link rel="stylesheet" href="{{url_css}}?ver={{VERSION}}">{% endfor %}
     {{EXTRA_CSS|safe}}
diff --git a/scss/custom.scss b/scss/custom.scss
index 1d7088cab..efeb701b6 100644
--- a/scss/custom.scss
+++ b/scss/custom.scss
@@ -690,46 +690,6 @@ ul.compact{
     overflow-y: auto;
 }
 
-.window-map{
-    width: 100%;
-    height: 300px;
-    padding-bottom: 1em;
-}
-
-.ishtar-table-map{
-    width: 100%;
-    height: 50%;
-    border: solid 1px $gray-500;
-}
-
-.ishtar-map-popup{
-    background-color: #fff;
-    padding: 0.5em 1em;
-    border-radius: 0.5em;
-    border-style: solid;
-    border-width: 1px;
-    border-color: $gray-500;
-    display: none;
-}
-
-.simple-window-content ul,
-.ishtar-map-popup ul {
-    margin: 0;
-    padding: 0;
-    list-style: none;
-}
-
-.ishtar-map-popup::after {
-  content: "";
-  position: absolute;
-  top: 100%;
-  left: 50%;
-  margin-left: -5px;
-  border-width: 5px;
-  border-style: solid;
-  border-color: $gray-700 transparent transparent transparent;
-}
-
 .lg .lg-sub-html{
     text-align: left;
 }
@@ -822,6 +782,63 @@ ul.compact{
 
 /* ui-autocomplete - end */
 
+
+/* map */
+
+.window-map{
+    width: 100%;
+    height: 300px;
+    padding-bottom: 1em;
+}
+
+.ishtar-table-map{
+    width: 100%;
+    height: 50%;
+    border: solid 1px $gray-500;
+    background: url(../media/images/map-background.jpg) repeat;
+}
+
+.ishtar-map-popup{
+    background-color: #fff;
+    padding: 0.5em 1em;
+    border-radius: 0.5em;
+    border-style: solid;
+    border-width: 1px;
+    border-color: $gray-500;
+    display: none;
+}
+
+.simple-window-content ul,
+.ishtar-map-popup ul {
+    margin: 0;
+    padding: 0;
+    list-style: none;
+}
+
+.ishtar-map-popup::after {
+    content: "";
+    position: absolute;
+    top: 100%;
+    left: 50%;
+    margin-left: -5px;
+    border-width: 5px;
+    border-style: solid;
+    border-color: $gray-700 transparent transparent transparent;
+}
+
+.ol-overviewmap {
+    bottom: 3em;
+}
+
+.track-position{
+    left: .5em;
+    top: 5em;
+}
+
+.track-position button{
+    padding-left: 0.1em;
+}
+
 /*
 // required
 @import "bootstrap-src/scss/functions";
diff --git a/version.py b/version.py
index ec2f39953..3a2421043 100644
--- a/version.py
+++ b/version.py
@@ -1,5 +1,5 @@
-# 2.1.dev.32
-VERSION = (2, 1, 'dev', 32)
+# 2.1.dev.33
+VERSION = (2, 1, 'dev', 33)
 
 
 def get_version():