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

Add dynamic text layer example, with BBOX strategy, SelectFeatureControl,

Browse Source 
and popups.


git-svn-id: http://svn.openlayers.org/trunk/openlayers@9778 dc9f47b5-9b13-0410-9fdd-eb0c1a62fdaf
This commit is contained in:
crschmidt
2009-11-03 15:26:49 +00:00
parent e003972959
commit 7907a81ae5
1 changed files with 90 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

90
examples/dynamic-text-layer.html Normal file
View File

@@ -0,0 +1,90 @@
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>OpenLayers Vector Behavior Example</title>
<link rel="stylesheet" href="../theme/default/style.css" type="text/css" />
<link rel="stylesheet" href="style.css" type="text/css" />
<script src="../lib/OpenLayers.js"></script>
<script type="text/javascript">
var map;
function init(){
map = new OpenLayers.Map('map');
var wms = new OpenLayers.Layer.WMS(
"OpenLayers WMS", "http://labs.metacarta.com/wms/vmap0",
{layers: 'basic'}
);
var layer = new OpenLayers.Layer.Vector("POIs", {
strategies: [new OpenLayers.Strategy.BBOX({resFactor: 1.1})],
protocol: new OpenLayers.Protocol.HTTP({
url: "textfile.txt",
format: new OpenLayers.Format.Text()
})
});
map.addLayers([wms, layer]);
map.zoomToMaxExtent();
// Interaction; not needed for initial display.
var selectControl = new OpenLayers.Control.SelectFeature(layer);
map.addControl(selectControl);
selectControl.activate();
layer.events.on({
'featureselected': onFeatureSelect,
'featureunselected': onFeatureUnselect
});
}
// Needed only for interaction, not for the display.
function onPopupClose(evt) {
// 'this' is the popup.
selectControl.unselect(this.feature);
}
function onFeatureSelect(evt) {
feature = evt.feature;
popup = new OpenLayers.Popup.FramedCloud("featurePopup",
feature.geometry.getBounds().getCenterLonLat(),
new OpenLayers.Size(100,100),
"<h2>"+feature.attributes.title + "</h2>" +
feature.attributes.description,
null, true, onPopupClose);
feature.popup = popup;
popup.feature = feature;
map.addPopup(popup);
}
function onFeatureUnselect(evt) {
feature = evt.feature;
if (feature.popup) {
popup.feature = null;
map.removePopup(feature.popup);
feature.popup.destroy();
feature.popup = null;
}
}
</script>
</head>
<body onload="init()">
<h1 id="title">Dynamic POIs via a Text Layer</h1>
<p id="shortdesc">
Loading dynamic data from a text file.
</p>
<div id="map" class="smallmap"></div>
<div id="docs">
The vector layer shown uses the BBOX strategy, the HTTP protocol,
and the Text format.
This setup appends "?bbox=west,south,east,north" to every
request. This allows you to configure the location as something
like 'textfile.php', and take the '?bbox=' parameter to select
data from a database or the like.
<br /><br />
There is nothing about this example that limits it to text files;
you can do the same thing with KML, GeoJSON, etc.
<br /><br />
This is an alternative to something like the <a href="http://wiki.openstreetmap.org/index.php/OpenLayers_Dynamic_POI">OpenStreetMap "Dynamic POI"</a> example. The Layer is a standard vector layer, and interaction can be
configured via the SelectFeature control, as you can see in the
latter half of the code, which allows you to open a popup when
a feature is selected.
</div>
</body>
</html>