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.
No comments:
Post a Comment