Hi Guys,
I have used the Google Maps image cutter from
http://www.casa.ucl.ac.uk/software/googlemapimagecutter.asp
to create tiles of a raster map.
The Image Cutter made 5461 tiles from my 9MB map.
It also provided some HTML/JavaScript which I am using in my
application.
I have tweaked the code slightly to allow the additional map to be
linked on my google map as a map type, as in Map, Satellite, Terrain &
My Map.
Please note, that I cant post a link as the data in the map is
sensitive and I am bound by a confidentiality contract.
Here is the code so far... (My Questions will follow)
var centreLat=0.0;
var centreLon=0.0;
var initialZoom=6;
var imageWraps=false; //SET THIS TO false TO PREVENT THE IMAGE
WRAPPING AROUND
//var map; //the GMap2 itself // These are already declared elsewhere
/////////////////////
//Custom projection
/////////////////////
function CustomProjection(a,b){
this.imageDimension=65536;
this.pixelsPerLonDegree=[];
this.pixelOrigin=[];
this.tileBounds=[];
this.tileSize=256;
this.isWrapped=b;
var b=this.tileSize;
var c=1;
for(var d=0;d<a;d++){
var e=b/2;
this.pixelsPerLonDegree.push(b/360);
this.pixelOrigin.push(new GPoint(e,e));
this.tileBounds.push(c);
b*=2;
c*=2
}
}
CustomProjection.prototype=new GProjection();
CustomProjection.prototype.fromLatLngToPixel=function(latlng,zoom){
var c=Math.round(this.pixelOrigin[zoom].x+latlng.lng()
*this.pixelsPerLonDegree[zoom]);
var d=Math.round(this.pixelOrigin[zoom].y+(-2*latlng.lat())
*this.pixelsPerLonDegree[zoom]);
return new GPoint(c,d)
};
CustomProjection.prototype.fromPixelToLatLng=function
(pixel,zoom,unbounded){
var d=(pixel.x-this.pixelOrigin[zoom].x)/this.pixelsPerLonDegree
[zoom];
var e=-0.5*(pixel.y-this.pixelOrigin[zoom].y)/
this.pixelsPerLonDegree[zoom];
return new GLatLng(e,d,unbounded)
};
CustomProjection.prototype.tileCheckRange=function
(tile,zoom,tilesize){
var tileBounds=this.tileBounds[zoom];
if (tile.y<0 || tile.y >= tileBounds) {return false;}
if (this.isWrapped) {
if (tile.x<0 || tile.x>=tileBounds) {
tile.x = tile.x%tileBounds;
if (tile.x < 0) {tile.x+=tileBounds}
}
}
else {
if (tile.x<0 || tile.x>=tileBounds) {return false;}
}
return true;
}
CustomProjection.prototype.getWrapWidth=function(zoom) {
return this.tileBounds[zoom]*this.tileSize;
}
////////////////////////////////////////////////////////////////////////////
function customGetTileURL(a,b) {
//converts tile x,y into keyhole string
var c=Math.pow(2,b);
var d=a.x;
var e=a.y;
var f="t";
for(var g=0;g<b;g++){
c=c/2;
if(e<c){
if(d<c){f+="q"}
else{f+="r";d-=c}
}
else{
if(d<c){f+="t";e-=c}
else{f+="s";d-=c;e-=c}
//return G_NORMAL_MAP.getTileLayers()[0].getTileUrl(a,b);
}
}
return "images/map/My-tiles/"+f+".jpg"
}
function getWindowHeight() {
if (window.self&&self.innerHeight) {
return self.innerHeight;
}
if
(document.documentElement&&document.documentElement.clientHeight) {
return document.documentElement.clientHeight;
}
return 0;
}
function resizeMapDiv() {
//Resize the height of the div containing the map.
//Do not call any map methods here as the resize is called
before the map is created.
var d=document.getElementById("map_canvas");
var offsetTop=0;
for (var elem=d; elem!=null; elem=elem.offsetParent) {
offsetTop+=elem.offsetTop;
}
var height=getWindowHeight()-offsetTop-16;
if (height>=0) {
d.style.height=height+"px";
}
}
function loadMap() { // This is called elsewhere
if(!mapLoaded)
{
if (GBrowserIsCompatible()) {
//resizeMapDiv();
var copyright = new GCopyright(1,
new GLatLngBounds(new GLatLng(0,0),
new GLatLng(0,0)),
0,"<a href=\"http://www.casa.ucl.ac.uk\";>CASA</a>");
var copyrightCollection = new GCopyrightCollection
("GMapImgCutter");
copyrightCollection.addCopyright(copyright);
//create a custom picture layer
var pic_tileLayers = [ new GTileLayer(copyrightCollection , 0,
6)];
pic_tileLayers[0].getTileUrl = customGetTileURL;
pic_tileLayers[0].isPng = function() { return false; };
pic_tileLayers[0].getOpacity = function() { return 1.0; };
var proj=new CustomProjection(7,imageWraps);
var pic_customMap = new GMapType(pic_tileLayers, proj, "Map",
{maxResolution:6, minResolution:0, errorMessage:"Data not
available"});
map.addMapType(pic_customMap);
//var myTileOverlay=new GTileLayerOverlay(pic_tileLayers);
//map.addOverlay(myTileOverlay);
}
}
}
Please note the new Map Type works Ok but the bounds of the map are
not correct. The map is also much more zoomed in when I click the new
map type.
How do I set the bounds of the new Tiled Map so it appears in the
proper (lon,lat)
position? If I could figure out how to set the bounds and zoom of the
tiled map
type it would be great....
If I could do that then perhaps it would be easier to overlay it
on my main map, just like:
http://www.usnaviguide.com/gtilelayer.htm
Is it even possible to overlay the tiled map with the proper bounds on
my original Google
Map ? (see commented out code at the end - this does not work)
Im really struggling with this, has anyone any suggestions?
Thanks in advance guys.
--~--~---------~--~----~------------~-------~--~----~
You received this message because you are subscribed to the Google Groups
"Google Maps API" group.
To post to this group, send email to [email protected]
To unsubscribe from this group, send email to
[email protected]
For more options, visit this group at
http://groups.google.com/group/Google-Maps-API?hl=en
-~----------~----~----~----~------~----~------~--~---
