[GIS] XYZ Layer in OpenLayers has missing tiles

errorlayersopenlayers-2tilemilltiles

In OpenLayers I'm having a missing tile problem where it generates a missing link icon and a pink background. I found several threads including this one saying to add this code
OpenLayers.Util.onImageLoadError = function() {this.src = '/img/blank.png';};

Sorry if this is dumb, but should my blank.png just be a 1px transparent png24? And also where should the img folder go?

Sorry, I've tried 1px, 256px, png24, png8, gif and putting the img folder and/or file in every conceivable place and I'm having no luck. Maybe you'll see something in these screenshots.

I've also tried an image with color to see if I can notice any actual change, so that's why the blank.png file looks red in the Finder thumbnail.

chrome
code
file structure

Best Answer

Woohoo! Figured it out. This thread had the solution to change the CSS rather than the JS.

.olImageLoadError { 
    /* when OL encounters a 404, don't display the pink image */
    display: none !important;
}

This help article was helpful too, but I have not idea how to tell TileMill/MapBox to generate blank tiles rather than missing tiles. I'll get there someday.

Related Question