Building maps with AngularJS and openlayers

By Eugenia Pérez | 9 April, 2015

During the last few weeks we have resumed a Project that was stopped for some time. The idea is to have something deliverable by the start of this summer.

These days we have been working on the maps functionality. The idea is to display races courses in a map in order to let visitors inspect the path they have to follow to complete a given race. To do so we are using the opensource map library openlayers. Given that the client-side code of the app is written with AngularJs a third party directive is being used. You can find it here: http://tombatossals.github.io/angular-openlayers-directive/

Despite the fact that it is rather limited yet it makes quite easy to show maps on the screen.

At this point the user can upload a GPX or KML file containing the course of a race and it will be stored by the app. Then this info will be presented when visitors access the events.

The pictures below show how a user can upload a file with some geographic info and as a result it is displayed on the map. Moreover the user can switch between different base maps like aerial, road or aerial with labels, all provided bay Bing.

Internally the map consists of two layers. The first one is the base map referenced above and the second one is a vector layer containing the course of the race.

The final goal is building a website where visitors can access to detailed info of a wide range of races including their course, been able to downloading to a GPS enabled devised and follow the path as a training session to be ready for the event before taking it.

You can find further information on the beta project (without updating) here: http://eugeniaperez.es/wordpress/runniac-la-red-social-para-runners/

facebooktwittergoogle_plusredditpinterestlinkedinmailby feather