diff options
| -rw-r--r-- | CHANGELOG.md | 1 | ||||
| -rw-r--r-- | templates/web/base/around/postcode_form.html | 4 | ||||
| -rw-r--r-- | web/js/map-OpenLayers.js | 94 |
3 files changed, 98 insertions, 1 deletions
diff --git a/CHANGELOG.md b/CHANGELOG.md index 6ae350b1a..de6210ac5 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -20,6 +20,7 @@ - Set report title autocomplete to off to prevent email autocompleting - Add map filter debouncing to reduce server requests. #2675 - Add XSL to RSS feeds so they look nicer in browsers. + - Display GPS marker on /around map. #2359 - Admin improvements: - Add new roles system, to group permissions and apply to users. #2483 - Contact form emails now include user admin links. diff --git a/templates/web/base/around/postcode_form.html b/templates/web/base/around/postcode_form.html index ac83d4bf4..4e222471e 100644 --- a/templates/web/base/around/postcode_form.html +++ b/templates/web/base/around/postcode_form.html @@ -27,7 +27,9 @@ <input type="hidden" name="filter_category" value="[% c.user.categories_string | html %]"> [% END %] </form> - [%~ SET link_params = {}; + [%~ SET link_params = { + geolocate = 1 + }; IF c.get_param('filter_category'); link_params.filter_category = c.get_param('filter_category'); END; IF c.get_param('filter_group'); link_params.filter_group = c.get_param('filter_group'); END; %] diff --git a/web/js/map-OpenLayers.js b/web/js/map-OpenLayers.js index eb62904b0..7781d845b 100644 --- a/web/js/map-OpenLayers.js +++ b/web/js/map-OpenLayers.js @@ -375,6 +375,96 @@ $.extend(fixmystreet.utils, { new OpenLayers.LonLat( state.lon, state.lat ), state.zoom ); + }, + + setup_geolocation: function() { + if (!OpenLayers.Control.Geolocate || !fixmystreet.map || + !fixmystreet.utils || !fixmystreet.utils.parse_query_string || + fixmystreet.utils.parse_query_string().geolocate !== '1' + ) { + return; + } + + var layer; + + function createCircleOfUncertainty(e) { + var loc = new OpenLayers.Geometry.Point(e.point.x, e.point.y); + return new OpenLayers.Feature.Vector( + OpenLayers.Geometry.Polygon.createRegularPolygon( + loc, + e.position.coords.accuracy, + 40, + 0 + ), + {}, + { + fillColor: '#0074FF', + fillOpacity: 0.3, + strokeWidth: 0 + } + ); + } + function addGeolocationLayer(e) { + layer = new OpenLayers.Layer.Vector('Geolocation'); + fixmystreet.map.addLayer(layer); + layer.setZIndex(fixmystreet.map.getLayersByName("Pins")[0].getZIndex() - 1); + var marker = new OpenLayers.Feature.Vector( + new OpenLayers.Geometry.Point(e.point.x, e.point.y), + { + marker: true + }, + { + graphicName: 'circle', + strokeColor: '#fff', + strokeWidth: 4, + fillColor: '#0074FF', + fillOpacity: 1, + pointRadius: 10 + } + ); + layer.addFeatures([ createCircleOfUncertainty(e), marker ]); + } + + function updateGeolocationMarker(e) { + if (!layer) { + addGeolocationLayer(e); + } else { + // Reuse the existing circle marker so its DOM element (and + // hopefully CSS animation) is preserved. + var marker = layer.getFeaturesByAttribute('marker', true)[0]; + // Can't reuse the background circle feature as there seems to + // be no easy way to replace its geometry with a new + // circle sized according to this location update's accuracy. + // Instead recreate the feature from scratch. + var uncertainty = createCircleOfUncertainty(e); + // Because we're replacing the accuracy circle, it needs to be + // rendered underneath the location marker. In order to do this + // we have to remove all features and re-add, as simply removing + // and re-adding one feature will always render it on top of others. + layer.removeAllFeatures(); + layer.addFeatures([ uncertainty, marker ]); + + // NB The above still breaks CSS animation because the marker + // was removed from the DOM and re-added. We could leave the + // marker alone and just remove the uncertainty circle + // feature, re-add it as a new feature and then manually shift + // its position in the DOM by getting its element's ID from + // uncertainty.geometry.id and moving it before the <circle> + // element. + + // Don't forget to update the position of the GPS marker. + marker.move(new OpenLayers.LonLat(e.point.x, e.point.y)); + } + } + + var control = new OpenLayers.Control.Geolocate({ + bind: false, // Don't want the map to pan to each location + watch: true, + enableHighAccuracy: true + }); + control.events.register("locationupdated", null, updateGeolocationMarker); + fixmystreet.map.addControl(control); + control.activate(); } }); @@ -787,6 +877,10 @@ $.extend(fixmystreet.utils, { setup_inspector_marker_drag(); } + if (fixmystreet.page == "around" || fixmystreet.page == "new") { + fixmystreet.maps.setup_geolocation(); + } + if ( fixmystreet.zoomToBounds ) { zoomToBounds( fixmystreet.markers.getDataExtent() ); } |