]> dev.renevier.net Git - syp.git/blob - openlayers/examples/sundials.html
err_lonlat_invalid exceptions not thrown correctly
[syp.git] / openlayers / examples / sundials.html
1 <html xmlns="http://www.w3.org/1999/xhtml">
2   <head>
3     <link rel="stylesheet" href="../theme/default/style.css" type="text/css" />
4     <link rel="stylesheet" href="style.css" type="text/css" />
5
6     <style type="text/css">
7         #map {
8             width: 100%;
9             height: 80%;
10             border: 1px solid black;
11         }
12         .olPopup p { margin:0px; font-size: .9em;}
13         .olPopup h2 { font-size:1.2em; }
14     </style>
15     <script src="../lib/OpenLayers.js"></script>
16     <script type="text/javascript">
17         var lon = 5;
18         var lat = 40;
19         var zoom = 5;
20         var map, select;
21
22         function init(){
23             map = new OpenLayers.Map('map');
24
25             var wms = new OpenLayers.Layer.WMS(
26                 "OpenLayers WMS",
27                 "http://labs.metacarta.com/wms/vmap0",
28                 {layers: 'basic'}
29             );
30
31             var sundials = new OpenLayers.Layer.Vector("KML", {
32                 projection: map.displayProjection,
33                 strategies: [new OpenLayers.Strategy.Fixed()],
34                 protocol: new OpenLayers.Protocol.HTTP({
35                     url: "kml/sundials.kml",
36                     format: new OpenLayers.Format.KML({
37                         extractStyles: true,
38                         extractAttributes: true
39                     })
40                 })
41             });
42             
43             map.addLayers([wms, sundials]);
44             
45             select = new OpenLayers.Control.SelectFeature(sundials);
46             
47             sundials.events.on({
48                 "featureselected": onFeatureSelect,
49                 "featureunselected": onFeatureUnselect
50             });
51
52             map.addControl(select);
53             select.activate();   
54             map.zoomToExtent(new OpenLayers.Bounds(68.774414,11.381836,123.662109,34.628906));
55         }
56         function onPopupClose(evt) {
57             select.unselectAll();
58         }
59         function onFeatureSelect(event) {
60             var feature = event.feature;
61             // Since KML is user-generated, do naive protection against
62             // Javascript.
63             var content = "<h2>"+feature.attributes.name + "</h2>" + feature.attributes.description;
64             if (content.search("<script") != -1) {
65                 content = "Content contained Javascript! Escaped content below.<br />" + content.replace(/</g, "&lt;");
66             }
67             popup = new OpenLayers.Popup.FramedCloud("chicken", 
68                                      feature.geometry.getBounds().getCenterLonLat(),
69                                      new OpenLayers.Size(100,100),
70                                      content,
71                                      null, true, onPopupClose);
72             feature.popup = popup;
73             map.addPopup(popup);
74         }
75         function onFeatureUnselect(event) {
76             var feature = event.feature;
77             if(feature.popup) {
78                 map.removePopup(feature.popup);
79                 feature.popup.destroy();
80                 delete feature.popup;
81             }
82         }
83     </script>
84   </head>
85   <body onload="init()">
86       <h1 id="title">KML Layer Example</h1>
87
88       <div id="tags"></div>
89
90       <p id="shortdesc">
91           Demonstrates loading and displaying a KML file on top of a basemap.
92     </p>
93
94     <div id="map" class="smallmap"></div>
95
96     <div id="docs"></div>
97   </body>
98 </html>