Widget:OP

<html>

 <head><title>OpenLayers KML Example</title></head>
 <body>

 <script src="https://cdnjs.cloudflare.com/ajax/libs/openlayers/2.11/lib/OpenLayers.js"></script>           
 
 <script>
   map = new OpenLayers.Map("mapdiv");
   map.addLayer(new OpenLayers.Layer.OSM());
      
   var kmllayer = new OpenLayers.Layer.Vector("KML", {
           strategies: [new OpenLayers.Strategy.Fixed()],
           protocol: new OpenLayers.Protocol.HTTP({
               url: "./mapperz-kml-example.kml",
               format: new OpenLayers.Format.KML({
                   extractStyles: true, 
                   extractAttributes: true,
                   maxDepth: 2
               })
           })
       });
       
   map.addLayer(kmllayer);
   
   //Set start centrepoint and zoom
   //TODO: Is it possible to just zoom to extents of KML objects instead?
   
   var lonLat = new OpenLayers.LonLat( -0.1279688 ,51.5077286 )
         .transform(
           new OpenLayers.Projection("EPSG:4326"), // transform from WGS 1984
           map.getProjectionObject() // to Spherical Mercator Projection
         );
   var zoom=14;
   map.setCenter (lonLat, zoom);  
   
   //Add a selector control to the kmllayer with popup functions
   var controls = {
     selector: new OpenLayers.Control.SelectFeature(kmllayer, { onSelect: createPopup, onUnselect: destroyPopup })
   };

   function createPopup(feature) {
     feature.popup = new OpenLayers.Popup.FramedCloud("pop",
         feature.geometry.getBounds().getCenterLonLat(),
         null,

'

'+feature.attributes.description+'

',

         null,
         true,
         function() { controls['selector'].unselectAll(); }
     );
     //feature.popup.closeOnMove = true;
     map.addPopup(feature.popup);
   }

   function destroyPopup(feature) {
     feature.popup.destroy();
     feature.popup = null;
   }
   
   map.addControl(controls['selector']);
   controls['selector'].activate();
 </script>

Populate vector layer with data from a KML file.

 Also bind popup events to the display the description attributes.
 The KML file (this example taken from <a href="http://mapperz.blogspot.co.uk">mapperz</a>

originally) must be served under the same domain name.

</body></html>

Widget:OP

Wikiexplora