diff options
| -rw-r--r-- | ishtar_common/static/js/ishtar-map.js | 126 | ||||
| -rw-r--r-- | ishtar_common/templates/base.html | 5 | ||||
| -rw-r--r-- | scss/custom.scss | 97 | ||||
| -rw-r--r-- | version.py | 4 |
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(): |