diff options
Diffstat (limited to 'web/js')
| -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 |
11 files changed, 763 insertions, 901 deletions
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() { |