Create Custom Tile Overlays for Google Maps with GMapCreator
Google Maps provides a web mapping application wherein maps are produced in advance and served as a set of small tiles for assembly into one big image in the browser. The advantage of this approach is consistency of appearance and graphical quality of the map and, probably more important, enormous scalability that can be achieved. There is no need for server side processing to generate maps and individual map tiles are much smaller than the whole map presented at the user end, so they are able to be delivered and displayed much faster. The trade off is a big effort up front to generate nice looking maps and the need to fix zoom levels rather than allowing a continuous zoom, as is the case with older web mapping technologies. The approach has been copied by other online map technology providers. But what approach should you take if you’d like to present your own custom data on top of a Google Maps base layer without using markers, polylines, or polygons? Perhaps you have a large dataset stored in a shapefile and you’d simply like to convert this data to a format suitable for display in Google Maps. In this case it would make sense to pre-create custom map tiles of your data at various zoom levels and have them available for display.
Custom Tile Overlays
Custom tile overlays are custom data that sit on top of an existing Google base map. They are essentially a snapshot of your data at a particular time. The data is cut into a pyramid of static tiles that correspond to each zoom level. Typically you would use some type of tool to cut the data into static tile images. In the figure below you see an example of a custom tile overlay showing thematically mapped parcel data on top of a Google base map.
So what is the point of creating a custom tile overlay? Why not simply add your custom data as markers, polylines or polygons? The short answer is that when you are dealing with large custom datasets the performance of your application can suffer a great deal when you attempt to plot this data as markers, polylines, or polygons. Since custom tile overlays are pre-built static tile images the performance is greatly improved. Data does not have to be created dynamically each time the map is drawn. The downside to this is that your users don’t have as much flexibility in terms of obtaining additional information about your custom data. You can’t click on your custom tiles to obtain additional information like you can when you display InfoWindows when markers are clicked.
When it comes to building custom map tiles with the Google Maps API you essentially have two options: GTileOverlay and a custom GMapType. GTileOverlay is simpler to use than GMapType although its use is more limited. However, in most cases GTileOverlay will suffice.
GTileOverlay is used when you want your data to overlay an existing Google Maps base map. In most cases you will want to use one of several tools available for creating the map tiles that will need to be displayed at each zoom level. GTileOverlay requires three abstract methods including getTileUrl(), isPng(), and getOpacity().
There are many tools available for turning you data into a custom map tile. Today we will review GMapCreator. GMapCreator, has a graphical user interface and uses shapefiles or CSV files as data sources. We’ll take a look at some of the additional tools you can use to create custom map tiles in future posts.
GMapCreator is a freeware application designed to make thematic mapping using Google Maps simpler. The application takes a shapefile containing geographic areas linked with attributes and automatically generates a working Google Maps website from the data. It does this by pre-creating all the necessary files and saving them into a directory. Publishing the map on the web is then just a matter of copying files onto a web server, allowing Google Maps to be used with the majority of ISPs.
GMapCreator can be downloaded from the UCL Centre for Advanced Spatial Analysis. You do need to create an account to download the software.
Your shapefile data source is loaded into the application and displayed inside the map preview area. As seen below.
The data must have an associated .prj file that defines the projection of the data. This is necessary because GMapCreator automatically reprojects the data to fit with the Google Maps projection. Using GMapCreator you can define the output symbology for thematic, geographic extent, and maximum zoom levels.
Tiles are generated by GMapCreator based on the Maximum Zoom Level you select from the tool interface as seen below. The zoom level corresponds to the zoom levels available in Google Maps. Here we have set the maximum zoom level to a value of ‘14’. GMapCreator specifies how many tiles will be created at each zoom level. In this case the tile count is 1,173. You can obviously go above this value, but there is an exponential jump in the number of tiles generated by each increase in value of the zoom level. For example, if I move the maximum zoom level to a value of 16 the tile count jumps to 17,224 (at maximum zoom level of 18 it jumps to 267,496) so you have to consider the tradeoffs between the level of detail you need for your application and the time and disk space necessary for generating a large number of tiles. The number of tiles can exceed 1 million at the highest zoom levels.
Thematic mapping with GMapCreator is performed by clicking the ‘Cols’ button which displays the Colour Thresholds dialog. Values are applied against the attribute field selected in the drop-down box. You can also give each color value a description.
Once you have defined the output symbology and the maximum zoom level GMapCreator creates a directory of image files which serve as tiles along with an HTML template for displaying the data. As mentioned above please note that the number of tiles can be very large depending upon the maximum zoom level you have selected.
GMapCreator also creates an HTML template file for displaying the data. You will likely want to customize the template file with your own logos and text since by default is includes information for the UCL Centre for Advanced Spatial Analysis (CASA) as seen in the figure below.
To move the output of this tool to a production web server you need only move the HTML template file along with the directory containing the tiles. GMapCreator is an efficient, easy to use tool for creating custom tile overlays for your Google Maps application.
For more information on the Google Maps API please consider our e-learning courses including Introduction to the Google Maps API, Advanced Google Maps API Programming and the Google Maps Developer Bundle.