freemapslovakia / freemap-v3-react

Freemap Slovakia web application (www.freemap.sk)

Freemap Slovakia Web Application

Current version of www.freemap.sk maintained by OZ Freemap Slovakia.

Requirements

• Node 14
• Freemap API Server

Compiling and running in development mode

1. Add local.freemap.sk to 127.0.0.1 in your system hosts file (for Linux and MacOS it is /etc/hosts).

2. Install the necessary libs:

   npm i
   npm run prepare

3. Run webserver which also compiles the source files on change:

   npm start

4. Install development CA certificate to your browser.

5. Open the application by visiting https://local.freemap.sk:9000/.

Compiling for the production

Set DEPLOYMENT to:

• dev (default) for local.freemap.sk
• next for next.freemap.sk
• www for www.freemap.sk

npm i
DEPLOYMENT=www ./node_modules/.bin/webpack

You'll then find all static web resources in dist directory.

Other env varialbes

• FM_MAPSERVER_URL - base URL of Mapnik Mapserver (without trailing slash); for example http://localhost:4000 for development

Translation (i18n)

Files:

• webpack.config.js - texts in htmlPluginProps
• src/translations/en-shared.json
• src/translations/en.tsx
• src/components/supportUsModal/translations/en.tsx
• src/globalErrorHandler.ts - bottom error message
• src/osm/osmTagToNameMapping-en.ts
• https://github.com/FreemapSlovakia/freemap-mapnik/blob/develop/legend.js

freemap-v3-react's Issues

Tlacidlo "Zdielat odkaz na mapu"

pouzije aktualnu URL

diskusia: ako zobrazovat dalsi obsah?

moj navrh je nasledovny:

do hornej listy uz pridame len jednu vec - tlacidlo "Viac" (mozno nas napadne lepsi nazov), ktore bude v pravom hornom rohu, a ktore po stlaceni zobrazi dropdown menu. v dropdown menu budu vsetky ostatne polozky, napr.:

• O projekte
• Legenda
• Nastavenia

obsah poloziek zobrazime rovnakou formou ako sucasny POI search, teda cez modalny popup. pristup cez popup ma nevyhodu pri Legende, pri ktorej by bolo uzitocne keby pouzivatel zaroven videl legendu aj mapu, ale mozeme to vyriesit aj tak, ze tam legendu vobec nedame :)

alternativou k zobrazovaniu obsahu cez modalny popup je panel ktory by sa vysunul zboku (na sirokom displeji povedzme do 30% sirky), ale je problem so smartfonmi, lebo tam sa uz teraz vysuva zhora collapsed menu, a keby sa este vysuvala zboku dalsia lista, bolo by to neprehladne. preto sa priklanam k zobrazovaniu obsaho cez modalny popup, lebo to bude fungovat rovnako na velkych aj malyh displejoch.

co sa tyka celkovej koncepcie - podla mna sme sa mali snazit aby sme uz nepresiahli sucasne mnozstvo ovladacich prvkov ktore teraz vidi pouzivatel ked navstivi portal, co napr. znamena ze nebudeme priamo na plochu mapy uz davat dalsie tlacidla/obsah.

aku mas ty viziu, Martin @zdila ?

ako robit scoped css ?

@zdila , zatial vsetko css davam do styles/page.css, ale rad by som pouzival per-component s/css - Martin, ak mas skusenost s nejakym pristupom v react, daj vediet.

Pridať ďalšie kategórie do objektov

Sem: https://github.com/FreemapSlovakia/freemap-v3-react/blob/master/src/poiTypes.js

Bonus - pridať ikony.

Zobral by som to zo súčasneho freemapu.

funkcia zistenie GPS suradnic na mape

• rozne formaty
• asi rozsirenim meraca vysky

inac mozno by sa dali zlucit dokopy meranie vzdialenosti, vysky a zistenie suradnic bodu do jedneto toolu. a mozno aj plochy? - @petervojtek co ty na to?

globalny gui loader

ktory budeme zobrazovat napr ked sa nieco dotahuje cez ajax.

zda sa mi ze toposcope tam mal nieco s nazvom hourglass, neviem ci to bol loader..

ako zaviest redux/jeho alternativu..

Martin @zdila , zo zvedavosti som vyskusal spravit to, ze poloha startovacieho bodu vyhladavania trasy sa bude propagovat cez redux (s jedinou akciou "SET_START")-- chcel som si vyskusat, ake zlozite je zaviest do projektu redux. tym netvrdim ze mame pouzit redux, tie jeho alternativy vyzeraju mozno aj lepsie, ale chcel som si to skusit.

