I am trying to display the daily MODIS satellite images from the GIBS image server http://wiki.earthdata.nasa.gov/display/GIBS/Map+Library+Usage. The tiles are provided in the WMTS protocol. Here is an example of my code using Google maps API:
var getTileUrl = function(tile, zoom) {
return "http://map1.vis.earthdata.nasa.gov/wmts-webmerc/" +
"MODIS_Terra_CorrectedReflectance_TrueColor/default/" +
get_date() + "/" +
"GoogleMapsCompatible_Level9/" +
zoom + "/" + tile.y + "/" +
tile.x + ".jpeg";
};
var layerOptions = {
alt: "MODIS_Terra_TrueColor",
getTileUrl: getTileUrl,
maxZoom: 9,
minZoom: 1,
name: "MODIS_Terra_TrueColor",
tileSize: new google.maps.Size(256, 256),
opacity: 0.8
};
var modisOverlay = new google.maps.ImageMapType(layerOptions);
map.overlayMapTypes.insertAt(0, modisOverlay);
When I zoom the map to more detail than zoom level 9, the tiles disappear. So I increased maxZoom to a 10, and now I'm getting messages like:
Failed to load resource: the server responded with a status of 400 (Bad Request) http://map1.vis.earthdata.nasa.gov/wmts-webmerc/MODIS_Terra_CorrectedReflectance_TrueColor/default/2013-03-07/GoogleMapsCompatible_Level9/10/291/587.jpeg
From my understanding the server doesn't have tiles at zoom levels higher than 9.
Is there a way to show the WMTS tiles when I zoom to a higher zoom level? What I need is to "stretch" the tile images when the user zooms in to a zoom level bigger than 9. I'm currently using the Google maps API V3, but I can change to Leaflet or OpenLayers if it's easier to use them for solving my problem.