Based on maplibre-gl, geoverview is a tool for giving a quick and easy geographic overview of any geojson (and the information it contains). Geoverview is particularly suitable for working within Observable.

How to use?

It is very simple, geoverview contains only one function. In Observable, it is used in the following way. You need 3 cells:

// Load geoverview
view = require("[email protected]").then((f) => f.view)

// add a geojson (or topojson) file
data = FileAttachment("something.geojson").json()

// and view
view(data)

Automatically, the map and your geojson will be displayed. So simple...

Demo

Live demo on this page or this Observable notebook.

Options

You can add some options like this:

view(data, {width:800, renderWorldCopies:false})

Option list:

• width: width of the map (default: 1000)
• height: height of the map (default: 550)
• col: Color of the displayed geojson (default: "#be82c2")
• fillOpacity: fill opacity (default: 0.5)
• lineWidth: line thickness (default 1 if point or polygon, 3 if line)
• colOver: color when an object is hovered (default: "#ffd505")
• renderWorldCopies: If true , multiple copies of the world will be rendered side by side beyond -180 and 180 degrees longitude (default: true)
• style: basemap style: "night", "fulldark", "voyager","positron","icgc","osmbright","hibrid" (default: voyager)

Things to fix/improve

• [ ] Add an example that works outside of Observable (#1)
• [ ] In Quarto, the rendering of the infoboxes is not good. Css problem? (#2)

See all issues.

Contribute

If you want to improve geoverview, feel free to post issues (bugs, suggestions...) and suggest pull requests.