Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Mapbox for Web Application
Search
daigo3
March 04, 2021
Technology
0
170
Mapbox for Web Application
daigo3
March 04, 2021
Tweet
Share
More Decks by daigo3
See All by daigo3
Next.js in Practice
sdaigo
0
270
OCaml -> Melange -> fun
sdaigo
0
300
ChatGPT を読書の供にする - Webナイト宮崎 Vol.17
sdaigo
0
440
Spring with React for Enterprise Application
sdaigo
0
8k
Other Decks in Technology
See All in Technology
組織とセキュリティ文化と、自分の一歩
maimyyym
3
1.3k
Contract One Dev Group 紹介資料
sansan33
PRO
0
6.1k
会社紹介資料 / Sansan Company Profile
sansan33
PRO
6
370k
2025advance01
minamizaki
0
140
セキュリティSaaS企業が実践するCursor運用ルールと知見 / How a Security SaaS Company Runs Cursor: Rules & Insights
tetsuzawa
1
1.4k
入門 ESlint Typegen #TSKaigi #TSKaigi2025_kataritai
bengo4com
0
2k
Autocon3 - Building Trustworthy Network Automation, From Principles to Practice
dgarros
2
110
mnt_data_とは?ChatGPTコード実行環境を深堀りしてみた
icck
0
230
Introduction to Sansan, inc / Sansan Global Development Center, Inc.
sansan33
PRO
0
2.6k
impressions-trying-lambda-web-adapter
junkishigaki
2
130
Digitization部 紹介資料
sansan33
PRO
1
3.9k
おれのAI活用の現状とこれから
tsukasagr
0
110
Featured
See All Featured
Building a Modern Day E-commerce SEO Strategy
aleyda
41
7.3k
Thoughts on Productivity
jonyablonski
69
4.7k
Code Reviewing Like a Champion
maltzj
524
40k
The MySQL Ecosystem @ GitHub 2015
samlambert
251
13k
Being A Developer After 40
akosma
91
590k
Fantastic passwords and where to find them - at NoRuKo
philnash
51
3.2k
The Pragmatic Product Professional
lauravandoore
35
6.7k
Intergalactic Javascript Robots from Outer Space
tanoku
271
27k
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
30
2.1k
Become a Pro
speakerdeck
PRO
28
5.4k
[RailsConf 2023] Rails as a piece of cake
palkan
55
5.6k
Product Roadmaps are Hard
iamctodd
PRO
53
11k
Transcript
Web Mapbox | Daigo Shitara Mapbox #1 - Web
Daigo Shitara Front-end Engineer • Front-end lead • shitara@tagbangers.co.jp
hello@tagbangers.co.jp WebΞϓϦέʔγϣϯɾϓϩμΫτͷ ετʔϦʔ։ൃ/ࢧԉ AWS ߏஙɾಋೖࢧԉ Atlassian ͷಋೖࢧԉ
ςΫχΧϧύʔτφʔ
Agenda ReactͱMapboxʹΑΔΠϯλϥΫςΟϒͳਤΞϓϦέʔγϣϯ deck.glΛͬͨσʔλͷՄࢹԽ ❤
Component ୯ҐͰUIΛߏங͢ΔͨΊͷϥΠϒϥϦ React Component
Component ୯ҐͰUIΛߏங͢ΔͨΊͷϥΠϒϥϦ React Component f(x) = > View
Component ୯ҐͰUIΛߏங͢ΔͨΊͷϥΠϒϥϦ React Component
Component ୯ҐͰUIΛߏங͢ΔͨΊͷϥΠϒϥϦ React Component State Props
State
♻ 1. 2. State 3. State
Props ComponentͷಛΛද͢σʔλ ʢHTMLͷଐੑ૬ʣ ֎͔Β༩͑ΒΕΔσʔλͰ͋Γ ComponentͰෆม
Component ࣗମಠཱͯ͠ϖʔδ্ͰଘࡏͰ͖Δ෦ʹͳΔ
খ͘͞ɺҰͭͷ͜ͱʹϑΥʔΧε͢ΔUI্ͷϐʔεΛΈ͋ͤͯUIΛߏங͢Δ Component Component Component Component Component Component Component Component 👉
None
None
None
Data ϚεͷҐஔ͕มΘͬͨΒ ࠲ඪͷදࣔΛߋ৽͢Δ σʔληοτ͔Β ϙΠϯτΛඳը͢Δ ϙΠϯτ͕ΫϦοΫ͞ΕͨΒ ֘ͷใΛදࣔ͢Δ
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
Studio | Styles
Studio | Dataset
Contents/Data set Designer Engineer Engineer Mapbox GL JS React JavaScript
Mapbox Studio Dataset Editor Style Editor
Documents / Examples
ଞʹmapbox.com/resourcesͰ༷ʑͳۀछͰͷ׆༻ྫɾϢʔεέʔε͕ ΞʔΩςΫνϟͱ࣮ࡍͷαϯϓϧ͖Ͱհ͞Ε͍ͯ·͢ɻ
None
vis.gl - Data Visualization Framework https://vis.gl/
vis.gl - Data Visualization Framework react-map-gl deck.gl luma.gl react-vis
vis.gl - Data Visualization Framework react-map-gl deck.gl luma.gl react-vis
ΑΓReact likeʹMapboxΛ ૢ࡞͢Δ͜ͱ͕Ͱ͖Δ
MapGL ComponentදࣔܥͷσʔλΛ͚ͩ͢Ͱ MapboxͷॳظԽɾදࣔΛߦΘͤΔ
σʔλιʔεϨΠϠʔComponentͱͯ͠ Map ComponentʹՃ͢Δ
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
େنͳσʔλ͚ͷ ՄࢹԽϥΠϒϥϦ
• σʔληοτΛࢹ֮Խ͢ΔͨΊͷʮLayer Componentʯ͕ఏڙ͞Ε͍ͯΔ • ෳͷLayer ΛΈ߹ΘͤΔ͜ͱͰɺෳࡶͳࢹ֮Խൺֱత؆୯ʹͰ͖Δ
Layer • ArcLayer • BitmapLayer • ColumnLayer • GeoJsonLayer •
GridCellLayer • IconLayer • LineLayer • PathLayer • PointCloudLayer • PolygonLayer • ScatterplotLayer • SolidPolygonLayer • TextLayer • ContourLayer • GridLayer • GPUGridLayer • CPUGridLayer • HexagonLayer • ScreenGridLayer • HeatmapLayer etc …
Layer جຊతʹɺσʔληοτͱΞΫηαΛͬͯݟͨΛௐ͢Δ͚ͩ
Arc Layer { from: { coordinates: [number, number] }, to:
{ coordinates: [number, number] } }
༻σʔλɿࠃใ ۭߓؒྲྀ௨ྔ
Code Sandox https://codesandbox.io/
None
Observable https://observablehq.com/
None
͋Γ͕ͱ͏͍͟͝·ͨ͠