Geospatial – News

OpenLayers 3: geolocation with map orientation

2 Mai 2014


With the wide availability of Web technologies, more and more GIS applications are available online and accessible from mobile terminals. New use-cases are attributed to this mobility. Users expect to geolocate their position on a map as well as to use the map application for routing/navigation purposes.


  •     geolocation
  •     navigation
  •     animation
  •     HTML5 Geolocation API
  •     OpenLayers 3


Geolocation requires to recenter the map on the user’s position and highlight this position with a marker. In a routing context, the map will pan in order to keep the position of the user at the center of the map. Besides, the map will turn so that the top of the map is always the direction the users is going towards, simplifying the map interpretation and the user orientation.

Geolocation/navigation in a nomad context is not easy, since routing implies frequent position changes as well as variations of the geolocation precision. Even though the HTML5 APIs provide raw position and direction information, their use as such is not sufficient since there is position or orientation skipping resulting in jerkily moves on the map.

Smooth user position and direction need to be implemented on the basis of the information provided by the HTML5 geolocation API.


To reach this goal, the raw information provided by the geolocation API is temporarily stored in a vector suite allowing to interpolate and to smooth out information before its transfer to the map.

Technically, we processed as follows:

When a new position is provided by the geolocation API, a new point is added to a LineString XYZM-type geometry. This 4D geometry allows to store different positions when moving. The Z coordinate is actually used to store the orientation and M, the time. Thanks to suite of points, the X, Y and Z values can be interpolated for all M time, relying on the “getCoordinateAtM” method provided by OpenLayers 3.

To animate the map as smoothly as possible, we use the animation framework of OpenLayers 3. For each frame, via the function „beforeRender“, we change the center and rotation values of the frame state. In this way, it is guaranteed that we do get with a millisecond precision the interpolated value corresponding to the current frame, regardless of the refresh frequency rate (which depends on the browser performances), at the instant t. (cf.

Particular attention has been paid to the management of map rotation angles. Angle rotation changes over 180° must be avoided so not to make the user dizzy. For instance, when the direction goes from 20° to 350°, a 30° counterclockwise rotation must be made and not a 330° clockwise rotation.



Thanks to the internal mechanism of animation management, a fluid animation throughout the user moves leads to optimal user comfort.



You can directly test the example if you have a smart phone.

You can also test the application by simulating a move from a sample of real data.


  •     live example


To improve even more this example, we could for instance represent the precision factor (accuracy) of the geolocation as a circle around the user position.

We could also adjust the resolution of the view based on speed. The precision would then be greater at a slow speed, and smaller at a greater speed.

Finally, we could position the map on the basis of information provided by the compass when the speed is 0 rather than repositioning the map with the North pointing up.