GMapCreator Example Data

This document shows how to load data from the sample shapefile included in the installation and use it to create a Google Maps website. The data used as an example is derived from logs of GPS tracked carbon monoxide (CO) sensors used around Marylebone Road in London during May 2004. The data from the CO sensor is in parts per million (ppm), taken every second with the position logged using the GPS. The GPS information gives the coordinates in the OSGB36 system, which is defined as metres east and north from a point off the southwest coast of England. The sample points from two weeks of logging have been fitted to a 5 metre grid, which has then been converted to a shapefile. The shapefile contains polygons defining the 5 metre grid, with attributes for each grid square for the following data:

Start the application from the 'GMapCreator' folder under 'Programs' on the Windows start menu. Then select 'Open...' from the 'File' menu. Navigate to the 'C:\Program Files\CASA-UCL\GMapCreator\example-data' directory and open the file called 'codata-alldays.shp'. If the application was installed to a directory other than the default, then the example files will be inside the alternate install directory.

The shapefile will be loaded and reprojected into Mercator at this point. Any errors at the loading stage are likely to be caused by the reprojection process and in this case it is worth checking that the shapefile includes a projection file ending with '.prj'.

The example file should load without any problems, showing something similar to the following:

A newly loaded shapefile with the attribute about to be changed.

The screen shows a large red square, which is a visualisation of the first numeric attribute field, coloured according to the default colour scale. As can be seen from the screenshot, the first numeric attribute is the 'object_id', which starts at zero and labels each cell with a number, incrementing by one each time. At this point you could click on the 'Outlines' button to see the data grid with every square coloured red, but it is more productive to change the attribute to 'Mean', which gives the view shown below:

With the attribute changed to 'Mean', the data is displayed..

Now some real data is displayed, click and hold the left mouse button on the map and drag the map around. The currently visible image pans in the same way as Google Maps, redrawing fully when the mouse is released. The 'Zoom In (+)' and 'Zoom Out (-)' keys allow the map view to be changed.

On the 'Generate Panel' the 'Maximum Zoom Level' will still be at '1' from when the shapefile was loaded. Use the left mouse button to drag the slider from 1 up to 17. Notice how the 'Tile Count' beneath the slider quickly counts up to 18. This is counting the number of tiles (and so image files) that will be created when the 'Create' button is pressed. With large geographic areas, this count can easily be hundreds of thousands, but with this example data, the area is only one square kilometre, so the tile count is very low. With large areas, the maximum zoom level must be chosen so that the tile count is acceptable.

It is also possible to crop the area created and limit the number of tiles in that way. Click on the 'Limit to Preview' button beneath the tile count. Then click on the 'Zoom In' button to change the map area currently in view.

Zoomed in and with 'Limit to Preview', the tile count is reduced.

The 'Tile count' is recalculated when 'Limit to Preview' is set and when the map is zoomed or panned. This is because the 'Limit to Preview' option instructs the software to only create a map for the area currently visible in the map window. Normally, maps are created for the entire extent of the shapefile, regardless of what portion of the map is visible. The tile count has now gone down to 16 because less of the map is visible and fewer tiles are needed. This feature is useful for cutting out an area like London when the shapefile contains data for the whole of the UK. By limiting the area produced, the number of tiles created can be managed.

Now uncheck the 'Limit to Preview' box and zoom back out to the full area.

One of the main functions of this application is to control the colouring of the areas displayed. This is done through the colour dialog, accessed by clicking on the 'Cols...' button. The display shows the colour thresholds used to colour the attributes displayed on the map. The colour thresholds at 0, 0.25, 0.5, 0.75 and 1.0 show a good transition in colour from blue, through cyan, green, yellow and red, but it might be interesting to change this. Click in the 'Select' check boxes for the 0.25, 0.5 and 0.75 thresholds, leaving only the blue and red thresholds.

Selecting and deleting some of the default colour thresholds .

Now click the 'Delete' button to remove the selected thresholds. This leaves just the blue and red thresholds at 0ppm and 1.0ppm. The red threshold is a bit too low, so double click in the red threshold 'Value' box containing '1' and change it to '5.0'. Press return after entering the number. The thresholds should now look like the following:

Now the colour scale is a transition between blue and red.

Click on the 'Apply' button at the bottom of the window and the map will be redrawn to reflect the current colour scale.

After 'Apply' is clicked, the map reflects the new colour scale.

This highlights where the high and low CO areas are quite well, but at this point it is still possible to click on 'Cancel' to revert back to the original blue, cyan, green, yellow and red colour scale that was active when the colour dialog was opened.

The other main feature on the colour dialog is the 'discrete' or 'transition' colouring method. Click on the 'discrete' radio button and click on 'Apply' to see the map change as follows:

Changing from colour transitions to discrete colour bands.

This has changed the colouring from an interpolation between blue and red based on the CO value of the square, to drawing either solid blue or red based on the CO value. If the CO attribute is less than 5.0ppm, the square is drawn in blue, while anything >= 5.0ppm is red.

Change the map back to 'transition' colouring and click on 'Apply' to see the results.

The default descriptions don't really fit the CO data, so 'First Colour' can be changed to '0ppm' and 'Fifth Colour' can be changed to '5.0ppm'. This is done by double clicking in the description boxes and entering the new descriptions.

Entering a meaningful description for each threshold.

Click on 'OK' and return to the main map with these colour thresholds set. It is not necessary to click on 'Apply' before 'OK' as 'OK' applies the currently set thresholds before closing the colour dialog window.

Now the map is ready to be created, but there are a few more settings that it might be useful to enter first. If the map is to be published on the web, the API key can be entered. If this is not known at this stage, it can be placed in the resulting html file later. Another useful feature to set is a title for the map. Go to the application's main menu, click on 'Edit' and select 'Page Data'.

Page data dialog containing options for the html page.

Now that this infomation has been entered, click on 'Create' to start creating the map.

Number and location of created files, along with the full path tooltip.

The create dialog that has now appeared shows the number of tiles and the directory that they will be created in. In this case, the directory name is too long to fit in the window, so by placing the mouse over the directory name, the tooltip shows the full creation path.

NOTE: tiles are always created in the directory containing the shapefile. This cannot be changed, but the files can be moved after they are created as long as the html file and the directory containing the tiles are in the same position relative to each other.

Click on 'OK' and the create process will begin.

Tile creation in progress..

The display shows the name of the current tile being created and a percentage bar to show how far the creation has progressed. The percentage shown is the number of tiles created out of the total number and is not related to the amount of time left. This is because each tile takes a different amount of time to render, which can not be known in advance. The tiles at the top zoom levels take the most time as they have more data on them. As the create process recursively descends the tile structure, the tile drawing tends to get faster. It should be noticeable that tiles with short names ('t','tq','tr' etc.) at the top zoom levels take much longer to draw than tiles with longer names at lower zoom levels ('tttrstqrst' etc.).

Successful creation of all the tiles.

Once all the tiles have been drawn, the dialog shows a 'Finish' button which will close the dialog and return to the main map window. The map has now been successfully created, so to view the finished product use a web browser to open the 'codata-alldays2004.html' file in the 'example-data' directory. This will be in 'C:\Program Files\CASA-UCL\GMapCreator\example-data\codata-alldays2004.html' if the application was installed in the default directory.

The resulting Google Map.

Now that the map has been created, it's worth using the 'Save Settings' option to save all the preferences for this map. Once this is done, 'Load Settings' can be used next time the application is run to restore all the settings used to create this map.

This concludes the example.