Fifth week of GSoC

During this week I started working on the GIS data editor. It is a tedious task to write the Well Known Text(WKT) format of a geometry object, especially when the data type is a complex one and this editor is aimed  at easing the task of inserting new geometry data and editing existing geometry data.

Since I wanted this feature to be available to those who does not have JavaScript enabled, I started with developing a version compatible with JavaScript disabled browsers. Users can reach this editor by clicking the pencil icon next to geometry fields in insert/edit window. The GIS data editor has a dropdown with all the geometry types and choosing a type would change the fields below accordingly. When the user fills the coordinate values and optionally SRID and hit submit, WKT is displayed, so the user can copy it in to the edit window. This is the most basic form of the GIS data editor and I wish to add number of features to enhance the user experience with JavaScript.

Earlier, editing GIS data fields were disabled as browser representation caused problems when submitting changes. Even when the GIS data were not altered they were sometimes captured as altered as described  in bug #3038193 and bug #3194559. While working on the GIS data editor I fixed this by choosing 'GeomFromText' as the default function and having the WKT with SRID in the value field. Meanwhile I had to change the data editing/inserting functionality to accept two parameters (WKT/WKB and SRID) from the value field and add apostrophes correctly.

During the next week I will be Ajaxifying the GIS data editor. By Ajaxifying user will be able to change the data type, add data points, inner rings, polygons without submitting. Further we can provide visual feedback for the changes being done by visualizing the GIS data and to automatically place the final WKT on the value field when the user is done with editing. 

Fourth week of GSoC

Last week I was able to get the 'Visualizing GIS data related to earth's geometry with OpenStreetMaps' functionality up and running. I was mainly concentration on getting the functionality to work rather than on minor details.

This week was mainly spent on perfecting the what was done during the last week. When visualizing GIS data with SVG I used the label column values to provide tooltips. With OpenStreetMaps I could correctly place the label column values on the plot itself. I also worked on proper initial placing and zooming levels. It makes no sense to display the whole world map when the data is only for a particular portion of it. So now the visualizations zoom and pan on initial load to display the data in a more meaningful manner.

I improved the look and feel of the visualization. Now both SVG based and OpenStreetMaps based visualizations are using the same controllers for zooming and panning. Same time I was engaged in improving the documentation comments for the classes and functions I introduced.

More style changes were done to make it look better including the introduction of new icon for the visualization functionality, borders for SVG based visualizations and change of cursor when dragging etc. I also included the OpenStrretMaps JavaScripts in phpMyAdmin which was earlier downloaded on from the respective URL.

Third week of GSoC

During this week I was basically working on visualizing GIS data over a base layer from OpenStreetMaps. Visualizing GIS data this way makes sense only for the data that relates to earth's geography. With each piece of GIS data, MySQL allows you to store a Spatial Reference ID (SRID) which specifies spatial reference systems that relates to the stored data. Hence that need to be taken into consideration when visualizing GIS data.

Going through the documentation of OpenStreetMaps I identified that OpenLayers JavaScript library is an ideal candidate for our purpose. OpenLayers not only support layers from OpanLayers, but it can use data from various sources such as Google Maps, Google Earth, Virtual Earth, Yahoo Maps etc. Further you can add a  vector layer on top of these maps which can then be used to draw standard geometric objects (points, linestrings, polygons). I added Mapnik, Osmarender and CycleMap layers which retrieves up to date data from OpenStreetMaps for display purpose.

I extended the PHP classes I created earlier to support the visualization with OpenStreetMaps. These classes generate the JavaScript code that relates to the geometric objects drawn on the vector layer. I also modified some of the code to take SRID into consideration as it is very important is visualizing data related to earth's geography.

When it comes to using different spatial reference systems, it is important to bring them to a unified reference system for visualization purposes. OpenLayers use proj4js JavaScript library to convert coordinates from one spatial reference system to another. I also used the same and now even the data in the same table which corresponds to different spatial reference systems are brought to a common one (EPSG:900913) for visualization purpose.

During this week I managed to get 'visualizing GIS data with OpenStreetMaps' feature up and running. However a lot more needs to be done to bring it up to the standard. Tooltips, proper initial placing and zooming levels, more options for base layers being few of them. So I will be doing those during the next week.

Second week of GSoC

The main task during this week was to implement the 'Visualization of GIS data' functionality. I had a clear understanding on the functionality and the basic structure for the new class hierarchy as I did some work on the same area to provide a proof of concept prior to GSoC. 

Initially I tried to use flot library for visualizations, for rich functionality it offered, such as zooming and panning, but later realized that using a charting library for this purpose is not suitable. My requirement was to draw basic shapes which charting libraries did not support. So I used SVG to generate the visualizations.

I could use SVG transforms (scale and translate) to support zooming and panning. To manipulate the SVGs I used jQuery SVG, which gave me control over SVG elements. Now double-clicking on the plot zooms it while clicking on the directional arrows on the top right corner pans the plot. Additionally I used jQuery mouse wheel plugin to capture the movement of mousewheel which was then connected to the zooming functionality. Now you can zoom the plot using the mousewheel. Further I used jQuery drag plugin to capture dragging on the plot and now the panning happens when the dragging is performed on the plot. Adding tooltips to visualizations was trivial. So by now I have supplied almost all the rich features flot offered using SVG and a set of jQuery plugins.

One problem with SVG was that versions <= 8 of IE do not support it. Since IE is still the major browser (atleast among non-IT related users) I tried to provide atleast a basic solution to those users. I used GD library to generate the same visualization in PNG format for IE users. 

Since I was looking into generating PNGs I also had a look at 'Exporting visualizations into various formats' feature, even though it was alloted a later time slot in the schedule. Now the visualizations can be exported to SVG, PNG and PDF formats. IMO there needs to be some improvements to this funcionality, but I would like to take them during the allocated time slot. I completed visualizing of GIS data with SVG around a week before its deadline by putting some extra effort, to save some time for the next feature, which might take more time than anticipated. So during the next couple of weeks I will be trying to connect the visualization functionality with OpenStreetMaps to give a better visualization for those data that are related to earth's geometry.