source: subversion/applications/rendering/osmarender/static-osmarender/display.html @ 23318

Last change on this file since 23318 was 1474, checked in by nickburch, 13 years ago

For generating static tiles of osmarender output, and includes a simple html+js page to display them

File size: 2.8 KB
Line 
1<html>
2<head>
3        <title>OSM Rendered Output</title>
4        <style type="text/css">
5        </style>
6        <script type="text/javascript" src="information.js"></script>
7</head>
8<body id="body">
9
10<div id="images">
11        <div id="row1" class="tilerow">
12                <img class="tile" id="row1-img1" /><img class="tile" id="row1-img2" />
13        </div>
14        <div id="row2" class="tilerow">
15                <img class="tile" id="row2-img1" /><img class="tile" id="row2-img2" />
16        </div>
17</div>
18
19<div style="position: absolute; top: 100px; right: 5px;">
20        <div id="controls">
21                <table>
22                        <tr><td /><td>
23                                <a href="" id="north">north</a>
24                        </td><td /></tr>
25                        <tr><td>
26                                <a href="" id="west">west</a>
27                        </td><td /><td>
28                                <a href="" id="east">east</a>
29                        </td></tr>
30                        <tr><td /><td>
31                                <a href="" id="south">south</a>
32                        </td><td /></tr>
33                        <tr><td colspan="3" align="center">
34                                <br /><br />
35                                <a href="" id="zoomin">zoom in</a>
36                                <br />
37                                <a href="" id="zoomout">zoom out</a>
38                        </td></tr>
39                </table>
40        </div>
41</div>
42
43<br style="clear: both" />
44
45<script type="text/javascript">
46var ia = document.getElementById("images");
47
48function setup(easting,northing,zoom) {
49        // Where to find things
50        var tile_base = "scale-" + zoom + "/";
51
52        // Set the images
53        for(var i=0; i<=1; i=i+1) {
54                for(var j=0; j<=1; j=j+1) {
55                        var img_id = "row" + (i+1) + "-img" + (j+1);
56                        var img = document.getElementById(img_id);
57
58                        var img_easting = easting + j;
59                        var img_northing = northing + i;
60
61                        img.src = tile_base + "tile-" + img_northing + "x" + img_easting + ".png";
62                        img.style.width = tile_widths[zoom];
63                        img.style.height = tile_heights[zoom];
64                }
65        }
66
67
68        // Setup our nsew links
69        function navLink(dir,e,n,z) {
70                var a = document.getElementById(dir);
71                var done = false;
72                if(e > 0 && n > 0 && z > 0) {
73                        if(e <= tiles_in_dir[z] && n <= tiles_in_dir[z] && z <= scales) {
74                                a.href = "?" + e + "," + n + "," + z;
75                                done = true;
76                        }
77                }
78                if(!done) {
79                        a.href="#";
80                }
81        }
82        navLink("north", easting, (northing-1), zoom);
83        navLink("south", easting, (northing+1), zoom);
84        navLink("east",  (easting+1), northing, zoom);
85        navLink("west",  (easting-1), northing, zoom);
86
87        // Setup the zoom links
88        navLink("zoomin", (easting*2), (northing*2), (zoom+1));
89        navLink("zoomout", Math.round(easting/2), Math.round(northing/2), (zoom-1));
90}
91
92// What tiles did they request?
93var easting = 1;
94var northing = 1;
95var zoom = 1;
96if(location.href.indexOf("?") > 0) {
97        var coords = location.href.substring( location.href.indexOf("?") + 1 );
98        if(coords.indexOf("#") > 0) {
99                coords = coords.substring( 0, coords.indexOf("#") );
100        }
101
102        easting = coords.substring( 0, coords.indexOf(",") );
103        coords = coords.substring( coords.indexOf(",") + 1 );
104        northing = coords.substring( 0, coords.indexOf(",") );
105        zoom = coords.substring( coords.indexOf(",") + 1 );
106
107        // make numbers
108        easting = easting / 1;
109        northing = northing / 1;
110        zoom = zoom / 1;
111}
112
113setup(easting,northing,zoom);
114</script>
115
116</body>
117</html>
Note: See TracBrowser for help on using the repository browser.