Graticule layer?

[jatech1]

Anyone know of any existing code for a lat/lon graticule that is full featured like you would expect from a professional map? ie. auto-scaling based on zoom level, labels at top/btm/sides, various line/text formats,. etc This is so common I am surprised to only find one github repo for it... and that is 3 years old and very basic implementation. Is the only option to write it from scratch as a custom layer? Hoping there is an easy solution that I am missing. Would appreciate any input.

[HarelM]

Can you provide an example? I'm not sure I fully understand the question...

[TimMcCauley]

He means something like this @HarelM

[HarelM]

I think it's fairly trivial to do in maplibre so I would guess people simply wrote it and didn't share it.
But I might be wrong.

[klokan]

Perhaps https://github.com/maptiler/maplibre-grid could solve what you need to do? This is including setting up grids in coordinate system of your choice (degrees, meters, etc) on different zoom levels. It is possible to enable the ability to select individual grid cells for area selection...

See https://labs.maptiler.com/maplibre-grid/

Pull request updating such code base very much welcome :-)

[jatech1]

Thanks! That was the repo I saw. I was hoping there was something else out there that had the auto scaling on zoom and labels, since it is a common need... thank you for the replies!

[mootari]

@jatech1 What solution did you end up with?

[mootari]

Several months after you started this topic geogrid-maplibre-gl got released. It's still fairly limited but does includes some of the features you listed.

I've been using it as follows to render a semi-transparent grid without labels at a zoom dependent density:

  new GeoGrid({
    map,
    // the docs example uses rgba() which in my tests was not recognized
    gridStyle: {color: "#0002"},
    // labels can't be disabled, their containers will always be created
    formatLabels: () => null,
    // 40 is a magic number that worked well for me in the range 10-22
    gridDensity: zoomLevel => 40 / 2 ** zoomLevel
  });

Edit: the Mapbox docs explain how zoom levels map to distances: https://docs.mapbox.com/help/glossary/zoom-level/#zoom-levels-and-geographical-distance