openlayers/examples/point-track-markers.html

   1 <html xmlns="http://www.w3.org/1999/xhtml">
   2   <head>
   3     <title>OpenLayers: Point Track Markers</title>
   4     <link rel="stylesheet" href="../theme/default/style.css" type="text/css" />
   5     <link rel="stylesheet" href="style.css" type="text/css" />
   6     <script src="../lib/OpenLayers.js"></script>
   7     <script type="text/javascript">
   8         var map, layer, rss, lineFeatures, popup;
   9
  10         OpenLayers.ProxyHost = "proxy.cgi?url=";
  11         function init(){
  12             map = new OpenLayers.Map('map', {maxResolution:'auto'});
  13             layer = new OpenLayers.Layer.WMS( "OpenLayers WMS",
  14                     "http://labs.metacarta.com/wms/vmap0", {layers: 'basic'} );
  15             map.addLayer(layer);
  16             map.setCenter(new OpenLayers.LonLat(20.22, 22.05), 9);
  17             map.addControl(new OpenLayers.Control.LayerSwitcher());
  18         }
  19
  20         function addUrl() {
  21             var urlObj = OpenLayers.Util.getElement('url');
  22             var value = urlObj.value;
  23             var parts = value.split("/");
  24             rss = new OpenLayers.Layer.GeoRSS(parts[parts.length-1], value);
  25             rss.events.register("loadend", window, populateMap);
  26             map.addLayer(rss);
  27         }
  28
  29         function populateMap() {
  30             // create the point track layer
  31             var lineLayer = new OpenLayers.Layer.PointTrack(rss.name + " Track",
  32                     {dataFrom: OpenLayers.Layer.PointTrack.dataFrom.SOURCE_NODE});
  33             // add the features from the rss layer to the track layer. This
  34             // also works with OpenLayers.Feature.Vector features.
  35             lineLayer.addNodes(rss.features);
  36             map.addLayer(lineLayer);
  37
  38             rss.setName(rss.name + " Comments");
  39
  40             var feature, marker;
  41             // only show markers for features that are not "Untitled"
  42             for (var i = rss.features.length-1; i>0; i--) {
  43                 if (rss.features[i].data.popupContentHTML.indexOf(
  44                         "Untitled") != -1) {
  45                     rss.removeMarker(rss.markers[i]);
  46                 }
  47             }
  48
  49             // keep markers on top of tracks
  50             map.raiseLayer(rss, 1);
  51         }
  52     </script>
  53   </head>
  54   <body onload="init()">
  55     <h1 id="title">GeoRSS PointTrack in OpenLayers</h1>
  56     <p style="font-size:.9em;">This demo uses OpenLayers.Layer.GeoRSS and OpenLayers.Layer.PointTrack. The track is created by connecting the points of the GeoRSS feed.</a></p>
  57     <form onsubmit="return false;">
  58    GeoRSS URL: <input type="text" id="url" size="50" /><input type="submit" onclick="addUrl(); return false;" value="Load Feed" onsubmit="addUrl(); return false;" />
  59     </form>
  60     <p>The above input box allows the input of a URL to a GeoRSS feed. This feed can be local to the HTML page -- for example, entering 'xml/track1.xml' will work by default.</p>
  61     <p>The example shows a track, displayed as a line connecting the points of the feed. It also shows markers at positions that have a title tag in the rss item. If clicked, a popup will show title and description.</p>
  62     <div id="map" class="smallmap"></div>
  63   </body>
  64 </html>