Create 3D Maps In React with Deck.GL (Showing National Parks Data)

what's going on guys it's cooper codes in this video we're going to create this 3d map using react and deck.gl the map is using public national park service data to show off a bunch of national monuments and national parks if we go to a certain dot on the map we're going to be able to click on it and it's going to alert us in javascript showing us the actual name of what that thing is for example the mount rainier national park not only does deck.gl allow us to navigate through the map in a 3d environment it's also incredibly efficient when it comes to using large data sets so even larger than this one it probably has like 100 or 200 data points all right so before getting into the code we're going to need to make an account on mapbox.com mapbox is a trusted service that allows developers to get access to geographic information kind of like google maps i'm using mapbox for this video because it works way better with deck.gl and it requires way less setup than working with google maps so you're going to want to create your account on mapbox and then you want to go to your account dashboard your dashboard should be under account.mapbox.com once you're logged in i will note mapbox is going to ask for a credit card but similar to google maps they're mainly asking because they want to verify that you are a person you can load the map over 50 000 times before you get charged so unless you're actually deploying something to production i wouldn't worry about it so once you're at your dashboard here you want to go to tokens you can use this default public token or you can also just create another token i'm just going to name it video access token all we're going to need are the public scopes here and we can just press create token at the bottom so now that we have this access token we can get started creating a react application i'm going to get started by opening up an empty folder in visual studio code and creating our react app by using the command npx create dash react app and then the name of the application which i'm going to name client all right so once that application is set up we can cd into it by saying ce client we're then going to need to npm install two important libraries so npm install the first one is going to be deck.gl for all of the 3d stuff and we need react dash map gl to load in the mapbox map all right so we'll see an app.js we're going to have our empty application which is perfect so before we get started i'm going to put this paste bin in the description this is going to be the data that our map is rendering from the national park service it's going to be a list of json elements that are called geojson geojson is just a format for geography information to be stored and it's also a format that easily integrates with deck.gl which i'll show you guys in a second but for now let's copy this go to our react application and make a data.json file we can then paste in the data here and then make sure to save with control s now we're going to have a bunch of different data for application to look at just to give an example of one piece of data so this would show up as a circle on our map the circle is going to have a name of frederick law olmsted national historic park site and it's going to be located at these coordinates here for geojson these coordinates are going to be in latitude and longitude we can now go over to our app.js and if we want to import a json file as data we can say import national underscore parks underscore data from dot slash data dot json and this is going to give us access to this whole object that wraps from line one all the way down to line almost 6000 let's get started by defining some constant variables above in our application for example we need a constant to hold that mapbox underscore access token that we made earlier so go over to mapbox and then copy this string here and then bring it into your application so we're good to go there we also need a map style the cool thing about mapbox is that there's a bunch of different styles that you can use and so i'm going to say const map underscore style is equal to the link to the style which i'm going to put in the description so you guys don't have to type this out word for word so when you're using webgl one of the first things you run into is that you need an initial state for your camera to view it doesn't just randomly choose a spot for your camera to sit down at if that makes sense so i'm going to make this object a constant it's me const initial underscore view underscore state and this is going to eventually get passed into our deck gl which i'm going to get into in a second we want to tell the latitude and the longitude of where we want our camera to start at so i'm going to say 39.8283 because i'm actually going to point it right to the middle of america and then zoom out is what we're doing longitude is going to be negative 98.579 going to set the zoom to 3 the bearing to 0 and the pitch to 30. you don't have to worry about how i got these values and honestly if you want to change them it's just like moving a camera around if you're the user you can just kind of change the values and see how the camera changes you'll be able to move the pitch and bearing kind of however you want okay so that's kind of all the setup you need to do for this application now we can actually get to creating the map we are going to import the map object from react dash map gl then we're going to import deck gl which is going to handle the 3d stuff and also the geo json layer from deck gl the geo json layer is what helps us display the data in our data.json alright so in our application we can get rid of all the react boilerplate and we can initialize our decgl component decgl is going to have two important properties for now the initial view state is going to be equal to that initial view stage const we made earlier so this one line 10 we also want controller to be equal to true then we want to bring in our map component we want the map style to be equal to the map underscore style then you want the map box access token to be equal to that map box access token const we created above what's happening is this map is kind of the actual flat map that deck gl uses to make a 3d component that's how you guys should imagine this this map at line 24 is a simple flat map you can just imagine like regular google maps deck gl is going to take this map and add the 3d stuff on top of it and i'll explain rendering more when we get into that but for now we can start our react application and just see the flat map but for now we can start our react application and see a map with no data points on it so far so npm start amazing so you guys should have a map and it should have no 3d components on top but you should be able to hold shift and then click and you'll be able to move around on the map in a 3d environment now we can get started by showing all the green circles that represent data from our json file so decgl uses the concept of layers to understand how we render 3d things on top of the map it expects a layers array which we can define by saying const layers is equal to an empty array and there are a bunch of different types of layers you can add to your react application and they render one after another in your array for this video it's very simple we're just going to have one layer which is going to render all the green circles based off the data in our json file because we're using geo json data we can make a new geo json layer to initialize what we want those green circles to look like and where we want the data to be sourced from we can give this layer an id just in case we have a lot of different layers and we want to see you know which one's working where i'm just going to say national parks deck.gl already has processing for geo json data built in so we can say data is equal to the national underscore parks underscore data because this is a geo json layer and our data is already in a geo json format it's going to be this simple we don't have to do anything when it comes to telling the map where the coordinates are or anything like that so now we can start by making some styles to our map we want the little circles that show up to be filled that means they're all going to be of a certain color for example and there's some other important ones we want the point radius min pixels to be equal to 5. this is like how small can your data get pretty much you'll see if you put this like a hundred and i'll show you guys later it's gonna be like if you zoom out you're gonna have a bunch of huge circles pretty much i'm also going to set the point radius scale equal to 2000 this is recommended in some documentation i read to set the radius of these circles we can say get point radius is equal to a function is going to return five things like get point radius are actual functions where let's say you have like population density or just like i don't know you're like uber eats or something and you want to show the four star circle smaller than the five star circle you could do that with your data which is an interesting thing that deck gl allows you to do but for our video we're just saying make the function and make it return five for the radius of the circle we also want to get the fill color this is just going to be an rgb color format i'm say 86 144 58 and then 250 at the end here this is going to give us that nice kind of like government degree and i showed earlier i'm going to make the little circles pickable and i'm going to make auto highlight equals to true that means they're going to change into a little bit of a different shade and we can also define an onclick function and so to fully define our onclick function for the geojson layer we need to go up here and define it where we say const on click equal to info which is something that we're getting passed from the geojson layer and this info is going to have an object of data but we can still kind of safeguard it by saying if info dot object and this object of data is going to be the object that let me show you guys is going to be in our json like this so it's going to have geometry it's going to have properties and the property we want to get is once we are at the info.object you could imagine we are right here and so if we wanted to get the name we would say info.object.properties.name and then we could get fort washington park so if i'm clicking on a certain circle that's how it knows it's fort washington park it's going to this certain object and it's going into the properties and it's getting its name and so we can alert the info.object.properties.name oh and make sure it's a capital name like this so that's going to alert the name of the object that kind of created the circle that we're clicking on from our map's perspective you'll see if we go and save our page and run over to our localhost we're still going to have no data on our map it's important to understand that deck gl needs to be passed in the layers as a property to start rendering the 3d elements so we can set layers equal to that layers array we created above alright so now that we've added our layers to the deck gl we should be able to go to our local host and see all the cool 3d elements and so this is the full project if you're interested in creating a more advanced deck.gl project look up free data geojson you're going to find a bunch of stuff that you're going to be able to kind of show through these data sets the data can get more interesting if you do certain things for example one cool thing you can do is let's say i wanted to get the water quality of all these cities in america and that data was publicly available right now if i click on a point in this application it's just going to show us the name of the thing but you can do things like for example make the circle show a different color if certain water is really bad and so let's say that the json object gives you a property which is like water you know i'll even give an example but we're not going to save this of course water quality and it's like 1 through 10. so this place has a 6. we can make it like more and more red depending on the value of water quality and so i would recommend for you to go and like look at all these data sets and kind of make cool functionality based off of that whatever's in the properties for these geojson you're able to create interesting functionality based off it so this wasn't even shown in the initial project i showed you guys but i just thought of this let's create some cool functionality i want the green circle to show a different color if that piece of data is a national park so in the callback function here we get access to the data of the certain object that's creating the green circle if that makes sense so we get access to this object right here so if we want the name of the park we can say properties dot name so i'm gonna say data.properties.name and make sure that's a capital m by the way and we can use the dot includes from javascript to see if the name includes the string national park this isn't exactly perfect because i don't know what if it's like something else like national park next to it i don't know it's going to show at least the majority of the national parks for our data and so we can do a ternary statement here and so turner statement is going to have a question mark and then a colon afterwards the colon is the else statement so if this isn't true it's not a national park it's going to show that regular green color but i'm just going to make a very simple this black color so that everything kind of stands out from the national park side so i'm going to say zero comma zero comma zero i'm just going to keep that same 250 at the end there and so if a national park shows up it's going to show that circle as black instead so let's go over to the local host yes this is pretty cool we have access to all the national parks or pretty much access to all the names that include national park let's see how well we did okay this is a national park and so is this one so we're doing pretty well now we can see all the different data points that are in national park amazing i just put this example in at the end here for anyone who's looking for that more like intermediate level knowledge once you understand that you can use the properties of your data to show different outputs for example to these circles you can really do so many interesting things with a bunch of different data sets when it comes to using deck.gl alright guys so that's pretty much the video if you're interested in my content especially when it comes to react or you know graphql or apollo server anything like that feel free to subscribe feel free to like i know every single youtuber says to do it but it actually is helpful when it comes to getting my videos out to people alright guys thanks so much for watching

Channel: Cooper Codes

Views: 5,565

Keywords:

Id: bPlKPvUu_XA

Length: 14min 11sec (851 seconds)

Published: Sun Sep 18 2022