Create 3D Maps In React with Deck.GL (Showing National Parks Data)
🎓 Join my learning platform for module based courses, learning exercises, and more: https://coderprep.com/
In this video I go over the WebGL framework Deck.GL to create a custom map using National Parks data. This is a great intro project to create some really amazing 3D functionality in React alongside some real data. We also set up the map using Mapbox with a simple API call, which is pretty neat. At the end of the video I go over some cool functionality where we can render dots differently based on attributes in their name, so stay for that if you want!
National Parks JSON Data: https://pastebin.com/iK2vqT39
const INITIAL_VIEW_STATE = {
latitude: 39.8283,
longitude: -98.5795,
zoom: 3,
bearing: 0,
pitch: 30
};
const MAP_STYLE = 'https://basemaps.cartocdn.com/gl/posi...
Buying stuff through my Amazon link supports the channel! https://amzn.to/3hK5gd0
Business inquiry? Email [email protected]
0:00 Intro / Project Showcase
0:41 Get Mapbox access token
1:40 Create React app / install dependencies
2:15 Create data.json (National Parks Service Data)
3:35 Create initial map setup
6:46 Add GeoJSON layer (the 3D part!)
10:50 Final project / Deck.GL discussion
11:59 EXTRA: Show National Parks differently with Deck.GL
13:20 Final project with EXTRA
13:41 Outro