diff options
Diffstat (limited to 'ishtar_common')
| -rw-r--r-- | ishtar_common/static/js/ishtar-map.js | 126 | ||||
| -rw-r--r-- | ishtar_common/templates/base.html | 5 |
2 files changed, 129 insertions, 2 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}} |