Chris Pollett > Students > Pundi Muralidharan

    Print View

    [Bio]

    [Blog]

    [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]

                          

























The Project Idea

Description: The idea is to create a bounding box of maximum and minimum latitude and longitude points. All the geometry within this bounding box is rendered.

The flow of creating maps started off with the Postgres database server running. Data was pulled from the database with the back-end PHP code requesting data from the database using Postgres queries. These queries were carefully created and executed to return the desired data. The PHP server code was triggered off by an asynchronous request (AJAX call) that is written using plain JavaScript and jquery. The PHP in turn returns the data fetched to the WebGL . On the other hand, WebGL also gets the shaders to be used with the data from the HTML. WebGL internally has buffers that can manipulate the data. Finally, WebGL draws the required geometry on the HTML5 canvas which is present on the web browser (the client).


Design of the Maps Generator


The data returned as the AJAX response was in the form of lat-lon points. Hence, a conversion from the latitude-longitude coordinates to pixels, which the WebGL can manipulate, was done. Each of the latitude-longitude coordinates corresponds to one or many pixels in WebGL. There are specific mathematical functions that do this.

Finally, the lat-lon points (converted as pixel x,y coordinates) are drawn on the canvas using WebGL's draw calls.