Magicicada

Online Database & Map @ Cicada Central

Introduction

I have consulted on the construction of the online Magicicada Database at Cicada Central an entomological resource from the University of Connecticut.

The implementation chosen demonstrates several key web client and server technologies: MySQL, PHP, HTML, CSS, AJAX (Javascript, XML), and use of the Google Maps API including dynamic map-tile generation

This page discusses key features of the technical design, undertaken as an exercise to better understand these technologies.

Initial Query and Results

Most of the work for the online database site is accomplished through server-side PHP scripting interacting with a MySQL database:

• When a user visits the search page, the page is built with search parameters representing all possible choices within the database
• Once the search parameters are chosen and submitted, the results page table is built accordingly. Changing the sort-order of the page re-queries the database

Mapping Features

The map uses the Google Maps API to provide mapping functionality.

For large result sets (>300 or so), the marker function of Google Maps is prohibitively limited and slow. So, a server-side mapping functionality was built to take advantage of the custom tile feature of the API. Using the main database, a secondary database is created in advance with tile location and pixels within that tile pre-calculated for each unique latitude and longitude from the database. As the client moves and zooms the map, the API requests new tiles from the server given present view and zoom-level. Using a query from the main database combined with the tile database, a tile image is dynamically created given the search parameters requested by the user. Small, colored "donuts" are drawn at the data points.

In addition to the "donuts" drawn on map tiles, when the map has few data points in view, they are displayed as colored markers using the API's facility for this. Worth noting are these special features of the marker display:

• Except for the initial query, only makers within the current view are displayed.
• As the map is moved or zoomed, the database is re-queried and the display is updated to provide only information on points visible. Newly-invisible points are removed from the client.
• As each marker is clicked, more-detailed information about the point is displayed