Mapbox for Web Application

Transcript

1. Web Mapbox | Daigo Shitara Mapbox #1 - Web

2. Daigo Shitara Front-end Engineer • Front-end lead • [email protected]

3. [email protected] 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 👉

15. None
16. None
17. None

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Ͱ͸༷ʑͳۀछͰͷ׆༻ྫɾϢʔεέʔε͕ ΞʔΩςΫνϟͱ࣮ࡍͷαϯϓϧ෇͖Ͱ঺հ͞Ε͍ͯ·͢ɻ

25. None

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/

40. None

41. Observable https://observablehq.com/

42. None

43. ͋Γ͕ͱ͏͍͟͝·ͨ͠