improve map display

3 files changed, 46 insertions, 138 deletions

diff --git a/www/around.html b/www/around.html
index 740f77b..edf1393 100644
--- a/www/around.html
+++ b/www/around.html
@@ -1,40 +1,6 @@
-
-        <script type="text/javascript">
-            validation_strings = {
-                update: 'Please enter a message',
-                title: 'Please enter a subject',
-                detail: 'Please enter some details',
-                name: {
-                    required: 'Please enter your name',
-                    validName: 'Please enter your full name, councils need this information – if you do not wish your name to be shown on the site, untick the box below'
-                },
-                category: 'Please choose a category',
-                rznvy: {
-                    required: 'Please enter your email',
-                    email: 'Please enter a valid email'
-                },
-                email: {
-                    required: 'Please enter your email',
-                    email: 'Please enter a valid email'
-                }
-            };
-        </script>
-        <title> Viewing a location :: FixMyStreet</title>
-
     <div id="around-page" class="wrapper" data-role="page">
-        <!--div class="table-cell">
-            <header id="site-header" role="banner">
-                <div class="container">
-                    <span id="site-logo"></span>
-                </div>
-            </header>
-
-            <div id="user-meta">
-
-            </div-->
-
-
-            <div class="container" data-role="content" data-enhance="false">
+            <div class="table-cell">
+            <div class="container" data-enhance="false">
                 <div class="content" role="main">
                     <input type="hidden" name="zoom" value="2">
                     <form action="" method="post" name="mapForm" id="mapForm" enctype="multipart/form-data" class="validate">
@@ -67,10 +33,12 @@
                             <p id="sub_map_links">
                                 <a id="hide_pins_link" rel="nofollow" href="">Hide pins</a>
                                 <a id="all_pins_link" rel="nofollow" href="">Show old</a>
+                                <a rel="nofollow" href="index.html">home</a>
                             </p>
                     </div>
                     </form>
                 </div>
             </div>
         </div>
+    </div>
 
