diff options
| -rw-r--r-- | templates/web/base/maps/google.html | 5 | ||||
| -rw-r--r-- | templates/web/base/maps/openlayers.html | 5 | ||||
| -rw-r--r-- | templates/web/bristol/maps/openlayers.html | 5 | ||||
| -rw-r--r-- | templates/web/seesomething/index.html | 6 | ||||
| -rw-r--r-- | web/cobrands/angus/position_map.js | 9 | ||||
| -rw-r--r-- | web/cobrands/fixmystreet/fixmystreet.js | 761 | ||||
| -rw-r--r-- | web/js/fixmystreet.js | 38 | ||||
| -rw-r--r-- | web/js/map-OpenLayers.js | 979 | ||||
| -rw-r--r-- | web/js/map-OpenStreetMap.js | 4 | ||||
| -rw-r--r-- | web/js/map-bing-ol.js | 8 | ||||
| -rw-r--r-- | web/js/map-fms.js | 23 | ||||
| -rw-r--r-- | web/js/map-google-ol.js | 5 | ||||
| -rw-r--r-- | web/js/map-google.js | 497 | ||||
| -rw-r--r-- | web/js/map-streetview.js | 4 | ||||
| -rw-r--r-- | web/js/map-toner-lite.js | 4 | ||||
| -rw-r--r-- | web/js/map-wmts-bristol.js | 10 | ||||
| -rw-r--r-- | web/js/map-wmts-zurich.js | 92 |
17 files changed, 1215 insertions, 1240 deletions
diff --git a/templates/web/base/maps/google.html b/templates/web/base/maps/google.html index 741edec40..0db6af7bf 100644 --- a/templates/web/base/maps/google.html +++ b/templates/web/base/maps/google.html @@ -14,7 +14,8 @@ [% map_html = BLOCK %] <script type="text/javascript"> -var fixmystreet = { +var fixmystreet = fixmystreet || {}; +$.extend(fixmystreet, { 'page': '[% page %]', 'area': [ [% map.area.join(',') %] ], 'all_pins': '[% all_pins %]', @@ -27,7 +28,7 @@ var fixmystreet = { 'zoom': [% map.zoom %], [%- END %] 'pins': [% INCLUDE maps/pins_js.html %] -} +}); </script> <div id="map_box"> [% pre_map %] diff --git a/templates/web/base/maps/openlayers.html b/templates/web/base/maps/openlayers.html index 1e7ae5ce8..c00e28586 100644 --- a/templates/web/base/maps/openlayers.html +++ b/templates/web/base/maps/openlayers.html @@ -6,7 +6,8 @@ <input type="hidden" name="zoom" value="[% map.zoom %]"> <script type="text/javascript"> -var fixmystreet = { +var fixmystreet = fixmystreet || {}; +$.extend(fixmystreet, { 'page': '[% page %]', 'area': [ [% map.area.join(',') %] ], 'all_pins': '[% all_pins %]', @@ -26,7 +27,7 @@ var fixmystreet = { 'key': '[% c.config.BING_MAPS_API_KEY %]', [%- END %] 'pins': [% INCLUDE maps/pins_js.html %] -} +}); </script> <div id="map_box" aria-hidden="true"> [% pre_map %] diff --git a/templates/web/bristol/maps/openlayers.html b/templates/web/bristol/maps/openlayers.html index 4b178e21a..70e06f99f 100644 --- a/templates/web/bristol/maps/openlayers.html +++ b/templates/web/bristol/maps/openlayers.html @@ -6,7 +6,8 @@ <input type="hidden" name="zoom" value="[% map.zoom %]"> <script type="text/javascript"> -var fixmystreet = { +var fixmystreet = fixmystreet || {}; +$.extend(fixmystreet, { 'page': '[% page %]', 'area': [ [% map.area.join(',') %] ], 'all_pins': '[% all_pins %]', @@ -36,7 +37,7 @@ var fixmystreet = { 'origin_x': [% map.origin_x %], 'origin_y': [% map.origin_y %] } -} +}); </script> <div id="map_box" aria-hidden="true"> [% pre_map %] diff --git a/templates/web/seesomething/index.html b/templates/web/seesomething/index.html index cccd15709..dfd982e85 100644 --- a/templates/web/seesomething/index.html +++ b/templates/web/seesomething/index.html @@ -5,7 +5,8 @@ <form action="[% c.uri_for('/around') %]" method="get" name="mapForm" id="mapForm"> <script type="text/javascript"> -var fixmystreet = { +var fixmystreet = fixmystreet || {}; +$.extend(fixmystreet, { 'page': '', 'latitude': 52.505241, 'longitude': -1.815285, @@ -13,8 +14,7 @@ var fixmystreet = { 'numZoomLevels': 5, 'zoomOffset': 13, 'map_type': "" - -} +}); </script> <div id="map_box"> <div id="map"></div> diff --git a/web/cobrands/angus/position_map.js b/web/cobrands/angus/position_map.js index 31ca1c09a..ce4c9df20 100644 --- a/web/cobrands/angus/position_map.js +++ b/web/cobrands/angus/position_map.js @@ -52,14 +52,7 @@ var add_streetlights = (function() { fixmystreet.markers.features[0].move(lonlat); // Need to ensure the correct coords are used for the report - // We can't call fixmystreet_update_pin because that refreshes the category list, - // clobbering the value we stored in the #form_column_id field. - lonlat.transform( - fixmystreet.map.getProjectionObject(), - new OpenLayers.Projection("EPSG:4326") - ); - document.getElementById('fixmystreet.latitude').value = lonlat.lat || lonlat.y; - document.getElementById('fixmystreet.longitude').value = lonlat.lon || lonlat.x; + fixmystreet.maps.update_pin(lonlat); // Make sure the marker that was clicked is drawn on top of its neighbours var layer = e.feature.layer; diff --git a/web/cobrands/fixmystreet/fixmystreet.js b/web/cobrands/fixmystreet/fixmystreet.js index 52a555c58..7c80d90b7 100644 --- a/web/cobrands/fixmystreet/fixmystreet.js +++ b/web/cobrands/fixmystreet/fixmystreet.js @@ -3,6 +3,8 @@ * FixMyStreet JavaScript */ +var fixmystreet = fixmystreet || {}; + /* * Find directionality of content */ @@ -10,124 +12,187 @@ function isR2L() { return !!$('html[dir=rtl]').length; } -/* - * very simple tab function - * - * elem: trigger element, must have an href attribute (so probably needs to be an <a>) - */ -function tabs(elem, indirect) { - var href = elem.attr('href'); - //stupid IE sometimes adds the full uri into the href attr, so trim - var start = href.indexOf('#'), - target = href.slice(start, href.length); - - if (indirect) { - elem = $(target + '_tab'); - } +// Some small jQuery extensions +(function($) { + var opened; - if(!$(target).hasClass('open')) - { - //toggle class on nav - $('.tab-nav .active').removeClass('active'); - elem.addClass('active'); + $.fn.extend({ + // A sliding drawer from the bottom of the page, small version + // that doesn't change the main content at all. + small_drawer: function(id) { + var $this = $(this), d = $('#' + id); + this.toggle(function() { + if (opened) { + opened.click(); + } + if (!$this.addClass('hover').data('setup')) { + d.hide().removeClass('hidden-js').css({ + padding: '1em', + background: '#fff' + }); + $this.data('setup', true); + } + d.slideDown(); + opened = $this; + }, function(e) { + $this.removeClass('hover'); + d.slideUp(); + opened = null; + }); + }, + + // A sliding drawer from the bottom of the page, large version + drawer: function(id, ajax) { + + // The link/button that triggered the drawer + var $this = $(this); + + // A bunch of elements that will come in handy when opening/closing + // the drawer. Because $sw changes its position in the DOM, we capture + // all these elements just once, the first time .drawer() is called. + var $sidebar = $('#map_sidebar'); + var $sw = $this.parents('.shadow-wrap'); + var $swparent = $sw.parent(); + var $drawer = $('#' + id); + + this.toggle(function() { + // Find the specified drawer, or create it if it doesn't exist + if ($drawer.length === 0) { + $drawer = $('<div id="' + id + '">'); + $drawer.appendTo($swparent); + } + + if (!$this.addClass('hover').data('setup')) { + // Optionally fill $drawer with HTML from an AJAX data source + if (ajax) { + var href = $this.attr('href') + ';ajax=1'; + var margin = isR2L() ? 'margin-left' : 'margin-right'; + var $ajax_result = $('<div>').appendTo($drawer); + $ajax_result.html('<p style="text-align:center">Loading</p>'); + $ajax_result.load(href); + } + + // Style up the $drawer + var drawer_top = $(window).height() - $sw.height(); + var drawer_css = { + position: 'fixed', + zIndex: 10, + top: drawer_top, + bottom: 0, + width: $sidebar.css('width'), + paddingLeft: $sidebar.css('padding-left'), + paddingRight: $sidebar.css('padding-right'), + overflow: 'auto', + background: '#fff' + }; + drawer_css[isR2L() ? 'right' : 'left'] = 0; + $drawer.css(drawer_css).removeClass('hidden-js').find('h2').css({ marginTop: 0 }); + $this.data('setup', true); + } - //hide / show the correct tab - $('.tab.open').hide().removeClass('open'); - $(target).show().addClass('open'); + // Insert the .shadow-wrap controls into the top of the drawer. + $sw.addClass('static').prependTo($drawer); + + // Animate the drawer into place, enitrely covering the sidebar. + var sidebar_top_px = $sidebar.position().top; + $drawer.show().animate({ top: sidebar_top_px }, 1000); + + }, function(e) { + // Slide the drawer down, move the .shadow-wrap back to its + // original parent, and hide the drawer for potential re-use later. + $this.removeClass('hover'); + var drawer_top = $(window).height() - $sw.height(); + + $drawer.animate({ top: drawer_top }, 1000, function() { + $sw.removeClass('static').appendTo($swparent); + $drawer.hide(); + }); + }); } -} + }); +})(jQuery); -$(function(){ - var $html = $('html'); +fixmystreet.mobile_reporting = { + apply_ui: function() { + // Creates the "app-like" mobile reporting UI with full screen map + // and special "OK/Cancel" buttons etc. + $('html').addClass('mobile-reporting-map'); - var cobrand = $('meta[name="cobrand"]').attr('content'); + var banner_text = '<a href="/">' + translation_strings.home + '</a> ' + translation_strings.place_pin_on_map; + $('.big-green-banner') + .addClass('mobile-map-banner') + .appendTo('#map_box') + .html(banner_text); + }, + remove_ui: function() { + // Removes the "app-like" mobile reporting UI, reverting all the + // changes made by fixmystreet.mobile_reporting.apply_ui(). + + $('html').removeClass('mobile-reporting-map'); + + var banner_text = translation_strings.report_problem_heading; if (typeof variation !== 'undefined' && variation === 1) { - $('input[name=variant]').val(1); + banner_text = 'Click map to request a fix'; + } + $('.big-green-banner') + .removeClass('mobile-map-banner') + .prependTo('#side') + .html(banner_text); + } +}; + +fixmystreet.resize_to = { + mobile_page: function() { + $('html').addClass('mobile'); + if (typeof fixmystreet !== 'undefined' && fixmystreet.page == 'around') { + fixmystreet.mobile_reporting.apply_ui(); + } + + // On the front page, make it so that the "report a problem" menu item + // scrolls to the top of the page, and has a hover effect, rather than + // just being an innert span. + $('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'); + }); + }, + + desktop_page: function() { + $('html').removeClass('mobile'); + if (typeof fixmystreet !== 'undefined' && fixmystreet.page == 'around') { + fixmystreet.mobile_reporting.remove_ui(); } - // Deal with switching between mobile and desktop versions on resize + // On a desktop, so reset the "Report a problem" nav item to act + // like an innert span again. + $('span.report-a-problem-btn').css({ cursor:'' }).off('.reportBtn'); + } +}; + +fixmystreet.set_up = fixmystreet.set_up || {}; +$.extend(fixmystreet.set_up, { + on_resize: function() { var last_type; - $(window).resize(function(){ + $(window).on('resize', function() { var type = Modernizr.mq('(min-width: 48em)') || $('html.iel8').length ? 'desktop' : 'mobile'; if (last_type == type) { return; } if (type == 'mobile') { - $html.addClass('mobile'); - if (typeof fixmystreet !== 'undefined' && fixmystreet.page == 'around') { - // Creates the "app-like" mobile reporting UI with full screen map - // and special "OK/Cancel" buttons etc. - $html.addClass('mobile-reporting-map'); - - var banner_text = '<a href="/">' + translation_strings.home + '</a> ' + translation_strings.place_pin_on_map; - $('.big-green-banner') - .addClass('mobile-map-banner') - .appendTo('#map_box') - .html(banner_text); - } - $('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'); - }); + fixmystreet.resize_to.mobile_page(); } else { - $html.removeClass('mobile'); - if (typeof fixmystreet !== 'undefined' && fixmystreet.page == 'around') { - // Removes the "app-like" mobile reporting UI, reverting all the - // changes made above. - $html.removeClass('mobile-reporting-map'); - - var banner_text = translation_strings.report_problem_heading; - if (typeof variation !== 'undefined' && variation === 1) { - banner_text = 'Click map to request a fix'; - } - $('.big-green-banner') - .removeClass('mobile-map-banner') - .prependTo('#side') - .html(banner_text); - } - $('span.report-a-problem-btn').css({ cursor:'' }).off('.reportBtn'); + fixmystreet.resize_to.desktop_page(); } last_type = type; }).resize(); + }, - /* - * Report a problem page - */ - //show/hide notes on mobile - $('.mobile #report-a-problem-sidebar').after('<a href="#" class="rap-notes-trigger button-fwd">' + translation_strings.how_to_send + '</a>').hide(); - $('.rap-notes-trigger').click(function(e){ - e.preventDefault(); - //check if we've already moved the notes - if($('.rap-notes').length > 0){ - //if we have, show and hide .content - $('.content').hide(); - $('.rap-notes').show(); - }else{ - //if not, move them and show, hiding .content - $('.content').after('<div class="content rap-notes"></div>').hide(); - $('#report-a-problem-sidebar').appendTo('.rap-notes').show().after('<a href="#" class="rap-notes-close button-back">' + translation_strings.back + '</a>'); - } - $('html, body').scrollTop($('#report-a-problem-sidebar').offset().top); - location.hash = 'rap-notes'; - }); - $('.mobile').on('click', '.rap-notes-close', function(e){ - e.preventDefault(); - //hide notes, show .content - $('.content').show(); - $('.rap-notes').hide(); - $('html, body').scrollTop($('#mob_ok').offset().top); - location.hash = 'report'; - }); - - //move 'skip this step' link on mobile - $('.mobile #skip-this-step').addClass('chevron').wrap('<li>').parent().appendTo('#key-tools'); - - // Set up the Dropzone image uploader - if('Dropzone' in window){ + dropzone: function() { + if ('Dropzone' in window) { Dropzone.autoDiscover = false; } - if('Dropzone' in window && $('#form_photo').length){ + if ('Dropzone' in window && $('#form_photo').length) { var $originalLabel = $('[for="form_photo"]'); var $originalInput = $('#form_photos'); var $dropzone = $('<div>').addClass('dropzone'); @@ -149,16 +214,16 @@ $(function(){ dictInvalidFileType: translation_strings.upload_invalid_file_type, dictMaxFilesExceeded: translation_strings.upload_max_files_exceeded, - fallback: function(){ + fallback: function() { $dropzone.remove(); $originalLabel.attr('for', 'form_photo'); $originalInput.show(); }, - init: function(){ - this.on("addedfile", function(file){ + init: function() { + this.on("addedfile", function(file) { $('input[type=submit]').prop("disabled", true).removeClass('green-btn'); }); - this.on("queuecomplete", function(){ + this.on("queuecomplete", function() { $('input[type=submit]').removeAttr('disabled').addClass('green-btn'); }); this.on("success", function(file, xhrResponse) { @@ -168,20 +233,20 @@ $(function(){ newstr = ids.join(','); $('input[name=upload_fileid]').val(newstr); }); - this.on("error", function(file, errorMessage, xhrResponse){ + this.on("error", function(file, errorMessage, xhrResponse) { }); - this.on("removedfile", function(file){ + this.on("removedfile", function(file) { var ids = $('input[name=upload_fileid]').val().split(','), - newstr = $.grep(ids, function(n){ return (n!=file.server_id); }).join(','); + newstr = $.grep(ids, function(n) { return (n!=file.server_id); }).join(','); $('input[name=upload_fileid]').val(newstr); }); - this.on("maxfilesexceeded", function(file){ + this.on("maxfilesexceeded", function(file) { this.removeFile(file); var $message = $('<div class="dz-message dz-error-message">'); $message.text(translation_strings.upload_max_files_exceeded); $message.prependTo(this.element); - setTimeout(function(){ - $message.slideUp(250, function(){ + setTimeout(function() { + $message.slideUp(250, function() { $message.remove(); }); }, 2000); @@ -200,198 +265,95 @@ $(function(){ photodrop.options.maxFiles -= 1; }); } + }, - /* - * Tabs - */ - //make initial tab active - $('.tab-nav a').first().addClass('active'); - $('.tab').first().addClass('open'); - - //hide other tabs - $('.tab').not('.open').hide(); - - //set up click event - $(".tab-nav").on('click', 'a', function(e){ + mobile_ui_tweaks: function() { + //show/hide notes on mobile + $('.mobile #report-a-problem-sidebar').after('<a href="#" class="rap-notes-trigger button-fwd">' + translation_strings.how_to_send + '</a>').hide(); + $('.rap-notes-trigger').click(function(e) { e.preventDefault(); - tabs($(this)); + //check if we've already moved the notes + if ($('.rap-notes').length > 0) { + //if we have, show and hide .content + $('.content').hide(); + $('.rap-notes').show(); + } else { + //if not, move them and show, hiding .content + $('.content').after('<div class="content rap-notes"></div>').hide(); + $('#report-a-problem-sidebar').appendTo('.rap-notes').show().after('<a href="#" class="rap-notes-close button-back">' + translation_strings.back + '</a>'); + } + $('html, body').scrollTop($('#report-a-problem-sidebar').offset().top); + location.hash = 'rap-notes'; }); - $('.tab_link').click(function(e) { + $('.mobile').on('click', '.rap-notes-close', function(e) { e.preventDefault(); - tabs($(this), 1); + //hide notes, show .content + $('.content').show(); + $('.rap-notes').hide(); + $('html, body').scrollTop($('#mob_ok').offset().top); + location.hash = 'report'; + }); + + //move 'skip this step' link on mobile + $('.mobile #skip-this-step').addClass('chevron').wrap('<li>').parent().appendTo('#key-tools'); + + // nicetable - on mobile shift 'name' col to be a row + $('.mobile .nicetable th.title').remove(); + $('.mobile .nicetable td.title').each(function(i) { + $(this).attr('colspan', 5).insertBefore($(this).parent('tr')).wrap('<tr class="heading" />'); }); + }, - /* - * Skip to nav on mobile - */ - $('.mobile').on('click', '#nav-link', function(e){ + on_mobile_nav_click: function() { + $('.mobile').on('click', '#nav-link', function(e) { e.preventDefault(); var offset = $('#main-nav').offset().top; $('html, body').animate({scrollTop:offset}, 1000); window.location.hash = 'main-nav'; }); + }, - - /* - * Show stuff on input focus - */ - var form_focus_data = $('.form-focus-trigger').map(function() { - return $(this).val(); - }).get().join(''); - if (!form_focus_data) { - $('.form-focus-hidden').hide(); - $('.form-focus-trigger').on('focus', function(){ - $('.form-focus-hidden').fadeIn(500); - }); + map_controls: function() { + //add permalink on desktop, force hide on mobile + //add links container (if its not there) + if (window.cobrand != 'zurich' && !$('.mobile').length) { + if ($('#sub_map_links').length === 0) { + $('<p id="sub_map_links" />').insertAfter($('#map')); + } + $('#sub_map_links').append('<a href="#" id="map_permalink">' + translation_strings.permalink + '</a>'); } - /* Log in with email button */ - var email_form = $('#js-social-email-hide'), - button = $('<button class="btn btn--social btn--social-email">Log in with email</button>'), - form_box = $('<div class="form-box"></div>'); - button.click(function(e){ - e.preventDefault(); - email_form.fadeIn(500); - form_box.hide(); - }); - form_box.append(button).insertBefore(email_form); - if ($('.form-error').length) { - button.click(); + if ($('.mobile').length) { + $('#map_permalink').hide(); + $('#key-tools a.feed').appendTo('#sub_map_links'); + $('#key-tools li:empty').remove(); + $('#report-updates-data').insertAfter($('#map_box')); } - /* - * Show on click - pretty generic - */ - $('.hideshow-trigger').on('click', function(e){ - e.preventDefault(); - var href = $(this).attr('href'), - //stupid IE sometimes adds the full uri into the href attr, so trim - start = href.indexOf('#'), - target = href.slice(start, href.length); - - $(target).removeClass('hidden-js'); - - $(this).hide(); - }); - - /* - * nicetable - on mobile shift 'name' col to be a row - */ - $('.mobile .nicetable th.title').remove(); - $('.mobile .nicetable td.title').each(function(i){ - $(this).attr('colspan', 5).insertBefore($(this).parent('tr')).wrap('<tr class="heading" />'); - }); - // $('.mobile .nicetable tr.heading > td.title').css({'min-width':'300px'}); - // $('.mobile .nicetable tr > td.data').css({'max-width':'12%'}); - - /* - * Map controls prettiness - */ - -// A sliding drawer from the bottom of the page, small version -// that doesn't change the main content at all. -(function($){ - - var opened; - - $.fn.small_drawer = function(id) { - var $this = $(this), d = $('#' + id); - this.toggle(function(){ - if (opened) { - opened.click(); - } - if (!$this.addClass('hover').data('setup')) { - d.hide().removeClass('hidden-js').css({ - padding: '1em', - background: '#fff' - }); - $this.data('setup', true); - } - d.slideDown(); - opened = $this; - }, function(e){ - $this.removeClass('hover'); - d.slideUp(); - opened = null; - }); - }; - -})(jQuery); - -// A sliding drawer from the bottom of the page, large version -$.fn.drawer = function(id, ajax) { - - // The link/button that triggered the drawer - var $this = $(this); - - // A bunch of elements that will come in handy when opening/closing - // the drawer. Because $sw changes its position in the DOM, we capture - // all these elements just once, the first time .drawer() is called. - var $sidebar = $('#map_sidebar'); - var $sw = $this.parents('.shadow-wrap'); - var $swparent = $sw.parent(); - var $drawer = $('#' + id); - - this.toggle(function(){ - // Find the specified drawer, or create it if it doesn't exist - if ($drawer.length === 0) { - $drawer = $('<div id="' + id + '">'); - $drawer.appendTo($swparent); - } - - if (!$this.addClass('hover').data('setup')) { - // Optionally fill $drawer with HTML from an AJAX data source - if (ajax) { - var href = $this.attr('href') + ';ajax=1'; - var margin = isR2L() ? 'margin-left' : 'margin-right'; - var $ajax_result = $('<div>').appendTo($drawer); - $ajax_result.html('<p style="text-align:center">Loading</p>'); - $ajax_result.load(href); - } + //add open/close toggle button on desk + $('#sub_map_links').prepend('<span id="map_links_toggle"> </span>'); - // Style up the $drawer - var drawer_top = $(window).height() - $sw.height(); - var drawer_css = { - position: 'fixed', - zIndex: 10, - top: drawer_top, - bottom: 0, - width: $sidebar.css('width'), - paddingLeft: $sidebar.css('padding-left'), - paddingRight: $sidebar.css('padding-right'), - overflow: 'auto', - background: '#fff' - }; - drawer_css[isR2L() ? 'right' : 'left'] = 0; - $drawer.css(drawer_css).removeClass('hidden-js').find('h2').css({ marginTop: 0 }); - $this.data('setup', true); + //set up map_links_toggle click event + $('#map_links_toggle').on('click', function() { + var sub_map_links_css = {}, + left_right = isR2L() ? 'left' : 'right'; + if ($(this).hasClass('closed')) { + $(this).removeClass('closed'); + sub_map_links_css[left_right] = '0'; + } else { + $(this).addClass('closed'); + sub_map_links_css[left_right] = -$('#sub_map_links').width(); } - - // Insert the .shadow-wrap controls into the top of the drawer. - $sw.addClass('static').prependTo($drawer); - - // Animate the drawer into place, enitrely covering the sidebar. - var sidebar_top_px = $sidebar.position().top; - $drawer.show().animate({ top: sidebar_top_px }, 1000); - - }, function(e){ - // Slide the drawer down, move the .shadow-wrap back to its - // original parent, and hide the drawer for potential re-use later. - $this.removeClass('hover'); - var drawer_top = $(window).height() - $sw.height(); - - $drawer.animate({ top: drawer_top }, 1000, function(){ - $sw.removeClass('static').appendTo($swparent); - $drawer.hide(); - }); + $('#sub_map_links').animate(sub_map_links_css, 1200); }); -}; + }, + map_sidebar_key_tools: function() { if ($('html.mobile').length) { $('#council_wards').hide().removeClass('hidden-js').find('h2').hide(); - $('#key-tool-wards').click(function(e){ + $('#key-tool-wards').click(function(e) { e.preventDefault(); - $('#council_wards').slideToggle('800', function(){ + $('#council_wards').slideToggle('800', function() { $('#key-tool-wards').toggleClass('hover'); }); }); @@ -401,15 +363,58 @@ $.fn.drawer = function(id, ajax) { } $('#key-tool-report-updates').small_drawer('report-updates-data'); $('#key-tool-report-share').small_drawer('report-share'); + }, + + email_login_form: function() { + // Log in with email button + var email_form = $('#js-social-email-hide'), + button = $('<button class="btn btn--social btn--social-email">Log in with email</button>'), + form_box = $('<div class="form-box"></div>'); + button.click(function(e) { + e.preventDefault(); + email_form.fadeIn(500); + form_box.hide(); + }); + form_box.append(button).insertBefore(email_form); + if ($('.form-error').length) { + button.click(); + } + }, + + fancybox_images: function() { + // Fancybox fullscreen images + if (typeof $.fancybox == 'function') { + $('a[rel=fancy]').fancybox({ + 'overlayColor': '#000000' + }); + } + }, + + form_focus_triggers: function() { + // If all of the form-focus-triggers are empty, hide form-focus-hidden. + // (If the triggers aren't empty, then chances are we're being re-shown + // the form after a validation error, so don't hide form-focus-hidden.) + // Unhide form-focus-hidden when any of the triggers are focussed. + var form_focus_data = $('.form-focus-trigger').map(function() { + return $(this).val(); + }).get().join(''); + if (!form_focus_data) { + $('.form-focus-hidden').hide(); + $('.form-focus-trigger').on('focus', function() { + $('.form-focus-hidden').fadeIn(500); + }); + } + }, + alert_page_buttons: function() { // Go directly to RSS feed if RSS button clicked on alert page // (due to not wanting around form to submit, though good thing anyway) - $('body').on('click', '#alert_rss_button', function(e){ + $('body').on('click', '#alert_rss_button', function(e) { e.preventDefault(); var feed = $('input[name=feed][type=radio]:checked').nextAll('a').attr('href'); window.location.href = feed; }); - $('body').on('click', '#alert_email_button', function(e){ + $('body').on('click', '#alert_email_button', function(e) { e.preventDefault(); var form = $('<form/>').attr({ method:'post', action:"/alert/subscribe" }); form.append($('<input name="alert" value="Subscribe me to an email alert" type="hidden" />')); @@ -420,48 +425,15 @@ $.fn.drawer = function(id, ajax) { $('body').append(form); form.submit(); }); + }, - //add permalink on desktop, force hide on mobile - //add links container (if its not there) - if (cobrand != 'zurich' && !$('.mobile').length) { - if ($('#sub_map_links').length === 0) { - $('<p id="sub_map_links" />').insertAfter($('#map')); - } - $('#sub_map_links').append('<a href="#" id="map_permalink">' + translation_strings.permalink + '</a>'); - } - - if ($('.mobile').length) { - $('#map_permalink').hide(); - $('#key-tools a.feed').appendTo('#sub_map_links'); - $('#key-tools li:empty').remove(); - $('#report-updates-data').insertAfter($('#map_box')); - } - //add open/close toggle button on desk - $('#sub_map_links').prepend('<span id="map_links_toggle"> </span>'); - - //set up map_links_toggle click event - $('#map_links_toggle').on('click', function(){ - var sub_map_links_css = {}, - left_right = isR2L() ? 'left' : 'right'; - if ($(this).hasClass('closed')) { - $(this).removeClass('closed'); - sub_map_links_css[left_right] = '0'; - } else { - $(this).addClass('closed'); - sub_map_links_css[left_right] = -$('#sub_map_links').width(); - } - $('#sub_map_links').animate(sub_map_links_css, 1200); - }); - - - /* - * Add close buttons for .promo's - */ - if($('.promo').length){ + promo_elements: function() { + // Add close buttons for .promo's + if ($('.promo').length) { $('.promo').append('<a href="#" class="close-promo">x</a>'); } //only close its own parent - $('.promo').on('click', '.close-promo', function(e){ + $('.promo').on('click', '.close-promo', function(e) { e.preventDefault(); $(this).parent('.promo').animate({ 'height':0, @@ -473,14 +445,159 @@ $.fn.drawer = function(id, ajax) { queue:false }).fadeOut(500); }); + } +}); - /* - * Fancybox fullscreen images - */ - if (typeof $.fancybox == 'function') { - $('a[rel=fancy]').fancybox({ - 'overlayColor': '#000000' +fixmystreet.update_pin = function(lonlat) { + fixmystreet.maps.update_pin(lonlat); + + $.getJSON('/report/new/ajax', { + latitude: $('#fixmystreet\\.latitude').val(), + longitude: $('#fixmystreet\\.longitude').val() + }, function(data) { + if (data.error) { + if (!$('#side-form-error').length) { + $('<div id="side-form-error"/>').insertAfter($('#side-form')); + } + $('#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(); + var old_category = $("select#form_category").val(); + $('#councils_text').html(data.councils_text); + $('#form_category_row').html(data.category); + if ($("select#form_category option[value=\""+old_category+"\"]").length) { + $("select#form_category").val(old_category); + } + if ( data.extra_name_info && !$('#form_fms_extra_title').length ) { + // there might be a first name field on some cobrands + var lb = $('#form_first_name').prev(); + if ( lb.length === 0 ) { lb = $('#form_name').prev(); } + lb.before(data.extra_name_info); + } + + // If the category filter appears on the map and the user has selected + // something from it, then pre-fill the category field in the report, + // if it's a value already present in the drop-down. + var category = $("#filter_categories").val(); + if (category !== undefined && $("#form_category option[value="+category+"]").length) { + $("#form_category").val(category); + } + + var category_select = $("select#form_category"); + if (category_select.val() != '-- Pick a category --') { + category_select.change(); + } + }); + + if (!$('#side-form-error').is(':visible')) { + $('#side-form, #site-logo').show(); + window.scrollTo(0, 0); + } + +}; + +fixmystreet.begin_report = function(lonlat) { + fixmystreet.maps.begin_report(lonlat); + + // Store pin location in form fields, and check coverage of point + fixmystreet.update_pin(lonlat); + + // It's possible to invoke this 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') { + if (fixmystreet.map.panTo) { + fixmystreet.map.panDuration = 100; + fixmystreet.map.panTo(lonlat); + fixmystreet.map.panDuration = 50; + } + return; + } + + // 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() in fixmystreet.update_pin */ + if ( navigator.userAgent.match(/like Mac OS X/i)) { + document.getElementById('side-form').style.display = 'block'; + } + $('#side').hide(); + + if (fixmystreet.map.updateSize) { + fixmystreet.map.updateSize(); // required after changing the size of the map element + } + if (fixmystreet.map.panTo) { + fixmystreet.map.panDuration = 100; + fixmystreet.map.panTo(lonlat); + fixmystreet.map.panDuration = 50; + } + + $('#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">' + + translation_strings.try_again + + '</a>' + + '<a href="#ok" id="mob_ok">' + + translation_strings.ok + + '</a>' + + '</p>') + .css({ + position: 'relative', // Stop map being absolute, so reporting form doesn't get hidden + width: width, + height: height + }); + + $('.mobile-map-banner').html('<a href="/">' + translation_strings.home + '</a> ' + translation_strings.right_place); + + // 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(translation_strings.map); + }); + }, function(){ + $('html, body').animate({ scrollTop: 0 }, 1000, function(){ + $('#mob_sub_map_links').removeClass('map_complete'); + $('#mob_ok').text(translation_strings.ok); + }); }); } + fixmystreet.page = 'new'; + location.hash = 'report'; +}; + +$(function() { + window.cobrand = $('meta[name="cobrand"]').attr('content'); + + if (typeof variation !== 'undefined' && variation === 1) { + $('input[name=variant]').val(1); + } + + $.each(fixmystreet.set_up, function(setup_name, setup_func) { + setup_func(); + }); }); diff --git a/web/js/fixmystreet.js b/web/js/fixmystreet.js index 0a15982f5..7b71529ce 100644 --- a/web/js/fixmystreet.js +++ b/web/js/fixmystreet.js @@ -1,20 +1,12 @@ -/* - * fixmystreet.js - * FixMyStreet JavaScript used by all cobrands. - * With the JavaScript written more proper like. - */ +var fixmystreet = fixmystreet || {}; -(function($){ +fixmystreet.set_up = fixmystreet.set_up || {}; -/* - Deal with changes to category by asking for details from the server. - */ -$(function(){ - - var $html = $('html'); +$.extend(fixmystreet.set_up, { + basics: function() { // Add a class to the whole page saying JavaScript is enabled (for CSS and so on) - $html.removeClass('no-js').addClass('js'); + $('html').removeClass('no-js').addClass('js'); // Preload the new report pin if ( typeof fixmystreet !== 'undefined' && typeof fixmystreet.pin_prefix !== 'undefined' ) { @@ -28,7 +20,9 @@ $(function(){ // In case we've come here by clicking back to a form that disabled a submit button $('input[type=submit]').removeAttr('disabled'); + }, + questionnaire: function() { // Questionnaire hide/showings if (!$('#been_fixed_no').prop('checked') && !$('#been_fixed_unknown').prop('checked')) { $('.js-another-questionnaire').hide(); @@ -42,9 +36,9 @@ $(function(){ $('#been_fixed_yes').on('click', function() { $('.js-another-questionnaire').hide('fast'); }); + }, - // Form validation - + form_validation: function() { // FIXME - needs to use translated string jQuery.validator.addMethod('validCategory', function(value, element) { return this.optional(element) || value != '-- Pick a category --'; }, translation_strings.category ); @@ -133,8 +127,9 @@ $(function(){ $('#form_rznvy').removeClass(); $('#email').removeClass(); }); + }, - // Geolocation + geolocation: function() { if (geo_position_js.init()) { var link = '<a href="LINK" id="geolocate_link">… ' + translation_strings.geolocate + '</a>'; $('form[action="/alert/list"]').append(link.replace('LINK','/alert/list')); @@ -176,7 +171,10 @@ $(function(){ }); }); } + }, + category_change: function() { + // Deal with changes to category by asking for details from the server. // Delegation is necessary because #form_category may be replaced during the lifetime of the page $("#problem_form").on("change.category", "select#form_category", function(){ var args = { @@ -199,12 +197,12 @@ $(function(){ } }); }); + }, + add_validation: function() { // Map form doesn't work in some browsers with HTML5 validation and hidden form, so // we disable validation by default, and add it in the JS case. - // For some reason, the removeAttr doesn't work if we place it at beginning. $('#mapForm').removeAttr('novalidate'); -}); - -})(jQuery); + } +}); diff --git a/web/js/map-OpenLayers.js b/web/js/map-OpenLayers.js index 361bd0e96..797502533 100644 --- a/web/js/map-OpenLayers.js +++ b/web/js/map-OpenLayers.js @@ -1,498 +1,489 @@ -// 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 = lonlat.clone().transform( - fixmystreet.map.getProjectionObject(), - new OpenLayers.Projection("EPSG:4326") - ); - document.getElementById('fixmystreet.latitude').value = lonlat.lat || lonlat.y; - document.getElementById('fixmystreet.longitude').value = lonlat.lon || lonlat.x; - - $.getJSON('/report/new/ajax', { - latitude: $('#fixmystreet\\.latitude').val(), - longitude: $('#fixmystreet\\.longitude').val() - }, function(data) { - if (data.error) { - if (!$('#side-form-error').length) { - $('<div id="side-form-error"/>').insertAfter($('#side-form')); - } - $('#side-form-error').html('<h1>' + translation_strings.reporting_a_problem + '</h1><p>' + data.error + '</p>').show(); - $('#side-form').hide(); - $('body').removeClass('with-notes'); - return; +var fixmystreet = fixmystreet || {}; + +(function() { + + fixmystreet.maps = { + // This function might be passed either an OpenLayers.LonLat (so has + // lon and lat) or an OpenLayers.Geometry.Point (so has x and y) + update_pin: function(lonlat) { + lonlat = lonlat.clone().transform( + fixmystreet.map.getProjectionObject(), + new OpenLayers.Projection("EPSG:4326") + ); + + document.getElementById('fixmystreet.latitude').value = lonlat.lat || lonlat.y; + document.getElementById('fixmystreet.longitude').value = lonlat.lon || lonlat.x; + }, + + begin_report: function(lonlat) { + if (fixmystreet.page == 'new') { + /* Already have a pin */ + fixmystreet.markers.features[0].move(lonlat); + } else { + var markers = fixmystreet.maps.markers_list( [ [ lonlat.lat, lonlat.lon, 'green' ] ], false ); + fixmystreet.bbox_strategy.deactivate(); + fixmystreet.markers.removeAllFeatures(); + fixmystreet.markers.addFeatures( markers ); + drag.activate(); } - $('#side-form, #site-logo').show(); - var old_category = $("select#form_category").val(); - $('#councils_text').html(data.councils_text); - $('#form_category_row').html(data.category); - if ($("select#form_category option[value=\""+old_category+"\"]").length) { - $("select#form_category").val(old_category); + + // check to see if markers are visible. We click the + // link so that it updates the text in case they go + // back + if ( ! fixmystreet.markers.getVisibility() ) { + fixmystreet.state_pins_were_hidden = true; + $('#hide_pins_link').click(); } - if ( data.extra_name_info && !$('#form_fms_extra_title').length ) { - // there might be a first name field on some cobrands - var lb = $('#form_first_name').prev(); - if ( lb.length === 0 ) { lb = $('#form_name').prev(); } - lb.before(data.extra_name_info); + }, + + markers_list: function(pins, transform) { + var markers = []; + var size = fixmystreet.maps.marker_size_for_zoom(fixmystreet.map.getZoom() + fixmystreet.zoomOffset); + for (var i=0; i<pins.length; i++) { + var pin = pins[i]; + var loc = new OpenLayers.Geometry.Point(pin[1], pin[0]); + if (transform) { + // The Strategy does this for us, so don't do it in that case. + loc.transform( + new OpenLayers.Projection("EPSG:4326"), + fixmystreet.map.getProjectionObject() + ); + } + var marker = new OpenLayers.Feature.Vector(loc, { + colour: pin[2], + size: pin[5] || size, + faded: 0, + id: pin[3], + title: pin[4] || '' + }); + markers.push( marker ); } + return markers; + }, - // If the category filter appears on the map and the user has selected - // something from it, then pre-fill the category field in the report, - // if it's a value already present in the drop-down. - var category = $("#filter_categories").val(); - if (category !== undefined && $("#form_category option[value="+category+"]").length) { - $("#form_category").val(category); + markers_resize: function() { + var size = fixmystreet.maps.marker_size_for_zoom(fixmystreet.map.getZoom() + fixmystreet.zoomOffset); + for (var i = 0; i < fixmystreet.markers.features.length; i++) { + fixmystreet.markers.features[i].attributes.size = size; } + fixmystreet.markers.redraw(); + }, - var category_select = $("select#form_category"); - if (category_select.val() != '-- Pick a category --') { - category_select.change(); + marker_size_for_zoom: function(zoom) { + if (zoom >= 15) { + return 'normal'; + } else if (zoom >= 13) { + return 'small'; + } else { + return 'mini'; } - }); + } + }; - if (!$('#side-form-error').is(':visible')) { - $('#side-form, #site-logo').show(); - window.scrollTo(0, 0); - } -} - -function fixmystreet_activate_drag() { - fixmystreet.drag = new OpenLayers.Control.DragFeature( fixmystreet.markers, { - onComplete: function(feature, e) { - fixmystreet_update_pin( feature.geometry ); - } - } ); - fixmystreet.map.addControl( fixmystreet.drag ); - fixmystreet.drag.activate(); -} - -function fixmystreet_zoomToBounds(bounds) { - if (!bounds) { return; } - var center = bounds.getCenterLonLat(); - var z = fixmystreet.map.getZoomForExtent(bounds); - if ( z < 13 && $('html').hasClass('mobile') ) { - z = 13; - } - fixmystreet.map.setCenter(center, z); -} - -function fms_markers_list(pins, transform) { - var markers = []; - var size = fms_marker_size_for_zoom(fixmystreet.map.getZoom() + fixmystreet.zoomOffset); - for (var i=0; i<pins.length; i++) { - var pin = pins[i]; - var loc = new OpenLayers.Geometry.Point(pin[1], pin[0]); - if (transform) { - // The Strategy does this for us, so don't do it in that case. - loc.transform( - new OpenLayers.Projection("EPSG:4326"), - fixmystreet.map.getProjectionObject() - ); + var drag = { + activate: function() { + this._drag = new OpenLayers.Control.DragFeature( fixmystreet.markers, { + onComplete: function(feature, e) { + fixmystreet.update_pin( feature.geometry ); + } + } ); + fixmystreet.map.addControl( this._drag ); + this._drag.activate(); + }, + deactivate: function() { + this._drag.deactivate(); } - var marker = new OpenLayers.Feature.Vector(loc, { - colour: pin[2], - size: pin[5] || size, - faded: 0, - id: pin[3], - title: pin[4] || '' - }); - markers.push( marker ); - } - return markers; -} - -function fms_marker_size_for_zoom(zoom) { - if (zoom >= 15) { - return 'normal'; - } else if (zoom >= 13) { - return 'small'; - } else { - return 'mini'; - } -} + }; -function fms_markers_resize() { - var size = fms_marker_size_for_zoom(fixmystreet.map.getZoom() + fixmystreet.zoomOffset); - for (var i = 0; i < fixmystreet.markers.features.length; i++) { - fixmystreet.markers.features[i].attributes.size = size; - } - fixmystreet.markers.redraw(); -} - -// `markers.redraw()` in fms_markers_highlight will trigger an -// `overFeature` event if the mouse cursor is still over the same -// marker on the map, which would then run fms_markers_highlight -// again, causing an infinite flicker while the cursor remains over -// the same marker. We really only want to redraw the markers when -// the cursor moves from one marker to another (ie: when there is an -// overFeature followed by an outFeature followed by an overFeature). -// Therefore, we keep track of the previous event in -// fixmystreet.latest_map_hover_event and only call fms_markers_highlight -// if we know the previous event was different to the current one. -// (See the `overFeature` and `outFeature` callbacks inside of -// fixmystreet.select_feature). - -function fms_markers_highlight(problem_id) { - for (var i = 0; i < fixmystreet.markers.features.length; i++) { - if (typeof problem_id == 'undefined') { - // There is no highlighted marker, so unfade this marker - fixmystreet.markers.features[i].attributes.faded = 0; - } else if (problem_id == fixmystreet.markers.features[i].attributes.id) { - // This is the highlighted marker, unfade it - fixmystreet.markers.features[i].attributes.faded = 0; - } else { - // This is not the hightlighted marker, fade it - fixmystreet.markers.features[i].attributes.faded = 1; + function zoomToBounds(bounds) { + if (!bounds) { return; } + var center = bounds.getCenterLonLat(); + var z = fixmystreet.map.getZoomForExtent(bounds); + if ( z < 13 && $('html').hasClass('mobile') ) { + z = 13; } + fixmystreet.map.setCenter(center, z); } - fixmystreet.markers.redraw(); -} -function fms_sidebar_highlight(problem_id) { - if (typeof problem_id !== 'undefined') { - var $a = $('.item-list--reports a[href$="' + problem_id + '"]'); - $a.parent().addClass('hovered'); - } else { - $('.item-list--reports .hovered').removeClass('hovered'); - } -} - -function fms_marker_click(problem_id) { - var $a = $('.item-list--reports a[href$="' + problem_id + '"]'); - $a[0] && $a[0].click(); -} - -function fms_categories_or_status_changed() { - // If the category or status has changed we need to re-fetch map markers - fixmystreet.markers.refresh({force: true}); -} - -function fixmystreet_onload() { - if ( fixmystreet.area.length ) { - for (var i=0; i<fixmystreet.area.length; i++) { - var area = new OpenLayers.Layer.Vector("KML", { - strategies: [ new OpenLayers.Strategy.Fixed() ], - protocol: new OpenLayers.Protocol.HTTP({ - url: "/mapit/area/" + fixmystreet.area[i] + ".kml?simplify_tolerance=0.0001", - format: new OpenLayers.Format.KML() - }) - }); - fixmystreet.map.addLayer(area); - if ( fixmystreet.area.length == 1 ) { - area.events.register('loadend', null, function(a,b,c) { - if ( fixmystreet.area_format ) { - area.styleMap.styles['default'].defaultStyle = fixmystreet.area_format; - } - fixmystreet_zoomToBounds( area.getDataExtent() ); - }); + // `markers.redraw()` in markers_highlight will trigger an + // `overFeature` event if the mouse cursor is still over the same + // marker on the map, which would then run markers_highlight + // again, causing an infinite flicker while the cursor remains over + // the same marker. We really only want to redraw the markers when + // the cursor moves from one marker to another (ie: when there is an + // overFeature followed by an outFeature followed by an overFeature). + // Therefore, we keep track of the previous event in + // fixmystreet.latest_map_hover_event and only call markers_highlight + // if we know the previous event was different to the current one. + // (See the `overFeature` and `outFeature` callbacks inside of + // fixmystreet.select_feature). + + function markers_highlight(problem_id) { + for (var i = 0; i < fixmystreet.markers.features.length; i++) { + if (typeof problem_id == 'undefined') { + // There is no highlighted marker, so unfade this marker + fixmystreet.markers.features[i].attributes.faded = 0; + } else if (problem_id == fixmystreet.markers.features[i].attributes.id) { + // This is the highlighted marker, unfade it + fixmystreet.markers.features[i].attributes.faded = 0; + } else { + // This is not the hightlighted marker, fade it + fixmystreet.markers.features[i].attributes.faded = 1; } } + fixmystreet.markers.redraw(); } - var pin_layer_style_map = new OpenLayers.StyleMap({ - 'default': new OpenLayers.Style({ - graphicTitle: "${title}", - graphicOpacity: 1, - graphicZIndex: 11, - backgroundGraphicZIndex: 10 - }) - }); - pin_layer_style_map.addUniqueValueRules('default', 'size', { - 'normal': { - externalGraphic: fixmystreet.pin_prefix + "pin-${colour}.png", - graphicWidth: 48, - graphicHeight: 64, - graphicXOffset: -24, - graphicYOffset: -64, - backgroundGraphic: fixmystreet.pin_prefix + "pin-shadow.png", - backgroundWidth: 60, - backgroundHeight: 30, - backgroundXOffset: -7, - backgroundYOffset: -30, - popupYOffset: -40 - }, - 'big': { - externalGraphic: fixmystreet.pin_prefix + "pin-${colour}-big.png", - graphicWidth: 78, - graphicHeight: 105, - graphicXOffset: -39, - graphicYOffset: -105, - backgroundGraphic: fixmystreet.pin_prefix + "pin-shadow-big.png", - backgroundWidth: 88, - backgroundHeight: 40, - backgroundXOffset: -10, - backgroundYOffset: -35 - }, - 'small': { - externalGraphic: fixmystreet.pin_prefix + "pin-${colour}-small.png", - graphicWidth: 24, - graphicHeight: 32, - graphicXOffset: -12, - graphicYOffset: -32, - backgroundGraphic: fixmystreet.pin_prefix + "pin-shadow-small.png", - backgroundWidth: 30, - backgroundHeight: 15, - backgroundXOffset: -4, - backgroundYOffset: -15, - popupYOffset: -20 - }, - 'mini': { - externalGraphic: fixmystreet.pin_prefix + "pin-${colour}-mini.png", - graphicWidth: 16, - graphicHeight: 20, - graphicXOffset: -8, - graphicYOffset: -20, - popupYOffset: -10 - } - }); - pin_layer_style_map.addUniqueValueRules('default', 'faded', { - 0: { - graphicOpacity: 1 - }, - 1: { - graphicOpacity: 0.15 + function sidebar_highlight(problem_id) { + if (typeof problem_id !== 'undefined') { + var $a = $('.item-list--reports a[href$="' + problem_id + '"]'); + $a.parent().addClass('hovered'); + } else { + $('.item-list--reports .hovered').removeClass('hovered'); } - }); - var pin_layer_options = { - rendererOptions: { - yOrdering: true - }, - styleMap: pin_layer_style_map - }; - if (fixmystreet.page == 'around') { - fixmystreet.bbox_strategy = fixmystreet.bbox_strategy || new OpenLayers.Strategy.FixMyStreet(); - pin_layer_options.strategies = [ fixmystreet.bbox_strategy ]; - pin_layer_options.protocol = new OpenLayers.Protocol.FixMyStreet({ - url: '/ajax', - params: fixmystreet.all_pins ? { all_pins: 1 } : { }, - format: new OpenLayers.Format.FixMyStreet() - }); } - fixmystreet.markers = new OpenLayers.Layer.Vector("Pins", pin_layer_options); - fixmystreet.markers.events.register( 'loadend', fixmystreet.markers, function(evt) { - if (fixmystreet.map.popups.length) { - fixmystreet.map.removePopup(fixmystreet.map.popups[0]); - } - }); - var markers = fms_markers_list( fixmystreet.pins, true ); - fixmystreet.markers.addFeatures( markers ); - - if (fixmystreet.page == 'around' || fixmystreet.page == 'reports' || fixmystreet.page == 'my') { - fixmystreet.select_feature = new OpenLayers.Control.SelectFeature( - fixmystreet.markers, - { - hover: true, - // Override clickFeature so that we can use it even though - // hover is true. http://gis.stackexchange.com/a/155675 - clickFeature: function (feature) { - fms_marker_click(feature.attributes.id); - }, - overFeature: function (feature) { - if (fixmystreet.latest_map_hover_event != 'overFeature') { - document.getElementById('map').style.cursor = 'pointer'; - fms_markers_highlight(feature.attributes.id); - fms_sidebar_highlight(feature.attributes.id); - fixmystreet.latest_map_hover_event = 'overFeature'; - } - }, - outFeature: function (feature) { - if (fixmystreet.latest_map_hover_event != 'outFeature') { - document.getElementById('map').style.cursor = ''; - fms_markers_highlight(); - fms_sidebar_highlight(); - fixmystreet.latest_map_hover_event = 'outFeature'; - } - } - } - ); - fixmystreet.map.addControl( fixmystreet.select_feature ); - fixmystreet.select_feature.activate(); - fixmystreet.map.events.register( 'zoomend', null, fms_markers_resize ); - - // If the category filter dropdown exists on the page set up the - // event handlers to populate it and react to it changing - if ($("select#filter_categories").length) { - $("body").on("change", "#filter_categories", fms_categories_or_status_changed); - } - // Do the same for the status dropdown - if ($("select#statuses").length) { - $("body").on("change", "#statuses", fms_categories_or_status_changed); - } - } else if (fixmystreet.page == 'new') { - fixmystreet_activate_drag(); + function marker_click(problem_id) { + var $a = $('.item-list--reports a[href$="' + problem_id + '"]'); + $a[0] && $a[0].click(); } - fixmystreet.map.addLayer(fixmystreet.markers); - if ( fixmystreet.zoomToBounds ) { - fixmystreet_zoomToBounds( fixmystreet.markers.getDataExtent() ); + function categories_or_status_changed() { + // If the category or status has changed we need to re-fetch map markers + fixmystreet.markers.refresh({force: true}); } - $('#hide_pins_link').click(function(e) { - e.preventDefault(); - var showhide = [ - 'Show pins', 'Hide pins', - 'Dangos pinnau', 'Cuddio pinnau', - "Vis nåler", "Skjul nåler", - "Zeige Stecknadeln", "Stecknadeln ausblenden" - ]; - for (var i=0; i<showhide.length; i+=2) { - if (this.innerHTML == showhide[i]) { - fixmystreet.markers.setVisibility(true); - fixmystreet.select_feature.activate(); - this.innerHTML = showhide[i+1]; - } else if (this.innerHTML == showhide[i+1]) { - fixmystreet.markers.setVisibility(false); - fixmystreet.select_feature.deactivate(); - this.innerHTML = showhide[i]; + function onload() { + if ( fixmystreet.area.length ) { + for (var i=0; i<fixmystreet.area.length; i++) { + var area = new OpenLayers.Layer.Vector("KML", { + strategies: [ new OpenLayers.Strategy.Fixed() ], + protocol: new OpenLayers.Protocol.HTTP({ + url: "/mapit/area/" + fixmystreet.area[i] + ".kml?simplify_tolerance=0.0001", + format: new OpenLayers.Format.KML() + }) + }); + fixmystreet.map.addLayer(area); + if ( fixmystreet.area.length == 1 ) { + area.events.register('loadend', null, function(a,b,c) { + if ( fixmystreet.area_format ) { + area.styleMap.styles['default'].defaultStyle = fixmystreet.area_format; + } + zoomToBounds( area.getDataExtent() ); + }); + } } } - }); - $('#all_pins_link').click(function(e) { - e.preventDefault(); - fixmystreet.markers.setVisibility(true); - var texts = [ - 'en', 'Show old', 'Hide old', - 'nb', 'Vis gamle', 'Skjul gamle', - 'cy', 'Cynnwys hen adroddiadau', 'Cuddio hen adroddiadau' - ]; - for (var i=0; i<texts.length; i+=3) { - if (this.innerHTML == texts[i+1]) { - this.innerHTML = texts[i+2]; - fixmystreet.markers.protocol.options.params = { all_pins: 1 }; - fixmystreet.markers.refresh( { force: true } ); - lang = texts[i]; - } else if (this.innerHTML == texts[i+2]) { - this.innerHTML = texts[i+1]; - fixmystreet.markers.protocol.options.params = { }; - fixmystreet.markers.refresh( { force: true } ); - lang = texts[i]; + var pin_layer_style_map = new OpenLayers.StyleMap({ + 'default': new OpenLayers.Style({ + graphicTitle: "${title}", + graphicOpacity: 1, + graphicZIndex: 11, + backgroundGraphicZIndex: 10 + }) + }); + pin_layer_style_map.addUniqueValueRules('default', 'size', { + 'normal': { + externalGraphic: fixmystreet.pin_prefix + "pin-${colour}.png", + graphicWidth: 48, + graphicHeight: 64, + graphicXOffset: -24, + graphicYOffset: -64, + backgroundGraphic: fixmystreet.pin_prefix + "pin-shadow.png", + backgroundWidth: 60, + backgroundHeight: 30, + backgroundXOffset: -7, + backgroundYOffset: -30, + popupYOffset: -40 + }, + 'big': { + externalGraphic: fixmystreet.pin_prefix + "pin-${colour}-big.png", + graphicWidth: 78, + graphicHeight: 105, + graphicXOffset: -39, + graphicYOffset: -105, + backgroundGraphic: fixmystreet.pin_prefix + "pin-shadow-big.png", + backgroundWidth: 88, + backgroundHeight: 40, + backgroundXOffset: -10, + backgroundYOffset: -35 + }, + 'small': { + externalGraphic: fixmystreet.pin_prefix + "pin-${colour}-small.png", + graphicWidth: 24, + graphicHeight: 32, + graphicXOffset: -12, + graphicYOffset: -32, + backgroundGraphic: fixmystreet.pin_prefix + "pin-shadow-small.png", + backgroundWidth: 30, + backgroundHeight: 15, + backgroundXOffset: -4, + backgroundYOffset: -15, + popupYOffset: -20 + }, + 'mini': { + externalGraphic: fixmystreet.pin_prefix + "pin-${colour}-mini.png", + graphicWidth: 16, + graphicHeight: 20, + graphicXOffset: -8, + graphicYOffset: -20, + popupYOffset: -10 } + }); + pin_layer_style_map.addUniqueValueRules('default', 'faded', { + 0: { + graphicOpacity: 1 + }, + 1: { + graphicOpacity: 0.15 + } + }); + var pin_layer_options = { + rendererOptions: { + yOrdering: true + }, + styleMap: pin_layer_style_map + }; + if (fixmystreet.page == 'around') { + fixmystreet.bbox_strategy = fixmystreet.bbox_strategy || new OpenLayers.Strategy.FixMyStreet(); + pin_layer_options.strategies = [ fixmystreet.bbox_strategy ]; + pin_layer_options.protocol = new OpenLayers.Protocol.FixMyStreet({ + url: '/ajax', + params: fixmystreet.all_pins ? { all_pins: 1 } : { }, + format: new OpenLayers.Format.FixMyStreet() + }); } - if (lang == 'cy') { - document.getElementById('hide_pins_link').innerHTML = 'Cuddio pinnau'; - } else if (lang == 'nb') { - document.getElementById('hide_pins_link').innerHTML = 'Skjul nåler'; - } else { - document.getElementById('hide_pins_link').innerHTML = 'Hide pins'; - } - }); - -} + fixmystreet.markers = new OpenLayers.Layer.Vector("Pins", pin_layer_options); + fixmystreet.markers.events.register( 'loadend', fixmystreet.markers, function(evt) { + if (fixmystreet.map.popups.length) { + fixmystreet.map.removePopup(fixmystreet.map.popups[0]); + } + }); -$(function(){ + var markers = fixmystreet.maps.markers_list( fixmystreet.pins, true ); + fixmystreet.markers.addFeatures( markers ); + + if (fixmystreet.page == 'around' || fixmystreet.page == 'reports' || fixmystreet.page == 'my') { + fixmystreet.select_feature = new OpenLayers.Control.SelectFeature( + fixmystreet.markers, + { + hover: true, + // Override clickFeature so that we can use it even though + // hover is true. http://gis.stackexchange.com/a/155675 + clickFeature: function (feature) { + marker_click(feature.attributes.id); + }, + overFeature: function (feature) { + if (fixmystreet.latest_map_hover_event != 'overFeature') { + document.getElementById('map').style.cursor = 'pointer'; + markers_highlight(feature.attributes.id); + sidebar_highlight(feature.attributes.id); + fixmystreet.latest_map_hover_event = 'overFeature'; + } + }, + outFeature: function (feature) { + if (fixmystreet.latest_map_hover_event != 'outFeature') { + document.getElementById('map').style.cursor = ''; + markers_highlight(); + sidebar_highlight(); + fixmystreet.latest_map_hover_event = 'outFeature'; + } + } + } + ); + fixmystreet.map.addControl( fixmystreet.select_feature ); + fixmystreet.select_feature.activate(); + fixmystreet.map.events.register( 'zoomend', null, fixmystreet.maps.markers_resize ); + + // If the category filter dropdown exists on the page set up the + // event handlers to populate it and react to it changing + if ($("select#filter_categories").length) { + $("body").on("change", "#filter_categories", categories_or_status_changed); + } + // Do the same for the status dropdown + if ($("select#statuses").length) { + $("body").on("change", "#statuses", categories_or_status_changed); + } + } else if (fixmystreet.page == 'new') { + drag.activate(); + } + fixmystreet.map.addLayer(fixmystreet.markers); + + if ( fixmystreet.zoomToBounds ) { + zoomToBounds( fixmystreet.markers.getDataExtent() ); + } + + $('#hide_pins_link').click(function(e) { + e.preventDefault(); + var showhide = [ + 'Show pins', 'Hide pins', + 'Dangos pinnau', 'Cuddio pinnau', + "Vis nåler", "Skjul nåler", + "Zeige Stecknadeln", "Stecknadeln ausblenden" + ]; + for (var i=0; i<showhide.length; i+=2) { + if (this.innerHTML == showhide[i]) { + fixmystreet.markers.setVisibility(true); + fixmystreet.select_feature.activate(); + this.innerHTML = showhide[i+1]; + } else if (this.innerHTML == showhide[i+1]) { + fixmystreet.markers.setVisibility(false); + fixmystreet.select_feature.deactivate(); + this.innerHTML = showhide[i]; + } + } + }); - // Set specific map config - some other JS included in the - // template should define this - set_map_config(); + $('#all_pins_link').click(function(e) { + e.preventDefault(); + fixmystreet.markers.setVisibility(true); + var texts = [ + 'en', 'Show old', 'Hide old', + 'nb', 'Vis gamle', 'Skjul gamle', + 'cy', 'Cynnwys hen adroddiadau', 'Cuddio hen adroddiadau' + ]; + for (var i=0; i<texts.length; i+=3) { + if (this.innerHTML == texts[i+1]) { + this.innerHTML = texts[i+2]; + fixmystreet.markers.protocol.options.params = { all_pins: 1 }; + fixmystreet.markers.refresh( { force: true } ); + lang = texts[i]; + } else if (this.innerHTML == texts[i+2]) { + this.innerHTML = texts[i+1]; + fixmystreet.markers.protocol.options.params = { }; + fixmystreet.markers.refresh( { force: true } ); + lang = texts[i]; + } + } + if (lang == 'cy') { + document.getElementById('hide_pins_link').innerHTML = 'Cuddio pinnau'; + } else if (lang == 'nb') { + document.getElementById('hide_pins_link').innerHTML = 'Skjul nåler'; + } else { + document.getElementById('hide_pins_link').innerHTML = 'Hide pins'; + } + }); - // Create the basics of the map - fixmystreet.map = new OpenLayers.Map( - "map", OpenLayers.Util.extend({ - controls: fixmystreet.controls, - displayProjection: new OpenLayers.Projection("EPSG:4326") - }, fixmystreet.map_options) - ); + } - // Set it up our way + $(function(){ - var layer; - if (!fixmystreet.layer_options) { - fixmystreet.layer_options = [ {} ]; - } - if (!fixmystreet.layer_name) { - fixmystreet.layer_name = ""; - } - for (var i=0; i<fixmystreet.layer_options.length; i++) { - fixmystreet.layer_options[i] = OpenLayers.Util.extend({ - // This option is used by XYZ-based layers - zoomOffset: fixmystreet.zoomOffset, - // This option is used by FixedZoomLevels-based layers - minZoomLevel: fixmystreet.zoomOffset, - // This option is thankfully used by them both - numZoomLevels: fixmystreet.numZoomLevels - }, fixmystreet.layer_options[i]); - if (fixmystreet.layer_options[i].matrixIds) { - layer = new fixmystreet.map_type(fixmystreet.layer_options[i]); - } else { - layer = new fixmystreet.map_type(fixmystreet.layer_name, fixmystreet.layer_options[i]); - } - fixmystreet.map.addLayer(layer); - } + // Set specific map config - some other JS included in the + // template should define this + fixmystreet.maps.config(); - if (!fixmystreet.map.getCenter()) { - var centre = new OpenLayers.LonLat( fixmystreet.longitude, fixmystreet.latitude ); - centre.transform( - new OpenLayers.Projection("EPSG:4326"), - fixmystreet.map.getProjectionObject() + // Create the basics of the map + fixmystreet.map = new OpenLayers.Map( + "map", OpenLayers.Util.extend({ + controls: fixmystreet.controls, + displayProjection: new OpenLayers.Projection("EPSG:4326") + }, fixmystreet.map_options) ); - fixmystreet.map.setCenter(centre, fixmystreet.zoom || 3); - } - if (document.getElementById('mapForm')) { - var click = new OpenLayers.Control.Click(); - fixmystreet.map.addControl(click); - click.activate(); - } - - $(window).hashchange(function(){ - if (location.hash == '#report' && $('.rap-notes').is(':visible')) { - $('.rap-notes-close').click(); - return; + // Set it up our way + + var layer; + if (!fixmystreet.layer_options) { + fixmystreet.layer_options = [ {} ]; + } + if (!fixmystreet.layer_name) { + fixmystreet.layer_name = ""; + } + for (var i=0; i<fixmystreet.layer_options.length; i++) { + fixmystreet.layer_options[i] = OpenLayers.Util.extend({ + // This option is used by XYZ-based layers + zoomOffset: fixmystreet.zoomOffset, + // This option is used by FixedZoomLevels-based layers + minZoomLevel: fixmystreet.zoomOffset, + // This option is thankfully used by them both + numZoomLevels: fixmystreet.numZoomLevels + }, fixmystreet.layer_options[i]); + if (fixmystreet.layer_options[i].matrixIds) { + layer = new fixmystreet.map_type(fixmystreet.layer_options[i]); + } else { + layer = new fixmystreet.map_type(fixmystreet.layer_name, fixmystreet.layer_options[i]); + } + fixmystreet.map.addLayer(layer); } - if (location.hash && location.hash != '#') { - return; + if (!fixmystreet.map.getCenter()) { + var centre = new OpenLayers.LonLat( fixmystreet.longitude, fixmystreet.latitude ); + centre.transform( + new OpenLayers.Projection("EPSG:4326"), + fixmystreet.map.getProjectionObject() + ); + fixmystreet.map.setCenter(centre, fixmystreet.zoom || 3); } - // Okay, back to around view. - 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(); + if (document.getElementById('mapForm')) { + var click = new OpenLayers.Control.Click(); + fixmystreet.map.addControl(click); + click.activate(); } - 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(); - $('.mobile-map-banner').html('<a href="/">' + translation_strings.home + '</a> ' + translation_strings.place_pin_on_map); - fixmystreet.page = 'around'; - }); - // Hide the pin filter submit button. Not needed because we'll use JS - // to refresh the map when the filter inputs are changed. - $(".report-list-filters [type=submit]").hide(); + $(window).hashchange(function(){ + if (location.hash == '#report' && $('.rap-notes').is(':visible')) { + $('.rap-notes-close').click(); + return; + } + + if (location.hash && location.hash != '#') { + return; + } - if (fixmystreet.page == "my" || fixmystreet.page == "reports") { - $(".report-list-filters select").change(function() { - $(this).closest("form").submit(); + // Okay, back to around view. + 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(); + } + 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(); + $('.mobile-map-banner').html('<a href="/">' + translation_strings.home + '</a> ' + translation_strings.place_pin_on_map); + fixmystreet.page = 'around'; }); - } - // Vector layers must be added onload as IE sucks - if ($.browser.msie) { - $(window).load(fixmystreet_onload); - } else { - fixmystreet_onload(); - } + // Hide the pin filter submit button. Not needed because we'll use JS + // to refresh the map when the filter inputs are changed. + $(".report-list-filters [type=submit]").hide(); + + if (fixmystreet.page == "my" || fixmystreet.page == "reports") { + $(".report-list-filters select").change(function() { + $(this).closest("form").submit(); + }); + } + + // Vector layers must be added onload as IE sucks + if ($.browser.msie) { + $(window).load(onload); + } else { + onload(); + } + + (function() { + var timeout; + $('.item-list--reports').on('mouseenter', '.item-list--reports__item', function(){ + var href = $('a', this).attr('href'); + var id = parseInt(href.replace(/^.*[/]([0-9]+)$/, '$1')); + clearTimeout(timeout); + markers_highlight(id); + }).on('mouseleave', '.item-list--reports__item', function(){ + timeout = setTimeout(markers_highlight, 50); + }); + })(); + }); + +// End maps closure +})(); - (function() { - var timeout; - $('.item-list--reports').on('mouseenter', '.item-list--reports__item', function(){ - var href = $('a', this).attr('href'); - var id = parseInt(href.replace(/^.*[/]([0-9]+)$/, '$1')); - clearTimeout(timeout); - fms_markers_highlight(id); - }).on('mouseleave', '.item-list--reports__item', function(){ - timeout = setTimeout(fms_markers_highlight, 50); - }); - })(); -}); /* Overridding the buttonDown function of PanZoom so that it does zoomTo(0) rather than zoomToMaxExtent() @@ -657,7 +648,7 @@ OpenLayers.Format.FixMyStreet = OpenLayers.Class(OpenLayers.Format.JSON, { if (typeof(obj.current) != 'undefined' && (current = document.getElementById('current'))) { current.innerHTML = obj.current; } - return fms_markers_list( obj.pins, false ); + return fixmystreet.maps.markers_list( obj.pins, false ); }, CLASS_NAME: "OpenLayers.Format.FixMyStreet" }); @@ -685,96 +676,10 @@ OpenLayers.Control.Click = OpenLayers.Class(OpenLayers.Control, { }, trigger: function(e) { - var cobrand = $('meta[name="cobrand"]').attr('content'); var lonlat = fixmystreet.map.getLonLatFromViewPortPx(e.xy); - if (fixmystreet.page == 'new') { - /* Already have a pin */ - fixmystreet.markers.features[0].move(lonlat); - } else { - var markers = fms_markers_list( [ [ lonlat.lat, lonlat.lon, 'green' ] ], false ); - fixmystreet.bbox_strategy.deactivate(); - fixmystreet.markers.removeAllFeatures(); - fixmystreet.markers.addFeatures( markers ); - fixmystreet_activate_drag(); - } - - // check to see if markers are visible. We click the - // link so that it updates the text in case they go - // back - if ( ! fixmystreet.markers.getVisibility() ) { - fixmystreet.state_pins_were_hidden = true; - $('#hide_pins_link').click(); - } - - // Store pin location in form fields, and check coverage of point - fixmystreet_update_pin(lonlat); - - // 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; - } - - // 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() in fixmystreet_update_pin */ - if ( navigator.userAgent.match(/like Mac OS X/i)) { - document.getElementById('side-form').style.display = 'block'; - } - $('#side').hide(); - - 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')) { - 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">' + translation_strings.try_again + '</a>' + '<a href="#ok" id="mob_ok">' + translation_strings.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').html('<a href="/">' + translation_strings.home + '</a> ' + translation_strings.right_place); - - // 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(translation_strings.map); - }); - }, function(){ - $('html, body').animate({ scrollTop: 0 }, 1000, function(){ - $('#mob_sub_map_links').removeClass('map_complete'); - $('#mob_ok').text(translation_strings.ok); - }); - }); - } + fixmystreet.begin_report(lonlat); - fixmystreet.page = 'new'; - location.hash = 'report'; - if ( typeof ga !== 'undefined' && cobrand == 'fixmystreet' ) { + if ( typeof ga !== 'undefined' && window.cobrand == 'fixmystreet' ) { ga('send', 'pageview', { 'page': '/map_click' } ); } } diff --git a/web/js/map-OpenStreetMap.js b/web/js/map-OpenStreetMap.js index 5dcf3cab3..b2d6a4f8b 100644 --- a/web/js/map-OpenStreetMap.js +++ b/web/js/map-OpenStreetMap.js @@ -1,4 +1,4 @@ -function set_map_config(perm) { +fixmystreet.maps.config = function() { var permalink_id; if ($('#map_permalink').length) { permalink_id = 'map_permalink'; @@ -10,7 +10,7 @@ function set_map_config(perm) { new OpenLayers.Control.PermalinkFMS(permalink_id), new OpenLayers.Control.PanZoomFMS({id: 'fms_pan_zoom' }) ]; -} +}; // http://www.openstreetmap.org/openlayers/OpenStreetMap.js (added maxResolution) diff --git a/web/js/map-bing-ol.js b/web/js/map-bing-ol.js index 5e29daea1..3ad92b27e 100644 --- a/web/js/map-bing-ol.js +++ b/web/js/map-bing-ol.js @@ -1,4 +1,4 @@ -function _set_map_config() { +fixmystreet.maps.config = function() { var permalink_id; if ($('#map_permalink').length) { permalink_id = 'map_permalink'; @@ -15,12 +15,8 @@ function _set_map_config() { if ( fixmystreet.page == 'report' ) { fixmystreet.controls.push( new OpenLayers.Control.PermalinkFMS('key-tool-problems-nearby', '/around') ); } -} - -function set_map_config(perm) { - _set_map_config(); fixmystreet.map_type = OpenLayers.Layer.Bing; -} +}; OpenLayers.Layer.Bing = OpenLayers.Class(OpenLayers.Layer.XYZ, { attributionTemplate: '${logo}${copyrights}', diff --git a/web/js/map-fms.js b/web/js/map-fms.js index c5bf70191..65c02a503 100644 --- a/web/js/map-fms.js +++ b/web/js/map-fms.js @@ -1,13 +1,14 @@ -var fms_tile_base = [ [ '', 'a-', 'b-', 'c-' ], '//{S}tilma.mysociety.org/sv' ]; +fixmystreet.maps.tile_base = [ [ '', 'a-', 'b-', 'c-' ], '//{S}tilma.mysociety.org/sv' ]; -function set_map_config(perm) { - _set_map_config(); - - if (fixmystreet.map_type) { - fms_tile_base = fixmystreet.map_type; - } - fixmystreet.map_type = OpenLayers.Layer.BingUK; -} +fixmystreet.maps.config = (function(original) { + return function(){ + if (fixmystreet.map_type) { + this.tile_base = fixmystreet.map_type; + } + original(); + fixmystreet.map_type = OpenLayers.Layer.BingUK; + }; +})(fixmystreet.maps.config); OpenLayers.Layer.BingUK = OpenLayers.Class(OpenLayers.Layer.Bing, { uk_bounds: [ @@ -54,8 +55,8 @@ OpenLayers.Layer.BingUK = OpenLayers.Class(OpenLayers.Layer.Bing, { var in_uk = this.in_uk(bounds.getCenterLonLat()); if (z >= 16 && in_uk) { urls = []; - for (var i=0; i< fms_tile_base[0].length; i++) { - urls.push( fms_tile_base[1].replace('{S}', fms_tile_base[0][i]) + "/${z}/${x}/${y}.png" ); + for (var i=0; i< fixmystreet.maps.tile_base[0].length; i++) { + urls.push( fixmystreet.maps.tile_base[1].replace('{S}', fixmystreet.maps.tile_base[0][i]) + "/${z}/${x}/${y}.png" ); } } else { var type = ''; diff --git a/web/js/map-google-ol.js b/web/js/map-google-ol.js index 5a1aa3c57..96ec6fe9b 100644 --- a/web/js/map-google-ol.js +++ b/web/js/map-google-ol.js @@ -15,7 +15,7 @@ $(function(){ } }); -function set_map_config(perm) { +fixmystreet.maps.config = function() { var permalink_id; if ($('#map_permalink').length) { permalink_id = 'map_permalink'; @@ -37,5 +37,4 @@ function set_map_config(perm) { {}, { type: google.maps.MapTypeId.HYBRID } ]; -} - +}; diff --git a/web/js/map-google.js b/web/js/map-google.js index 5009bebac..d1bde98b6 100644 --- a/web/js/map-google.js +++ b/web/js/map-google.js @@ -5,313 +5,272 @@ TODO Pin size on report page */ -function PaddingControl(div) { - div.style.padding = '40px'; -} +var fixmystreet = fixmystreet || {}; +fixmystreet.maps = {}; -function fixmystreet_update_pin(lonlat) { - document.getElementById('fixmystreet.latitude').value = lonlat.lat(); - document.getElementById('fixmystreet.longitude').value = lonlat.lng(); +(function() { - $.getJSON('/report/new/ajax', { - latitude: $('#fixmystreet\\.latitude').val(), - longitude: $('#fixmystreet\\.longitude').val() - }, function(data) { - if (data.error) { - if (!$('#side-form-error').length) { - $('<div id="side-form-error"/>').insertAfter($('#side-form')); + fixmystreet.maps.update_pin = function(lonlat) { + document.getElementById('fixmystreet.latitude').value = lonlat.lat(); + document.getElementById('fixmystreet.longitude').value = lonlat.lng(); + }; + + fixmystreet.maps.begin_report = function(lonlat) { + if (fixmystreet.page == 'new') { + /* Already have a pin */ + fixmystreet.report_marker.setPosition(lonlat); + } else { + var marker = new google.maps.Marker({ + position: lonlat, + draggable: true, + animation: google.maps.Animation.DROP, + map: fixmystreet.map + }); + var l = google.maps.event.addListener(marker, 'dragend', function(){ + fixmystreet.update_pin( marker.getPosition() ); + }); + fixmystreet.report_marker = marker; + google.maps.event.removeListener(fixmystreet.event_update_map); + for (m=0; m<fixmystreet.markers.length; m++) { + fixmystreet.markers[m].setMap(null); } - $('#side-form-error').html('<h1>' + translation_strings.reporting_a_problem + '</h1><p>' + data.error + '</p>').show(); - $('#side-form').hide(); - return; } - $('#side-form, #site-logo').show(); - $('#councils_text').html(data.councils_text); - $('#form_category_row').html(data.category); - if ( data.extra_name_info && !$('#form_fms_extra_title').length ) { - // there might be a first name field on some cobrands - var lb = $('#form_first_name').prev(); - if ( lb.length === 0 ) { lb = $('#form_name').prev(); } - lb.before(data.extra_name_info); - } - }); - - if (!$('#side-form-error').is(':visible')) { - $('#side-form, #site-logo').show(); - } -} - -var infowindow = new google.maps.InfoWindow(); -function make_infowindow(marker) { - return function() { - infowindow.setContent(marker.title + "<br><a href=/report/" + marker.id + ">" + translation_strings.more_details + "</a>"); - infowindow.open(fixmystreet.map, marker); }; -} -function fms_markers_list(pins, transform) { - var markers = []; - if (fixmystreet.markers) { - for (var m=0; m<fixmystreet.markers.length; m++) { - fixmystreet.markers[m].setMap(null); - } + function PaddingControl(div) { + div.style.padding = '40px'; } - for (var i=0; i<pins.length; i++) { - var pin = pins[i]; - var pin_args = { - position: new google.maps.LatLng( pin[0], pin[1] ), - //size: pin[5] || 'normal', - id: pin[3], - title: pin[4] || '', - map: fixmystreet.map + + var infowindow = new google.maps.InfoWindow(); + function make_infowindow(marker) { + return function() { + infowindow.setContent(marker.title + "<br><a href=/report/" + marker.id + ">" + translation_strings.more_details + "</a>"); + infowindow.open(fixmystreet.map, marker); }; - if (pin[2] == 'green') { - pin_args.icon = "http://chart.apis.google.com/chart?chst=d_map_pin_letter&chld=%E2%80%A2|87dd00"; - } - if (pin[2] == 'yellow') { - pin_args.icon = "http://chart.apis.google.com/chart?chst=d_map_pin_letter&chld=%E2%80%A2|ffd600"; - } - var marker = new google.maps.Marker(pin_args); - if (fixmystreet.page == 'around' || fixmystreet.page == 'reports' || fixmystreet.page == 'my') { - var l = new google.maps.event.addListener(marker, 'click', make_infowindow(marker)); - } - markers.push( marker ); } - return markers; -} -function fms_map_clicked(e) { - var lonlat = e.latLng; - if (fixmystreet.page == 'new') { - /* Already have a pin */ - fixmystreet.report_marker.setPosition(lonlat); - } else { - var marker = new google.maps.Marker({ - position: lonlat, - draggable: true, - animation: google.maps.Animation.DROP, - map: fixmystreet.map - }); - var l = google.maps.event.addListener(marker, 'dragend', function(){ - fixmystreet_update_pin( marker.getPosition() ); - }); - fixmystreet.report_marker = marker; - google.maps.event.removeListener(fixmystreet.event_update_map); - for (m=0; m<fixmystreet.markers.length; m++) { - fixmystreet.markers[m].setMap(null); + function markers_list(pins, transform) { + var markers = []; + if (fixmystreet.markers) { + for (var m=0; m<fixmystreet.markers.length; m++) { + fixmystreet.markers[m].setMap(null); + } } + for (var i=0; i<pins.length; i++) { + var pin = pins[i]; + var pin_args = { + position: new google.maps.LatLng( pin[0], pin[1] ), + //size: pin[5] || 'normal', + id: pin[3], + title: pin[4] || '', + map: fixmystreet.map + }; + if (pin[2] == 'green') { + pin_args.icon = "http://chart.apis.google.com/chart?chst=d_map_pin_letter&chld=%E2%80%A2|87dd00"; + } + if (pin[2] == 'yellow') { + pin_args.icon = "http://chart.apis.google.com/chart?chst=d_map_pin_letter&chld=%E2%80%A2|ffd600"; + } + var marker = new google.maps.Marker(pin_args); + if (fixmystreet.page == 'around' || fixmystreet.page == 'reports' || fixmystreet.page == 'my') { + var l = new google.maps.event.addListener(marker, 'click', make_infowindow(marker)); + } + markers.push( marker ); + } + return markers; } - // check to see if markers are visible. We click the - // link so that it updates the text in case they go - // back - if ( ! 1 ) { // XXX fixmystreet.markers.getVisibility() ) - fixmystreet.state_pins_were_hidden = true; - $('#hide_pins_link').click(); + function map_clicked(e) { + var lonlat = e.latLng; + fixmystreet.begin_report(lonlat); } - // 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. - if (fixmystreet.page == 'new') { - return; + /* Pan data handler */ + function read_pin_json(obj) { + var current, current_near; + if (typeof(obj.current) != 'undefined' && (current = document.getElementById('current'))) { + current.innerHTML = obj.current; + } + if (typeof(obj.current_near) != 'undefined' && (current_near = document.getElementById('current_near'))) { + current_near.innerHTML = obj.current_near; + } + fixmystreet.markers = markers_list( obj.pins, false ); } - $('#side').hide(); - - // If we clicked the map somewhere inconvenient - // TODO - - $('#sub_map_links').hide(); - fixmystreet.page = 'new'; - location.hash = 'report'; -} - -/* Pan data handler */ -function fms_read_pin_json(obj) { - var current, current_near; - if (typeof(obj.current) != 'undefined' && (current = document.getElementById('current'))) { - current.innerHTML = obj.current; - } - if (typeof(obj.current_near) != 'undefined' && (current_near = document.getElementById('current_near'))) { - current_near.innerHTML = obj.current_near; + function update_pins() { + var b = fixmystreet.map.getBounds(), + b_sw = b.getSouthWest(), + b_ne = b.getNorthEast(), + bbox = b_sw.lng() + ',' + b_sw.lat() + ',' + b_ne.lng() + ',' + b_ne.lat(), + params = { + bbox: bbox + }; + if (fixmystreet.all_pins) { + params.all_pins = 1; + } + $.getJSON('/ajax', params, read_pin_json); } - fixmystreet.markers = fms_markers_list( obj.pins, false ); -} -function fms_update_pins() { - var b = fixmystreet.map.getBounds(), - b_sw = b.getSouthWest(), - b_ne = b.getNorthEast(), - bbox = b_sw.lng() + ',' + b_sw.lat() + ',' + b_ne.lng() + ',' + b_ne.lat(), - params = { - bbox: bbox + function map_initialize() { + var centre = new google.maps.LatLng( fixmystreet.latitude, fixmystreet.longitude ); + var map_args = { + mapTypeId: google.maps.MapTypeId.ROADMAP, + center: centre, + zoom: 13 + fixmystreet.zoom, + disableDefaultUI: true, + panControl: true, + panControlOptions: { + position: google.maps.ControlPosition.RIGHT_TOP + }, + zoomControl: true, + zoomControlOptions: { + position: google.maps.ControlPosition.RIGHT_TOP + }, + mapTypeControl: true, + mapTypeControlOptions: { + position: google.maps.ControlPosition.RIGHT_TOP, + style: google.maps.MapTypeControlStyle.DROPDOWN_MENU + } }; - if (fixmystreet.all_pins) { - params.all_pins = 1; - } - $.getJSON('/ajax', params, fms_read_pin_json); -} - -function fms_map_initialize() { - var centre = new google.maps.LatLng( fixmystreet.latitude, fixmystreet.longitude ); - var map_args = { - mapTypeId: google.maps.MapTypeId.ROADMAP, - center: centre, - zoom: 13 + fixmystreet.zoom, - disableDefaultUI: true, - panControl: true, - panControlOptions: { - position: google.maps.ControlPosition.RIGHT_TOP - }, - zoomControl: true, - zoomControlOptions: { - position: google.maps.ControlPosition.RIGHT_TOP - }, - mapTypeControl: true, - mapTypeControlOptions: { - position: google.maps.ControlPosition.RIGHT_TOP, - style: google.maps.MapTypeControlStyle.DROPDOWN_MENU + if (!fixmystreet.zoomToBounds) { + map_args.minZoom = 13; + map_args.maxZoom = 18; } - }; - if (!fixmystreet.zoomToBounds) { - map_args.minZoom = 13; - map_args.maxZoom = 18; - } - fixmystreet.map = new google.maps.Map(document.getElementById("map"), map_args); + fixmystreet.map = new google.maps.Map(document.getElementById("map"), map_args); - /* Space above the top right controls */ - var paddingDiv = document.createElement('div'); - var paddingControl = new PaddingControl(paddingDiv); - paddingDiv.index = 0; - fixmystreet.map.controls[google.maps.ControlPosition.RIGHT_TOP].push(paddingDiv); - - if (document.getElementById('mapForm')) { - var l = google.maps.event.addListener(fixmystreet.map, 'click', fms_map_clicked); - } + /* Space above the top right controls */ + var paddingDiv = document.createElement('div'); + var paddingControl = new PaddingControl(paddingDiv); + paddingDiv.index = 0; + fixmystreet.map.controls[google.maps.ControlPosition.RIGHT_TOP].push(paddingDiv); - $(window).hashchange(function(){ - if (location.hash == '#report' && $('.rap-notes').is(':visible')) { - $('.rap-notes-close').click(); - return; + if (document.getElementById('mapForm')) { + var l = google.maps.event.addListener(fixmystreet.map, 'click', map_clicked); } - if (location.hash && location.hash != '#') { - return; - } + $(window).hashchange(function(){ + if (location.hash == '#report' && $('.rap-notes').is(':visible')) { + $('.rap-notes-close').click(); + return; + } - // Okay, back to around view. - fixmystreet.report_marker.setMap(null); - fixmystreet.event_update_map = google.maps.event.addListener(fixmystreet.map, 'idle', fms_update_pins); - google.maps.event.trigger(fixmystreet.map, 'idle'); - 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(); - } - $('#side-form').hide(); - $('#side').show(); - $('#sub_map_links').show(); - //only on mobile - $('#mob_sub_map_links').remove(); - $('.mobile-map-banner').html('<a href="/">' + translation_strings.home + '</a> ' + translation_strings.place_pin_on_map); - fixmystreet.page = 'around'; - }); + if (location.hash && location.hash != '#') { + return; + } - if ( fixmystreet.area.length ) { - for (var i=0; i<fixmystreet.area.length; i++) { - var args = { - url: "http://mapit.mysociety.org/area/" + fixmystreet.area[i] + ".kml?simplify_tolerance=0.0001", - clickable: false, - preserveViewport: true, - map: fixmystreet.map - }; - if ( fixmystreet.area.length == 1 ) { - args.preserveViewport = false; + // Okay, back to around view. + fixmystreet.report_marker.setMap(null); + fixmystreet.event_update_map = google.maps.event.addListener(fixmystreet.map, 'idle', update_pins); + google.maps.event.trigger(fixmystreet.map, 'idle'); + 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(); + } + $('#side-form').hide(); + $('#side').show(); + $('#sub_map_links').show(); + //only on mobile + $('#mob_sub_map_links').remove(); + $('.mobile-map-banner').html('<a href="/">' + translation_strings.home + '</a> ' + translation_strings.place_pin_on_map); + fixmystreet.page = 'around'; + }); + + if ( fixmystreet.area.length ) { + for (var i=0; i<fixmystreet.area.length; i++) { + var args = { + url: "http://mapit.mysociety.org/area/" + fixmystreet.area[i] + ".kml?simplify_tolerance=0.0001", + clickable: false, + preserveViewport: true, + map: fixmystreet.map + }; + if ( fixmystreet.area.length == 1 ) { + args.preserveViewport = false; + } + var a = new google.maps.KmlLayer(args); + a.setMap(fixmystreet.map); } - var a = new google.maps.KmlLayer(args); - a.setMap(fixmystreet.map); } - } - if (fixmystreet.page == 'around') { - fixmystreet.event_update_map = google.maps.event.addListener(fixmystreet.map, 'idle', fms_update_pins); - } + if (fixmystreet.page == 'around') { + fixmystreet.event_update_map = google.maps.event.addListener(fixmystreet.map, 'idle', update_pins); + } - fixmystreet.markers = fms_markers_list( fixmystreet.pins, true ); + fixmystreet.markers = markers_list( fixmystreet.pins, true ); - /* - if ( fixmystreet.zoomToBounds ) { - var bounds = fixmystreet.markers.getDataExtent(); - if (bounds) { - var center = bounds.getCenterLonLat(); - var z = fixmystreet.map.getZoomForExtent(bounds); - if ( z < 13 && $('html').hasClass('mobile') ) { - z = 13; + /* + if ( fixmystreet.zoomToBounds ) { + var bounds = fixmystreet.markers.getDataExtent(); + if (bounds) { + var center = bounds.getCenterLonLat(); + var z = fixmystreet.map.getZoomForExtent(bounds); + if ( z < 13 && $('html').hasClass('mobile') ) { + z = 13; + } + fixmystreet.map.setCenter(center, z); } - fixmystreet.map.setCenter(center, z); } - } - */ + */ - $('#hide_pins_link').click(function(e) { - var i, m; - e.preventDefault(); - var showhide = [ - 'Show pins', 'Hide pins', - 'Dangos pinnau', 'Cuddio pinnau', - "Vis nåler", "Gjem nåler", - "Zeige Stecknadeln", "Stecknadeln ausblenden" - ]; - for (i=0; i<showhide.length; i+=2) { - if (this.innerHTML == showhide[i]) { - for (m=0; m<fixmystreet.markers.length; m++) { - fixmystreet.markers[m].setMap(fixmystreet.map); - } - this.innerHTML = showhide[i+1]; - } else if (this.innerHTML == showhide[i+1]) { - for (m=0; m<fixmystreet.markers.length; m++) { - fixmystreet.markers[m].setMap(null); + $('#hide_pins_link').click(function(e) { + var i, m; + e.preventDefault(); + var showhide = [ + 'Show pins', 'Hide pins', + 'Dangos pinnau', 'Cuddio pinnau', + "Vis nåler", "Gjem nåler", + "Zeige Stecknadeln", "Stecknadeln ausblenden" + ]; + for (i=0; i<showhide.length; i+=2) { + if (this.innerHTML == showhide[i]) { + for (m=0; m<fixmystreet.markers.length; m++) { + fixmystreet.markers[m].setMap(fixmystreet.map); + } + this.innerHTML = showhide[i+1]; + } else if (this.innerHTML == showhide[i+1]) { + for (m=0; m<fixmystreet.markers.length; m++) { + fixmystreet.markers[m].setMap(null); + } + this.innerHTML = showhide[i]; } - this.innerHTML = showhide[i]; } - } - }); + }); - $('#all_pins_link').click(function(e) { - var i; - e.preventDefault(); - for (i=0; i<fixmystreet.markers.length; i++) { - fixmystreet.markers[i].setMap(fixmystreet.map); - } - var texts = [ - 'en', 'Show old', 'Hide old', - 'nb', 'Inkluder utdaterte problemer', 'Skjul utdaterte rapporter', - 'cy', 'Cynnwys hen adroddiadau', 'Cuddio hen adroddiadau' - ]; - for (i=0; i<texts.length; i+=3) { - if (this.innerHTML == texts[i+1]) { - this.innerHTML = texts[i+2]; - fixmystreet.markers.protocol.options.params = { all_pins: 1 }; - fixmystreet.markers.refresh( { force: true } ); - lang = texts[i]; - } else if (this.innerHTML == texts[i+2]) { - this.innerHTML = texts[i+1]; - fixmystreet.markers.protocol.options.params = { }; - fixmystreet.markers.refresh( { force: true } ); - lang = texts[i]; + $('#all_pins_link').click(function(e) { + var i; + e.preventDefault(); + for (i=0; i<fixmystreet.markers.length; i++) { + fixmystreet.markers[i].setMap(fixmystreet.map); } - } - if (lang == 'cy') { - document.getElementById('hide_pins_link').innerHTML = 'Cuddio pinnau'; - } else if (lang == 'nb') { - document.getElementById('hide_pins_link').innerHTML = 'Gjem nåler'; - } else { - document.getElementById('hide_pins_link').innerHTML = 'Hide pins'; - } - }); + var texts = [ + 'en', 'Show old', 'Hide old', + 'nb', 'Inkluder utdaterte problemer', 'Skjul utdaterte rapporter', + 'cy', 'Cynnwys hen adroddiadau', 'Cuddio hen adroddiadau' + ]; + for (i=0; i<texts.length; i+=3) { + if (this.innerHTML == texts[i+1]) { + this.innerHTML = texts[i+2]; + fixmystreet.markers.protocol.options.params = { all_pins: 1 }; + fixmystreet.markers.refresh( { force: true } ); + lang = texts[i]; + } else if (this.innerHTML == texts[i+2]) { + this.innerHTML = texts[i+1]; + fixmystreet.markers.protocol.options.params = { }; + fixmystreet.markers.refresh( { force: true } ); + lang = texts[i]; + } + } + if (lang == 'cy') { + document.getElementById('hide_pins_link').innerHTML = 'Cuddio pinnau'; + } else if (lang == 'nb') { + document.getElementById('hide_pins_link').innerHTML = 'Gjem nåler'; + } else { + document.getElementById('hide_pins_link').innerHTML = 'Hide pins'; + } + }); + + } -} + google.maps.visualRefresh = true; + google.maps.event.addDomListener(window, 'load', map_initialize); -google.maps.visualRefresh = true; -google.maps.event.addDomListener(window, 'load', fms_map_initialize); +})(); diff --git a/web/js/map-streetview.js b/web/js/map-streetview.js index 58d856781..6d9195246 100644 --- a/web/js/map-streetview.js +++ b/web/js/map-streetview.js @@ -1,4 +1,4 @@ -function set_map_config(perm) { +fixmystreet.maps.config = function() { fixmystreet.controls = [ new OpenLayers.Control.ArgParser(), new OpenLayers.Control.Navigation(), @@ -6,7 +6,7 @@ function set_map_config(perm) { new OpenLayers.Control.PanZoomFMS() ]; fixmystreet.map_type = OpenLayers.Layer.StreetView; -} +}; // http://os.openstreetmap.org/openlayers/OS.js (added one line) diff --git a/web/js/map-toner-lite.js b/web/js/map-toner-lite.js index 5291d0254..eda12ff28 100644 --- a/web/js/map-toner-lite.js +++ b/web/js/map-toner-lite.js @@ -1,4 +1,4 @@ -function set_map_config(perm) { +fixmystreet.maps.config = function() { var permalink_id; if ($('#map_permalink').length) { permalink_id = 'map_permalink'; @@ -16,4 +16,4 @@ function set_map_config(perm) { // The Stamen JS returns HTTP urls, fix that stamen.tile.getProvider('toner-lite').url = 'https://stamen-tiles-{S}a.ssl.fastly.net/toner-lite/{Z}/{X}/{Y}.png'; -} +}; diff --git a/web/js/map-wmts-bristol.js b/web/js/map-wmts-bristol.js index a1889beed..a69aa3b21 100644 --- a/web/js/map-wmts-bristol.js +++ b/web/js/map-wmts-bristol.js @@ -94,10 +94,10 @@ var matrix_ids = [ ]; /* - * set_map_config() is called on dom ready in map-OpenLayers.js + * maps.config() is called on dom ready in map-OpenLayers.js * to setup the way the map should operate. */ - function set_map_config(perm) { +fixmystreet.maps.config = function() { // This stuff is copied from js/map-bing-ol.js var nav_opts = { zoomWheelEnabled: false }; @@ -146,7 +146,7 @@ var matrix_ids = [ // Give main code a new bbox_strategy that translates between // lat/lon and our WMTS layer's coordinates fixmystreet.bbox_strategy = new OpenLayers.Strategy.ReprojectBBOX({ratio: 1}); -} +}; OpenLayers.Strategy.ReprojectBBOX = OpenLayers.Class(OpenLayers.Strategy.BBOX, { getMapBounds: function() { @@ -165,7 +165,7 @@ OpenLayers.Strategy.ReprojectBBOX = OpenLayers.Class(OpenLayers.Strategy.BBOX, { CLASS_NAME: "OpenLayers.Strategy.ReprojectBBOX" }); -function fms_marker_size_for_zoom(zoom) { +fixmystreet.maps.marker_size_for_zoom = function(zoom) { if (zoom >= 7) { return 'normal'; } else if (zoom >= 4) { @@ -173,4 +173,4 @@ function fms_marker_size_for_zoom(zoom) { } else { return 'mini'; } -} +}; diff --git a/web/js/map-wmts-zurich.js b/web/js/map-wmts-zurich.js index 9e0555079..6d9736ba8 100644 --- a/web/js/map-wmts-zurich.js +++ b/web/js/map-wmts-zurich.js @@ -2,58 +2,62 @@ * Maps for FMZ using Zurich council's WMTS tile server */ -function fixmystreet_zurich_admin_drag() { - var admin_drag = new OpenLayers.Control.DragFeature( fixmystreet.markers, { - onComplete: function(feature, e) { - var lonlat = feature.geometry.clone(); - lonlat.transform( - fixmystreet.map.getProjectionObject(), - new OpenLayers.Projection("EPSG:4326") - ); - if (window.confirm( 'Richtiger Ort?' ) ) { - // Store new co-ordinates - document.getElementById('fixmystreet.latitude').value = lonlat.y; - document.getElementById('fixmystreet.longitude').value = lonlat.x; - } else { - // Put it back - var lat = document.getElementById('fixmystreet.latitude').value; - var lon = document.getElementById('fixmystreet.longitude').value; - lonlat = new OpenLayers.LonLat(lon, lat).transform( - new OpenLayers.Projection("EPSG:4326"), - fixmystreet.map.getProjectionObject() +(function() { + + function admin_drag() { + var drag = new OpenLayers.Control.DragFeature( fixmystreet.markers, { + onComplete: function(feature, e) { + var lonlat = feature.geometry.clone(); + lonlat.transform( + fixmystreet.map.getProjectionObject(), + new OpenLayers.Projection("EPSG:4326") ); - fixmystreet.markers.features[0].move(lonlat); + if (window.confirm( 'Richtiger Ort?' ) ) { + // Store new co-ordinates + document.getElementById('fixmystreet.latitude').value = lonlat.y; + document.getElementById('fixmystreet.longitude').value = lonlat.x; + } else { + // Put it back + var lat = document.getElementById('fixmystreet.latitude').value; + var lon = document.getElementById('fixmystreet.longitude').value; + lonlat = new OpenLayers.LonLat(lon, lat).transform( + new OpenLayers.Projection("EPSG:4326"), + fixmystreet.map.getProjectionObject() + ); + fixmystreet.markers.features[0].move(lonlat); + } } - } - } ); - fixmystreet.map.addControl( admin_drag ); - admin_drag.activate(); -} + } ); + fixmystreet.map.addControl( drag ); + drag.activate(); + } -$(function(){ - $('#map_layer_toggle').toggle(function(){ - $(this).text('Luftbild'); - fixmystreet.map.setBaseLayer(fixmystreet.map.layers[1]); - }, function(){ - $(this).text('Stadtplan'); - fixmystreet.map.setBaseLayer(fixmystreet.map.layers[0]); - }); + $(function(){ + $('#map_layer_toggle').toggle(function(){ + $(this).text('Luftbild'); + fixmystreet.map.setBaseLayer(fixmystreet.map.layers[1]); + }, function(){ + $(this).text('Stadtplan'); + fixmystreet.map.setBaseLayer(fixmystreet.map.layers[0]); + }); - /* Admin dragging of pin */ - if (fixmystreet.page == 'admin') { - if ($.browser.msie) { - $(window).load(fixmystreet_zurich_admin_drag); - } else { - fixmystreet_zurich_admin_drag(); + /* Admin dragging of pin */ + if (fixmystreet.page == 'admin') { + if ($.browser.msie) { + $(window).load(admin_drag); + } else { + admin_drag(); + } } - } -}); + }); + +})(); /* - * set_map_config() is called on dom ready in map-OpenLayers.js + * maps.config() is called on dom ready in map-OpenLayers.js * to setup the way the map should operate. */ - function set_map_config(perm) { +fixmystreet.maps.config = function() { // This stuff is copied from js/map-bing-ol.js fixmystreet.controls = [ @@ -247,7 +251,7 @@ $(function(){ fixmystreet.bbox_strategy = new OpenLayers.Strategy.ZurichBBOX({ratio: 1}); fixmystreet.area_format = { fillColor: 'none', strokeWidth: 4, strokeColor: 'black' }; -} +}; OpenLayers.Strategy.ZurichBBOX = OpenLayers.Class(OpenLayers.Strategy.BBOX, { getMapBounds: function() { |