Chris Pollett > Students > Pundi Muralidharan

    Print View



    [CS 297 Proposal]

    [Deliverable 1 - WebGL Program: The Logic Behind]

    [Deliverable 2 - The Study of OSM Data and Vector Tiles]

    [Deliverable 3 - Importing OSM Data into Postgres Database]

    [Deliverable 4 - Study of Current Tile Generators in Trend]

    [CS 297 Report - PDF]

    [CS 298 Proposal]

    [CS 298 Report-Intermediate - PDF]

    [CS 298 - Summary of Intermediate Results - PDF]

    [The Project Idea]

    [The Map Query]

    [The WebGL Shaders]

    [The Final Map]

    [CS 298 Report - PDF]

    [CS 298 Presentation - PDF]

    [CS 298 Project Source Code - ZIP]


CS 297 Proposal

On-the-fly Map Generator for OpenStreetMap Data Using WebGL

Advisor:Dr. Chris Pollett


This project is an approach to create an On-the-fly Map Generator For Openstreetmap Data Using WebGL.

OpenStreetMap (OSM) is a worldwide geographic database created from public domain data sources and user created data. It contains a vast amount of data for a variety of features, including administrative boundaries, streets, waterbodies, points of interest, and buildings. Such a large chunk of dataset, being difficult to store on servers and render as-is, is fragmented into smaller chunks of uniform dimensions. These chunks are referred to as 'tiles', and are bitmap images in essence, which are in turn the building blocks for online maps. The concept of tiles is then applied to the available geodata in terms of vectors such as lines, nodes and polygons. OSM data can be used in different formats; I have used an XML format of the OSM data (files use .osm extension).

Existing tile generators generate PNG overlay tile images from a wide range of datasources, like GeoJSON, GeoTIFF, PostGIS, CSV, and SQLite, etc., based on the coordinates and zoom-level. This project aims to send vector data for the map to the browser and thereby render the tiles on-the-fly using WebGL. Here, all of the vector computation is pushed to the GPU(called the shader code). This also means that lesser data needs to be sent to the browser. Henceforth, I will write a WebGL program for rendering OSM data.

Lastly, I will experiment with Tile Generators to study how tiles are generated in the existing vector-based tile generators. I will write in detail, about my findings, as a report.


Week 1(Aug 26, 2014 - Sep 2, 2014) Talk about the project in detail with the advisor. Prepare and deliver CS 297 Proposal.
Week 2(Sep 2, 2014 - Sep 9, 2014) Research on WebGL. Understand the API. Find out how to write a WebGL program.
Week 3, 4 (Sep 9, 2014 - Sep 23, 2014) Understand WebGL. Proceed writing a WebGL program.
Week 5(Sep 23, 2014 - Sep 30, 2014) Deliverable 1: Complete writing a WebGL-based JS program. Get a complete understanding of its features.
Week 6(Oct 7, 2014 - Oct 14, 2014) Research about OpenStreetMap data. Find out how to import OSM data into a postgres database.
Week 7,8 (Oct 14, 2014 - Oct 28, 2014) Deliverable 2: Create powerpoint presentations on OSM basics and vector tiles.
Week 9(Oct 28, 2014 - Nov 4, 2014) Import a chunk of OSM data into a postgres database. Find out how to query the database.
Week 10(Nov 4, 2014 - Nov 11, 2014) Find out how to write a query that returns a specific road, for a given latitude and longitude.
Week 11(Nov 11, 2014 - Nov 18, 2014) Deliverable 3: Complete writing an Postgres query that explains how to check if a specific road passes through the given coordinates.
Week 12(Nov 18, 2014 - Nov 25, 2014) Experiment with the proposed design and the existing tile generators. Install required tools.
Week 13(Nov 25, 2014 - Dec 2, 2014) Deliverable 4: Document findings about existing tile generators. Start working on CS 297 Report.
Week 14(Dec 2, 2014 - Dec 9, 2014) Prepare and deliver CS 297 Report.

Key Deliverables:

My deliverables for this project in order are:

  • Code:
    • A small WebGL-based JS program, to understand its functionality.
  • Experiments and study:
    • Powerpoint presentations that describe about OSM data and vector tiles.
    • Import OSM data into a postgres database and write a query that checks if a specific road (I 5) passes through the given coordinates.
    • Experiment with the existing tile generators that render vector images and check how fast are they able to generate and render tiles.
  • Report:
    • A detailed report on the proposed changes and my findings.

[1] Segmentation of OpenStreetMap Data: Generating, Merging, and Distributing Tiles. Jan Behrens. University of Bremen, September 2011.

[2] Web-based 4D visualization of marine geo-data using WebGL. Bernd Resch, Ralf Wohlfahrt and Christoph Wosniok. Cartography and Geographic Information Science, 2014.

[3] Programming 3D applications with HTML5 and WebGL. Tony Parisi. O'Reilly Media, 2014.