diff options
| -rw-r--r-- | web/cobrands/fixmystreet/base.scss | 11 | ||||
| -rw-r--r-- | web/js/map-OpenLayers.js | 65 | ||||
| -rw-r--r-- | web/js/map-OpenStreetMap.js | 2 | ||||
| -rw-r--r-- | web/js/map-bing-ol.js | 22 | ||||
| -rw-r--r-- | web/js/map-streetview.js | 2 |
5 files changed, 79 insertions, 23 deletions
diff --git a/web/cobrands/fixmystreet/base.scss b/web/cobrands/fixmystreet/base.scss index dbba6e69e..46f5dfa4f 100644 --- a/web/cobrands/fixmystreet/base.scss +++ b/web/cobrands/fixmystreet/base.scss @@ -1273,4 +1273,13 @@ ul.breadcrumb { border-bottom:none; margin-bottom:0; } -}
\ No newline at end of file +} + +// OpenLayers fix for navigation being top right +.olControlPanZoom { + right: 44px !important; + top: 4em !important; + left: auto !important; +} + + diff --git a/web/js/map-OpenLayers.js b/web/js/map-OpenLayers.js index 74b44c314..769facdc7 100644 --- a/web/js/map-OpenLayers.js +++ b/web/js/map-OpenLayers.js @@ -183,8 +183,7 @@ function fixmystreet_onload() { $(function(){ - var perm = new OpenLayers.Control.Permalink('map_permalink'); - set_map_config(perm); + set_map_config(); fixmystreet.map = new OpenLayers.Map("map", { controls: fixmystreet.controls, @@ -207,6 +206,7 @@ $(function(){ ); fixmystreet.map.setCenter(centre, fixmystreet.zoom || 3); } + if ($('#map_box').data('size')=='full') { // TODO Work better with window resizing, this is pretty 'set up' only at present var q = $(window).width() / 4; @@ -238,16 +238,6 @@ $(function(){ click.activate(); } - /* To let permalink not be caught by the Click layer, answer found - * at http://www.mail-archive.com/users@openlayers.org/msg12958.html - * Not sure why you can't use eventListeners or events.register... - */ - OpenLayers.Event.observe( perm.element, "click", function(e) { - OpenLayers.Event.stop(e); - location.href = OpenLayers.Event.element(e).href; - return false; - }); - $(window).hashchange(function(){ if (location.hash) { return; } // Okay, back to around view. @@ -370,6 +360,48 @@ OpenLayers.Control.Click = OpenLayers.Class(OpenLayers.Control, { }, trigger: function(e) { + if ($('html').hasClass('mobile') && fixmystreet.page != 'new') { + if (fixmystreet.page == 'mobile-full-map') { + this.locate_report(e); + $('#map_box').css({ + zIndex: 'auto', position: 'static', + width: 'auto', height: '10em', + margin: '0 -1em' + }); + fixmystreet.map.updateSize(); + // Also remove panzoom and permalink? + } else { + this.mobile_full_screen_map(e); + } + } else { + this.locate_report(e); + } + }, + + mobile_full_screen_map: function(e) { + if ( fixmystreet.markers.getVisibility() ) { + $('#hide_pins_link').click(); + } + fixmystreet.map.addControls([ + new OpenLayers.Control.Navigation({ zoomWheelEnabled: false }), + new OpenLayers.Control.Permalink(), + new OpenLayers.Control.PanZoomFMS() + ]); + $('#map_box').css({ + zIndex: 0, position: 'fixed', + top: 0, left: 0, right: 0, bottom: 0, + width: '100%', height: '100%', + margin: 0 + }); + // Also need to move green banner, add close button, etc. + fixmystreet.map.updateSize(); + fixmystreet.page = 'mobile-full-map'; + // To make sure the click control is on top + this.deactivate(); + this.activate(); + }, + + locate_report: function(e) { var lonlat = fixmystreet.map.getLonLatFromViewPortPx(e.xy); if (fixmystreet.page == 'new') { /* Already have a pin */ @@ -431,6 +463,15 @@ OpenLayers.Control.Click = OpenLayers.Class(OpenLayers.Control, { fixmystreet.map.pan(-w, 0, { animate: false }); } } + + if (fixmystreet.page == 'mobile-full-map') { + lonlat.transform( + new OpenLayers.Projection("EPSG:4326"), + fixmystreet.map.getProjectionObject() + ); + fixmystreet.map.setCenter(lonlat); + } + fixmystreet.page = 'new'; location.hash = 'report'; } diff --git a/web/js/map-OpenStreetMap.js b/web/js/map-OpenStreetMap.js index 9d226f6a7..92d98ea4c 100644 --- a/web/js/map-OpenStreetMap.js +++ b/web/js/map-OpenStreetMap.js @@ -3,7 +3,7 @@ function set_map_config(perm) { new OpenLayers.Control.ArgParser(), //new OpenLayers.Control.LayerSwitcher(), new OpenLayers.Control.Navigation(), - perm, + new OpenLayers.Control.Permalink(), new OpenLayers.Control.PermalinkFMS('osm_link', 'http://www.openstreetmap.org/'), new OpenLayers.Control.PanZoomFMS() ]; diff --git a/web/js/map-bing-ol.js b/web/js/map-bing-ol.js index 588f8d45b..2786f63cf 100644 --- a/web/js/map-bing-ol.js +++ b/web/js/map-bing-ol.js @@ -1,12 +1,18 @@ function set_map_config(perm) { - fixmystreet.controls = [ - new OpenLayers.Control.Attribution(), - new OpenLayers.Control.ArgParser(), - new OpenLayers.Control.Navigation({ zoomWheelEnabled: false }), - perm, - //new OpenLayers.Control.ZoomPanel() - new OpenLayers.Control.PanZoomFMS() - ]; + if ($('html').hasClass('mobile')) { + fixmystreet.controls = [ + new OpenLayers.Control.Attribution(), + new OpenLayers.Control.ArgParser() + ]; + } else { + fixmystreet.controls = [ + new OpenLayers.Control.Attribution(), + new OpenLayers.Control.ArgParser(), + new OpenLayers.Control.Navigation({ zoomWheelEnabled: false }), + new OpenLayers.Control.Permalink('map_permalink'), + new OpenLayers.Control.PanZoomFMS() + ]; + } fixmystreet.map_type = OpenLayers.Layer.Bing; } diff --git a/web/js/map-streetview.js b/web/js/map-streetview.js index 99fdca983..9cdd82072 100644 --- a/web/js/map-streetview.js +++ b/web/js/map-streetview.js @@ -3,7 +3,7 @@ function set_map_config(perm) { new OpenLayers.Control.ArgParser(), //new OpenLayers.Control.LayerSwitcher(), new OpenLayers.Control.Navigation(), - perm, + new OpenLayers.Control.Permalink(), new OpenLayers.Control.PanZoomFMS() ]; fixmystreet.map_type = OpenLayers.Layer.StreetView; |