About openaedmap-frontend

Map which shows locations of defibrillators (AEDs) and allows adding new ones.

o

Published by

README.md

Open AED Map

This project shows Automated External Defibrillators (AED) location on a map. Site is integrated with OpenStreetMap reading data from OSM and allowing to add AED location to OSM.

This is a rewrite of the first version to React. Development is in progress.

Production environment: https://openaedmap.org \ Development environment: https://dev.openaedmap.org

Development

Bun

It's recommended to use bun instead of npm. See https://bun.sh/docs/installation for installation manual

Gitflow

dev is main branch. After pushing to it dev environment is autodeployed. Create branch off of dev branch and when finished make PR back to dev branch.

To deploy to production create git tag. Use YYYY-MM-DD format with optional suffix with description.

Translating

We are using Weblate to manage translations.

If you want to help go to https://hosted.weblate.org/projects/openaedmap/ and start translating :)

If new language is added then create an issue or make a PR adding it to src/languages.ts with the 2 letter language ISO 639-1 code and native name (this is going to be displayed in dropdown).

Language with multiple variants needs extra suffix e.g. zh-Hant for Traditional Chinese.

Status:

Local environment

One way to set up is:

Clone repo and open terminal in the project directory
Install Node version 24 or use Node version manager
Install bun. See https://bun.sh/docs/installation
Run bun install

Second way is if you are using VS Code and have Docker installed you can use devContainer extension.

Create .env file and put these variables there:

VITE_OSM_API_URL=https://master.apis.dev.openstreetmap.org
VITE_BACKEND_API_URL=https://dev.openaedmap.org
VITE_OSM_OAUTH2_CLIENT_ID=9MF6zlYwOE_FaFNZmhFcBpyx7BFtTSXcsikrQF0JM-8

Note: You can use Github Codespaces to develop.

Lefthook

It's recommended to use lefthook After installing lefthook use lefthook install to configure it. Formatter and linter will run before git commit.

Available Scripts

In the project directory, you can run:

`bun dev`

Runs the app in the development mode.\ Open http://127.0.0.1:5173 to view it in your browser.

The page will reload when you make changes.\ You may also see any lint errors in the console.

`bun prod`

Builds the app for production to the build folder.

Create sprites from marker icons

Use npx @beyondtracks/spritezero-cli ./public/img/sprite ./src/marker_icons; spritezero --ratio=2 ./public/img/sprite@2x ./src/marker_icons; spritezero --ratio=4 ./public/img/sprite@4x ./src/marker_icons

Upgrading dependencies

bunx npm-check-updates -ui is recommended

Data source

Map and AED locations are from OpenStreetMap

openaedmap-frontend