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
Oracle Cloud Infrastructureデータベース・クラウド:各バージョンのサポート期間
oracle4engineer
PRO
48
32k
Java で学ぶ 代数的データ型
ysknsid25
2
1.1k
Flutterアプリを⾃然⾔語で操作する
yukisakai1225
0
200
JavaのMCPサーバーで体験するAIエージェントの世界
tatsuya1bm
1
200
LT:組込み屋さんのオシロが壊れた!
windy_pon
0
580
OpenJDKエコシステムと開発中の機能を紹介 2025夏版
chiroito
1
1.1k
入門 ESlint Typegen #TSKaigi #TSKaigi2025_kataritai
bengo4com
0
2k
これでバッチリ!Azure マルチテナントアーキテクチャ設計のコツ/jat06
thara0402
0
160
Digitization部 紹介資料
sansan33
PRO
1
4k
Javaアプリケーションの配布とパッケージング / Distribution and packaging of Java applications
hogelog
2
500
ソフトウェアテストのAI活用_ver1.10
fumisuke
0
270
【ClickHouseMeetup】ClickHouseを活用したセキュリティログ解析AIエージェント『LogEater』とは
hssh2_bin
0
110
Featured
See All Featured
Performance Is Good for Brains [We Love Speed 2024]
tammyeverts
10
860
Distributed Sagas: A Protocol for Coordinating Microservices
caitiem20
331
22k
What's in a price? How to price your products and services
michaelherold
245
12k
Building Adaptive Systems
keathley
42
2.6k
Product Roadmaps are Hard
iamctodd
PRO
53
11k
Code Reviewing Like a Champion
maltzj
524
40k
YesSQL, Process and Tooling at Scale
rocio
172
14k
Fontdeck: Realign not Redesign
paulrobertlloyd
84
5.5k
BBQ
matthewcrist
89
9.7k
Bash Introduction
62gerente
614
210k
jQuery: Nuts, Bolts and Bling
dougneiner
63
7.8k
Thoughts on Productivity
jonyablonski
69
4.7k
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
͋Γ͕ͱ͏͍͟͝·ͨ͠