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
| <html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script src="openlayers/OpenLayers.js"></script>
<SCRIPT TYPE="text/javascript" SRC="OpenStreetMap.js"></SCRIPT>
<script type="text/javascript">
var map,select;
function init()
{
var extent = new OpenLayers.Bounds(148.98, -35.48, 149.25, -35.15);
// set up the map options
var options =
{
maxExtent: extent,
numZoomLevels: 20,
};
// create the ol map object
map = new OpenLayers.Map('map', options);
var osmtiles = new OpenLayers.Layer.OSM("OSM");
var nearmap = new OpenLayers.Layer.OSM.NearMap("NearMap");
var tripplantest = new OpenLayers.Layer.GML("tripplantest", "tripPlannerTester.kml", {
format: OpenLayers.Format.KML,
formatOptions: {
extractStyles: true,
extractAttributes: true,
maxDepth: 2
}
});
map.addLayers([osmtiles,tripplantest,nearmap]);
var lonLat = new OpenLayers.LonLat(149.11, -35.28).transform(new OpenLayers.Projection("EPSG:4326"), map.getProjectionObject());
map.setCenter(lonLat, 11);
map.addControl( new OpenLayers.Control.LayerSwitcher({'ascending':false}));
map.addControl(new OpenLayers.Control.MousePosition(
{
displayProjection: new OpenLayers.Projection("EPSG:4326"),
suffix: "__________________________________"
}));
map.addControl(new OpenLayers.Control.MousePosition(
{
displayProjection: new OpenLayers.Projection("EPSG:900913")
}));
select = new OpenLayers.Control.SelectFeature(tripplantest);
tripplantest.events.on({
"featureselected": onFeatureSelect,
"featureunselected": onFeatureUnselect
});
map.addControl(select);
select.activate();
}
function onPopupClose(evt) {
select.unselectAll();
}
function onFeatureSelect(event) {
var feature = event.feature;
// Since KML is user-generated, do naive protection against
// Javascript.
var content = "<h2>"+feature.attributes.name + "</h2>" + feature.attributes.description;
if (content.search("<script") != -1) {
content = "Content contained Javascript! Escaped content below.<br />" + content.replace(/</g, "<");
}
popup = new OpenLayers.Popup.FramedCloud("chicken",
feature.geometry.getBounds().getCenterLonLat(),
new OpenLayers.Size(100,100),
content,
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()">
<div id="map" width="100%" height="100%" class="smallmap"></div>
</body>
</html>
|