Incentivizing Cycling With the HERE APIs – Bosch Connected Experience 2020

On February 17 - 19 2020, team eXity participated in BCX 2020. During the competition we developed a new module called Speed.Bike for the COBI.BIKE ecosystem with HERE Technologies as the API provider for location technology. The theme of the competition was to use location, bikes, and rider data, as well as other custom sensor inputs to derive solutions for the operation of an eBike. The project secured a 3rd place in the mobility track at BCX 2020. Read on to know how we made it all happen!

What is Speed.Bike?

Speed.Bike is PoC of a new module within the Cobi.Bike ecosystem that allows cyclists equipped with COBI.BIKE hardware to take part in bicycle races using a simple matchmaking system where users can query for other cyclists during a bicycle competition.
The service brings ideas of UX gamification by allowing users to earn reputation points through races, improve their rank among other cyclists, and compete for dominance in districts of a given city. The module is focused on people who are interested in competitive racing for fun or health benefits, while socializing with other cyclists in their city or other cities/countries.

How did we turn an idea into a PoC?

Taking into account the COBI.BIKE ecosystem and technologies available from our fellow partners from the competition, we came up with the following tech stack:

1. HERE APIs for maps, navigation services, and map overlays
2. NodeJS for server part and OpenShift as a docker container hosting
3. JavaScript for web part with COBI.BIKE API integration

Integration with maps

HERE APIs are the core of the solution since they enable mapping, navigation, and routing services. In order to start building a project, we got our freemium API Keys from the developer portal.
The very first challenge for our team during the competition was to define use cases, user stories and identify in what parts of the app it’s relevant and essential to utilize and implement maps alongside navigation. We have used a map in the following screens and user cases:

1. Profile and city overview
2. Navigation to the race place
3. Race routing
4. City control map

We will shortly cover all of these use cases with the corresponding implementation.
Profile and city overview screen show the user’s name and picture, a count of reputation points earned in previous races and a button to search for races.

To integrate a map like this you simply load a set of HERE modules in the header of your web page and implement a small function to set up all the necessary components in JavaScript. For more information visit the official documentation.

        
function initMap() {
    var platform = new H.service.Platform({
        apikey: "tm-_YBiPMFzkGwKWCW8hC8Iwp0W3pqqOFSThHHe_FuQ"
    });
    
    var defaultLayers = platform.createDefaultLayers();
    var map = new H.Map(
        document.getElementById('mapContainer'),
        defaultLayers.vector.normal.map,
        {
            zoom: 11,
            center: {lat: 52.53086, lng: 13.38474}
        });
    
    var ui = H.ui.UI.createDefault(map, defaultLayers);
    ui.getControl('scalebar').setVisibility(false)
    ui.getControl('mapsettings').setVisibility(false)
    ui.getControl('zoom').setVisibility(false)

    // Add basic map events like pan and zoom 
    var mapEvents = new H.mapevents.MapEvents(map);
    var behavior = new H.mapevents.Behavior(mapEvents);
}

  

By choosing a race in the app you can navigate to the place where the race starts.

For that, we used the HERE Routing API. This was achieved with a router, route parameters, and a callback in which you can easily design markers, route lines, route shapes, etc.

        
// Get an instance of the routing service:
var router = platform.getRoutingService();

var routingParameters = {
  // The routing mode:
  'mode': 'fastest;bicycle',
  // The start point of the route:
  'waypoint0': 'geo!52.5219184,13.411026',
  // The end point of the route:
  'waypoint1': 'geo!52.5075881,13.3881868',
  // To retrieve the shape of the route we choose the route
  // representation mode 'display'
  'representation': 'display'
};

// Call calculateRoute() with the routing parameters,
// the callback and an error callback function (called if a
// communication error occurs):
router.calculateRoute(routingParameters, onResult,
  function(error) {
    alert(error.message);
});

  

The same set of APIs with the instructions parameter are used in the race screen for navigating users to the finish line.

After finishing a race you can win reputation points that influence your overall ranking in the city.! First of all, our team decided to show image overlays on the map. Furthermore, we committed to using GeoJSON format because of how simple it is to visualize it with HERE maps.

In 3 lines of code, you can display a nice looking geo-JSON on the map. You just store it in your projects’ resource directory, load the file and display.

        
function addOverlay(map) {
  var reader = new H.data.geojson.Reader('res/berlin.json');
  reader.parse();
  // Assumption: map already exists
  map.addLayer(reader.getLayer());
}

  

Integration with COBI Bikes API

COBI.BIKE app for Android and iOS allows opening web sites as modules inside the app. It enables easy extension of basic functionality without updating/reinstalling the app. Here's an example.
There is a Chrome extension for developers that emulates one type of COBI.BIKE on-wheel joystick controller. It allows you to test the app while you are developing it without redeploying and leaving your working place to test it with real hardware. Besides, there are pre-recorded rides, which you can easily review to test your use cases.

The BOSCH Connected Experience was an exceptional experience in building services in 36 hours and with HERE maps it was even easier and more fun!