View page: https://fivh-bergen.github.io/kart/
This is a map designed to help people find ways to reuse and repair in Bergen, Norway.
It is made with Astro, React and Maplibre using OpenStreetMap map data via Maptiler and Overpass API and is hosted on Github Pages.
While initially developed with funding from LNU, this project is dependent on volunteers in order to remain up to date. You can help us out by updating information about second hand shops, rental places and repair shops.
If you have experience with programming, you can also help us develop new features.
This project uses data from OpenStreetMap (OSM). OpenStreetMap is sort of like wikipedia in map form. The data is entered and maintained by volunteers, for the benefit of all.
In order to update the info in our map, the store/amenity in question must be updated in OpenStreetMap. This repository contains a Github Action that periodically retrieves the latest data and deploys the application, so with a little bit of patience you will see changes in OSM reflected in the map.
Adding or editing data on OpenStreet can be done in a number of ways, for example via OpenStreetMap.org, which has a browser based map editor for OpenStreetMap. It requires an OpenStreetMap account, which you can register for free here.
Tip: When you click on a pin in our map you will see a link to edit the store/amenity in the info panel. This is a handy way to quickly make changes to an existing pin!
Other options are mobile apps such as EveryDoor and StreetComplete, both of which are designed for mapping in the field.
Someone with the right permissions can fetch the latest data from OSM with the Github workflow found here (click "Run workflow").
This is an open source application written in JavaScript and TypeScript.
To learn more about the folder structure of an Astro project, refer to Astro's guide on project structure.
This project requires pnpm.
When you have pnpm installed, simply run pnpm install from the project root.
All commands are run from the root of the project, from a terminal:
| Command | Action |
|---|---|
pnpm install |
Installs dependencies |
pnpm dev |
Starts local dev server at localhost:4321 |
pnpm build |
Build your production site to ./dist/ |
pnpm preview |
Preview your build locally, before deploying |
pnpm astro ... |
Run CLI commands like astro add, astro check |
pnpm astro -- --help |
Get help using the Astro CLI |
pnpm test |
Run unit tests |
pnpm test:spec |
Run integration tests |
pnpm format |
Format files with prettier |
pnpm format:check |
Check files with prettier |
pnpm fetch-nodes |
Fetch nodes from Overpass API, parse to GeoJSON |
pnpm generate |
Generate documentation |
We retrieve vector map tiles from maptiler, using their free plan. We use a slightly modified version of their "Pastel" map. The source of the map tiles is specified in src/config.ts. Replacing the base map is simply a matter of creating an account with maptiler (or one of their competitors), creating or choosing a map style and updating the style URL in config.ts.
The pins on the map come from the Overpass API, which is an API that retrieves data about features or POIs (points of interest) mapped by OpenStreetMap volunteers.
The query we use to retrieve this data can be found here: src/overpass/query.overpassql.
You can try them out in the Overpass turbo sandbox by copy pasting the entire contents of an .overpassql file.
This app display some tags in the info panel to provide some useful information about shops/POIs. The tags that can appear here are a selection of OpenStreetMap tags. More information about these tags can be found here