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
350
ChatGPT を読書の供にする - Webナイト宮崎 Vol.17
sdaigo
0
460
Spring with React for Enterprise Application
sdaigo
0
8.2k
Other Decks in Technology
See All in Technology
AWSにおけるTrend Vision Oneの効果について
shimak
0
130
AI ReadyなData PlatformとしてのAutonomous Databaseアップデート
oracle4engineer
PRO
0
190
Azure Well-Architected Framework入門
tomokusaba
1
310
AI駆動開発を推進するためにサービス開発チームで 取り組んでいること
noayaoshiro
0
190
From Prompt to Product @ How to Web 2025, Bucharest, Romania
janwerner
0
120
神回のメカニズムと再現方法/Mechanisms and Playbook for Kamikai scrumat2025
moriyuya
4
560
【Oracle Cloud ウェビナー】クラウド導入に「専用クラウド」という選択肢、Oracle AlloyとOCI Dedicated Region とは
oracle4engineer
PRO
3
110
多野優介
tanoyusuke
1
450
AI時代だからこそ考える、僕らが本当につくりたいスクラムチーム / A Scrum Team we really want to create in this AI era
takaking22
6
3.5k
バイブコーディングと継続的デプロイメント
nwiizo
2
430
Azure SynapseからAzure Databricksへ 移行してわかった新時代のコスト問題!?
databricksjapan
0
140
OCI Network Firewall 概要
oracle4engineer
PRO
1
7.8k
Featured
See All Featured
jQuery: Nuts, Bolts and Bling
dougneiner
64
7.9k
Mobile First: as difficult as doing things right
swwweet
224
10k
Principles of Awesome APIs and How to Build Them.
keavy
127
17k
Optimising Largest Contentful Paint
csswizardry
37
3.4k
4 Signs Your Business is Dying
shpigford
185
22k
Connecting the Dots Between Site Speed, User Experience & Your Business [WebExpo 2025]
tammyeverts
9
580
Speed Design
sergeychernyshev
32
1.1k
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
127
53k
Fireside Chat
paigeccino
40
3.7k
The Myth of the Modular Monolith - Day 2 Keynote - Rails World 2024
eileencodes
26
3.1k
A Modern Web Designer's Workflow
chriscoyier
697
190k
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
͋Γ͕ͱ͏͍͟͝·ͨ͠