Javascript code to read GeoMedia WebMap 6.1 generated tiles

In my previous post, I talk about using GeoMedia WebMap 6.1 to pre-generate map tiles in png format for use in Google Maps. After you have created all the png map tiles, it will no longer be necessary to start up the GeoMedia WebMap service to serve the png map tiles to the Internet browser clients. All you need to do is to write your own web page and Javascript code to wrap the png map tiles into a custom Google Maps tile layer.

Assuming you have created the png map tiles in the following folder C:\WebMap Publisher Projects\mygooglemaps\tilecache\ and the files are all named in the following naming convention mygooglemaps_1_(zoom)_(x)_(y).png, as shown in the figure above, we can write the following Javascript code. 

//If the tiles I have created have zoom levels ranging from 10 to 18 and the 

//geographical area ranges from 103 deg E to 104 deg E and 

//1 deg N to 2 deg N, then I can code in the constants as follows. 




var minZoom = 10;

var maxZoom = 18;

var minLng = 103;

var maxLng = 104;

var minLat = 1;

var maxLat = 2 ;




var copyright;

var copyrights;

var tileLayer;

var tileLayers;

var custommap;




//Get a pointer to the Google Maps canvas area on the web page.

//The id is "map" in this example.

map = new GMap(document.getElementById("map"));




//Display the large zoom slider control

map.addControl(new GLargeMapControl());




//Create a new copyright within the data's geographical extents

copyright = new GCopyright ( 1, 

new GLatLngBounds ( new GLatLng(minLng, minLat),new GLatLng(maxLng, maxLat)), 

minZoom, 

'Copyright 2009 dominoc');

copyrights = new GCopyrightCollection('dominoc Copyrights');

copyrights.addCopyright ( copyright);




//Create a new map tile layer that has the zoom levels of the png 

//map tiles and copyrights

tileLayers = [ new GTileLayer (copyrights, minZoom, maxZoom)];




//Define the callback function for retrieving the png map tiles

tileLayers[0].getTileUrl = function ( tile, zoom) {

var url =  "http://localhost/mygooglemaps/tilecache/mygooglemaps_1" + "_" + zoom + "_" + tile.x + "_" + tile.y + ".png";

return url;

};

tileLayers[0].isPng = function() { return true; }

tileLayers[0].getOpacity = function() { return 1.0; }

tileLayers[0].minResolution = function() { return minZoom; }

tileLayers[0].maxResolution = function() { return maxZoom; }

//Finally, create the new map type for the map tiles with

//the button named "dominoc" and display it.

//Display the message "No data available" where there are no

//tiles.

custommap = new GMapType ( tileLayers, new GMercatorProjection(maxZoom + 1), "dominoc", {errorMessage: "No data available"});

map.addMapType(custommap);

map.addControl(new GMapTypeControl());




A sample display of the result in shown in the screen shot below.