3

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

  • Is wfs enabled on your geoserver? Does firefox/firebug or chrome developer tools give you any information? I have wfs response with one feature coming back after a click. – Ralph Dell Jan 21 '14 at 13:48
  • @Ralph Dell I went to Geoserver > Services > WFS and the "Enable WFS" is clicked. So i guess wfs is actually enabled. When I click a point on the map, in the "Network" of Chrome's console I see a POST with a status 200. But point does not get clicked and the function selected_feature(event){ does not work. At least when using Control.SelectFeature works fine on pc. I tried to load other files too, openlayers.mobile.js, CQL.js, Format.js as neogeomat said, but no difference. – slevin Jan 21 '14 at 17:05
  • @RalphDell I also tried to use a callback inside a Control.SelectFeature and still not work in mobiles. I tried to set the index of the layer 0 or 99, still nothing.... – slevin Jan 21 '14 at 17:09
  • I am sorry to say I am out of ideas at the moment. – Ralph Dell Jan 22 '14 at 13:48
  • On this page gis.catawbacountync.gov/temp/getfeature.html , on your tablet when you zoom in, tap the Identify button, and then tap on a parcel, Is the parcel highlighted and attribute information displayed on the right? – Ralph Dell Jan 22 '14 at 13:54
2

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.

  • First : TouchNavigation is only to browse the map or works with vector layers too? -- Second : You mean add this <script type='text/javascript' src='TouchNavigation.js'></script> ? I have done this and nothing. Unless you mean add this AND use the control like var select_feature_control = new OpenLayers.Control.TouchNavigation. In that case, should I use Control.TouchNavigation and Control.SelectFeature together? How I should edit/rewrite my code? Thanks a million – slevin Jan 22 '14 at 12:29
  • TouchNavigation is already on the general OpenLayers.js file, so you don't need to add any external file. Can you check what controls do you have enabled on your map? Look on map.controls on your javascript debugger. – María Arias de Reyna Domínguez Jan 22 '14 at 15:14
  • Also, check if this example works on your touchscreen: gis.ibbeck.de/OLClient/examples/WFSGetFeatureControl/… – María Arias de Reyna Domínguez Jan 22 '14 at 15:17
  • I add just map.addControl(new OpenLayers.Control.Zoom({position: new OpenLayers.Pixel(2, 15)})); map.addControl(new OpenLayers.Control.Navigation()); map.addControl( new OpenLayers.Control.TouchNavigation({dragPanOptions: {enableKinetic: true}})); and nothing! Still cannot tap features! My tablet says that the link maybe temp. down or moved to a new web address – slevin Jan 22 '14 at 18:05
1

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.

  • You mean add <script type='text/javascript' src='OpenLayers.mobile.js'></script> after <script type='text/javascript' src='OpenLayers.js'></script>? Because this breaks my search form, for some reason. – slevin Jan 12 '14 at 11:41
  • yes, you can even add it before. – neogeomat Jan 12 '14 at 11:47
  • Adding it before does not break the search form. But the points still not get selected. – slevin Jan 12 '14 at 11:54
  • You will need a custom build of openlayers which will incorporate both of the files. see docs.openlayers.org/library/deploying.html – neogeomat Jan 12 '14 at 12:05
  • To test, I incude just the openlayers.mobile.js an breaks the form, even in mobile. Is that normal? – slevin Jan 12 '14 at 14:25
1

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(); 
  • I am sorry, can you be more analytical, I did not get you. How can I replace my SelectFeaturewith GetFeature? – slevin Jan 16 '14 at 19:47
  • I was not sure how to answer your question so I pulled a couple of OpenLayers examples, on my ipad, that use the SelectFeature Control openlayers.org/dev/examples/highlight-feature.html and openlayers.org/dev/examples/select-feature-multilayer.html. They worked on the mobile device. So I am not sure why yours does not. My GetFeature works on vector layer derived from a geoserver WMS layer with a cql filter. Do you want more information in that? – Ralph Dell Jan 16 '14 at 21:21
  • Let me rephrase. How to edit my code so I can use Control.GetFeature instead of Control.SelectFeature? Also...Can I use Control.GetFeature with vector layers? Will need a proxy for that? – slevin Jan 16 '14 at 23:00
  • I have posted more complete code for my GetFeature. That may or may not help you. I am suspicious about how you are creating your vector layer since the OpenLayers SelectFeature examples work on mobile devices. I use a proxy. – Ralph Dell Jan 17 '14 at 15:41
  • This is what I do to create my vector layer mylayer = new OpenLayers.Layer.Vector("my layer", {renderers: ["Canvas", "SVG", "VML"]}) Is something wrong with that? – slevin Jan 17 '14 at 18:58
1

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.

  • I use vector layer and features , not Openstreet or markers. Anyway, I tried to use touchstart:function(e) in the callbacks of the vector layer, and still nothing. – slevin Jan 23 '14 at 16:10

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.