Based on Maplibre, geoverview is a tool to display very easily any geojson (and the information it contains) on a map.
npm install geoverview
!logo
!npm
!jsdeliver
!license
!code size
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.
It is very simple, geoverview contains only one function. In Observable, it is used in the following way. You need 3 cells:
``js`
// Load geoverview
view = require("geoverview@1.2.1").then((f) => f.view)
`js`
// add a geojson (or topojson) file
data = FileAttachment("something.geojson").json()
`js`
// and view
view(data)
Automatically, the map and your geojson will be displayed. So simple...
Live demo on this page or this Observable notebook.
You can add some options like this:
`js``
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)
- [ ] 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.
If you want to improve geoverview, feel free to post issues (bugs, suggestions...) and suggest pull requests.