Sign in Subscribe
Featured

Visualizing 1600 km of Cycling trails in Vienna

shoban kumar

• 4 min read
Visualizing 1600 km of Cycling trails in Vienna

Vienna has more than 1600 km of bike trails and is growing constantly. During the summer months, exploring the city on a bike is a whole new experience.

https://wien.info

The Open Data Austria portal constantly publishes hundreds of interesting and informative data sets about Austria. One of the data is the list of all cycle trails in Vienna.

In this article, let's take a look at the data, pre-process and then visualize it on a map.

Downloading the data

Bike trail data can be downloaded in multiple formats from the page Hauptradverkehrsnetz Wien

Download the CSV file from the "Resources" tab. All the paths are stored as LineStrings which is a part of Well-known text representation of geometry

Visualizing the data

Let's build a simple nodejs web application to visualize the data in a map. We will use the following libraries.

  1. express - simple web framework to serve the HTML file and the bike trails in geojson format
  2. csv-parser - Library to parse the CSV file, from the Open Data portal, and generate geojson data.
  3. terraformer-wkt-parser - Library to convert the Well-known text representation of geometry format to geojson format.
  4. mapbox - Free version of the Mapbox library.

Create a new nodejs application by running the following command in a Terminal window

npm init -y

Install the required libraries

npm install express terraformer-wkt-parser csv-parser

Open the folder in an IDE of your choice and add a new file named index.js and add the following code.

const express = require("express");
const fs = require("fs");
const csvParser = require("csv-parser");
var WKT = require("terraformer-wkt-parser");

const app = express();
const port = 3000;

app.use(express.static("public"));

const result = {
  type: "FeatureCollection",
  features: [
    {
      type: "Feature",
      properties: {},
      geometry: {
        type: "MultiLineString",
        coordinates: [],
      },
    },
  ],
};

app.get("/api/bike-geojson", (req, res) => {
  fs.createReadStream("./biketrails.csv")
    .pipe(csvParser())
    .on("data", (data) => {
      var geoJson = WKT.parse(data.SHAPE);
      result.features[0].geometry.coordinates.push(geoJson.coordinates);
    })
    .on("end", () => {
      res.send(result);
    });
});

app.listen(port, () => {
  console.log(`app listening on port ${port}`);
});

In the above code, we do the following

  1. Start a new web server which listens on port 3000
  2. Configure express to use the folder 'public' for serving static files. This is where we will host our index.html file.
  3. Add a new '/api/bike-geojson' GET route which will read the CSV file downloaded from The Open Data portal, Convert the WKT format to Geojson format and return the result.

Add a new folder named public and create a new file named index.html and add the following code. 

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Vienna bike map</title>

    <script src="https://api.mapbox.com/mapbox-gl-js/v2.12.0/mapbox-gl.js"></script>
    <link href="https://api.mapbox.com/mapbox-gl-js/v2.12.0/mapbox-gl.css" rel="stylesheet" />
    <style>
        html,
        body {
            height: 100%;
            background-color: #000;
        }
    </style>
</head>

<body>
    <div id="map" style="width: 100%; height: 100%;"> </div>
    <script>

        mapboxgl.accessToken = 'pk.eyJ1Ijoic2hvYmFua3IiLCJhIjoiY2s3amN5cG9xMHBzbjNlcGVyOTNpbzBkMyJ9.zhvP4u_cGNGJiTU3UjoOMw';
        const map = new mapboxgl.Map({
            container: 'map',
            style: " mapbox://styles/mapbox/dark-v11", center: [16.384311221519024, 48.23800010756993], zoom: 10
        });
        map.on('load', () => {
            map.addSource('biketrails', {
                'type': 'geojson',
                'data': '/api/bike-geojson'

            });
            map.addLayer({
                id: "biketrails-layer",
                type: "line",
                source: "biketrails",
                paint: {
                    "line-color": "#35838d",
                    "line-width": 1
                }
            });
        });
    </script>
</body>

</html>

In the above HTML file,

  1. We load the Mapbox stylesheet and js library.
  2. Create a container div for the map
  3. Create a new Map instance with the dark style and centre the map to Vienna
  4. On the load event of the map, create a new layer with a source that points to the API endpoint.

Read Mapbox documentation for more map options, styles and tutorials.

Start the web application and open the URL http://localhost:3000 in a web browser.

node index.js

What's next?

The Austrian Open Data portal has thousands of data sets like population growth per year, popular names, Electric car sales, Parks, Public baths, Parks etc. Take a look at the 700+ applications using these data sets for inspiration.