ak si to nahodou chces pozriet, tu som trochu okresal kod okolo planovaca, planovac dokaze len to, ze vies zvolit startovaci bod:
https://github.com/FreemapSlovakia/freemap-v3-react/tree/try-redux

zvolil som taky pristup, ze kazdy nas "stary" komponent ktory sa nejako dotykal startovacieho bodu planovaca trasy (Main, RoutePlannerResults) som este zabalil do redux-enhanced containera. netusim ci je to dobry pristup, ale mam pocit ze keby sme nahodou chceli ist touto cestou, tak to umoznuje postupnu migraciu stavoveho stroja na redux pricom zvysok kodu funguje po starom.

co mi pride trochu zradne je Immutable Map, ktoru som pouzil na pracu so stavom.

aby som sa dostal k startovaciemu bodu, volal som state.routePlanner.start a stale to bolo null, az kym som zistil ze sa to ma volat takto:

state.routePlanner.get('start')

toto vie byt buducim zdrojom tazko odhalitelnych bugov :)

planovac: zobrazovat kilometre na medzizastavkach

podobne ako to ma nastroj meranie vzdialenosti.
teraz sa zobrazuje iba na cieli.

funkcia spustenia editora vyrezu mapy

JOSM remote control, iD, ...

Vylepsit vyhladavanie POI

vylepsit (upratat) kod a UI

pridat kontextove akcie pri zvolenom vysledku vyhladavania

ked pouzivatel klikne na vysledok vyhladavania a zobrazi sa vysledny marker, zobrazit v hornom menu akcie:

• navigovat z tohto bodu
• navigovat sem
• zdielat odkaz

robit az po #25

vysledky vyhladavania - mudrejsie refocusovat mapu pri onhover vysledku vyhladavania

teraz to dobre funguje pre Points, ale prilis velke/male polygony a polylines to chce lepsiu pracu so zoomom mapy.

vysledky vyhladavania - zobrazovat ways/areas ako polyline/polygon

teraz sa vsetko zobrazuje ako marker (bod)

vysledky vyhladavania: pridat podporu pre MultiLineString

napr. pre "Litava"

pridat wizard na embednutie freemapu do vlastnej stranky

Wizard:

• default pozicia a typ mapy
• velkost mapy
• ci mapa ma mat prepinac typu
• pridanie bodu do mapy (neskor viacero objektov - anotovana mapa - inspiracia z umap)

Sucansa verzia je na http://embed2.freemap.sk/wizard.html

meranie nadmorskej vysky

pre zvoleny bod vypise nadmorsku vysku

ako a kam robit deploy?

Martin @zdila ,

predvcerom som z git-u odstranil build/app.js, aby to nerobilo problemy pri mergovani vetiev, ale dosledkom je ze uz nevieme repozitar deploynut iba cez git pull/staticky upload.

ak sa ti Martin zda ze bude pohodlnejsie mat build/app.js v repozitari z dovodu deploymentu, mozem ho tam vratit.

co sa tyka serveru kam to deployovat, dolezite je, aby odtial fungovali dopyty na freemap api bez vypinania CORS.

ja inak mam ten server litava.eu, kam viem dat cokolvek (je to Scaleway Baremetal ARM), ale asi by bolo prehladnejsie to mat na serveri freemap-u (tam ale nemam pristup).

neviem aky mas na to cele nazor..

Pouzivat update() nie priamo na this.state

Mylne som prehodil update ze vysledok je cela nova state, co mozno nie je najefektivnejsie. Opravim to s5.

pridat donate dlacitko

font awesome ikonky nemaju rovnako sirku

Updatnut na react-router 4

Vysiel react-router 4 ktory nie je spatne kompatibilny.

planovac: pridat start/ciel -- mat moznost vybrat si aj z 'aktualna poloha'/'domov'

na tlacidle Pridat start/ciel by mohol byt dropdown, ktory by ponukol dve moznosti:

• aktualna poloha
• domov -- nemam premyslene ako by mohol pouzivatel nastavit jeho domovsku polohu

planovac: posuvanie existujuceho bodu prida vzdy dalsi midpoint

Planovanie trasy

tool merania rozlohy

(bez zohladnenia 3D terenu)

zjednodusit planovac -- typ mapy urcuje typ pohybu

Miso P. mi dal namet, ze v planovaci vieme odstranit prepinac typov pohybov, a typ pohybu moze byt odvodeny od aktualneho typu mapy. akurat treba novemu pouzivatelovi nejako povedat, ze prepnutim typu mapy ovlyvni routovanie.
co si o tom myslis Martin @zdila ?

pritat tlacitko exportu naplanovanej trasy do GPX

download implementovat cisto client-side

spravit nieco s logom - je necitatelne

