diff options
Diffstat (limited to 'web/js/map-OpenLayers.js')
| -rw-r--r-- | web/js/map-OpenLayers.js | 113 |
1 files changed, 50 insertions, 63 deletions
diff --git a/web/js/map-OpenLayers.js b/web/js/map-OpenLayers.js index 267643898..f5f5f2934 100644 --- a/web/js/map-OpenLayers.js +++ b/web/js/map-OpenLayers.js @@ -1,7 +1,7 @@ // This function might be passed either an OpenLayers.LonLat (so has // lon and lat) or an OpenLayers.Geometry.Point (so has x and y) function fixmystreet_update_pin(lonlat) { - lonlat.transform( + lonlat = lonlat.clone().transform( fixmystreet.map.getProjectionObject(), new OpenLayers.Projection("EPSG:4326") ); @@ -18,6 +18,7 @@ function fixmystreet_update_pin(lonlat) { } $('#side-form-error').html('<h1>' + translation_strings.reporting_a_problem + '</h1><p>' + data.error + '</p>').show(); $('#side-form').hide(); + $('body').removeClass('with-notes'); return; } $('#side-form, #site-logo').show(); @@ -57,7 +58,7 @@ function fixmystreet_update_pin(lonlat) { function fixmystreet_activate_drag() { fixmystreet.drag = new OpenLayers.Control.DragFeature( fixmystreet.markers, { onComplete: function(feature, e) { - fixmystreet_update_pin( feature.geometry.clone() ); + fixmystreet_update_pin( feature.geometry ); } } ); fixmystreet.map.addControl( fixmystreet.drag ); @@ -72,9 +73,6 @@ function fixmystreet_zoomToBounds(bounds) { z = 13; } fixmystreet.map.setCenter(center, z); - if (fixmystreet.state_map && fixmystreet.state_map == 'full') { - fixmystreet.map.pan(-fixmystreet_midpoint(), -25, { animate: false }); - } } function fms_markers_list(pins, transform) { @@ -396,13 +394,10 @@ $(function(){ }, fixmystreet.map_options) ); - // Need to do this here, after the map is created - if ($('html').hasClass('mobile')) { - if (fixmystreet.page == 'around') { - $('#fms_pan_zoom').css({ top: '2.75em' }); - } - } else { - $('#fms_pan_zoom').css({ top: '4.75em' }); + // Need to do this here, after the map is created (might not have been when + // resize() called) + if ($('html').hasClass('mobile') && fixmystreet.page == 'around') { + $('#fms_pan_zoom').css({ top: '2.75em' }); } // Set it up our way @@ -440,10 +435,6 @@ $(function(){ fixmystreet.map.setCenter(centre, fixmystreet.zoom || 3); } - if (fixmystreet.state_map && fixmystreet.state_map == 'full') { - fixmystreet.map.pan(-fixmystreet_midpoint(), -25, { animate: false }); - } - if (document.getElementById('mapForm')) { var click = new OpenLayers.Control.Click(); fixmystreet.map.addControl(click); @@ -470,6 +461,8 @@ $(function(){ fixmystreet.drag.deactivate(); $('#side-form').hide(); $('#side').show(); + $('body').removeClass('with-notes'); + fixmystreet.map.updateSize(); // required after changing the size of the map element $('#sub_map_links').show(); //only on mobile $('#mob_sub_map_links').remove(); @@ -529,12 +522,8 @@ OpenLayers.Control.PanZoomFMS = OpenLayers.Class(OpenLayers.Control.PanZoom, { case "zoomin": case "zoomout": case "zoomworld": - var mid_point = 0; - if (fixmystreet.state_map && fixmystreet.state_map == 'full') { - mid_point = fixmystreet_midpoint(); - } var size = this.map.getSize(), - xy = { x: size.w / 2 + mid_point, y: size.h / 2 }; + xy = { x: size.w / 2, y: size.h / 2 }; switch (btn.action) { case "zoomin": this.map.zoomTo(this.map.getZoom() + 1, xy); @@ -547,6 +536,22 @@ OpenLayers.Control.PanZoomFMS = OpenLayers.Class(OpenLayers.Control.PanZoom, { break; } } + }, + moveTo: function(){}, + draw: function(px) { + // A customised version of .draw() that doesn't specify + // and dimensions/positions for the buttons, since we + // size and position them all using CSS. + OpenLayers.Control.prototype.draw.apply(this, arguments); + this.buttons = []; + this._addButton("panup", "north-mini.png"); + this._addButton("panleft", "west-mini.png"); + this._addButton("panright", "east-mini.png"); + this._addButton("pandown", "south-mini.png"); + this._addButton("zoomin", "zoom-plus-mini.png"); + this._addButton("zoomworld", "zoom-world-mini.png"); + this._addButton("zoomout", "zoom-minus-mini.png"); + return this.div; } }); @@ -560,14 +565,6 @@ OpenLayers.Control.PermalinkFMS = OpenLayers.Class(OpenLayers.Control.Permalink, } var center = this.map.getCenter(); - if ( center && fixmystreet.state_map && fixmystreet.state_map == 'full' ) { - // Translate the permalink co-ords so that 'centre' is accurate - var mid_point = fixmystreet_midpoint(); - var p = this.map.getViewPortPxFromLonLat(center); - p.x += mid_point; - p.y += 25; - center = this.map.getLonLatFromViewPortPx(p); - } var zoom = this.map.getZoom(); if ( alter_zoom ) { @@ -684,9 +681,6 @@ OpenLayers.Control.Click = OpenLayers.Class(OpenLayers.Control, { trigger: function(e) { var cobrand = $('meta[name="cobrand"]').attr('content'); - if (typeof fixmystreet.nav_control != 'undefined') { - fixmystreet.nav_control.disableZoomWheel(); - } var lonlat = fixmystreet.map.getLonLatFromViewPortPx(e.xy); if (fixmystreet.page == 'new') { /* Already have a pin */ @@ -710,48 +704,41 @@ OpenLayers.Control.Click = OpenLayers.Class(OpenLayers.Control, { // Store pin location in form fields, and check coverage of point fixmystreet_update_pin(lonlat); - // Already did this first time map was clicked, so no need to do it again. + // It's possible to invoke the OpenLayers.Control `trigger` callback + // multiple times in a row (eg: by clicking on the map multiple times, + // to reposition your report). + // But there is some stuff we only want to happen the first time you + // switch from the "around" view to the "new" report view. + // So, here we check whether we've already transitioned into the "new" + // report view, and if so, we return from the callback early, + // skipping the remainder of the setup stuff. if (fixmystreet.page == 'new') { + fixmystreet.map.panDuration = 100; + fixmystreet.map.panTo(lonlat); + fixmystreet.map.panDuration = 50; return; } - fixmystreet.map.updateSize(); // might have done, and otherwise Firefox gets confused. + // If there are notes to be displayed, add the .with-notes class + // to make the sidebar wider. + if ($('#report-a-problem-sidebar').length) { + $('body').addClass('with-notes'); + } + /* For some reason on IOS5 if you use the jQuery show method it * doesn't display the JS validation error messages unless you do this * or you cause a screen redraw by changing the phone orientation. - * NB: This has to happen after the call to show() */ + * NB: This has to happen after the call to show() in fixmystreet_update_pin */ if ( navigator.userAgent.match(/like Mac OS X/i)) { document.getElementById('side-form').style.display = 'block'; } $('#side').hide(); - if (typeof heightFix !== 'undefined') { - heightFix('#report-a-problem-sidebar', '.content', 26); - } - - // If we clicked the map somewhere inconvenient - var sidebar = $('#report-a-problem-sidebar'); - if (sidebar.css('position') == 'absolute') { - var w = sidebar.width(), h = sidebar.height(), - o = sidebar.offset(), - $map_boxx = $('#map_box'), bo = $map_boxx.offset(); - // e.xy is relative to top left of map, which might not be top left of page - e.xy.x += bo.left; - e.xy.y += bo.top; - - // 24 and 64 is the width and height of the marker pin - if (e.xy.y <= o.top || (e.xy.x >= o.left && e.xy.x <= o.left + w + 24 && e.xy.y >= o.top && e.xy.y <= o.top + h + 64)) { - // top of the page, pin hidden by header; - // or underneath where the new sidebar will appear - lonlat.transform( - new OpenLayers.Projection("EPSG:4326"), - fixmystreet.map.getProjectionObject() - ); - var p = fixmystreet.map.getViewPortPxFromLonLat(lonlat); - p.x -= midpoint_box_excluding_column(o, w, bo, $map_boxx.width()); - lonlat = fixmystreet.map.getLonLatFromViewPortPx(p); - fixmystreet.map.panTo(lonlat); - } - } + + fixmystreet.map.updateSize(); // required after changing the size of the map element + + fixmystreet.map.panDuration = 100; + fixmystreet.map.panTo(lonlat); + fixmystreet.map.panDuration = 50; $('#sub_map_links').hide(); if ($('html').hasClass('mobile')) { |