funkcie a technologické riešenie - openstreetmap.cz...turistika, cyklistika, bežky (the greatness...
TRANSCRIPT
![Page 1: Funkcie a technologické riešenie - openstreetmap.cz...turistika, cyklistika, bežky (The Greatness in Mapping Award, SotM 2016) prispievanie do fotogalérie (> 50 000) vývoj softvéru](https://reader035.vdocuments.mx/reader035/viewer/2022070711/5ec9d15de90e6a6b90412fdd/html5/thumbnails/1.jpg)
www.freemap.skFunkcie a technologické riešenie
![Page 2: Funkcie a technologické riešenie - openstreetmap.cz...turistika, cyklistika, bežky (The Greatness in Mapping Award, SotM 2016) prispievanie do fotogalérie (> 50 000) vývoj softvéru](https://reader035.vdocuments.mx/reader035/viewer/2022070711/5ec9d15de90e6a6b90412fdd/html5/thumbnails/2.jpg)
Niečo o mne (OSM)● aktívny v OSM a Freemap od 2010● mapovanie
○ importy (budovy z katastra, landcover z UA a CLC, min. pramene, ...)○ obkresľovanie z rôznych zdrojov (leteckých máp, strava heatmap, NLC, ...)○ turistika, cyklistika, bežky (The Greatness in Mapping Award, SotM 2016)○ prispievanie do fotogalérie (> 50 000)
● vývoj softvéru○ www.freemap.sk, toposcope.freemap.sk○ outdoorová mapa (štýl, mapserver, JsNik)○ SimplifyArea plugin pre JOSM○ GPX Animator○ nejaké patche do Mapnik-u a Gdal-u
![Page 3: Funkcie a technologické riešenie - openstreetmap.cz...turistika, cyklistika, bežky (The Greatness in Mapping Award, SotM 2016) prispievanie do fotogalérie (> 50 000) vývoj softvéru](https://reader035.vdocuments.mx/reader035/viewer/2022070711/5ec9d15de90e6a6b90412fdd/html5/thumbnails/3.jpg)
Motivácia vzniku novej verzie www.freemap.sk● posledný vývoj na starom portáli v roku 2009● prechod na modernejšie technológie
○ z PHP a jQuery na Node.js a React
● toposcope.freemap.sk● začiatok vývoja Február 2017
additional credits: Peter Vojtek (web), Michal Palenik (routing)
![Page 4: Funkcie a technologické riešenie - openstreetmap.cz...turistika, cyklistika, bežky (The Greatness in Mapping Award, SotM 2016) prispievanie do fotogalérie (> 50 000) vývoj softvéru](https://reader035.vdocuments.mx/reader035/viewer/2022070711/5ec9d15de90e6a6b90412fdd/html5/thumbnails/4.jpg)
![Page 5: Funkcie a technologické riešenie - openstreetmap.cz...turistika, cyklistika, bežky (The Greatness in Mapping Award, SotM 2016) prispievanie do fotogalérie (> 50 000) vývoj softvéru](https://reader035.vdocuments.mx/reader035/viewer/2022070711/5ec9d15de90e6a6b90412fdd/html5/thumbnails/5.jpg)
Funkcie mapy● (prejdenie funkcií na www.freemap.sk)
![Page 6: Funkcie a technologické riešenie - openstreetmap.cz...turistika, cyklistika, bežky (The Greatness in Mapping Award, SotM 2016) prispievanie do fotogalérie (> 50 000) vývoj softvéru](https://reader035.vdocuments.mx/reader035/viewer/2022070711/5ec9d15de90e6a6b90412fdd/html5/thumbnails/6.jpg)
Architektúra● frontend - progresívna webová aplikácia (PWA)● backend - rôzne servery
○ Freemap API○ Overpass (overpass-api.de)○ Nominatim (nominatim.openstreetmap.org)○ OSM API (api.openstreetmap.org)○ OSRM (routing.freemap.sk, routing.openstreetmap.de)
Zdrojové kódy nájdete na GitHub-e (https://github.com/FreemapSlovakia).
![Page 7: Funkcie a technologické riešenie - openstreetmap.cz...turistika, cyklistika, bežky (The Greatness in Mapping Award, SotM 2016) prispievanie do fotogalérie (> 50 000) vývoj softvéru](https://reader035.vdocuments.mx/reader035/viewer/2022070711/5ec9d15de90e6a6b90412fdd/html5/thumbnails/7.jpg)
Služby Freemap API● autentifikácia a autorizácia● sledovanie zariadení● fotogaléria● geotools
○ elevation service
![Page 8: Funkcie a technologické riešenie - openstreetmap.cz...turistika, cyklistika, bežky (The Greatness in Mapping Award, SotM 2016) prispievanie do fotogalérie (> 50 000) vývoj softvéru](https://reader035.vdocuments.mx/reader035/viewer/2022070711/5ec9d15de90e6a6b90412fdd/html5/thumbnails/8.jpg)
Freemap API server● Node.js● Koa● MySQL
![Page 9: Funkcie a technologické riešenie - openstreetmap.cz...turistika, cyklistika, bežky (The Greatness in Mapping Award, SotM 2016) prispievanie do fotogalérie (> 50 000) vývoj softvéru](https://reader035.vdocuments.mx/reader035/viewer/2022070711/5ec9d15de90e6a6b90412fdd/html5/thumbnails/9.jpg)
Webové technológie● Typescript● React (postupne s React hooks)● Redux● Business logika riešená vlastným middleware (Processor)● React-Bootstrap (0.32)● React-Leaflet● Webpack● Prettier
![Page 10: Funkcie a technologické riešenie - openstreetmap.cz...turistika, cyklistika, bežky (The Greatness in Mapping Award, SotM 2016) prispievanie do fotogalérie (> 50 000) vývoj softvéru](https://reader035.vdocuments.mx/reader035/viewer/2022070711/5ec9d15de90e6a6b90412fdd/html5/thumbnails/10.jpg)
Special features● PWA● drag & drop● stav aplikácie premietnutý v URL● klávesové skratky● Share API Level 2 a Share Target API 2● HDPI ready
![Page 11: Funkcie a technologické riešenie - openstreetmap.cz...turistika, cyklistika, bežky (The Greatness in Mapping Award, SotM 2016) prispievanie do fotogalérie (> 50 000) vývoj softvéru](https://reader035.vdocuments.mx/reader035/viewer/2022070711/5ec9d15de90e6a6b90412fdd/html5/thumbnails/11.jpg)
Plány a prianiaPlány
● tvorba vlastných anotovaných máp (uMap)● vlastné mapové podklady (TMS URL)● export do PDF aj s obsahom● kešovanie mapy pre offline použitie
Priania
● Pigeon maps
![Page 12: Funkcie a technologické riešenie - openstreetmap.cz...turistika, cyklistika, bežky (The Greatness in Mapping Award, SotM 2016) prispievanie do fotogalérie (> 50 000) vývoj softvéru](https://reader035.vdocuments.mx/reader035/viewer/2022070711/5ec9d15de90e6a6b90412fdd/html5/thumbnails/12.jpg)
React
![Page 13: Funkcie a technologické riešenie - openstreetmap.cz...turistika, cyklistika, bežky (The Greatness in Mapping Award, SotM 2016) prispievanie do fotogalérie (> 50 000) vývoj softvéru](https://reader035.vdocuments.mx/reader035/viewer/2022070711/5ec9d15de90e6a6b90412fdd/html5/thumbnails/13.jpg)
Redux
![Page 14: Funkcie a technologické riešenie - openstreetmap.cz...turistika, cyklistika, bežky (The Greatness in Mapping Award, SotM 2016) prispievanie do fotogalérie (> 50 000) vývoj softvéru](https://reader035.vdocuments.mx/reader035/viewer/2022070711/5ec9d15de90e6a6b90412fdd/html5/thumbnails/14.jpg)
React + Redux
View (React)const state = store.getState();
<MyComponent foo={state.foo} onClick={() => store.dispatch(action);}/>
state
action
Storestate = reduce(state, action);
Middleware(s)const state = store.getState();
const result = await httpPost(url, state.bar);
store.dispatch(someAction(result));
action
Middleware(s)