e8960054a9
git-svn-id: http://svn.openlayers.org/trunk/openlayers@12082 dc9f47b5-9b13-0410-9fdd-eb0c1a62fdaf
102 lines
4.6 KiB
HTML
102 lines
4.6 KiB
HTML
<!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 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://vmap0.tiles.osgeo.org/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.
|
|
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.
|
|
var feature = this.feature;
|
|
if (feature.layer) { // The feature is not destroyed
|
|
selectControl.unselect(feature);
|
|
} else { // After "moveend" or "refresh" events on POIs layer all
|
|
// features have been destroyed by the Strategy.BBOX
|
|
this.destroy();
|
|
}
|
|
}
|
|
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, true);
|
|
}
|
|
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>
|
|
<div id="tags">
|
|
poi, dynamic data, text, format, strategy, popup, select, selection
|
|
</div>
|
|
<p id="shortdesc">
|
|
Loading dynamic data from a text file.
|
|
</p>
|
|
<div id="map" class="smallmap"></div>
|
|
<div id="docs">
|
|
<p>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.</p>
|
|
<p>There is nothing about this example that limits it to text files;
|
|
you can do the same thing with KML, GeoJSON, etc.</p>
|
|
<p>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.</p>
|
|
</div>
|
|
</body>
|
|
</html>
|