Code Monkey home page Code Monkey logo

aed-mapa's Introduction

Mapa defibrylatorów AED

Important

To repozytorium zawiera starą, dłużej niewspieraną, wersję projektu.
Aktualny rozwój projektu prowadzony jest w następujących repozytoriach:

Nowa strona aplikacji to OpenAEDMap.org.

English: Map presenting locations of defibrillators based on OpenStreetMap data.

To repozytorium zawiera kod strony prezentujacej lokalizacje defibrylatorów AED.

Dane pochodzą z bazy OpenStreetMap, którą każdy może uzupełniać do czego chcemy zachęcić.

Informacje o defibrylatorach są zawyczaj udostępniane przez poszczególnych operatorów lub jednostki samorządowe. Przez taką fragmentację ciężej znaleźć takie urządzenia. OSM jest otwartym zbiorem danych i zawsze taki pozostanie, więc dane mogą być wykorzystywane przez inne aplikacje webowe i mobilne.

Poza pobieraniem danych bezpośrednio z OSM albo za pomocą usług jak Overpass API dane wyświetlane na stronie można pobrać w formacie:

Gitflow [ENG]

All changes should flow from branch development to branch main.

Branch development is hosted on: https://aed.openstreetmap.org.pl/dev/ Branch main is hosted on: https://aed.openstreetmap.org.pl/

Github actions deploy the site when new commits are pushed/merged into either branch.

New branches should be based on development branch. Pull Requests (PR) should be targeting development branch.

To promote changes from dev env to prod make a PR from development to main.

Technical information [ENG]

This is a simple static website using HTML and vanilla JavaScript. Any webserver (Nginx/Apache) or things like S3 or GitHub Pages can be used to host frontend part.

File js/osm-integration.js contains placeholders for OAuth1 tokens for OpenStreetMap application which are filled during deploy (this allows us to have both prod and dev environments one pointing to OSM DEV API one to osm.org).

The only thing that requires code execution is Python script that downloads data from Overpass API and converts it to GeoJSON and CSV files.

File requirements.txt contains packages used by python script.

Scripts used to deploy on our server [ENG]

Stack: Ubuntu/Nginx

Clone repo:

git clone --branch main --single-branch https://github.com/openstreetmap-polska/aed-mapa.git /home/aeduser/aed-mapa/

Command to deploy are in .github/workflows/ but in short they copy the files to temporary location then replace the OAuth1 token mentioned earlier and then copy files to /var/www/html/.

Download new data (set crontab to run it periodically):

python3 /home/aeduser/aed-mapa/download_data.py /home/aeduser/data_prod/ /home/aeduser/

cp /home/aeduser/data_prod/aed_poland.ods /var/www/html/aed_poland.ods
cp /home/aeduser/data_prod/aed_poland.geojson /var/www/html/aed_poland.geojson
cp /home/aeduser/data_prod/aed_poland_metadata.json /var/www/html/aed_poland_metadata.json
cp /home/aeduser/data_prod/aed_poland.csv /var/www/html/aed_poland.csv

Alternatives / Inne podobne

Additional info about development [ENG]

Editing style

You can use Maputnik editor to prepare new style for the map.

Steps:

  1. Open https://aed.openstreetmap.org.pl/maputnik/?layer=1311944204%7E0#6/52/20 (it's a copy of maputnik editor with newer version than what is available on the official site).
  2. If the AED map style has not been loaded click open and select it.
  3. Once finished click export and create PR or an issue with your style attached.

Creating sprites with icons

If you want to add new icons to the sprite sheet please place the SVG files in ./web/marker_icons/ folder.

SVG should be scaled to 50x50px size.

# install requirements (assumes NVM has been installed)
nvm use 8
npm install -g @mapbox/spritezero-cli
# create sprite for regular screens
spritezero --ratio 1 ./web/map_style/sprite ./web/marker_icons/
# create sprite for high-dpi screens
spritezero --ratio 2 ./web/map_style/sprite@2x ./web/marker_icons/

aed-mapa's People

