Get header JS <script> out of code and into templates.

24 files changed, 172 insertions, 169 deletions

diff --git a/perllib/FixMyStreet/App/Controller/Around.pm b/perllib/FixMyStreet/App/Controller/Around.pm
index eef805da8..4aa37aa08 100644
--- a/perllib/FixMyStreet/App/Controller/Around.pm
+++ b/perllib/FixMyStreet/App/Controller/Around.pm
@@ -196,7 +196,6 @@ sub display_location : Private {
             clickable => 1,
             pins      => \@pins,
         );
-        $c->stash->{map_js} = FixMyStreet::Map::header_js();
     }
 
     return 1;
diff --git a/perllib/FixMyStreet/App/Controller/Questionnaire.pm b/perllib/FixMyStreet/App/Controller/Questionnaire.pm
index ba714a736..f6d7299b3 100755
--- a/perllib/FixMyStreet/App/Controller/Questionnaire.pm
+++ b/perllib/FixMyStreet/App/Controller/Questionnaire.pm
@@ -266,7 +266,6 @@ sub display : Private {
             colour    => $problem->state eq 'fixed' ? 'green' : 'red',
         } ],
     );
-    $c->stash->{map_js}                = FixMyStreet::Map::header_js();
     $c->stash->{cobrand_form_elements} = $c->cobrand->form_elements('questionnaireForm');
 }
 
diff --git a/perllib/FixMyStreet/App/Controller/Report.pm b/perllib/FixMyStreet/App/Controller/Report.pm
index 82d83e318..b6f336ffa 100644
--- a/perllib/FixMyStreet/App/Controller/Report.pm
+++ b/perllib/FixMyStreet/App/Controller/Report.pm
@@ -162,7 +162,6 @@ sub generate_map_tags : Private {
           } ]
         : [],
     );
-    $c->stash->{map_js} = FixMyStreet::Map::header_js();
 
     return 1;
 }
