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
91
92
93
94
95
96
97
98
99
100
101
102
103
|
<html>
<head>
<title>TileLite Mapnik Server</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
html, body { height: 100%; }
body {margin: 0px;}
#map {
width: 100%;
height: 100%;
}
</style>
<script src="http://openlayers.org/api/OpenLayers.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script src="http://maps.google.com/maps?file=api&v=2&key={{FILL_ME_IN}}"></script>
<script type="text/javascript">
var map;
var enable_gmaps = true;
function getZoom(e) {
$('#zoom')[0].innerHTML = 'Zoom: ' + map.getZoom();
}
function init() {
// Options for World Map in Google Spherical Mercator Projection
var options = {
maxResolution: 156543.0339,
units: 'm',
projection: new OpenLayers.Projection("EPSG:900913"),
displayProjection: new OpenLayers.Projection("EPSG:4326"),
maxExtent: new OpenLayers.Bounds(-20037508.34, -20037508.34, 20037508.34, 20037508.34)
};
map = new OpenLayers.Map("map", options);
function maxResForTileSize(tileSize){
return map.maxExtent.getWidth()/tileSize;
}
// TileLite by default mounts on localhost port 8000
var tiles_url = "http://localhost:8000/";
var tilelite_layer = new OpenLayers.Layer.OSM("Mapnik locally via TileLite", tiles_url + '${z}/${x}/${y}.png');
tilelite_layer.attribution = "Data served by <a href='http://bitbucket.org/springmeyer/tilelite/'>TileLite</a>";
var osm_official_tiles = new OpenLayers.Layer.OSM("OpenStreetMap Mapnik Server (Mod_tile)");
osm_official_tiles.attribution = "Map Data CC-BY-SA Openstreetmap.org";
map.addLayers([tilelite_layer,osm_official_tiles]);
if (enable_gmaps) {
var gphy = new OpenLayers.Layer.Google( "Google Terrain", {type: G_PHYSICAL_MAP, 'sphericalMercator': true} );
var gmap = new OpenLayers.Layer.Google( "Google Streets", {'sphericalMercator': true});
var ghyb = new OpenLayers.Layer.Google("Google Satellite", {type: G_HYBRID_MAP, 'sphericalMercator': true} );
map.addLayers([ghyb, gmap, gphy]);
}
map.addControl(new OpenLayers.Control.Scale());
map.addControl(new OpenLayers.Control.MousePosition());
map.addControl(new OpenLayers.Control.Navigation());
map.addControl(new OpenLayers.Control.PanZoom());
var ls = new OpenLayers.Control.LayerSwitcher();
map.addControl(ls);
//ls.maximizeControl();
function zoom_to_tilelite_extents() {
$.getJSON(tiles_url + "instance.json?jsoncallback=?",
function(data){
var e = data.extent;
map.zoomToExtent(new OpenLayers.Bounds(e[0], e[1], e[2], e[3]));
map.zoomIn();
});
}
// Full to the full extent to make sure data shows up
map.zoomToMaxExtent();
// Attempt to zoom to the data extent by querying Mapnik through TileLite
// This should fail silently if the getJSON does not return data...
zoom_to_tilelite_extents();
map.events.register("moveend", map, getZoom);
map.events.register("zoomend", map, getZoom);
}
</script>
</head>
<body onload="init();">
<h3 style="position:absolute; z-index:10000; left: 100px;">TileLite Mapnik Server</h3>
<h4 style="position:absolute; z-index:10000; bottom: 5px; left: 10px;" id="zoom">Zoom:</h4>
<div id="map">
</div>
</body>
</html>
|
