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. If I could figure out how to set the bounds and zoom of the tiled map type it would be great....
Also 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 Which im also struggling with. Thanks in advance guys. On Jan 22, 9:47 am, Commodus <[email protected]> wrote: > Hi Guys, > I have used the Google Maps image cutter > fromhttp://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 > > ///////////////////// > //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/Map-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() { > if(!mapLoaded) > { > if (GBrowserIsCompatible()) { > > //resizeMapDiv(); > var copyright = new GCopyright(1, > new GLatLngBounds(new > GLatLng(33.405, > 35.966), > new > GLatLng > (29.4430, 34.178)), > 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, "My > Map", > {maxResolution:6, minResolution:0, > errorMessage:"Data not > available"}); > > map.addMapType(pic_customMap); > > //var myTileOverlay=new > GTileLayerOverlay(pic_tileLayers); > //map.addOverlay(myTileOverlay); > > } > } > } > > There are a few Issues/Questions I have: > > Firstly, is it possible to overlay the tiles on my original Google > Map ? > (see commented out code at the end - this does not work) > > If so, how do I do it properly? > > How do I set the bounds of the Tiled Map so it appears in the proper > position? --~--~---------~--~----~------------~-------~--~----~ 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 -~----------~----~----~----~------~----~------~--~---
