Search code examples
leafletpngqgistilemillcartocss

tilemill creates jagged edges for worldmap

Trying to create a custom world map texture with tilemill to load into leafletjs. I have downloaded a free .tiff file from natural earth data and loaded it into tilemill. When i want to export however, i notice alot of jagged edges mainly around greenland/canada on the lowest zoom level.

jagged eges around greenland/canada

a few zoom levels down and it seems ok again. After exporting the tiles to png's the jagged edges stay. How can i improve the quality of these images?

Solution

  • How can i improve the quality of these images?

    By using more detailed input data.

    By the looks of it, you are projecting a raster image in EPSG:4326 projection into the EPSG:3857 "web mercator" projection. In the original data, each pixel spans the same amount of longitude and latitude degrees. In a mercator projection, each pixel spans the same amount of longitude, but a different amount of latitude. The artifacts you are experiencing are akin to a Tissot's indicatrix.

    You can try using a different value for the raster-scaling symbolizer option in your tilemill stylesheet, but that's gonna make the artifacts different, not get rid of them.