]> dev.renevier.net Git - syp.git/blob - openlayers/examples/click.html
add some margin around image
[syp.git] / openlayers / examples / click.html
1 <html xmlns="http://www.w3.org/1999/xhtml">
2     <head>
3         <title>OpenLayers Click Event Example</title>
4         
5         <link rel="stylesheet" href="../theme/default/style.css" type="text/css" />
6         <link rel="stylesheet" href="style.css" type="text/css" />
7         <script src="../lib/OpenLayers.js"></script>
8         <script type="text/javascript">
9             OpenLayers.Control.Click = OpenLayers.Class(OpenLayers.Control, {                
10                 defaultHandlerOptions: {
11                     'single': true,
12                     'double': false,
13                     'pixelTolerance': 0,
14                     'stopSingle': false,
15                     'stopDouble': false
16                 },
17
18                 initialize: function(options) {
19                     this.handlerOptions = OpenLayers.Util.extend(
20                         {}, this.defaultHandlerOptions
21                     );
22                     OpenLayers.Control.prototype.initialize.apply(
23                         this, arguments
24                     ); 
25                     this.handler = new OpenLayers.Handler.Click(
26                         this, {
27                             'click': this.trigger
28                         }, this.handlerOptions
29                     );
30                 }, 
31
32                 trigger: function(e) {
33                     var lonlat = map.getLonLatFromViewPortPx(e.xy);
34                     alert("You clicked near " + lonlat.lat + " N, " +
35                                               + lonlat.lon + " E");
36                 }
37
38             });
39             var map;
40             function init(){
41                 map = new OpenLayers.Map('map');
42
43                 var ol_wms = new OpenLayers.Layer.WMS( "OpenLayers WMS",
44                     "http://labs.metacarta.com/wms/vmap0?", {layers: 'basic'} );
45
46             var jpl_wms = new OpenLayers.Layer.WMS( "NASA Global Mosaic",
47                 "http://t1.hypercube.telascience.org/cgi-bin/landsat7", 
48                 {layers: "landsat7"});
49
50                 jpl_wms.setVisibility(false);
51
52                 map.addLayers([ol_wms, jpl_wms]);
53                 map.addControl(new OpenLayers.Control.LayerSwitcher());
54                 // map.setCenter(new OpenLayers.LonLat(0, 0), 0);
55                 map.zoomToMaxExtent();
56                 
57                 var click = new OpenLayers.Control.Click();
58                 map.addControl(click);
59                 click.activate();
60
61             }
62         </script>
63     </head>
64     <body onload="init()">
65         <h1 id="title">Click Event Example</h1>
66
67         <div id="tags">
68         </div>
69
70         <p id="shortdesc">
71             This example shows the use of the click handler and getLonLatFromViewPortPx functions to trigger events on mouse click. 
72
73         </p>
74
75         <div id="map" class="smallmap"></div>
76     
77         <div id="docs">
78             Using the Click handler allows you to (for example) catch clicks without catching double clicks, something that standard browser events don't do for you. (Try double clicking: you'll zoom in, whereas using the browser click event, you would just get two alerts.) This example click control shows you how to use it. 
79         </div>
80     </body>
81 </html>