diff --git a/perllib/FixMyStreet/App/Controller/Report/New.pm b/perllib/FixMyStreet/App/Controller/Report/New.pm
index ba864eca4..e113517f9 100644
--- a/perllib/FixMyStreet/App/Controller/Report/New.pm
+++ b/perllib/FixMyStreet/App/Controller/Report/New.pm
@@ -77,9 +77,6 @@ all_pins: related to map display - not relevant to creation of a new report
 sub report_new : Path : Args(0) {
     my ( $self, $c ) = @_;
 
-    # set up the page
-    $c->forward('setup_page');
-
     # create the report - loading a partial if available
     $c->forward('initialize_report');
 
@@ -270,20 +267,6 @@ sub report_import : Path('/import') {
     return 1;
 }
 
-=head2 setup_page
-
-Setup the page - notably add the map js to the stash
-
-=cut
-
-sub setup_page : Private {
-    my ( $self, $c ) = @_;
-
-    $c->stash->{extra_js_verbatim} = FixMyStreet::Map::header_js();
-
-    return 1;
-}
-
 =head2 initialize_report
 
 Create the report and set up some basics in it. If there is a partial report
diff --git a/perllib/FixMyStreet/Map/Bing.pm b/perllib/FixMyStreet/Map/Bing.pm
index 32420a0ec..54979eba1 100644
--- a/perllib/FixMyStreet/Map/Bing.pm
+++ b/perllib/FixMyStreet/Map/Bing.pm
@@ -11,13 +11,6 @@ package FixMyStreet::Map::Bing;
 use strict;
 use mySociety::Web qw(ent);
 
-sub header_js {
-    return '
-<script type="text/javascript" src="http://ecn.dev.virtualearth.net/mapcontrol/mapcontrol.ashx?v=7.0&mkt=en-GB"></script>
-<script type="text/javascript" src="/js/map-bing.js"></script>
-';
-}
-
 # display_map C PARAMS
 # PARAMS include:
 # latitude, longitude for the centre point of the map
diff --git a/perllib/FixMyStreet/Map/FMS.pm b/perllib/FixMyStreet/Map/FMS.pm
index f4dd31b61..d0a28be9b 100644
--- a/perllib/FixMyStreet/Map/FMS.pm
+++ b/perllib/FixMyStreet/Map/FMS.pm
@@ -14,20 +14,15 @@ use strict;
 use constant ZOOM_LEVELS    => 5;
 use constant MIN_ZOOM_LEVEL => 13;
 
-sub header_js {
-    return '
-<!-- <script type="text/javascript" src="http://ecn.dev.virtualearth.net/mapcontrol/mapcontrol.ashx?v=7.0&mkt=en-GB"></script> -->
-<script type="text/javascript" src="/jslib/OpenLayers-2.10/OpenLayers.js"></script>
-<script type="text/javascript" src="/js/map-OpenLayers.js"></script>
-<script type="text/javascript" src="/js/map-bing-ol.js"></script>
-';
-}
-
 # Is set by the JavaScript
 sub map_type {
     return '""';
 }
 
+sub map_template {
+    return 'fms';
+}
+
 sub copyright {
     return _('Map contains Ordnance Survey data &copy; Crown copyright and database right 2010. Microsoft');
 }
diff --git a/perllib/FixMyStreet/Map/Google.pm b/perllib/FixMyStreet/Map/Google.pm
index 20c3ad2b6..ceb3a53ed 100644
--- a/perllib/FixMyStreet/Map/Google.pm
+++ b/perllib/FixMyStreet/Map/Google.pm
@@ -11,13 +11,6 @@ package FixMyStreet::Map::Google;
 use strict;
 use mySociety::Web qw(ent);
 
-sub header_js {
-    return '
-<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
-<script type="text/javascript" src="/js/map-google.js"></script>
-';
-}
-
 # display_map C PARAMS
 # PARAMS include:
 # latitude, longitude for the centre point of the map
diff --git a/perllib/FixMyStreet/Map/OSM.pm b/perllib/FixMyStreet/Map/OSM.pm
index 862c618f8..4543ce2da 100644
--- a/perllib/FixMyStreet/Map/OSM.pm
+++ b/perllib/FixMyStreet/Map/OSM.pm
@@ -16,18 +16,14 @@ use Utils;
 use constant ZOOM_LEVELS    => 5;
 use constant MIN_ZOOM_LEVEL => 13;
 
-sub header_js {
-    return '
-<script type="text/javascript" src="/jslib/OpenLayers-2.10/OpenLayers.js"></script>
-<script type="text/javascript" src="/js/map-OpenLayers.js"></script>
-<script type="text/javascript" src="/js/map-OpenStreetMap.js"></script>
-';
-}
-
 sub map_type {
     return 'OpenLayers.Layer.OSM.Mapnik';
 }
 
+sub map_template {
+    return 'osm';
+}
+
 sub map_tiles {
     my ($self, $x, $y, $z) = @_;
     my $tile_url = $self->base_tile_url();
@@ -78,7 +74,7 @@ sub display_map {
 
     $c->stash->{map} = {
         %params,
-        type => 'osm',
+        type => $self->map_template(),
         map_type => $self->map_type(),
         tiles => $self->map_tiles( $x_tile, $y_tile, $zoom_act ),
         copyright => $self->copyright(),
diff --git a/perllib/FixMyStreet/Map/OSM/StreetView.pm b/perllib/FixMyStreet/Map/OSM/StreetView.pm
index ba7134c1e..141c2e328 100644
--- a/perllib/FixMyStreet/Map/OSM/StreetView.pm
+++ b/perllib/FixMyStreet/Map/OSM/StreetView.pm
@@ -11,18 +11,14 @@ use base 'FixMyStreet::Map::OSM';
 
 use strict;
 
-sub header_js {
-    return '
-<script type="text/javascript" src="/jslib/OpenLayers-2.10/OpenLayers.js"></script>
-<script type="text/javascript" src="/js/map-OpenLayers.js"></script>
-<script type="text/javascript" src="/js/map-streetview.js"></script>
-';
-}
-
 sub map_type {
     return '""';
 }
 
+sub map_template {
+    return 'osm-streetview';
+}
+
 sub base_tile_url {
     return 'os.openstreetmap.org/sv';
 }
diff --git a/perllib/FixMyStreet/Map/Tilma/OpenLayers.pm b/perllib/FixMyStreet/Map/Tilma/OpenLayers.pm
index 96d0975f2..31e9eb096 100644
--- a/perllib/FixMyStreet/Map/Tilma/OpenLayers.pm
+++ b/perllib/FixMyStreet/Map/Tilma/OpenLayers.pm
@@ -14,15 +14,6 @@ sub TILE_WIDTH()   { return $FixMyStreet::Map::map_class->tile_width;   }
 sub SCALE_FACTOR() { return $FixMyStreet::Map::map_class->scale_factor; }
 sub TILE_TYPE()    { return $FixMyStreet::Map::map_class->tile_type;    }
 
-sub header_js {
-    return '
-<script type="text/javascript" src="/jslib/OpenLayers-2.10/OpenLayers.js"></script>
-<script type="text/javascript" src="/js/map-OpenLayers.js"></script>
-<script type="text/javascript" src="/js/map-tilma-ol.js"></script>
-<script type="text/javascript" src="/js/OpenLayers.Projection.OrdnanceSurvey.js"></script>
-';
-}
-
 # display_map C PARAMS
 # PARAMS include:
 # latitude, longitude for the centre point of the map
diff --git a/perllib/FixMyStreet/Map/Tilma/Original.pm b/perllib/FixMyStreet/Map/Tilma/Original.pm
index ddabf2ed5..e1ab34393 100644
--- a/perllib/FixMyStreet/Map/Tilma/Original.pm
+++ b/perllib/FixMyStreet/Map/Tilma/Original.pm
@@ -27,12 +27,6 @@ sub _ll_to_en {
     return Utils::convert_latlon_to_en( $lat, $lon );
 }
 
-sub header_js {
-    return '
-<script type="text/javascript" src="/js/map-tilma.js"></script>
-';
-}
-
 # display_map C PARAMS
 # PARAMS include:
 # latitude, longitude for the centre point of the map
diff --git a/templates/web/default/around/display_location.html b/templates/web/default/around/display_location.html
index f9a9bdc51..48ff5fcb8 100755
--- a/templates/web/default/around/display_location.html
+++ b/templates/web/default/around/display_location.html
@@ -28,6 +28,8 @@
         }
     );
 
+    PROCESS "maps/${map.type}.html";
+
     INCLUDE 'header.html',
         title  => loc('Viewing a location')
         rss    => [ loc('Recent local problems, FixMyStreet'), rss_url ],
@@ -43,7 +45,7 @@
 <input type="hidden" name="latitude" id="fixmystreet.latitude" value="[% short_latitude | html %]">
 <input type="hidden" name="longitude" id="fixmystreet.longitude" value="[% short_longitude | html %]">
 
-[% INCLUDE "maps/${map.type}.html" %]
+[% map_html %]
 
 <p id='sub_map_links'>
     [% IF c.req.params.no_pins %]
diff --git a/templates/web/default/common_header_tags.html b/templates/web/default/common_header_tags.html
index 959126ff9..00455b3a1 100644
--- a/templates/web/default/common_header_tags.html
+++ b/templates/web/default/common_header_tags.html
@@ -3,7 +3,6 @@
 <script type="text/javascript" src="/js.js"></script>
 
 [% map_js %]
-[% extra_js_verbatim %]
 
 [% IF robots %]
     <meta name="robots" content="[% robots %]">
diff --git a/templates/web/default/maps/bing.html b/templates/web/default/maps/bing.html
index fccd3311e..6b7114199 100644
--- a/templates/web/default/maps/bing.html
+++ b/templates/web/default/maps/bing.html
@@ -1,3 +1,9 @@
+[% map_js = BLOCK %]
+<script type="text/javascript" src="http://ecn.dev.virtualearth.net/mapcontrol/mapcontrol.ashx?v=7.0&mkt=en-GB"></script>
+<script type="text/javascript" src="/js/map-bing.js"></script>
+[% END %]
+
+[% map_html = BLOCK %]
 <script type="text/javascript">
 var fixmystreet = {
     'key': '[% map.key %]',
@@ -9,4 +15,4 @@ var fixmystreet = {
 <div id="map_box">
     [% pre_map %]
     <div id="map"></div>
-
+[% END %]
diff --git a/templates/web/default/maps/fms.html b/templates/web/default/maps/fms.html
new file mode 100644
index 000000000..36fd48467
--- /dev/null
+++ b/templates/web/default/maps/fms.html
@@ -0,0 +1,11 @@
+[% map_js = BLOCK %]
+<!-- <script type="text/javascript" src="http://ecn.dev.virtualearth.net/mapcontrol/mapcontrol.ashx?v=7.0&mkt=en-GB"></script> -->
+<script type="text/javascript" src="/jslib/OpenLayers-2.10/OpenLayers.js"></script>
+<script type="text/javascript" src="/js/map-OpenLayers.js"></script>
+<script type="text/javascript" src="/js/map-bing-ol.js"></script>
+[% END %]
+
+[% map_html = BLOCK %]
+[% INCLUDE maps/openlayers.html %]
+[% END %]
+
diff --git a/templates/web/default/maps/google.html b/templates/web/default/maps/google.html
index 51e6cb587..2e326734b 100644
--- a/templates/web/default/maps/google.html
+++ b/templates/web/default/maps/google.html
@@ -1,3 +1,9 @@
+[% map_js = BLOCK %]
+<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
+<script type="text/javascript" src="/js/map-google.js"></script>
+[% END %]
+
+[% map_html = BLOCK %]
 <script type="text/javascript">
 var fixmystreet = {
     'latitude': [% map.latitude %],
@@ -8,4 +14,4 @@ var fixmystreet = {
 <div id="map_box">
     [% pre_map %]
     <div id="map"></div>
-
+[% END %]
diff --git a/templates/web/default/maps/openlayers.html b/templates/web/default/maps/openlayers.html
new file mode 100644
index 000000000..ae670ce13
--- /dev/null
+++ b/templates/web/default/maps/openlayers.html
@@ -0,0 +1,86 @@
+[% IF map.clickable %]
+    [% map.img_type = 'input type="image"' %]
+[% ELSE %]
+    [% map.img_type = 'img' %]
+[% END %]
+
+<input type="hidden" name="zoom" value="[% map.zoom %]">
+<script type="text/javascript">
+var fixmystreet = {
+    'latitude': [% map.latitude %],
+    'longitude': [% map.longitude %],
+[% IF map.zoom -%]
+    'zoom': [% map.zoom %],
+[%- END %]
+    'map_type': [% map.map_type %],
+    'pins': [% INCLUDE maps/pins_js.html %]
+}
+</script>
+<div id="map_box">
+    [% pre_map %]
+    <div id="map"><noscript>
+        <div id="drag"><[% map.img_type %]
+            alt="NW map tile" id="t2.2"
+            name="tile_[% map.x_tile - 1 %].[% map.y_tile - 1 %]"
+            src="[% map.tiles.0 %]"
+            style="top:0; left:0;"><[% map.img_type %]
+            alt="NE map tile" id="t2.3"
+            name="tile_[% map.x_tile %].[% map.y_tile - 1 %]"
+            src="[% map.tiles.1 %]"
+            style="top:0px; left:256px;"><br><[% map.img_type %]
+            alt="SW map tile" id="t3.2"
+            name="tile_[% map.x_tile - 1 %].[% map.y_tile %]"
+            src="[% map.tiles.2 %]"
+            style="top:256px; left:0;"><[% map.img_type %]
+            alt="SE map tile" id="t3.3"
+            name="tile_[% map.x_tile %].[% map.y_tile %]"
+            src="[% map.tiles.3 %]"
+            style="top:256px; left:256px;"></div>
+        <div id="pins">[% FOR pin IN map.pins %][% INCLUDE pin %][% END %]</div>
+        [% INCLUDE compass %]
+    </noscript></div>
+    <p id="copyright">
+        [% map.copyright %]
+    </p>
+
+
+[% BLOCK compass %]
+[%
+    north    = c.uri_with( { lat = map.compass.north.0, lon = map.compass.north.1, zoom = map.zoom } )
+    south    = c.uri_with( { lat = map.compass.south.0, lon = map.compass.south.1, zoom = map.zoom } )
+    east     = c.uri_with( { lat = map.compass.east.0,  lon = map.compass.east.1,  zoom = map.zoom } )
+    west     = c.uri_with( { lat = map.compass.west.0,  lon = map.compass.west.1,  zoom = map.zoom } )
+    world    = c.uri_with( { zoom = 0 } );
+    SET zoom_in  = c.uri_with( { zoom = map.zoom + 1 } ) IF map.zoom < map.zoom_levels - 1;
+    SET zoom_out = c.uri_with( { zoom = map.zoom - 1 } ) IF map.zoom > 0;
+    SET zoom_in  = '#' IF map.zoom >= map.zoom_levels - 1;
+    SET zoom_out = '#' IF map.zoom <= 0;
+%]
+<div style="position: absolute; left: 4px; top: 4px; z-index: 1007;" class="olControlPanZoom olControlNoSelect" unselectable="on">
+    <div style="position: absolute; left: 13px; top: 4px; width: 18px; height: 18px;"><a href="[% north %]"><img style="position: relative; width: 18px; height: 18px;" src="/jslib/OpenLayers-2.10/img/north-mini.png" border="0"></a></div>
+    <div style="position: absolute; left: 4px; top: 22px; width: 18px; height: 18px;"><a href="[% west %]"><img style="position: relative; width: 18px; height: 18px;" src="/jslib/OpenLayers-2.10/img/west-mini.png" border="0"></a></div>
+    <div style="position: absolute; left: 22px; top: 22px; width: 18px; height: 18px;"><a href="[% east %]"><img style="position: relative; width: 18px; height: 18px;" src="/jslib/OpenLayers-2.10/img/east-mini.png" border="0"></a></div>
+    <div style="position: absolute; left: 13px; top: 40px; width: 18px; height: 18px;"><a href="[% south %]"><img style="position: relative; width: 18px; height: 18px;" src="/jslib/OpenLayers-2.10/img/south-mini.png" border="0"></a></div>
+    <div style="position: absolute; left: 13px; top: 63px; width: 18px; height: 18px;"><a href="[% zoom_in %]"><img style="position: relative; width: 18px; height: 18px;" src="/jslib/OpenLayers-2.10/img/zoom-plus-mini.png" border="0"></a></div>
+    <div style="position: absolute; left: 13px; top: 81px; width: 18px; height: 18px;"><a href="[% world %]"><img style="position: relative; width: 18px; height: 18px;" src="/jslib/OpenLayers-2.10/img/zoom-world-mini.png" border="0"></a></div>
+    <div style="position: absolute; left: 13px; top: 99px; width: 18px; height: 18px;"><a href="[% zoom_out %]"><img style="position: relative; width: 18px; height: 18px;" src="/jslib/OpenLayers-2.10/img/zoom-minus-mini.png" border="0"></a></div>
+</div>
+[% END %]
+
+
+[% BLOCK pin %]
+
+[% cols = {
+    red = 'R', green = 'G', blue = 'B', purple = 'P',
+   }
+%]
+[% IF pin.id %]
+<a title="[% pin.title | html %]" href="[% c.uri_for('/report/' _ pin.id) %]">
+[%- END -%]
+<img border="0" class="pin" src="[% c.uri_for('/i/pin' _ cols.${pin.colour} _ '.gif') %]"
+    alt="[% loc('Problem') %]" style="top:[% pin.py - 59 %]px; left:[% pin.px %]px; position: absolute;">
+[%- IF pin.id -%]
+</a>
+[% END %]
+
+[% END %]
diff --git a/templates/web/default/maps/osm-streetview.html b/templates/web/default/maps/osm-streetview.html
new file mode 100644
index 000000000..ba8d1fba4
--- /dev/null
+++ b/templates/web/default/maps/osm-streetview.html
@@ -0,0 +1,9 @@
+[% map_js = BLOCK %]
+<script type="text/javascript" src="/jslib/OpenLayers-2.10/OpenLayers.js"></script>
+<script type="text/javascript" src="/js/map-OpenLayers.js"></script>
+<script type="text/javascript" src="/js/map-streetview.js"></script>
+[% END %]
+
+[% map_html = BLOCK %]
+[% INCLUDE maps/openlayers.html %]
+[% END %]
diff --git a/templates/web/default/maps/osm.html b/templates/web/default/maps/osm.html
index ae670ce13..c6529566e 100644
--- a/templates/web/default/maps/osm.html
+++ b/templates/web/default/maps/osm.html
@@ -1,86 +1,9 @@
-[% IF map.clickable %]
-    [% map.img_type = 'input type="image"' %]
-[% ELSE %]
-    [% map.img_type = 'img' %]
-[% END %]
-
-<input type="hidden" name="zoom" value="[% map.zoom %]">
-<script type="text/javascript">
-var fixmystreet = {
-    'latitude': [% map.latitude %],
-    'longitude': [% map.longitude %],
-[% IF map.zoom -%]
-    'zoom': [% map.zoom %],
-[%- END %]
-    'map_type': [% map.map_type %],
-    'pins': [% INCLUDE maps/pins_js.html %]
-}
-</script>
-<div id="map_box">
-    [% pre_map %]
-    <div id="map"><noscript>
-        <div id="drag"><[% map.img_type %]
-            alt="NW map tile" id="t2.2"
-            name="tile_[% map.x_tile - 1 %].[% map.y_tile - 1 %]"
-            src="[% map.tiles.0 %]"
-            style="top:0; left:0;"><[% map.img_type %]
-            alt="NE map tile" id="t2.3"
-            name="tile_[% map.x_tile %].[% map.y_tile - 1 %]"
-            src="[% map.tiles.1 %]"
-            style="top:0px; left:256px;"><br><[% map.img_type %]
-            alt="SW map tile" id="t3.2"
-            name="tile_[% map.x_tile - 1 %].[% map.y_tile %]"
-            src="[% map.tiles.2 %]"
-            style="top:256px; left:0;"><[% map.img_type %]
-            alt="SE map tile" id="t3.3"
-            name="tile_[% map.x_tile %].[% map.y_tile %]"
-            src="[% map.tiles.3 %]"
-            style="top:256px; left:256px;"></div>
-        <div id="pins">[% FOR pin IN map.pins %][% INCLUDE pin %][% END %]</div>
-        [% INCLUDE compass %]
-    </noscript></div>
-    <p id="copyright">
-        [% map.copyright %]
-    </p>
-
-
-[% BLOCK compass %]
-[%
-    north    = c.uri_with( { lat = map.compass.north.0, lon = map.compass.north.1, zoom = map.zoom } )
-    south    = c.uri_with( { lat = map.compass.south.0, lon = map.compass.south.1, zoom = map.zoom } )
-    east     = c.uri_with( { lat = map.compass.east.0,  lon = map.compass.east.1,  zoom = map.zoom } )
-    west     = c.uri_with( { lat = map.compass.west.0,  lon = map.compass.west.1,  zoom = map.zoom } )
-    world    = c.uri_with( { zoom = 0 } );
-    SET zoom_in  = c.uri_with( { zoom = map.zoom + 1 } ) IF map.zoom < map.zoom_levels - 1;
-    SET zoom_out = c.uri_with( { zoom = map.zoom - 1 } ) IF map.zoom > 0;
-    SET zoom_in  = '#' IF map.zoom >= map.zoom_levels - 1;
-    SET zoom_out = '#' IF map.zoom <= 0;
-%]
-<div style="position: absolute; left: 4px; top: 4px; z-index: 1007;" class="olControlPanZoom olControlNoSelect" unselectable="on">
-    <div style="position: absolute; left: 13px; top: 4px; width: 18px; height: 18px;"><a href="[% north %]"><img style="position: relative; width: 18px; height: 18px;" src="/jslib/OpenLayers-2.10/img/north-mini.png" border="0"></a></div>
-    <div style="position: absolute; left: 4px; top: 22px; width: 18px; height: 18px;"><a href="[% west %]"><img style="position: relative; width: 18px; height: 18px;" src="/jslib/OpenLayers-2.10/img/west-mini.png" border="0"></a></div>
-    <div style="position: absolute; left: 22px; top: 22px; width: 18px; height: 18px;"><a href="[% east %]"><img style="position: relative; width: 18px; height: 18px;" src="/jslib/OpenLayers-2.10/img/east-mini.png" border="0"></a></div>
-    <div style="position: absolute; left: 13px; top: 40px; width: 18px; height: 18px;"><a href="[% south %]"><img style="position: relative; width: 18px; height: 18px;" src="/jslib/OpenLayers-2.10/img/south-mini.png" border="0"></a></div>
-    <div style="position: absolute; left: 13px; top: 63px; width: 18px; height: 18px;"><a href="[% zoom_in %]"><img style="position: relative; width: 18px; height: 18px;" src="/jslib/OpenLayers-2.10/img/zoom-plus-mini.png" border="0"></a></div>
-    <div style="position: absolute; left: 13px; top: 81px; width: 18px; height: 18px;"><a href="[% world %]"><img style="position: relative; width: 18px; height: 18px;" src="/jslib/OpenLayers-2.10/img/zoom-world-mini.png" border="0"></a></div>
-    <div style="position: absolute; left: 13px; top: 99px; width: 18px; height: 18px;"><a href="[% zoom_out %]"><img style="position: relative; width: 18px; height: 18px;" src="/jslib/OpenLayers-2.10/img/zoom-minus-mini.png" border="0"></a></div>
-</div>
-[% END %]
-
-
-[% BLOCK pin %]
-
-[% cols = {
-    red = 'R', green = 'G', blue = 'B', purple = 'P',
-   }
-%]
-[% IF pin.id %]
-<a title="[% pin.title | html %]" href="[% c.uri_for('/report/' _ pin.id) %]">
-[%- END -%]
-<img border="0" class="pin" src="[% c.uri_for('/i/pin' _ cols.${pin.colour} _ '.gif') %]"
-    alt="[% loc('Problem') %]" style="top:[% pin.py - 59 %]px; left:[% pin.px %]px; position: absolute;">
-[%- IF pin.id -%]
-</a>
+[% map_js = BLOCK %]
+<script type="text/javascript" src="/jslib/OpenLayers-2.10/OpenLayers.js"></script>
+<script type="text/javascript" src="/js/map-OpenLayers.js"></script>
+<script type="text/javascript" src="/js/map-OpenStreetMap.js"></script>
 [% END %]
 
+[% map_html = BLOCK %]
+[% INCLUDE maps/openlayers.html %]
 [% END %]
diff --git a/templates/web/default/maps/tilma/openlayers.html b/templates/web/default/maps/tilma/openlayers.html
index 5ee7b207e..c8ae53bfe 100644
--- a/templates/web/default/maps/tilma/openlayers.html
+++ b/templates/web/default/maps/tilma/openlayers.html
@@ -1,3 +1,11 @@
+[% map_js = BLOCK %]
+<script type="text/javascript" src="/jslib/OpenLayers-2.10/OpenLayers.js"></script>
+<script type="text/javascript" src="/js/map-OpenLayers.js"></script>
+<script type="text/javascript" src="/js/map-tilma-ol.js"></script>
+<script type="text/javascript" src="/js/OpenLayers.Projection.OrdnanceSurvey.js"></script>
+[% END %]
+
+[% map_html = BLOCK %]
 <script type="text/javascript">
 var fixmystreet = {
     'tilewidth': [% map.tilewidth %],
@@ -15,3 +23,4 @@ var fixmystreet = {
         [% '<div id="watermark"></div>' IF map.watermark %]
     </div>
     <p id="copyright">[% map.copyright %]</p>
+[% END %]
diff --git a/templates/web/default/maps/tilma/original.html b/templates/web/default/maps/tilma/original.html
index 546e027dc..e02a974f8 100644
--- a/templates/web/default/maps/tilma/original.html
+++ b/templates/web/default/maps/tilma/original.html
@@ -1,3 +1,9 @@
+[% map_js = BLOCK %]
+<script type="text/javascript" src="/js/map-tilma.js"></script>
+[% END %]
+
+[% map_html = BLOCK %]
+
 [% IF !map.tiles %]
     <div id="map_box">
         <div id="map"><div id="drag">
@@ -39,6 +45,7 @@ var fixmystreet = {
         [% INCLUDE compass %]
     </div>
     <p id="copyright">[% map.copyright %]</p>
+[% END %]
 
 
 [% BLOCK pin %]
diff --git a/templates/web/default/questionnaire/index.html b/templates/web/default/questionnaire/index.html
index dd811394c..f0e65de4d 100644
--- a/templates/web/default/questionnaire/index.html
+++ b/templates/web/default/questionnaire/index.html
@@ -1,8 +1,10 @@
-[% INCLUDE 'header.html', title = loc('Questionnaire') %]
+[%
+    pre_map = INCLUDE 'report/_main.html';
+    PROCESS "maps/${map.type}.html";
+    INCLUDE 'header.html', title = loc('Questionnaire')
+%]
 
-[% pre_map = INCLUDE 'report/_main.html' %]
-
-[% INCLUDE "maps/${map.type}.html" %]
+[% map_html %]
 
 [% INCLUDE 'report/updates.html' %]
 
diff --git a/templates/web/default/report/display.html b/templates/web/default/report/display.html
index ef51dca01..05b594b7b 100644
--- a/templates/web/default/report/display.html
+++ b/templates/web/default/report/display.html
@@ -1,4 +1,6 @@
 [% 
+    PROCESS "maps/${map.type}.html";
+
     problem_title = problem.title | html;
     INCLUDE 'header.html'
         title = problem_title
@@ -6,7 +8,7 @@
         robots = 'index, nofollow'
 %]
 
-[% INCLUDE "maps/${map.type}.html" %]
+[% map_html %]
 
 [% IF c.config.COUNTRY == 'GB' %]
 <p id='sub_map_links'>
diff --git a/templates/web/default/report/new/fill_in_details.html b/templates/web/default/report/new/fill_in_details.html
index fcf08b884..00055c21b 100644
--- a/templates/web/default/report/new/fill_in_details.html
+++ b/templates/web/default/report/new/fill_in_details.html
@@ -1,4 +1,7 @@
-[% INCLUDE 'header.html', title => loc('Reporting a problem') %]
+[%
+    PROCESS "maps/${map.type}.html" IF report.used_map;
+    INCLUDE 'header.html', title => loc('Reporting a problem')
+%]
 
 [% IF report.used_map %]
 <form action="[% c.uri_for('/report/new') %]" method="post" name="mapForm" id="mapForm"[% IF c.cobrand.allow_photo_upload %] enctype="multipart/form-data"[% END %]>
@@ -17,7 +20,7 @@
 <input type="hidden" name="longitude" id="fixmystreet.longitude" value="[% short_longitude | html %]">
 
 [% IF report.used_map %]
-    [% INCLUDE "maps/${map.type}.html" %]
+    [% map_html %]
     </div>
     <div id="side">
 [% ELSE %]