1) Create an account at Mapbox in order to generate an access token. https://account.mapbox.com/auth/signup/

Create Mapbox account

2) Log in to Mapbox and choose "Create a map in Studio".

Mapbox Studio

3) Then select "New style" in Mapbox Studio.

New style

4) Choose a suitable style template, e.g. "Streets", then click "Customize Streets".

Choose style template

5) Fetch data from the API. This query for instance generates a zipped Shape file containing positions of the City bike stations in Stockholm.
https://openstreetgs.stockholm.se/geoservice/api/DIN API-NYCKEL/wfs/?version=1.0.0&request=GetFeature&typeName=od_gis:CityBikes_Punkt&outputFormat=SHAPE-ZIP

6) Pan to Stockholm on the map.

Stockholm map area

7) Choose "Layers" in the upper left corner and click the plus sign.

Add layer

8) Choose "Upload" data" and locate the downloaded zip file from step 5 and click "Confirm".

Upload data

9) Once the upload is complete, go to Source och choose the CityBikes layer beneath "Unused Sources".

Choose layer

The information will be presented as a layer with a dark overlay. Don't worry, this will not be dark in the finished map.

Layer with dark background

From here you can, for instance, rename the layer by clicking the pen next to the layer name. You can also change the name for the Style to something more suitable, like Stockholm City Bike Visualisation. There is also a number of ways you can customise the layer appearance.

Rename layer

10) When you are done, click "Publish" to save the updated version of your map.

Publish layer

11) Click "Styles" in the upper left corner to return to the page with your maps.

Return to styles page

12) Click the three dots next to the style and choose details.

Style details

Then choose "Share" to explore alternatives to integrate and share the map with others.

Options to share and integrate the map

13) Alternatively, the map can be displayed using Leaflet in a web page. Use the code available here as a starting point: https://leafletjs.com/examples/quick-start.html. Använd sedan URL:en nedan för att inkludera din karta i Leaflet-behållaren. På så vis kan en demo enkelt visas i en mobilenhet

14) Some great ideas for taking visualization of open data further can be found at: https://opendatabits.com/