Minor bus stop moving UI
[bus.git] / openlayers / examples / click.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <title>OpenLayers Click Event 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">
            OpenLayers.Control.Click = OpenLayers.Class(OpenLayers.Control, {                
                defaultHandlerOptions: {
                    'single': true,
                    'double': false,
                    'pixelTolerance': 0,
                    'stopSingle': false,
                    'stopDouble': false
                },
 
                initialize: function(options) {
                    this.handlerOptions = OpenLayers.Util.extend(
                        {}, this.defaultHandlerOptions
                    );
                    OpenLayers.Control.prototype.initialize.apply(
                        this, arguments
                    ); 
                    this.handler = new OpenLayers.Handler.Click(
                        this, {
                            'click': this.trigger
                        }, this.handlerOptions
                    );
                }, 
 
                trigger: function(e) {
                    var lonlat = map.getLonLatFromViewPortPx(e.xy);
                    alert("You clicked near " + lonlat.lat + " N, " +
                                              + lonlat.lon + " E");
                }
 
            });
            var map;
            function init(){
                map = new OpenLayers.Map('map');
 
                var ol_wms = new OpenLayers.Layer.WMS( "OpenLayers WMS",
                    "http://labs.metacarta.com/wms/vmap0?", {layers: 'basic'} );
 
            var jpl_wms = new OpenLayers.Layer.WMS( "NASA Global Mosaic",
                "http://t1.hypercube.telascience.org/cgi-bin/landsat7", 
                {layers: "landsat7"});
 
                jpl_wms.setVisibility(false);
 
                map.addLayers([ol_wms, jpl_wms]);
                map.addControl(new OpenLayers.Control.LayerSwitcher());
                // map.setCenter(new OpenLayers.LonLat(0, 0), 0);
                map.zoomToMaxExtent();
                
                var click = new OpenLayers.Control.Click();
                map.addControl(click);
                click.activate();
 
            }
        </script>
    </head>
    <body onload="init()">
        <h1 id="title">Click Event Example</h1>
 
        <div id="tags">
        </div>
 
        <p id="shortdesc">
            This example shows the use of the click handler and getLonLatFromViewPortPx functions to trigger events on mouse click. 
 
        </p>
 
        <div id="map" class="smallmap"></div>
    
        <div id="docs">
            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. 
        </div>
    </body>
</html>