custom google map myMapConstructor function

[thaiboxer]

function myMapConstructor(div) {
var map = new GMap2(div);
map.setCenter(new GLatLng(35.21196570103912, -80.95001220703125),
4);
map.addControl(new GLargeMapControl());
map.enableScrollWheelZoom();
map.setMapType(G_NORMAL_MAP);
return map;
}


i have been trying to generate the function above but with the custom
map tiling script below with no success. I figure its better to ask
here (vs javascript forum) because you guys are so good with this
stuff & know what exhibit requires.

thanks, jw



var centreLat=0.0;
var centreLon=0.0;
var initialZoom=2;
var imageWraps=true; //SET THIS TO false TO PREVENT THE IMAGE
WRAPPING AROUND
var map; //the GMap2 itself

/////////////////////
//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 "floorplan-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");
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 load() {
if (GBrowserIsCompatible()) {
resizeMapDiv();
var copyright = new GCopyright(1,
new GLatLngBounds(new GLatLng(-90,
-180),
new GLatLng(90, 180)),
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,
17)];
pic_tileLayers[0].getTileUrl = customGetTileURL;
pic_tileLayers[0].isPng = function() { return false; };
pic_tileLayers[0].getOpacity = function() { return 1.0; };
var proj=new CustomProjection(6,imageWraps);
var pic_customMap = new GMapType(pic_tileLayers, proj, "Pic",
{maxResolution:5, minResolution:0, errorMessage:"Data not
available"});


//Now create the custom map. Would normally be
G_NORMAL_MAP,G_SATELLITE_MAP,G_HYBRID_MAP
map = new GMap2(document.getElementById("map"),{mapTypes:
[pic_customMap]});
map.addControl(new GLargeMapControl());
map.addControl(new GMapTypeControl());
map.addControl(new GOverviewMapControl());
map.enableDoubleClickZoom();
map.enableContinuousZoom();
map.enableScrollWheelZoom();
map.setCenter(new GLatLng(centreLat, centreLon), initialZoom,
pic_customMap);

/////////////////////////////////////////////////////////////////////////////////////
//Add any markers here e.g.
// map.addOverlay(new GMarker(new GLatLng(x,y)));
/////////////////////////////////////////////////////////////////////////////////////

}
}

[thaiboxer]

Still haven't got this one to work, any help??

[David Huynh]

Sorry but your question is really about Google Maps. You'd need to ask
on the Google Maps forum.

http://groups.google.com/group/Google-Maps-API/

Try to get your map to work independent of Exhibit first, and then
integrate it.

David

[thaiboxer]

Thanks David, i've got both working, just having trouble getting to
work in the myMapConstructor function. Its my lack of JavaScript
knowledge.

[David Huynh]

Then please include a URL to your exhibit!

David

[thaiboxer]

No URL yet, it either renders one or the other.

This will really show my lack of javascript knowledge.

//// I am pretty sure this is where my issue is. The myMapConstructor
(div) has the variable var map = new GMap2(div);

function myMapConstructor(div) {
var map = new GMap2(div);

/// Where as the custom tile has the var map; //the GMap2 itself then
uses it with the other arguments.

var map; //the GMap2 itself

[thaiboxer]

I got it to work : ) & will post a URL once developed.