ashatora/openlayers
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
Matt Priour
2012-03-20 20:16:03 -05:00
parent 86de06517f
commit 386dacffb3
2 changed files with 101 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files
examples/light-basic.html
+35
View File
@@ -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>
examples/light-basic.js
+66
View File
@@ -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);
}