Generate a graticule grid of latitude and longitude lines. The graticule inclues labels by default, and support for maps in polar projections.
This is heavily based on the original L.Graticule plugin and labels are provided using the Leaflet Textpath plugin.
Create a new Graticule layer which inherits from L.GeoJSON
. The following options have been added:
intervalLat
: the gap between each line of latitude, in degreesintervalLon
: the gap between each line of longtitude, in degreeslatBounds
: the latitudes to draw the graticule over (default: [-90,90])lngBounds
: the longitudes to draw the graitcule over (default: [-180,180])centerLatLabels
: center labels along the graticule (default: true)centerLngLabels
: center labels along the graticule (default: false)style
: path options for the generated lines
// Add a basic graticule with divisions every 20 degrees
// as a layer on a map
L.graticule().addTo(map);
// Specify divisions every 10 degrees
L.graticule({ intervalLat: 10, intervalLng: 10 }).addTo(map);
// Specify bold red lines instead of thin grey lines
L.graticule({
style: {
color: '#f00',
weight: 10
}
}).addTo(map);
Text labels can be styled through css using the classname "grat-labels". These are SVG <text>
elements, so the styling is slightly different to normal <p>
elements.
e.g., in your css file, to change the labels to grey:
.grat-labels {
fill:gray
}
For Antarctica
For Arctic
If you are using npm:
npm install leaflet-polar-graticule
Otherwise, its available through unpkg. In your html, add:
<script src="https://unpkg.com/leaflet-polar-graticule@0.1.3/L.Graticule.min.js" integrity="sha384-1fxJBA/Bv+18dZEiq5gGATLItj7ivCqXGZkYTv9wAtP7ECoHY69fyFMc+YUcJkrk" crossorigin="anonymous"></script>
If you don't like how the labels are displayed, you can specify a custom display function. (See onEachFeature in L.Graticule.js)