diff options
Diffstat (limited to 'web/js/map-OpenLayers.js')
| -rw-r--r-- | web/js/map-OpenLayers.js | 235 |
1 files changed, 136 insertions, 99 deletions
diff --git a/web/js/map-OpenLayers.js b/web/js/map-OpenLayers.js index 0a5f339f5..c7bfef2b0 100644 --- a/web/js/map-OpenLayers.js +++ b/web/js/map-OpenLayers.js @@ -16,7 +16,7 @@ function fixmystreet_update_pin(lonlat) { if (!$('#side-form-error').length) { $('<div id="side-form-error"/>').insertAfter($('#side-form')); } - $('#side-form-error').html('<h1>Reporting a problem</h1><p>' + data.error + '</p>').show(); + $('#side-form-error').html('<h1>' + translation_strings.reporting_a_problem + '</h1><p>' + data.error + '</p>').show(); $('#side-form').hide(); return; } @@ -26,7 +26,7 @@ function fixmystreet_update_pin(lonlat) { 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(); } + if ( lb.length === 0 ) { lb = $('#form_name').prev(); } lb.before(data.extra_name_info); } }); @@ -46,6 +46,27 @@ function fixmystreet_activate_drag() { fixmystreet.drag.activate(); } +// Need to try and fake the 'centre' being 75% from the left +function fixmystreet_midpoint() { + var $content = $('.content'), mb = $('#map_box'), + q = ( $content.offset().left - mb.offset().left + $content.width() ) / 2, + mid_point = q < 0 ? 0 : q; + return mid_point; +} + +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); + if (fixmystreet.state_map && fixmystreet.state_map == 'full') { + fixmystreet.map.pan(-fixmystreet_midpoint(), -25, { animate: false }); + } +} + function fms_markers_list(pins, transform) { var markers = []; for (var i=0; i<pins.length; i++) { @@ -82,15 +103,10 @@ function fixmystreet_onload() { fixmystreet.map.addLayer(area); if ( fixmystreet.area.length == 1 ) { area.events.register('loadend', null, function(a,b,c) { - var bounds = area.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, false, true); + if ( fixmystreet.area_format ) { + area.styleMap.styles['default'].defaultStyle = fixmystreet.area_format; } + fixmystreet_zoomToBounds( area.getDataExtent() ); }); } } @@ -106,24 +122,24 @@ function fixmystreet_onload() { }); pin_layer_style_map.addUniqueValueRules('default', 'size', { 'normal': { - externalGraphic: "/i/pin-${colour}.png", + externalGraphic: fixmystreet.pin_prefix + "pin-${colour}.png", graphicWidth: 48, graphicHeight: 64, graphicXOffset: -24, graphicYOffset: -64, - backgroundGraphic: "/i/pin-shadow.png", + backgroundGraphic: fixmystreet.pin_prefix + "pin-shadow.png", backgroundWidth: 60, backgroundHeight: 30, backgroundXOffset: -7, backgroundYOffset: -30 }, 'big': { - externalGraphic: "/i/pin-${colour}-big.png", + externalGraphic: fixmystreet.pin_prefix + "pin-${colour}-big.png", graphicWidth: 78, graphicHeight: 105, graphicXOffset: -39, graphicYOffset: -105, - backgroundGraphic: "/i/pin-shadow-big.png", + backgroundGraphic: fixmystreet.pin_prefix + "pin-shadow-big.png", backgroundWidth: 88, backgroundHeight: 40, backgroundXOffset: -10, @@ -137,7 +153,7 @@ function fixmystreet_onload() { styleMap: pin_layer_style_map }; if (fixmystreet.page == 'around') { - fixmystreet.bbox_strategy = new OpenLayers.Strategy.BBOX({ ratio: 1 }); + fixmystreet.bbox_strategy = fixmystreet.bbox_strategy || new OpenLayers.Strategy.BBOX({ ratio: 1 }); pin_layer_options.strategies = [ fixmystreet.bbox_strategy ]; pin_layer_options.protocol = new OpenLayers.Protocol.HTTP({ url: '/ajax', @@ -147,18 +163,20 @@ function fixmystreet_onload() { } 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]); + if (fixmystreet.map.popups.length) { + fixmystreet.map.removePopup(fixmystreet.map.popups[0]); + } }); var markers = fms_markers_list( fixmystreet.pins, true ); fixmystreet.markers.addFeatures( markers ); + function onPopupClose(evt) { + fixmystreet.select_feature.unselect(selectedFeature); + OpenLayers.Event.stop(evt); + } if (fixmystreet.page == 'around' || fixmystreet.page == 'reports' || fixmystreet.page == 'my') { fixmystreet.select_feature = new OpenLayers.Control.SelectFeature( fixmystreet.markers ); var selectedFeature; - function onPopupClose(evt) { - fixmystreet.select_feature.unselect(selectedFeature); - OpenLayers.Event.stop(evt); - } fixmystreet.markers.events.register( 'featureunselected', fixmystreet.markers, function(evt) { var feature = evt.feature, popup = feature.popup; fixmystreet.map.removePopup(popup); @@ -171,7 +189,7 @@ function fixmystreet_onload() { var popup = new OpenLayers.Popup.FramedCloud("popup", feature.geometry.getBounds().getCenterLonLat(), null, - feature.attributes.title + "<br><a href=/report/" + feature.attributes.id + ">More details</a>", + feature.attributes.title + "<br><a href=/report/" + feature.attributes.id + ">" + translation_strings.more_details + "</a>", { size: new OpenLayers.Size(0,0), offset: new OpenLayers.Pixel(0,-40) }, true, onPopupClose); feature.popup = popup; @@ -185,15 +203,7 @@ function fixmystreet_onload() { fixmystreet.map.addLayer(fixmystreet.markers); 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_zoomToBounds( fixmystreet.markers.getDataExtent() ); } $('#hide_pins_link').click(function(e) { @@ -201,7 +211,8 @@ function fixmystreet_onload() { var showhide = [ 'Show pins', 'Hide pins', 'Dangos pinnau', 'Cuddio pinnau', - "Vis nåler", "Gjem nåler" + "Vis nåler", "Gjem nåler", + "Zeige Stecknadeln", "Stecknadeln ausblenden" ]; for (var i=0; i<showhide.length; i+=2) { if (this.innerHTML == showhide[i]) { @@ -250,24 +261,49 @@ function fixmystreet_onload() { $(function(){ - set_map_config(); + // Set specific map config - some other JS included in the + // template should define this + set_map_config(); - fixmystreet.map = new OpenLayers.Map("map", { - controls: fixmystreet.controls, - displayProjection: new OpenLayers.Projection("EPSG:4326") - }); + // 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) + ); - if ($('html').hasClass('mobile') && fixmystreet.page == 'around') { - $('#fms_pan_zoom').css({ top: '2.75em !important' }); + // Need to do this here, after the map is created + if ($('html').hasClass('mobile')) { + if (fixmystreet.page == 'around') { + $('#fms_pan_zoom').css({ top: '2.75em' }); + } + } else { + $('#fms_pan_zoom').css({ top: '4.75em' }); } - fixmystreet.layer_options = OpenLayers.Util.extend({ - zoomOffset: fixmystreet.zoomOffset, - transitionEffect: 'resize', - numZoomLevels: fixmystreet.numZoomLevels - }, fixmystreet.layer_options); - var layer = new fixmystreet.map_type("", fixmystreet.layer_options); - fixmystreet.map.addLayer(layer); + // Set it up our way + + var layer; + if (!fixmystreet.layer_options) { + fixmystreet.layer_options = [ {} ]; + } + 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_options[i]); + } + fixmystreet.map.addLayer(layer); + } if (!fixmystreet.map.getCenter()) { var centre = new OpenLayers.LonLat( fixmystreet.longitude, fixmystreet.latitude ); @@ -279,33 +315,7 @@ $(function(){ } if (fixmystreet.state_map && fixmystreet.state_map == 'full') { - // TODO Work better with window resizing, this is pretty 'set up' only at present - var $content = $('.content'), mb = $('#map_box'), - q = ( $content.offset().left - mb.offset().left + $content.width() ) / 2; - if (q < 0) { q = 0; } - // Need to try and fake the 'centre' being 75% from the left - fixmystreet.map.pan(-q, -25, { animate: false }); - fixmystreet.map.events.register("movestart", null, function(e){ - fixmystreet.map.moveStart = { zoom: this.getZoom(), center: this.getCenter() }; - }); - fixmystreet.map.events.register("zoomend", null, function(e){ - if ( fixmystreet.map.moveStart && !fixmystreet.map.moveStart.zoom && fixmystreet.map.moveStart.zoom !== 0 ) { - return true; // getZoom() on Firefox appears to return null at first? - } - if ( !fixmystreet.map.moveStart || !this.getCenter().equals(fixmystreet.map.moveStart.center) ) { - // Centre has moved, e.g. by double-click. Same whether zoom in or out - fixmystreet.map.pan(-q, -25, { animate: false }); - return; - } - var zoom_change = this.getZoom() - fixmystreet.map.moveStart.zoom; - if (zoom_change == -1) { - // Zoomed out, need to re'centre' - fixmystreet.map.pan(-q/2, 0, { animate: false }); - } else if (zoom_change == 1) { - // Using a zoom button - fixmystreet.map.pan(q, 0, { animate: false }); - } - }); + fixmystreet.map.pan(-fixmystreet_midpoint(), -25, { animate: false }); } if (document.getElementById('mapForm')) { @@ -337,7 +347,7 @@ $(function(){ $('#sub_map_links').show(); //only on mobile $('#mob_sub_map_links').remove(); - $('.mobile-map-banner').html('<a href="/">Home</a> Place pin on map'); + $('.mobile-map-banner').html('<a href="/">' + translation_strings.home + '</a> ' + translation_strings.place_pin_on_map); fixmystreet.page = 'around'; }); @@ -353,12 +363,9 @@ $(function(){ zoomTo(0) rather than zoomToMaxExtent() */ OpenLayers.Control.PanZoomFMS = OpenLayers.Class(OpenLayers.Control.PanZoom, { - buttonDown: function (evt) { - if (!OpenLayers.Event.isLeftClick(evt)) { - return; - } - - switch (this.action) { + onButtonClick: function (evt) { + var btn = evt.buttonElement; + switch (btn.action) { case "panup": this.map.pan(0, -this.getSlideFactor("h")); break; @@ -372,30 +379,53 @@ OpenLayers.Control.PanZoomFMS = OpenLayers.Class(OpenLayers.Control.PanZoom, { this.map.pan(this.getSlideFactor("w"), 0); break; case "zoomin": - this.map.zoomIn(); - break; case "zoomout": - this.map.zoomOut(); - break; case "zoomworld": - this.map.zoomTo(0); - break; + var mid_point = 0; + if (fixmystreet.state_map && fixmystreet.state_map == 'full') { + mid_point = fixmystreet_midpoint(); + } + var size = this.map.getSize(), + xy = { x: size.w / 2 + mid_point, y: size.h / 2 }; + switch (btn.action) { + case "zoomin": + this.map.zoomTo(this.map.getZoom() + 1, xy); + break; + case "zoomout": + this.map.zoomTo(this.map.getZoom() - 1, xy); + break; + case "zoomworld": + this.map.zoomTo(0, xy); + break; + } } - - OpenLayers.Event.stop(evt); } }); /* Overriding Permalink so that it can pass the correct zoom to OSM */ OpenLayers.Control.PermalinkFMS = OpenLayers.Class(OpenLayers.Control.Permalink, { - updateLink: function() { + _updateLink: function(alter_zoom) { var separator = this.anchor ? '#' : '?'; var href = this.base; if (href.indexOf(separator) != -1) { href = href.substring( 0, href.indexOf(separator) ); } - href += separator + OpenLayers.Util.getParameterString(this.createParams(null, this.map.getZoom()+fixmystreet.zoomOffset)); + var center = this.map.getCenter(); + if ( center && fixmystreet.state_map && fixmystreet.state_map == 'full' ) { + // Translate the permalink co-ords so that 'centre' is accurate + var mid_point = fixmystreet_midpoint(); + var p = this.map.getViewPortPxFromLonLat(center); + p.x += mid_point; + p.y += 25; + center = this.map.getLonLatFromViewPortPx(p); + } + + var zoom = this.map.getZoom(); + if ( alter_zoom ) { + zoom += fixmystreet.zoomOffset; + } + href += separator + OpenLayers.Util.getParameterString(this.createParams(center, zoom)); // Could use mlat/mlon here as well if we are on a page with a marker if (this.anchor && !this.element) { window.location.href = href; @@ -403,6 +433,14 @@ OpenLayers.Control.PermalinkFMS = OpenLayers.Class(OpenLayers.Control.Permalink, else { this.element.href = href; } + }, + updateLink: function() { + this._updateLink(0); + } +}); +OpenLayers.Control.PermalinkFMSz = OpenLayers.Class(OpenLayers.Control.PermalinkFMS, { + updateLink: function() { + this._updateLink(1); } }); @@ -450,6 +488,7 @@ OpenLayers.Control.Click = OpenLayers.Class(OpenLayers.Control, { }, trigger: function(e) { + var cobrand = $('meta[name="cobrand"]').attr('content'); if (typeof fixmystreet.nav_control != 'undefined') { fixmystreet.nav_control.disableZoomWheel(); } @@ -499,7 +538,7 @@ OpenLayers.Control.Click = OpenLayers.Class(OpenLayers.Control, { if (sidebar.css('position') == 'absolute') { var w = sidebar.width(), h = sidebar.height(), o = sidebar.offset(), - $map_box = $('#map_box'), bo = $map_box.offset(); + $map_boxx = $('#map_box'), bo = $map_boxx.offset(); // e.xy is relative to top left of map, which might not be top left of page e.xy.x += bo.left; e.xy.y += bo.top; @@ -524,15 +563,10 @@ OpenLayers.Control.Click = OpenLayers.Class(OpenLayers.Control, { var $map_box = $('#map_box'), width = $map_box.width(), height = $map_box.height(); - $map_box.append( - '<p id="mob_sub_map_links">' + - '<a href="#" id="try_again">Try again</a>' + - '<a href="#ok" id="mob_ok">OK</a>' + - '</p>' - ).css({ position: 'relative', width: width, height: height, marginBottom: '1em' }); + $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="/">Home</a> Right place?'); + $('.mobile-map-banner').html('<a href="/">' + translation_strings.home + '</a> ' + translation_strings.right_place); // mobile user clicks 'ok' on map $('#mob_ok').toggle(function(){ @@ -541,18 +575,21 @@ OpenLayers.Control.Click = OpenLayers.Class(OpenLayers.Control, { //to do this on other pages where #side-form might not be $('html, body').animate({ scrollTop: height-60 }, 1000, function(){ $('#mob_sub_map_links').addClass('map_complete'); - $('#mob_ok').text('MAP'); + $('#mob_ok').text(translation_strings.map); }); }, function(){ $('html, body').animate({ scrollTop: 0 }, 1000, function(){ $('#mob_sub_map_links').removeClass('map_complete'); - $('#mob_ok').text('OK'); + $('#mob_ok').text(translation_strings.ok); }); }); } fixmystreet.page = 'new'; location.hash = 'report'; + if ( typeof ga !== 'undefined' && cobrand == 'fixmystreet' ) { + ga('send', 'pageview', { 'page': '/map_click' } ); + } } }); |