WebアプリケーションへのMapbox活用 ｜ ウェビナー発表スライド / getting-started-mapbox02

本スライドは2021年3月4日に開催されたMapbox Japanによるウェビナー「これからはじめるMapbox活用 #1 - Webアプリ編」の発表スライドです。

▼ウェビナー概要▼
Mapboxを選ぶメリットから、WebアプリにおけるMapboxの可能性まで。
Mapboxの活用を検討している方に役立つ情報を、デモを交えてご説明します！

地図開発プラットフォームであるMapboxはこれまでに、Yahoo!JapanやFacebook、Shopifyなど、多くの企業から信頼を受け、様々な業界・用途でご活用いただいております。

なぜGoogle Mapsや他のサービスではなくMapboxなのか。ウェビナーにて、他の地図ソリューションからMapboxへ移行するメリットやそのポイントについてデモを交えながらご説明いたします。加えて、Mapbox Japanのテクニカルパートナーであるtagbangersの協力のもと、ReactやDeck.glを使った基本的な操作からデータビジュアライゼーションまで、WebアプリにおけるMapboxの可能性についてもお話しいたします。

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. ͋Γ͕ͱ͏͍͟͝·ͨ͠