tap on points on touch screen with openlayers

Question

I have openlayers 2.13 along with geoserver 2.1.3.

I have a vector layer where points created, after a CQL filter is activated.

I have a click event for those points. In pc/laptop works fine, but in mobiles (iphone4s safari and android vimicro firefox) if I tap with my finger a point, nothing happens.

I only load the openlayers library <script type='text/javascript' src='OpenLayers.js'></script> and zoom/pan on the map works in mobiles. CQL filter also works and the points are render in mobiles.

But I can not tap them.

How can I fix this ?

Thanks in advance

the code (I can provide more, if you think is neccessary):

mylayer = new OpenLayers.Layer.Vector("my layer", {renderers: ["Canvas", "SVG", "VML"]})

//Add a select feature control 
var select_feature_control = new OpenLayers.Control.SelectFeature(mylayer, {multiple: false,toggle: true});

map.addControl(select_feature_control);

//Activate the control 
select_feature_control.activate();

function selected_feature(event){
//do stuff
}

EDIT

I have this now , trying to use Control.GetFeature

//create layer
mylayer = new OpenLayers.Layer.Vector("mylayer", {renderers: ["Canvas", "SVG", "VML"]})

//set protocol
var myprotocol = new OpenLayers.Protocol.WFS({
    url:  "/geoserver/wfs",
    featureType: "mylayer",
    featureNS: "http://www.mysite.gr"
});

//set control
var select_feature_control = new OpenLayers.Control.GetFeature({
  protocol: myprotocol,
  click: true,
  maxFeatures: 1,
  clickTolerance: 1,
  box: false,
  hover: false
});

//add the control
map.addControl(select_feature_control);

//activate the control
select_feature_control.activate();

//register it an connect it with the function
pins.events.register('featureselected', this, selected_feature);

//the function - gets the id by splitting the fid
function selected_feature(event){
var sf = event.feature.fid;
var sfs = sf.split(".");
var sff = sfs[1];
showtext(sff);
}

thats the part of the cql filter

//pass the filter to the layer
var prot =  new OpenLayers.Protocol.WFS({
    url:  "/geoserver/wfs",
    featureType: "mylayer",
    featureNS: "http://www.mysite.gr",
    defaultFilter: filter_final});

var _CallBack = function(resp) {
    pins.addFeatures(resp.features)
}


var response = prot.read({callback: _CallBack});


//refresh to render POIs
mylayer.refresh({force:true});

I can search the layer and see points on the map. But I still can not select in mobile. In pc, I can click a point, but the cursor of the mouse becomes hourglass and nothing happens. Can you spot what is wrong?

Thanks a million

Answer 1

Did you add the TouchNavigation? http://dev.openlayers.org/docs/files/OpenLayers/Control/TouchNavigation-js.html

If you're only targeting touch enabled devices with your mapping application, you can create a map with only a TouchNavigation control. The OpenLayers.Control.Navigation control is mobile ready by default, but you can generate a smaller build of the library by only including this touch navigation control if you aren’t concerned about mouse interaction.

It should replace the common Navigation control which comes by default on the map.

OpenLayers should detect the device and add the touch or the normal navigation control depending on the platform you are, but this sometimes doesn't work. And also, sometimes we override this on our code without noticing.

I know it says that normal Navigation control should work on mobile, but on my experience, sometimes it does not work right.

Answer 2

Mobile devices require touch controls.

For mobiles, the best is OpenLayers.mobile.js, but since you are using geoserver i guess you are using WFS. The mobile version may not support that. Although the main OpenLayers.js should incorporate touch controls, it does not seem so. add OpenLayers.mobile.js after OpenLayers.js and it should work.

Answer 3

With OpenLayers 2.12 I use the Control.GetFeature with a Identify tool and the touch works for me on mobile devices. By that I mean I activate the control, a button, tap the screen and get my results. Let me know if you are able to get that working.

ctrl_identify = new OpenLayers.Control.GetFeature({
  protocol: myprotocol,
  click: true,
  maxFeatures: 5,
  clickTolerance: 0,
  box: false,
  hover: false
});

Here is the more complete code that I have for my GetFeature. I have tried to be careful with my cutting and pasting but it is possible I have introduced a error. The protocol points to a geoserver wms layer. When the control is active and I click or tap on a feature I zoom to it. The feature selected event, not shown, is where I do other useful stuff. As I said in the comments this may or may not help you.

myprotocol = {
  version: "1.1.0",
  srsName: "EPSG:900913",
  url: geoserver_url/wms,
  featurePrefix: i use my geoserver workspace,
  featureNS: my_namespace,
  setFeatureType: my geoserver layer,
  geometryName: "geom"
};

filter = new OpenLayers.Filter.Comparison({
  type: OpenLayers.Filter.Comparison.EQUAL_TO,
  property: "field",
  value: value
});

selLayer = new OpenLayers.Layer.Vector("parcel_vector", {
  strategies: [new OpenLayers.Strategy.Fixed()],
  styleMap: not shown,
  filter: filter,
  protocol: protocol
});

ctrl_identify = new OpenLayers.Control.GetFeature({
  protocol: myprotocol,
  click: true,
  maxFeatures: 5,
  clickTolerance: 0,
  box: false,
  hover: false
});

var my_filter = "field='" + some value + "'";
filter.value = my_filter;   
selLayer.refresh(); 

Answer 4

Openstreet has support for touch events. See below code :

    PlotMarker(map, pt.icon, pt.coor[0], pt.coor[1], true, function(mk) {
        markers.addMarker(mk);
        mk.events.on({
            mouseover: function(ev) {
               alert("Mouse Over Event");         
            },                
            click: function(ev){                   
                alert("Click Event");                  
            },
            touchstart: function(ev){                
                alert("Touch Event");                      
            }
        });
    });

touchstart simply recognises all touch events and this works in mobiles and tablets. Ive used this in my recent project.