Add Custom Layer to Google Maps [closed] - google-maps

Question

Closed. This question is not reproducible or was caused by typos. It is not currently accepting answers.
This question was caused by a typo or a problem that can no longer be reproduced. While similar questions may be on-topic here, this one was resolved in a way less likely to help future readers.
Closed 9 years ago.
Improve this question
I am trying to apply the custom layer provided by WeatherBug for temperature/Radar/Humidity. etc into my google map using google javascript library.
I need to apply the transparant tile over my google map.
I get the tile images from the below url. So how can i bind this into my map?
http://i.wxbug.net/GEO/Google/Temperature/GetTile_v2.aspx?as=0&c=0&fq=0&tx=0&ty=0&zm=1&mw=1&ds=0&stl=0&api_key=xxxxx

Answer 1

You should be able to add this as a Google Custom Map Type. Basically when requesting the WeatherBug API, you get back a tile that you can use on Google Maps.
You can find the documentation from Google Maps here.
The code for you to start should probably look like this, you can work on from this point:
var tileLayerOverlay = new GTileLayerOverlay(
new GTileLayer(null, null, null, {
tileUrlTemplate: 'http://i.wxbug.net/GEO/Google/Temperature/GetTile_v2.aspx?as=0&c=0&fq=0&tx={X}&ty={Y}&zm={Z}&mw=1&ds=0&stl=0&api_key=xxxxx',
isPng:true,
opacity:1.0
})
);
map.addOverlay(tlo);
Also check the WeatherBug description and the links in there.

Answer 2

Here is a solution for WMS services inpired by : http://code.google.com/p/biodiversity-imageserver/source/browse/trunk/unittest/gmap3/MCustomTileLayer.js?r=49
You can simply ajust the function for your needs.
function MCustomTileLayer(map,url) {
this.map = map;
this.tiles = Array();
this.baseurl = url;
this.tileSize = new google.maps.Size(256,256);
this.maxZoom = 19;
this.minZoom = 3;
this.name = 'Custom Layer';
this.visible = true;
this.initialized = false;
this.self = this;
}
MCustomTileLayer.prototype.getTile = function(p, z, ownerDocument) {
for (var n = 0; n < this.tiles.length ; n++) {
if (this.tiles[n].id == 't_' + p.x + '_' + p.y + '_' + z) {
return this.tiles[n];
}
}
var tile = ownerDocument.createElement('IMG');
tile.id = 't_' + p.x + '_' + p.y + '_' + z;
tile.style.width = this.tileSize.width + 'px';
tile.style.height = this.tileSize.height + 'px';
tile.src = this.getTileUrl(p,z);
if (!this.visible) {
tile.style.display = 'none';
}
this.tiles.push(tile);
while (this.tiles.length > 100) {
var removed = this.tiles.shift();
removed = null;
}
return tile;
};
MCustomTileLayer.prototype.getTileUrl = function(p,z) {
var url = this.baseurl +
"&REQUEST=GetMap" +
"&SERVICE=WMS" +
"&VERSION=1.1.1" +
"&BGCOLOR=0xFFFFFF" +
"&TRANSPARENT=TRUE" +
"&SRS=EPSG:3857" +
"&WIDTH=256" +
"&HEIGHT=256" +
"&FORMAT=image/png" +
"&mode=tile" +
"&tilemode=gmap" +
"&tile="+ p.x + "+" + p.y + "+" + z
return url;
}
You can use it like that
var hMap = new MCustomTileLayer(map, "http://my_base_url");
map.overlayMapTypes.insertAt(0, hMap);
And to delete the overlay
map.overlayMapTypes.setAt(0,null);