Skip to content
Lat/Lon Graticule for Leaflet map
Branch: master
Clone or download
#5 Compare This branch is 1 commit ahead, 12 commits behind cloudybay:master.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
example Minor updates for Leaflet 1.0 compatibility Oct 20, 2016
.gitignore init files Jul 9, 2016
Leaflet.Graticule.js Minor updates for Leaflet 1.0 compatibility Oct 20, 2016
README.md Minor updates for Leaflet 1.0 compatibility Oct 20, 2016

README.md

leaflet.latlng-graticule

Create a Canvas as ImageOverlay to draw the Lat/Lon Graticule, and show the grid tick label at the edges of the map.

Check out the demo.

Usage example

    L.latlngGraticule({
        showLabel: true,
        zoomInterval: [
            {start: 2, end: 3, interval: 30},
            {start: 4, end: 4, interval: 10},
            {start: 5, end: 7, interval: 5},
            {start: 8, end: 10, interval: 1}
        ]
    }).addTo(map);

Options

  • showLabel: Show the grid tick label at the edges of the map. Default true
  • opacity: Opacity of the Graticule and Label. Default 1
  • weight: The width of the graticule lines. Default 0.8
  • color: The color of the graticule lines. Default #aaa
  • font: Font Style for the tick label. Default 12px Verdana
  • fontColor: Color of the tick label. Default #aaa
  • zoomInterval: Use different intervals in different zoom levels. You can set for both latitude and longitude lines as the example, or set different intervals for latitude and longitude like below:
  zoomInterval: {
    latitude: [
      {start: 4, end: 6, interval: 5},
      {start: 7, end: 20, interval: 1}
    ],
    longitude: [
      {start: 4, end: 6, interval: 10},
      {start: 7, end: 20, interval: 2}
    ]
  }
  • Default:
  zoomInterval: [
    {start: 2, end: 2, interval: 40},
    {start: 3, end: 3, interval: 20},
    {start: 4, end: 4, interval: 10},
    {start: 5, end: 7, interval: 5},
    {start: 8, end: 20, interval: 1}
  ]

Special Options

Some of the projections (like Lambert) is no straight line, set those options to draw a polyline graticule.

  • lngLineCurved: Interval of polyline. Deafult 0
  • latLineCurved: Interval of polyline. Deafult 0

Check out the Lambert projection example.

You can’t perform that action at this time.