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>