diff --git a/www/js/fixmystreet.js b/www/js/fixmystreet.js
index dac2efb..8ca2705 100644
--- a/www/js/fixmystreet.js
+++ b/www/js/fixmystreet.js
@@ -79,13 +79,15 @@ function tabs(elem, indirect) {
 
 $(document).delegate( '#front-page', 'pageshow', function(event, ui) {
     // Geolocation
+    console.log('frontpage pageshow');
     if (geo_position_js.init() && !$('#geolocate_link').length) {
+        console.log('adding thing');
         $('#postcodeForm').after('<a href="#" id="geolocate_link">&hellip; or locate me automatically</a>');
         $('#geolocate_link').click(getPosition);
     }
 });
 
-$(document).bind('pageinit', function(){
+$(document).bind('pageshow', function(){
     var $html = $('html');
 
     $html.removeClass('no-js').addClass('js');
@@ -96,79 +98,26 @@ $(document).bind('pageinit', function(){
 
     var last_type;
     $(window).resize(function(){
-        var type = $('#site-header').css('borderTopWidth');
-        if (type == '4px') { type = 'mobile'; }
-        else if (type == '0px') { type = 'desktop'; }
-        else { return; }
-        if (last_type == type) { return; }
-        if (type == 'mobile') {
-            $html.addClass('mobile');
-            $('#map_box').prependTo('.content').css({
-                zIndex: '', position: '',
-                top: '', left: '', right: '', bottom: '',
-                width: '', height: '10em',
-                margin: ''
-            });
-            if (typeof fixmystreet !== 'undefined') {
-                fixmystreet.state_map = ''; // XXX
-            }
-            if (typeof fixmystreet !== 'undefined' && fixmystreet.page == 'around') {
-                // Immediately go full screen map if on around page
-                $('#site-header').hide();
-                $('#map_box').prependTo('.wrapper').css({
-                    position: 'absolute',
-                    top: 0, left: 0, right: 0, bottom: 0,
-                    height: 'auto',
-                    margin: 0
-                });
-                $('#fms_pan_zoom').css({ top: '2.75em !important' });
-                $('.big-green-banner')
-                    .addClass('mobile-map-banner')
-                    .appendTo('#map_box')
-                    .text('Place pin on map')
-	            .prepend('<a href="index.html">home</a>');
-            }
-            $('span.report-a-problem-btn').on('click.reportBtn', function(){
-                $('html, body').animate({scrollTop:0}, 500);
-            }).css({ cursor:'pointer' }).on('hover.reportBtn', function(){
-                $(this).toggleClass('hover');
-            });
-        } else {
-            // Make map full screen on non-mobile sizes.
-            $html.removeClass('mobile');
-            var map_pos = 'fixed', map_height = '100%';
-            if ($html.hasClass('ie6')) {
-                map_pos = 'absolute';
-                map_height = $(window).height();
-            }
-            $('#map_box').prependTo('.wrapper').css({
-                zIndex: 0, position: map_pos,
+        var footer = $("div[data-role='footer']:visible"),
+            content = $("div[data-role='content']:visible:visible"),
+            viewHeight = $(window).height(),
+            contentHeight = viewHeight - footer.outerHeight();
+        $html.addClass('mobile');
+        if (typeof fixmystreet !== 'undefined' && fixmystreet.page == 'around') {
+            // Immediately go full screen map if on around page
+            $('#map_box').css({
+                position: 'absolute',
                 top: 0, left: 0, right: 0, bottom: 0,
-                width: '100%', height: map_height,
+                height: contentHeight,
                 margin: 0
             });
-            if (typeof fixmystreet !== 'undefined') {
-                fixmystreet.state_map = 'full';
-            }
-            if (typeof fixmystreet !== 'undefined' && fixmystreet.page == 'around') {
-                // Remove full-screen-ness
-                $('#site-header').show();
-                $('#fms_pan_zoom').css({ top: '4.75em !important' });
-                $('.big-green-banner')
-                    .removeClass('mobile-map-banner')
-                    .prependTo('#side')
-                    .text('Click map to report a problem');
-            }
-            $('span.report-a-problem-btn').css({ cursor:'' }).off('.reportBtn');
+            $('#fms_pan_zoom').css({ top: '2.75em !important' });
         }
-        last_type = type;
     });
 
     //add mobile class if small screen
     $(window).resize();
 
-    $('#pc').focus();
-
     $('input[type=submit]').removeAttr('disabled');
     /*
     $('#mapForm').submit(function() {
diff --git a/www/js/map-OpenLayers.js b/www/js/map-OpenLayers.js
index 8f62e76..caa326d 100644
--- a/www/js/map-OpenLayers.js
+++ b/www/js/map-OpenLayers.js
@@ -541,43 +541,34 @@ OpenLayers.Control.Click = OpenLayers.Class(OpenLayers.Control, {
         }
 
         $('#sub_map_links').hide();
-        if ($('html').hasClass('mobile')) {
-            var $map_box = $('#map_box'),
-                width = $map_box.width(),
-                height = $map_box.height();
-            $map_box.append(
-                '<p id="mob_sub_map_links">' +
-                '<a href="#" id="try_again">Try again</a>' +
-                '<a href="#ok" id="mob_ok">OK</a>' +
-                '</p>'
-            ).css({ position: 'relative', width: width, height: height, marginBottom: '1em' });
-            // Making it relative here makes it much easier to do the scrolling later
-
-            $('.mobile-map-banner').text('Right place?').prepend('<a href="index.html">home</a>');
-
-            // mobile user clicks 'ok' on map
-            /* 
-            $('#mob_ok').toggle(function(){
-                //scroll the height of the map box instead of the offset
-                //of the #side-form or whatever as we will probably want
-                //to do this on other pages where #side-form might not be
-                $('html, body').animate({ scrollTop: height-60 }, 1000, function(){
-                    $('#mob_sub_map_links').addClass('map_complete');
-                    $('#mob_ok').text('MAP');
-                });
-            }, function(){
-                $('html, body').animate({ scrollTop: 0 }, 1000, function(){
-                    $('#mob_sub_map_links').removeClass('map_complete');
-                    $('#mob_ok').text('OK');
-                });
-            });
-            */
-            $('#mob_ok').on('click', function(){
-                localStorage.latitude = $('#fixmystreet\\.latitude').val();
-                localStorage.longitude = $('#fixmystreet\\.longitude').val();
-                $.mobile.changePage('submit-problem.html')
-            });
-        }
+        var $map_box = $('#map_box');
+        $map_box.append(
+            '<p id="mob_sub_map_links">' +
+            '<a href="#" id="try_again">Try again</a>' +
+            '<a href="#ok" id="mob_ok">OK</a>' +
+            '</p>'
+        ); 
+        // .css({ position: 'relative', width: width, height: height, marginBottom: '1em' });
+        // Making it relative here makes it much easier to do the scrolling later
+
+        $('.mobile-map-banner').text('Right place?').prepend('<a href="index.html">home</a>');
+
+        $('#try_again').on('click', function(){
+            fixmystreet.bbox_strategy.activate();
+            fixmystreet.markers.refresh( { force: true } );
+            if ( fixmystreet.state_pins_were_hidden ) {
+                // If we had pins hidden when we clicked map (which had to show the pin layer as I'm doing it in one layer), hide them again.
+                $('#hide_pins_link').click();
+            }
+            fixmystreet.drag.deactivate();
+            $('#sub_map_links').show();
+            $('#mob_sub_map_links').remove();
+        });
+        $('#mob_ok').on('click', function(){
+            localStorage.latitude = $('#fixmystreet\\.latitude').val();
+            localStorage.longitude = $('#fixmystreet\\.longitude').val();
+            $.mobile.changePage('submit-problem.html')
+        });
 
         fixmystreet.page = 'new';
         location.hash = 'report';