I am building a simple map app with the Ionic 3 framework. I am using OpenLayers 4.0.2 as the map api.

It has been going great until I tried implementing a custom tileLoadFunction for the basemap tile layer used in the app. In my case, I am attempting to get tiles from an IndexedDB.

 tileLoadFunction: function(tile, src) {
     let imageTile = tile as ol.ImageTile;
     let img = imageTile.getImage() as HTMLImageElement;
     let tileCoord = imageTile.getTileCoord();
     tileCoord[2] = -tileCoord[2] - 1;
     self.mapDataService.getBasemapTile(tileCoord).then(b64 => {
         if (b64) {
             img.setAttribute('src', b64);
         } else {
             img.setAttribute('src', src);

This is fairly common requirement, and I have seen dozen of implementations online - but not in TypeScript... I can't just do tile.getImage().src = b64; or else I get complile errors. So I cast to ol.ImageTile and HTMLImageElement.

I am 100% positive that the images returned by b64 or src variables are valid images. But the basemap tile is always blank??? Is there a better way to do this in TypeScript?

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Browse other questions tagged or ask your own question.