to logo freemap je navrhnute dost zle - text freemap.sk je zle citatelny a motto pod nim je uplne zbytocne lebo nie je citatelne vobec. tiez mi nie je jasne co ma predstavovat ta farebna machula na pravej strane loga.
mozno je spravny cas vymysliet nove logo freemap :)

vyhladavanie - male polygony/polylines su tazko viditelne

ani pri z16 obcas nie je jasne, kde na mape je vysledok vyhladavania (ak je to polygon/polyline).

detekovat ze ide o maly objekt a v takom pripade okolo neho zobrazit napr. nejaky kruh ktory nanho upriami pozornost

nastavenie: png/jpg dlazdice

napr. pri slabsej konektivite si to zmenim na jpg.

az raz bude podporovane toto, tak to mozeme menit automaticky:
https://developer.mozilla.org/en-US/docs/Web/API/Network_Information_API

prehodiť vyhľadávanie na redux

map.bounds nie su na zaciatku nastavene

kym nepohnem mapou tak sa map.bounds nenastavia.
do sposobi ze ak pouzijem search suggestions (a este som nepohol rucne mapou), tak sa mapa nebude refocusovat na highlighed search result.

Zakladne vyhladavanie

• zobrazovat suggestions pocas toho ako pouzivatel pise
• odlisit vysledky podla typu (farebne/roznym markerom)

bolo by pekne, keby bolo mozne na konkretny marker kliknut a ziskat jeho explicitny URL odkaz (keby som napr. chcel s niekym zdielat informaciu "tu presne je autobusova zastavka v Brusne") -- ale toto by som nerobil v ramci tejto issue.

vylepsit prepinac mapovych vrstiev - nie je jasne aka vrstva je zvolena

a na mobile zostane po zmene vrstvy otvoreny prepinac vrstiev.

osetrit manualnu zmenu URL parametrov

teraz aplikacia spadne ak nedostane napr. cislo ako lat.

search: ked dost rychlo kliknem na highlighnuty search result: Warning: setState(...): Can only update a mounted or mounting component.

warning.js:36 Warning: setState(...): Can only update a mounted or mounting component. This usually means you called setState() on an unmounted component. This is a no-op. Please check the code for the ReactClass component.

postup:

1. treba ist kurzorom na nejaky search result
2. a ihned nan kliknut

planovac - vylepsit UX pridavania zastaviek

teraz to pridava novu zastavku na posledne miesto v poradi zastavok, pred finish.
namiesto toho pridat novu zastavku medzi dva najblizsie existujuce body trasy. napriklad ked tu je aktivne Pridat zastavku a kliknem na Osrblie, nech ju prida medzi Start a prvu doterajsiu zastavku:

kliknutie na logo (teraz text freemap vlavo hore) nech resetne mapu

• navrhujem resetnut iba lat/lon/zoom na default hodnoty -- to je uzitocne ked sa clovek nahodou ocitne niekde uplne mimo SR a vidi len sede dlazdice.
• typ mapy nechat
• nastroj nastavit na search

prvky na mape s ktorymi sa neda interagovat nech maju obycajny kurzor

teraz ma kazdy objekt na mape pointer cursor, aj ked kliknutie nan nic nerobi.

zobrazovanie polohy jednotlivých zariadení

(http://loc.freemap.sk/)

Globalizácia

Čo tak sa nesústrediť len na Slovensko ale spraviť portál globálny?

Stačilo by pridať lokalizáciu a využívať globálne služby (ako overpass, graphopper, nominatim a pod.). Služby by mohli byť konfigurovateľné, napr formou pluginov (napr.graphopper vs freemap api na routovanie)...

@petervojtek ?

planovac - kliknutie na existujuci midpoint prida dalsi midpoint

namiesto toho by to mohlo ponuknut moznost odstranit midpoint

funkcia zobrazenia blizkych objektov v okoli miesta kliknutia do mapy

informovat pouzivatela cez Toast preco je vyhladavanie POIs neaktivne

Implementovať Galériu

pamatat si poslednu poziciu a typ mapy cez localStorage

ked pouzival znovu pride na freemap.sk (bez url parametrov), zobrazit mu poslednu navstivenu poziciu

zobrazit legendu mapy

vymyslieť ako sa bude uchovávať stav toolov pri ich prepínani

Momentálne už máme takmer všetko v reduxe. Tým, že sa stav toolov zachováva a explicitne ho nemažem pri ich prepínani, tak si môžeme zvoliť, či a ako zobrazovať výsledky z rôzných toolov a ako ich resetovať.

Pridat facebook tlacitko

• like tlacitko
• link na nasu fanpage (vo "Viac"?)

Tlacidlo "Nahlas chybu"