[OpenLayers-Commits] r10889 - sandbox/sonxurxo/wctravel/examples
commits-20090109 at openlayers.org
commits-20090109 at openlayers.org
Thu Nov 11 15:13:46 EST 2010
Author: sonxurxo
Date: 2010-11-11 12:13:46 -0800 (Thu, 11 Nov 2010)
New Revision: 10889
Added:
sandbox/sonxurxo/wctravel/examples/wctravel.html
Log:
webcam.travel example done. Must add 'api.webcams.travel' to proxy.cgi, and provide a valid devid
Added: sandbox/sonxurxo/wctravel/examples/wctravel.html
===================================================================
--- sandbox/sonxurxo/wctravel/examples/wctravel.html (rev 0)
+++ sandbox/sonxurxo/wctravel/examples/wctravel.html 2010-11-11 20:13:46 UTC (rev 10889)
@@ -0,0 +1,109 @@
+<html xmlns="http://www.w3.org/1999/xhtml">
+ <head>
+ <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 lon = -8.210133;
+ var lat = 42.914096;
+ var zoom = 8;
+ var map, layer;
+
+ var devid = "ENTER_A_VALID_webcam.travel_DEV_ID";
+
+ function init(){
+ map = new OpenLayers.Map( 'map' );
+ layer = new OpenLayers.Layer.WMS( "OpenLayers WMS",
+ "http://vmap0.tiles.osgeo.org/wms/vmap0", {layers: 'basic'} );
+ map.addLayer(layer);
+
+ map.setCenter(new OpenLayers.LonLat(lon, lat), zoom);
+ map.addControl( new OpenLayers.Control.LayerSwitcher() );
+
+ var webcamsLayer = new OpenLayers.Layer.Markers('webcams');
+ map.addLayer(webcamsLayer);
+
+ OpenLayers.Request.issue({
+ method: "GET",
+ proxy: "/cgi-bin/proxy.cgi?url=",
+ //url: "http://api.webcams.travel/rest?devid=ed2d027c5ed4e6bf6c1b6270c71c618f&method=wct.webcams.list_by_country&country=ES&format=json",
+ url: "http://api.webcams.travel/rest?devid=" + devid + "&method=wct.webcams.list_nearby&lat=43.384965&lng=-8.392181&radius=2&per_page=100&format=json",
+ callback: function(response) {
+ var JSONReader = new OpenLayers.Format.JSON();
+ var result = JSONReader.read(response.responseText);
+ for (var i = 0; i < result.webcams.count; i++) {
+ var webcam = result.webcams.webcam[i];
+
+ if (webcam != null) {
+
+ var size = new OpenLayers.Size(32, 32);
+ var offset = new OpenLayers.Pixel(-(size.w / 2) - 3, -size.h);
+
+ var icon = new OpenLayers.Icon(
+ //"../img/marker-blue.png",
+ webcam.icon_url,
+ size, offset);
+
+ var lonlat = new OpenLayers.LonLat(webcam.longitude, webcam.latitude);
+
+ var marker = new OpenLayers.Marker(lonlat, icon);
+ webcamsLayer.addMarker(marker);
+
+ var wrapper = {webcam : webcam, marker: marker};
+
+ marker.events.register("click", wrapper, function() {
+ for (var i = 0; i < map.popups.length; i++) {
+ map.removePopup(map.popups[i]);
+ }
+ var imageURL = this.webcam.thumbnail_url.replace("thumbnail", "webcam");
+ var popup = new OpenLayers.Popup.FramedCloud(
+ "test",
+ this.marker.lonlat,
+ new OpenLayers.Size(400, 350),
+ '<img style="width:320px" src="' + imageURL + '"/>',
+ {
+ size: new OpenLayers.Size(0, 0),
+ offset: new OpenLayers.Pixel(-18, -17)
+ },
+ true,
+ function() {
+ popup.destroy();
+ }
+ );
+ popup.minSize = new OpenLayers.Size(400, 350);
+ popup.maxSize = new OpenLayers.Size(400, 350);
+ popup.autosize = true;
+ map.addPopup(popup);
+ });
+ }
+ }
+ }
+ });
+ }
+ </script>
+ </head>
+ <body onload="init()">
+ <h1 id="title">WMS Example</h1>
+
+ <div id="tags">
+ wms, layer, singletile
+ </div>
+ <p id="shortdesc">
+ Shows the basic use of openlayers using a WMS layer
+ </p>
+
+ <div id="map" style="width:800px;height:450px"></div>
+
+ <div id="docs">
+ This is an example of how to add an WMS layer to the OpenLayers window. The images are tiled in this instance if you wanted to not use a tiled WMS
+ please use this example and pass the option ‘singleTile’ as true.
+ </div>
+ <div id="response">
+ </div>
+ </body>
+</html>
+
+
+
+
More information about the Commits
mailing list