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
300
OCaml -> Melange -> fun
sdaigo
0
340
ChatGPT を読書の供にする - Webナイト宮崎 Vol.17
sdaigo
0
450
Spring with React for Enterprise Application
sdaigo
0
8.2k
Other Decks in Technology
See All in Technology
エニグモ_会社紹介資料(エンジニア職種向け).pdf
enigmo_hr
0
2.2k
Oracle Cloud Infrastructure:2025年8月度サービス・アップデート
oracle4engineer
PRO
0
200
カミナシ社の『ID管理基盤』製品内製 - その意思決定背景と2年間の進化 #AWSUnicornDay / Kaminashi ID - The Big Whys
kaminashi
3
790
allow_retry と Arel.sql / allow_retry and Arel.sql
euglena1215
1
150
AWSで推進するデータマネジメント
kawanago
0
1k
開発者を支える Internal Developer Portal のイマとコレカラ / To-day and To-morrow of Internal Developer Portals: Supporting Developers
aoto
PRO
1
230
個人CLAUDE.md紹介と設定から学んだこと/introduce-my-claude-md
shibayu36
0
190
iPhone Eye Tracking機能から学ぶやさしいアクセシビリティ
fujiyamaorange
0
620
ZOZOマッチのアーキテクチャと技術構成
zozotech
PRO
3
1.3k
『FailNet~やらかし共有SNS~』エレベーターピッチ
yokomachi
1
200
衝突して強くなる! BLUE GIANTと アジャイルチームの共通点とは ― いきいきと活気に満ちたグルーヴあるチームを作るコツ ― / BLUE GIANT and Agile Teams
naitosatoshi
0
310
【5分でわかる】セーフィー エンジニア向け会社紹介
safie_recruit
0
30k
Featured
See All Featured
Scaling GitHub
holman
463
140k
Performance Is Good for Brains [We Love Speed 2024]
tammyeverts
12
1.1k
Improving Core Web Vitals using Speculation Rules API
sergeychernyshev
18
1.1k
Documentation Writing (for coders)
carmenintech
74
5k
Fantastic passwords and where to find them - at NoRuKo
philnash
52
3.4k
Building Applications with DynamoDB
mza
96
6.6k
Optimizing for Happiness
mojombo
379
70k
A Tale of Four Properties
chriscoyier
160
23k
Automating Front-end Workflow
addyosmani
1370
200k
The Art of Delivering Value - GDevCon NA Keynote
reverentgeek
15
1.6k
Large-scale JavaScript Application Architecture
addyosmani
512
110k
How GitHub (no longer) Works
holman
315
140k
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
͋Γ͕ͱ͏͍͟͝·ͨ͠