Thursday 4 July 2013

Creating a Graticule with Leaflet

A graticule is a grid of latitude and longitude lines on which a map is draw. This blog post will show you how to create a graticule with Leaflet.

Mercator is very bad for for thematic world maps, as it greatly distorts areas towards the poles. Instead, you should use an an equal area projection which correctly shows the relative sizes of Earth's landmasses. Leaflet has limited support for different projections, as it assumes all coordinates to be geographic (latitude and longitude). Luckily, the Mollweide equal area projection works quite well with Leaflet.

I've previously used the Universal Transverse Mercator (UTM) projection with Leaflet. My map is combining Leaflet with Proj4js using the Proj4Leaflet bridge provided by Kartena.

The World shown in the Mollweide projection.
By just projecting the country borders from Natural Earth, I'm not able to show the oval-shaped world. A graticule will improve the view of this map, so I'ce created a graticule plugin for Leaflet.

L.graticule().addTo(map);

The plugin is extending L.GeoJSON, and you can use its options to change the style: 

L.graticule({
    style: {
        color: '#777',
        weight: 1,
        opacity: 0.5
    }        
}).addTo(map);



You can also use the plugin to create an outline and background for your map:

L.graticule({
    sphere: true,
    style: {
        color: '#777',
        weight: 2,
        opacity: 1,
        fillColor: '#ccf',
        fillOpacity: 1
    }      
}).addTo(map);

Source code for this map.

The Leaflet graticule plugin is of course available on GitHub.

Saturday evening on Foldøy island.