Building a beautiful touch-friendly map with Mapbox

The available maps for the bike sharing service in my city are not mobile friendly and understanding if there are available bikes or free slots in a station isn't immediate at all, so I decided to create a new one.

I choose to use Mapbox maps since they are extremely well designed, they provide a good javascript API built on top of the opensource Leaflet library, but above all they are based on the OpenStreetMap project database of which I am contributor.

I thought I needed to scrape data about the availability of bikes in each station, instead I discovered a great project which provides a free API providing data for bike sharing networks all over the world. Thanks to this project the task has been very simple!

I created a custom map project based on the Outdoors style in my Mapbox account and then generated an API access token.

After finding the API endpoint for the bike network of my city http://api.citybik.es/v2/networks/bigi and reading the Mapbox documentation here is the simple code I needed to display a beautiful and mobile friendly map.

Stations with available bikes have a green colored marker, empty ones are red and those with no free slots are yellow.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
$(document).ready(function() {
  L.mapbox.accessToken = mapboxAccessToken;

  var map = L.mapbox.map('map', mapboxMapID).setView([45.7,9.68],14);

  $.ajax({
    dataType: "json",
    url: 'http://api.citybik.es/v2/networks/bigi',
    success: function(data) {
      $.each(data['network']['stations'], function() {
        L.mapbox.featureLayer({
          type: 'Feature',
          geometry: {
            type: 'Point',
            coordinates: [
              this.longitude,
              this.latitude
            ]
          },
          properties: {
            title: this.name,
            description: 'Bikes: ' + this.free_bikes + ' ' + 'Free slots: ' + this.empty_slots,
            'marker-size': 'large',
            'marker-color': this.free_bikes==0 ? '#FF0000' : (this.empty_slots==0 ? '#FFFF00' : '#00FF00'),
            'marker-symbol': 'bicycle'
          }
        }).addTo(map);
      });
    }
  });
});

Here is the result: Bergamo city bikesharing map

You can view the map in action here and find the full code on Github.

Now read this

Things learned creating my B2B startup Eventify

At the end of 2013 with two other skilled developers I cofounded Eventify, a startup providing technological services to conference organizers, whose flagship SaaS product is a web-based piece of software that aims to make the creation and management...