Add a specific example which uses the OpenLayers.light.debug.js library, instead of the normal full multi-file debug version used for most examples

2012-03-20 20:16:03 -05:00
parent 86de06517f
commit 386dacffb3
2 changed files with 101 additions and 0 deletions
--- a/examples/light-basic.html
+++ b/examples/light-basic.html
@@ -0,0 +1,35 @@
+<!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 Light - Basic Popups</title>
+        <link rel="stylesheet" href="../theme/default/style.css" type="text/css">
+        <link rel="stylesheet" href="style.css" type="text/css">
+        <script src="../OpenLayers.light.debug.js"></script>
+        <script src="light-basic.js"></script>
+    </head>
+    <body onload="init()">
+        <h1 id="title">OpenLayers Light - Basic Popups</h1>
+        <div id="tags">
+            light, vector, feature, popup
+        </div>        
+        <p id="shortdesc">
+            A basic use case example using the OpenLayers.light version of the library.<br>
+            Shows popup info bubble when hovering over features on the map
+        </p>
+        
+        <div id="map" class="smallmap"></div>
+        
+        <div id="docs">
+            <p>
+                This example uses OpenLayers.light.js to display features and show
+                popup info bubbles when the feature is hovered over.
+            </p>
+                See the <a href="light-basic.js" target="_blank">
+                light-basic.js source</a> to see how this is done.
+            </p>
+        </div>
+    </body>
+</html>
--- a/examples/light-basic.js
+++ b/examples/light-basic.js
@@ -0,0 +1,66 @@
+var map;
+
+function init() {
+    map = new OpenLayers.Map("map",{projection:"EPSG:3857"});
+
+    var osm = new OpenLayers.Layer.OSM();
+    var toMercator = OpenLayers.Projection.transforms['EPSG:4326']['EPSG:3857'];
+    var center = toMercator({x:-0.05,y:51.5});
+    
+    /**
+     * Create 5 random vector features.  Your features would typically be fetched
+     * from the server. The features are given an attribute named "foo".
+     * The value of this attribute is an integer that ranges from 0 to 100.
+     */   
+    var features = [];    
+    for(var i = 0; i < 5; i++) {
+        features[i] = new OpenLayers.Feature.Vector(
+                toMercator(new OpenLayers.Geometry.Point(
+                    -0.040 - 0.05*Math.random(),
+                    51.49 + 0.02*Math.random())), 
+                {
+                    foo : 100 * Math.random() | 0
+                }, {
+                    fillColor : '#008040',
+                    fillOpacity : 0.8,                    
+                    strokeColor : "#ee9900",
+                    strokeOpacity : 1,
+                    strokeWidth : 1,
+                    pointRadius : 8
+                });
+    }
+        
+    // create the layer with listeners to create and destroy popups
+    var vector = new OpenLayers.Layer.Vector("Points",{
+        eventListeners:{
+            'featureselected':function(evt){
+                var feature = evt.feature;
+                var popup = new OpenLayers.Popup.FramedCloud("popup",
+                    OpenLayers.LonLat.fromString(feature.geometry.toShortString()),
+                    null,
+                    "<div style='font-size:.8em'>Feature: " + feature.id +"<br>Foo: " + feature.attributes.foo+"</div>",
+                    null,
+                    true
+                );
+                feature.popup = popup;
+                map.addPopup(popup);
+            },
+            'featureunselected':function(evt){
+                var feature = evt.feature;
+                map.removePopup(feature.popup);
+                feature.popup.destroy();
+                feature.popup = null;
+            }
+        }
+    });
+    vector.addFeatures(features);
+
+    // create the select feature control
+    var selector = new OpenLayers.Control.SelectFeature(vector,{
+        autoActivate:true
+    }); 
+    
+    map.addLayers([osm, vector]);
+    map.addControl(selector);
+    map.setCenter(new OpenLayers.LonLat(center.x,center.y), 13);
+}