Contributors

ancymonek avatar danieldegroot2 avatar ksciana avatar ksciana-krk avatar matkoniecz avatar mutipg avatar praszuk avatar ricoelectrico avatar starsep avatar ttomasz avatar wzbartczak avatar zaczero avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar

aed-mapa's Issues

Reskalowanie kafelków mapy

Siema. Jak mogę ponarzekać to włącza się Wam jakieś reskalowanie kafli... kiedyś coś takiego miałem i chyba wynikało to z innego rozmiaru niż 100% w css... alboco. W wyniku tego kafelki są lekko rozmyte. Problem występuje tutaj ale również na budynkach. Porównanie naszej mapy z OSM:

obraz

Switch to OAuth 2

Switch to OAuth 2 from HTTP Basic Auth and OAuth 1.0a. They are being deprecated.
See openstreetmap/operations#867

Or, if using osm-auth or other authentication library, make sure library is using OAuth 2 and library version is updated.

Also, it is likely OAuth 1 text in README.md is redundant and can be removed, or replaced with OAuth 2 text.

Obsłużenie błędnych godzin otwarcia

Błędny format godzin otwarcia powoduje, że w karcie AED nie odświeżają się dane (np. pojawia się ostatni kliknięty AED), bądź po pierwszym kliknięciu pojawia się pusta karta.

Przykład błędnych wartości - do testów:
Mo 07:30-18:00; Tu-Fr 07:30-15:30; Sa-Su (kontakt telefoniczny z portiernią – numer telefonu widnieje na drzwiach wejściowych do budynku)

Poprawne:
Mo 07:30-18:00; Tu-Fr 07:30-15:30; Sa-Su "kontakt telefoniczny z portiernią – numer telefonu widnieje na drzwiach wejściowych do budynku"

Błąd zgłoszony przez użytkownika Pooh01

"Ostatnia aktualizacja" - brzmi jak data edycji, nie importu

unknown

Co byłoby lepsze?

"Synchronizacja z bazą OSM" "Skopiowanie danych z OSM" "zmiany nowsze niż X minut nie są widoczne" "jeśli wyedytowałeś ten obiekt mniej niż X minut temu to nie jest to jeszcze widoczne"?

"import" byłby raczej niejasny

Dodać możliwość nawigowania do AED.

W okienku z opisem urządzenia dodać przycisk umożliwiający nawigowanie z miejsca, w którym znajduje się użytkownik do defibrylatora. Analogicznie jak w dopomoha.pl

PWA i czyszczenie cache

Występuje u mnie sytuacja, że mam: 'dodaliśmy już 1186 AED', po odświeżeniu jest już 'dodaliśmy już 1300 AED'. Gdy wracam na stronę mam znowu 1186.. Może by ograniczyć cache jedynie do niektórych plików, bądź jakoś czyścić cache .geojsonów?

@ksciana

Przycisk dodawania nie zmienia przezroczystości przy zmianie przybliżenia

Problem dotyczy Firefox (v.95) na Android
Podczas przybliżania mapy przycisk dodawania nie zmienia przezroczystości i nie wiadomo czy już jest poziom przybliżenia na ktorym dodawanie działa.
Na desktopie ta zmiana tez jest zresztą dosyć mało widoczna.
Może zamiast przezroczystości przycisku (albo dodatkowo) zmieniać jego kolor np z żółtego na zielony ?

Tag opening_hours?

Myślę, że stosowny byłby jeszcze tag opening_hours. Można też jakoś uwzględnić jego dostępność (access) i dostępność w danym czasie (opening_hours) w kolorze markera.

Pobieranie danych

Trzeba by się zastanowić jak i w jakim formacie umożliwić pobieranie danych shp, cvs oraz geopackege by wypadało ... no i jak często aktualizację zapuścić może na początku raz na 2 tyg?

Pobieranie danych w xls pliku

Najlepiej by od razu stworzyć tłumacz, który ułatwia czytanie osobom niezwiązanym z osm w tym zamiast osm_id link do obiektu

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.