Mobile Applications with OpenLayers 3

[Electronic Panda via OL3 Dev]

Greetings,

Today I have been working on OpenLayers with Phonegap, it worked pretty
well, here is a simple example if ye wanna see how does it work on android
mobile platform:
https://play.google.com/store/apps/details?id=com.onderaltintas.ol3phonegap<https://play.google.com/store/apps/details?id=com.onderaltintas.ol3phonegap&hl=tr>

So, I wanted to ask few things:
-Is it possible to observe view's rotation event? I used overlay because
vector layer's style's rotation was not working or I couldn't make it work,
plus adding removing marker or changing the marker's attributes was not
possible as far as I know so removing vector layer and adding it once more
was not a good solution.
-Is OL3 caching tiles when they were loaded from the server? Or is it
possible to save tiles with using OL3 and use them as offline source? There
were an example about it in ol3 examples I am pretty sure however today I
couldn't find that example.
-Is it possible to remove zoom control ui elements from the map? Checked
api docs but couldn't find where are the zoom control buttons.
-Instead of rotating marker, firstly I tryed rotating View, however while
rotating map's view, ol.animation.rotation is not working so animation
doesn't look smooth or does it supposed to work with View's rotation?
-Should we put ol.animation.zoom and ol.animation.pan to map.beforeRender()
everytime when we use view.setCenter() or view.setZoom(); or is applying
once enough? Tryed to apply once when I am creating map however it didn't
work.

Best regards,

[OL3 Dev on behalf of Paul Spencer]

Hi, I don't have an android device so I can't comment specifically on your app but this might help

Post by Electronic Panda via OL3 Dev
Greetings,
https://play.google.com/store/apps/details?id=com.onderaltintas.ol3phonegap
-Is it possible to observe view's rotation event? I used overlay because vector layer's style's rotation was not working or I couldn't make it work, plus adding removing marker or changing the marker's attributes was not possible as far as I know so removing vector layer and adding it once more was not a good solution.

If you are looking to rotate an overlay in response to the Device rotating, you can do something like this:

var marker = new ol.Overlay({
element: document.getElementById('location')
});
map.addOverlay(marker);

var geolocation = new ol.Geolocation({
tracking: true
});

geolocation.bindTo('projection', view);
view.bindTo('center', geolocation, 'position');
marker.bindTo('position', geolocation);

var deviceOrientation = new ol.DeviceOrientation({
tracking: true
});

deviceOrientation.on('change:heading', onChangeHeading);

function onChangeHeading(event) {
var heading = event.target.getHeading();
var el = document.getElementById('location');
el.style['-webkit-transform'] = 'rotate('+heading+'rad)';
el.style['transform'] = 'rotate('+heading+'rad)';
}

You can also get heading from geolocation so the deviceOrientation isn't strictly needed - but that was the example I had at hand.

You can also bind the view's rotation to the heading if you want the view to autorotate with the device in some way.

Post by Electronic Panda via OL3 Dev
-Is OL3 caching tiles when they were loaded from the server? Or is it possible to save tiles with using OL3 and use them as offline source? There were an example about it in ol3 examples I am pretty sure however today I couldn't find that example.

OL3 doesn't do anything special to cache tiles beyond what browsers do normally. I used PhoneGap with OL2 and Leaflet and wrote a custom layer that would get tiles from an mbtiles file that the user downloaded (based on XYZ). I think you would need to write a custom layer to specifically cache tiles as loaded into offline storage - I don't recall if PhoneGap backs storage with native storage or uses web storage but I would recommend native storage as the amount of offline storage in mobile devices in limited and varied.

Post by Electronic Panda via OL3 Dev
-Is it possible to remove zoom control ui elements from the map? Checked api docs but couldn't find where are the zoom control buttons.

You need to pass an array or o.Collection of controls to the Map constructor to override the defaults (passing an empty array or null should do the trick).

Post by Electronic Panda via OL3 Dev
-Instead of rotating marker, firstly I tryed rotating View, however while rotating map's view, ol.animation.rotation is not working so animation doesn't look smooth or does it supposed to work with View's rotation?

Not being able to run the app, I don't really get what you are trying here and have no advice.

Post by Electronic Panda via OL3 Dev
-Should we put ol.animation.zoom and ol.animation.pan to map.beforeRender() everytime when we use view.setCenter() or view.setZoom(); or is applying once enough? Tryed to apply once when I am creating map however it didn't work.

ol.animation functions passed to beforeRender trigger the render loop to be run continuously until the functions return false, then the functions are removed from the render loop. They are a one-shot deal. If you want to use zoom and pan animations to recenter then you need to call beforeRender with your animation functions each time you recenter or zoom the view.

Cheers

Paul

Post by Electronic Panda via OL3 Dev
Best regards,
--
https://groups.google.com/d/forum/ol3-dev
---
You received this message because you are subscribed to the Google Groups "OL3 Dev" group.
For more options, visit https://groups.google.com/groups/opt_out.

[Electronic Panda via OL3 Dev]

Hello there,

Thank you for the answers, about the question rotating view; since I
understood how easing works I think I can do it easily, my concern was
turning the view with easing animation to achieve smooth view change. I
have completed other questions with bit of html5 features, however GPS
location doesn't seem to work well which was big dissapointment for me (10m
to 30m error). Probably I can write a service for it to bind locations to
roads or such.

Thanks for the answers once more,

Best regards,

[OL3 Dev on behalf of Paul Spencer]

Not sure if you tried this, trackingOptions can be used to 'enableHighAccuracy', i.e.

var geo = new ol.Geolocation({trackingOptions: {enableHighAccuracy: true}});

The tracking options are those of the Gelocation API position options, http://dev.w3.org/geo/api/spec-source.html#position_options_interface

Cheers

Paul

Post by Electronic Panda via OL3 Dev
Hello there,
Thank you for the answers, about the question rotating view; since I understood how easing works I think I can do it easily, my concern was turning the view with easing animation to achieve smooth view change. I have completed other questions with bit of html5 features, however GPS location doesn't seem to work well which was big dissapointment for me (10m to 30m error). Probably I can write a service for it to bind locations to roads or such.
Thanks for the answers once more,
Best regards,
--
https://groups.google.com/d/forum/ol3-dev
---
You received this message because you are subscribed to the Google Groups "OL3 Dev" group.
For more options, visit https://groups.google.com/groups/opt_out.