[GIS] tap on points on touch screen with openlayers

mobileopenlayers-2

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

Best Answer

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.

Related Question