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.
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);
You can also use the plugin to create an outline and background for your map:
L.graticule({
sphere: true,
style: {
color: '#777',
weight: 2,
fillOpacity: 1
}
}).addTo(map);
The Leaflet graticule plugin is of course available on GitHub.
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. |
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. |
Thank you. Your plugin is helping me better understand Leaflet.
ReplyDelete--VVX
Hi there,
ReplyDeletethanks 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
Hi Ian,
ReplyDeleteIt's not on my list of priorities, but feel free to contribute! :-)
Hi
ReplyDeleteThanks for your development.
I need agree a labeling with de graticule.
Please, do you have idea?
bye
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.
ReplyDeleteHi,
ReplyDeleteI loved your map of the world with the mauve background, and just wondered if you would mind me using it in a youtube video series to show the distribution of different tree species.
Cheers, Mitch
Mitch, feel free!
ReplyDelete