I am working on a web map using Leaflet and am using purchased satellite imagery as the base map. We want to limit the extent of the high resolution image to the area of interest, so I have resampled the image from 2.4 to 20 meters, and cut out the relevant area from the 2.4 meter image (Using QGIS). I created tiles with gdal2tiles for both of these images, and have overlayed them in my map. Here is a screenshot of the result:
On some of the edges where the high resolution imagery ends, a black line appears. Looking at the tiles in GIMP there is no such border, and whether or not there is a black line is zoom dependent, so I suppose it's due to the rendering in the browser.
I tried to solve the problem by doing the resampling again at 21.6 meters and lining up the rasters so they would "nest", but the random black lines still appear.
Now I'm thinking of ways to blend the edge of the fine resolution image, or of the generated tiles directly. I could graduate the resolution so there isn't a "drop" from 2.4 to 21.6 meters, or use a transparency gradient. I'm not quite sure how to go about the first idea, but tried out the second in GIMP. I blended the edges of one tile and was happy with the result in the map. I don't want to do the tedious work of manually editing each tile, though. Blending the image before cutting into tiles doesn't work because of the resampling of the resolution.
What is causing this black line? Is there a known solution for this?