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:

Result of overlaying low and high resolution tiles

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?

  • Is your browser set to zoom = 90% or so? sometimes browser zoom causes subtle visual artifacts – tato Oct 12 '16 at 19:51
  • Thanks for the idea, that doesn't seem to be the issue. – Syb Ille Oct 18 '16 at 14:06

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.