diff options
Diffstat (limited to 'misc/openlayers/examples/dynamic-text-layer.html')
| -rw-r--r-- | misc/openlayers/examples/dynamic-text-layer.html | 101 |
1 files changed, 101 insertions, 0 deletions
diff --git a/misc/openlayers/examples/dynamic-text-layer.html b/misc/openlayers/examples/dynamic-text-layer.html new file mode 100644 index 0000000..a361b73 --- /dev/null +++ b/misc/openlayers/examples/dynamic-text-layer.html @@ -0,0 +1,101 @@ +<!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> |