[OpenLayers-Users] problem to do a simple button on a mobile map

Fri Aug 31 12:51:48 PDT 2012

Hi list

I'm just testing some mobile navigation

I have a map and a simple toolbar and in this toolbar I add a simple tool which just do an alert on the trigger method when user touch the button.

The problem I have: I touch the button, trigger is called, but, next touch anywhere on the screen will make trigger called again… I have no idea why, my example have almost no code…

I guess someone could easily tell me what is my problem?

Here is my button:

GeolocateControl = OpenLayers.Class(OpenLayers.Control, {
        type: OpenLayers.Control.TYPE_BUTTON,
        CLASS_NAME: "GeolocateControl",
        trigger: function(){
            alert("trigger");
        }
    });

Here is my complete test page

<!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">
        <link rel="stylesheet" href="http://dev.openlayers.org/releases/OpenLayers-2.12/theme/default/style.mobile.css" type="text/css">
        <link rel="stylesheet" href="http://dev.openlayers.org/releases/OpenLayers-2.12/theme/default/style.css" type="text/css">
        <script src="http://dev.openlayers.org/releases/OpenLayers-2.12/lib/OpenLayers.js?mobile"></script>
        <style>
            html, body {
                margin: 0;
                padding: 0;
                height: 100%;
            }
            #map {
                position: relative;
                width: 100%;
                height: 100%;
            }
        </style>
    </head>
    <body>
        <div id="map"></div>
        <script>

    var toolbar = new OpenLayers.Control.Panel({
        displayClass: 'olControlEditingToolbar'
    });

    GeolocateControl = OpenLayers.Class(OpenLayers.Control, {
        type: OpenLayers.Control.TYPE_BUTTON,
        CLASS_NAME: "GeolocateControl",
        trigger: function(){
            alert("trigger");
        }
    });

    toolbar.addControls([
        new GeolocateControl()
    ]);

    var osm = new OpenLayers.Layer.OSM();
    osm.wrapDateLine = false;

    map = new OpenLayers.Map({
        div: 'map',
        projection: 'EPSG:900913',
        numZoomLevels: 18,
        controls: [
            toolbar
        ],
        layers: [osm],
        center: new OpenLayers.LonLat(0, 0),
        zoom: 1,
        theme: null
    });

        </script>
    </body>
</html>