vtllf mailrss

Aligning layers on tiled maps

Jun 2014

Aerial view of a harbour with outlines of the coastline and streets overlaid

Leaflet.TileLayer.Aligned is a plugin for Leaflet which allows tiles of different projections to be used together on the same map.

It’s a lightweight alternative to downloading a huge area of imagery, reprojecting it and serving it up as tiles again. This plugin transforms tiles on the fly with CSS so that all the layers align correctly.

Scaling and rotating

First, the tiles are scaled from their native size so that the layers align. Tiles never get scaled up as they would appear stretched and compression artifacts would be made more visible.

In this case, the next zoom level down was loaded and scaled to 70% of the original size.

Layers also get rotated, usually only one or two degrees. The effect is most noticeable at the edges of the map.