I am utilizing the Google Maps JavaScript API to showcase weather data from a tile server. The specific tile server can be accessed here:
To display the tile server, I am utilizing an ImageMapType and incorporating it into the Google Map's overlayMapTypes:
<!DOCTYPE html>
<html>
<head>
<title>Map Test</title>
<style type="text/css">
html, body { height: 100%; margin: 0; padding: 0; }
#map {
width:90%;
height: 90%;
display:inline-block;
}
</style>
</head>
<body>
<div id="map"></div>
<script type="text/javascript">
var map;
function initMap() {
var mapOptions = {
zoom: 8,
center: new google.maps.LatLng(42.5, -95.5),
mapTypeId: google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(document.getElementById('map'), mapOptions);
var tileNEX = new google.maps.ImageMapType({
getTileUrl: function(tile, zoom) {
return "http://mesonet.agron.iastate.edu/cache/tile.py/1.0.0/nexrad-n0q-900913/" + zoom + "/" + tile.x + "/" + tile.y +".png?"+ (new Date()).getTime();
},
tileSize: new google.maps.Size(256, 256),
opacity:0.60,
name : 'NEXRAD',
isPng: true
});
map.overlayMapTypes.setAt("0",tileNEX);
setInterval(function (){console.log("resize"); google.maps.event.trigger(map, 'resize');}, 60000);
}
</script>
<script async defer src="https://maps.googleapis.com/maps/api/js?callback=initMap">
</script>
</body>
</html>
The current setup is functioning well (paste the code into index.html and open it using your browser to view it). However, I am now interested in refreshing the weather overlay every X minutes.
The tile server provides real-time weather data, which is updated every 5 minutes. I would like to automate the refresh process to consistently display the current weather.
My attempt at triggering
google.maps.event.trigger(map, 'resize');While I can remove the layer, recreate it, and then add it again, this approach results in a brief period where no weather data is displayed.
My next thought is to create a secondary weather layer in the background and then transition smoothly from the first layer to the second one, but this may be overly complex.
Is there a simple ImageMapType.refetchTiles() function that could be utilized?