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
104
105
106
107
108
109
110
111
|
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
<meta name="apple-mobile-web-app-capable" content="yes">
<title>OpenLayers: Sundials on a Spherical Mercator Map</title>
<script src='http://maps.google.com/maps?file=api&v=2&key=ABQIAAAAjpkAC9ePGem0lIq5XcMiuhR_wWLPFku8Ix9i2SXYRVK3e45q1BQUd_beF8dtzKET_EteAjPdGDwqpQ'></script>
<link rel="stylesheet" href="../theme/default/style.css" type="text/css">
<link rel="stylesheet" href="style.css" type="text/css">
<style type="text/css">
html, body {
height: 100%;
}
#map {
width: 100%;
height: 80%;
border: 1px solid black;
}
.olPopup p { margin:0px; font-size: .9em;}
.olPopup h2 { font-size:1.2em; }
</style>
<script src="../lib/OpenLayers.js"></script>
<script type="text/javascript">
var lon = 5;
var lat = 40;
var zoom = 5;
var map, select;
function init(){
var options = {
projection: new OpenLayers.Projection("EPSG:900913"),
displayProjection: new OpenLayers.Projection("EPSG:4326")
};
map = new OpenLayers.Map('map', options);
var mapnik = new OpenLayers.Layer.OSM("OpenStreetMap (Mapnik)");
var gmap = new OpenLayers.Layer.Google("Google", {sphericalMercator:true});
var sundials = new OpenLayers.Layer.Vector("KML", {
projection: map.displayProjection,
strategies: [new OpenLayers.Strategy.Fixed()],
protocol: new OpenLayers.Protocol.HTTP({
url: "kml/sundials.kml",
format: new OpenLayers.Format.KML({
extractStyles: true,
extractAttributes: true
})
})
});
map.addLayers([mapnik, gmap, sundials]);
select = new OpenLayers.Control.SelectFeature(sundials);
sundials.events.on({
"featureselected": onFeatureSelect,
"featureunselected": onFeatureUnselect
});
map.addControl(select);
select.activate();
map.addControl(new OpenLayers.Control.LayerSwitcher());
map.zoomToExtent(
new OpenLayers.Bounds(
68.774414, 11.381836, 123.662109, 34.628906
).transform(map.displayProjection, map.projection)
);
}
function onPopupClose(evt) {
select.unselectAll();
}
function onFeatureSelect(event) {
var feature = event.feature;
var selectedFeature = feature;
var popup = new OpenLayers.Popup.FramedCloud("chicken",
feature.geometry.getBounds().getCenterLonLat(),
new OpenLayers.Size(100,100),
"<h2>"+feature.attributes.name + "</h2>" + feature.attributes.description,
null, true, onPopupClose
);
feature.popup = popup;
map.addPopup(popup);
}
function onFeatureUnselect(event) {
var feature = event.feature;
if(feature.popup) {
map.removePopup(feature.popup);
feature.popup.destroy();
delete feature.popup;
}
}
</script>
</head>
<body onload="init()">
<h1 id="title">OSM + Google Maps + KML Reprojection</h1>
<div id="tags">
osm, kml, spherical, mercator, reprojection, feature, popup, advanced
</div>
<p id="shortdesc">
Demonstrates loading and displaying a KML file on top of OpenStreetMap (OSM) and Google Maps data. Loads data from a KML file of sundials.
</p>
<div id="map" class="smallmap"></div>
<div id="docs"></div>
</body>
</html>
|
