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
290
OCaml -> Melange -> fun
sdaigo
0
300
ChatGPT を読書の供にする - Webナイト宮崎 Vol.17
sdaigo
0
440
Spring with React for Enterprise Application
sdaigo
0
8.1k
Other Decks in Technology
See All in Technology
低レイヤを知りたいPHPerのためのCコンパイラ作成入門 完全版 / Building a C Compiler for PHPers Who Want to Dive into Low-Level Programming - Expanded
tomzoh
4
3.3k
WordPressから ヘッドレスCMSへ! Storyblokへの移行プロセス
nyata
0
280
LangSmith×Webhook連携で実現するプロンプトドリブンCI/CD
sergicalsix
1
140
フィンテック養成勉強会#54
finengine
0
200
BrainPadプログラミングコンテスト記念LT会2025_社内イベント&問題解説
brainpadpr
1
170
監視のこれまでとこれから/sakura monitoring seminar 2025
fujiwara3
11
4k
使いたいMCPサーバーはWeb APIをラップして自分で作る #QiitaBash
bengo4com
0
1k
無意味な開発生産性の議論から抜け出すための予兆検知とお金とAI
i35_267
0
210
論文紹介:LLMDet (CVPR2025 Highlight)
tattaka
0
170
AWS テクニカルサポートとエンドカスタマーの中間地点から見えるより良いサポートの活用方法
kazzpapa3
2
570
Oracle Cloud Infrastructure:2025年6月度サービス・アップデート
oracle4engineer
PRO
2
310
生成AI開発案件におけるClineの業務活用事例とTips
shinya337
0
150
Featured
See All Featured
Docker and Python
trallard
44
3.4k
Embracing the Ebb and Flow
colly
86
4.7k
Fireside Chat
paigeccino
37
3.5k
Fashionably flexible responsive web design (full day workshop)
malarkey
407
66k
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
rmw
34
3.1k
How to Ace a Technical Interview
jacobian
277
23k
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
mongodb
46
9.6k
Designing for humans not robots
tammielis
253
25k
The Pragmatic Product Professional
lauravandoore
35
6.7k
How To Stay Up To Date on Web Technology
chriscoyier
790
250k
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
130
19k
GraphQLの誤解/rethinking-graphql
sonatard
71
11k
Transcript
Web Mapbox | Daigo Shitara Mapbox #1 - Web
Daigo Shitara Front-end Engineer • Front-end lead •
[email protected]
[email protected]
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
͋Γ͕ͱ͏͍͟͝·ͨ͠