Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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

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の可能性についてもお話しいたします。

558373be2f9fb98afd918bd24a365690?s=128

Mapbox Japan

March 05, 2021
Tweet

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 👉

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