Banner

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.

5 comments:

Anonymous said...

Thank you. Your plugin is helping me better understand Leaflet.
--VVX

Ian Mayo said...

Hi there,
thanks for submitting this class - it's a surprise it isn't native in LeafletJS.

I'm struggling from poor performance when creating a grid for a small area (e.g. 0.01 degree separation).

The plugin is generating a global grid - which is lots of data.

Have you considered an option to either have an optional bounding rectangle for the grid, or for the grid to be regenerated after each map zoom/pan operation?

Cheers,
Ian

Bjørn Sandvik said...

Hi Ian,

It's not on my list of priorities, but feel free to contribute! :-)

Reseña said...

Hi
Thanks for your development.
I need agree a labeling with de graticule.
Please, do you have idea?
bye

Anonymous said...

How does one go about adding the names of lat/lon graticules to the map? I can see that "features" have a "name" property, but not sure how to render them on the map.