diff --git a/examples/light-basic.html b/examples/light-basic.html new file mode 100644 index 0000000000..634b450198 --- /dev/null +++ b/examples/light-basic.html @@ -0,0 +1,35 @@ + + + + + + + OpenLayers Light - Basic Popups + + + + + + +

OpenLayers Light - Basic Popups

+
+ light, vector, feature, popup +
+

+ A basic use case example using the OpenLayers.light version of the library.
+ Shows popup info bubble when hovering over features on the map +

+ +
+ +
+

+ This example uses OpenLayers.light.js to display features and show + popup info bubbles when the feature is hovered over. +

+ See the + light-basic.js source to see how this is done. +

+
+ + diff --git a/examples/light-basic.js b/examples/light-basic.js new file mode 100644 index 0000000000..15381f460b --- /dev/null +++ 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, + "
Feature: " + feature.id +"
Foo: " + feature.attributes.foo+"
", + 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); +}