freemapslovakia / freemap-v3-react Goto Github PK
View Code? Open in Web Editor NEWFreemap Slovakia web application (www.freemap.sk)
Home Page: https://www.freemap.sk/
License: Apache License 2.0
Freemap Slovakia web application (www.freemap.sk)
Home Page: https://www.freemap.sk/
License: Apache License 2.0
podobne ako to ma nastroj meranie vzdialenosti.
teraz sa zobrazuje iba na cieli.
Č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)...
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.
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..
pre zvoleny bod vypise nadmorsku vysku
Vysiel react-router 4 ktory nie je spatne kompatibilny.
Mylne som prehodil update ze vysledok je cela nova state, co mozno nie je najefektivnejsie. Opravim to s5.
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.
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.:
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 ?
napr. pre "Litava"
na tlacidle Pridat start/ciel by mohol byt dropdown, ktory by ponukol dve moznosti:
a na mobile zostane po zmene vrstvy otvoreny prepinac vrstiev.
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 :)
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:
@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.
ked pouzival znovu pride na freemap.sk (bez url parametrov), zobrazit mu poslednu navstivenu poziciu
Wizard:
Sucansa verzia je na http://embed2.freemap.sk/wizard.html
JOSM remote control, iD, ...
ked pouzivatel klikne na vysledok vyhladavania a zobrazi sa vysledny marker, zobrazit v hornom menu akcie:
robit az po #25
teraz aplikacia spadne ak nedostane napr. cislo ako lat.
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..
(bez zohladnenia 3D terenu)
namiesto toho by to mohlo ponuknut moznost odstranit midpoint
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
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?
vylepsit (upratat) kod a UI
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 ?
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 :)
pouzije aktualnu URL
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ť.
Sem: https://github.com/FreemapSlovakia/freemap-v3-react/blob/master/src/poiTypes.js
Bonus - pridať ikony.
Zobral by som to zo súčasneho freemapu.
teraz ma kazdy objekt na mape pointer cursor, aj ked kliknutie nan nic nerobi.
teraz sa vsetko zobrazuje ako marker (bod)
teraz to dobre funguje pre Points, ale prilis velke/male polygony a polylines to chce lepsiu pracu so zoomom mapy.
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
download implementovat cisto client-side
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.