aboutsummaryrefslogtreecommitdiffstats
path: root/templates/web/default/maps/openlayers.html
blob: e815642f16a8dc96860596c1b528c3811af10818 (plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
[% 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 = {
    'page': '[% page %]',
    'area': '[% map.area %]',
    'all_pins': '[% all_pins %]',
    'latitude': [% map.latitude %],
    'longitude': [% map.longitude %],
[% IF map.any_zoom -%]
    'zoomToBounds': 1,
[%- END %]
[% IF map.zoom -%]
    'zoom': [% map.zoom %],
[%- END %]
    'numZoomLevels': [% map.numZoomLevels %],
    'zoomOffset': [% map.zoomOffset %],
    '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>
    [% IF map.copyright %]
    <p id="copyright">[% map.copyright %]</p>
    [% END %]


[% 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( { lat = map.latitude, lon = map.longitude, zoom = map.zoom + 1 } ) IF map.zoom < map.numZoomLevels - 1;
    SET zoom_out = c.uri_with( { lat = map.latitude, lon = map.longitude, zoom = map.zoom - 1 } ) IF map.zoom > 0;
    SET zoom_in  = '#' IF map.zoom >= map.numZoomLevels - 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 rel="nofollow" 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 rel="nofollow" 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 rel="nofollow" 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 rel="nofollow" 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 rel="nofollow" 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 rel="nofollow" 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 rel="nofollow" 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 %]

[% 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-' _ pin.colour _ '.png') %]"
    alt="[% loc('Problem') %]" style="top:[% pin.py - 64 %]px; left:[% pin.px - 24 %]px; position: absolute;">
[%- IF pin.id -%]
</a>
[% END %]

[% END %]