Mapbox for Web Application

Transcript

1. Web Mapbox | Daigo Shitara Mapbox #1 - Web
2. Daigo Shitara Front-end Engineer • Front-end lead • shitara@tagbangers.co.jp
3. hello@tagbangers.co.jp WebΞϓϦέʔγϣϯɾϓϩμΫτͷ ετʔϦʔ։ൃ/ࢧԉ AWS ߏஙɾಋೖࢧԉ Atlassian ੡඼ͷಋೖࢧԉ
4. ςΫχΧϧύʔτφʔ
5. Agenda ReactͱMapboxʹΑΔΠϯλϥΫςΟϒͳ஍ਤΞϓϦέʔγϣϯ deck.glΛ࢖ͬͨσʔλͷՄࢹԽ ❤
6. Component ୯ҐͰUIΛߏங͢ΔͨΊͷϥΠϒϥϦ React Component
7. Component ୯ҐͰUIΛߏங͢ΔͨΊͷϥΠϒϥϦ React Component f(x) = > View
8. Component ୯ҐͰUIΛߏங͢ΔͨΊͷϥΠϒϥϦ React Component
9. Component ୯ҐͰUIΛߏங͢ΔͨΊͷϥΠϒϥϦ React Component State Props
10. State
11. ♻ 1. 2. State 3. State
12. Props Componentͷಛ௃Λද͢σʔλ ʢHTMLͷଐੑ૬౰ʣ ֎͔Β༩͑ΒΕΔσʔλͰ͋Γ Component಺Ͱ͸ෆม
13. Component ࣗମ͸ಠཱͯ͠ϖʔδ্ͰଘࡏͰ͖Δ෦඼ʹͳΔ
14. খ͘͞ɺҰͭͷ͜ͱʹϑΥʔΧε͢ΔUI্ͷϐʔεΛ૊Έ͋ͤͯUIΛߏங͢Δ Component Component Component Component Component Component Component Component 👉
18. Data Ϛ΢εͷҐஔ͕มΘͬͨΒ ࠲ඪͷදࣔΛߋ৽͢Δ σʔληοτ͔Β ϙΠϯτΛඳը͢Δ ϙΠϯτ͕ΫϦοΫ͞ΕͨΒ ֘౰ͷ৘ใΛදࣔ͢Δ
19. Map Move on map Coordinates Info Application Click marker Update Component With new Coordinates Update Component With new data Data for markers Application Map Info Coordinates
20. Studio | Styles
21. Studio | Dataset
22. Contents/Data set Designer Engineer Engineer Mapbox GL JS React JavaScript Mapbox Studio Dataset Editor Style Editor
23. Documents / Examples
24. ଞʹ΋mapbox.com/resourcesͰ͸༷ʑͳۀछͰͷ׆༻ྫɾϢʔεέʔε͕ ΞʔΩςΫνϟͱ࣮ࡍͷαϯϓϧ෇͖Ͱ঺հ͞Ε͍ͯ·͢ɻ
26. vis.gl - Data Visualization Framework https://vis.gl/
27. vis.gl - Data Visualization Framework react-map-gl deck.gl luma.gl react-vis
28. vis.gl - Data Visualization Framework react-map-gl deck.gl luma.gl react-vis
29. ΑΓReact likeʹMapboxΛ ૢ࡞͢Δ͜ͱ͕Ͱ͖Δ
30. MapGL Component΁දࣔܥͷσʔλΛ౉͚ͩ͢Ͱ MapboxͷॳظԽɾදࣔΛߦΘͤΔ
31. σʔλιʔε΍ϨΠϠʔ΋Componentͱͯ͠ Map Componentʹ௥Ճ͢Δ
32. Map Control Application Update Component With new data Data Mapbox Styles Source Data Layer Styles Events Layer Layer Source Source Data E ff ects Control Control Controls Information Events Events
33. େن໛ͳσʔλ޲͚ͷ ՄࢹԽϥΠϒϥϦ
34. • σʔληοτΛࢹ֮Խ͢ΔͨΊͷʮLayer Componentʯ͕ఏڙ͞Ε͍ͯΔ • ෳ਺ͷLayer Λ૊Έ߹ΘͤΔ͜ͱͰɺෳࡶͳࢹ֮Խ΋ൺֱత؆୯ʹͰ͖Δ
35. Layer • ArcLayer • BitmapLayer • ColumnLayer • GeoJsonLayer • GridCellLayer • IconLayer • LineLayer • PathLayer • PointCloudLayer • PolygonLayer • ScatterplotLayer • SolidPolygonLayer • TextLayer • ContourLayer • GridLayer • GPUGridLayer • CPUGridLayer • HexagonLayer • ScreenGridLayer • HeatmapLayer etc …
36. Layer جຊతʹ͸ɺσʔληοτͱΞΫηαΛ࢖ͬͯݟͨ໨Λௐ੔͢Δ͚ͩ
37. Arc Layer { from: { coordinates: [number, number] }, to: { coordinates: [number, number] } }
38. ࢖༻σʔλɿࠃ౔਺஋৘ใ ۭߓؒྲྀ௨ྔ
39. Code Sandox https://codesandbox.io/
41. Observable https://observablehq.com/
43. ͋Γ͕ͱ͏͍͟͝·ͨ͠