Getting Started with Mapbox GL JS Part I

thanks for joining us today um this is our getting started webinar Series so kicking this off today um first I'll have a quick slide about mapbox I'm sure you're familiar if you've already signed up for this webinar but in addition to Maps we also do search navigation and data of course so there's plenty more to explore in the mapbox ecosystem so we welcome you to check out our website and see all the amazing things that we're up to but today we're going to start with just the very very beginning very basics of how to get started with web mapping um so my name is Chris I'm a developer evangelist at mapbox uh in the past I've been worn the title of Civic hacker um been a mapbox developer uh working with mapbox tools for probably like eight years now I also teach web mapping and um in the past I've also been an Outreach engineer and a Solutions architect and lots of other things so I'm happy to happy to be talking to you today about mapbox and if you want to get in touch with me the easiest way to do it is on Twitter at this tweet handled so moving on uh today what we're going to do is cover getting started with mapbox gl.js so very simply we're going to load a basic web map using a mapbox example so I really want to accentuate how important the examples are and how useful they can be especially for beginners we're going to modify the code from the example and set the initial view of the map and modify some of the you know the way that it sets up and initializes next we're going to try some different mapbox core Styles so lots of different lots of different choices you have for how you want to make the um how you want to make the map uh you know customized to the kind of data or story that you're trying to tell then we're going to get into adding a marker and then we're going to customize that marker so it'll be some live coding but this is just the beginning so we're not bringing in you know not bringing in tons of data we're not doing lots of interactivity we'll get to that in later episodes today we're going to focus on fundamentals and just get something working on the page so we can build from there we're also going to have q a and you can add questions to the chat I have a co-worker Lisa who's working in the chat right now who can kind of keep an eye on things and she'll curate your questions and make sure that they end up in a document that I can go through at the end um when we do some q a at the end so feel free to feel free to drop your questions in the uh in the chat um okay so let's get let's get moving I'll come back to this presentation um but first things first uh we're gonna start with um we'll take a look at the docs first so let me make my screen my browser a little bit bigger here if you go to docs.mapbox.com this is actually a really great way to get an overview of all of the different services that mapbox provides but you'll notice first in you know first on the list is Maps is probably foundational to everything that we do and then first on that list is mapbox gl.js so mattboxgl is our JavaScript library um and that's what we're going to be working in today but if you click in mapbox gljs lots of documentation here you can go through the the full API reference but the best place to get started is if you click on the examples so each one of these examples if you click on them is actually a live functional web map and you can see lots of different functionality being being tried out and tested in each one of these um so I've always you know let people know this is probably the simplest place to get started because each one contains a fully functional web page with a simple map in it that's exercising one thing or showing off one thing so this first one called display a globe on a web page is a great place to start and you can see this is a this is an Interactive Globe and we can move around we can zoom in um so I'll zoom in on New York City where I'm sitting right now um so if I I'm using uh the scroll wheel to just zoom all the way in and I can you know go down to sidewalk level and look at buildings if I wanted to so lots of great information on this map um but if you scroll down below the the working map you actually have a whole bunch of code and you if you've done a little bit of web development before you'll notice uh you know this is a full full HTML document that we can just copy and paste so how do we actually get that to be useful to us right now we want to set up a local code project so I'm going to actually create a new folder on my desktop I'm just going to call it uh first map and let's go over to a code editor like vs code and I'll drag this directory into the into the code editor and the first thing I want to do here is make a new file called index.html and this is an empty file but I can write hello world in it and before I I go over back to the the mapbox example I want to draw your attention to an extension for vs code that I use called live server if you just search for it here in the extensions bar this is actually going to serve a live server for us and keep track of changes so it'll it'll hot reload so this is already added in my environment here but you should add it if you want to get started quickly what it does is actually gives you this little go live button down here in the bottom um so right now I'm going to save this index.html that doesn't actually have any HTML in it let's make whoops let's make that a little bit bigger for you and if we hit go live we should see a web page open up in my browser that just says hello world so now we're actually ready to use a mapbox example so like I said back here on this display globe on a web page example uh if I copy and paste this code I should get the entire uh you know working example that you see here and let's uh we'll copy it and then we'll walk through the code a little bit and see what it's doing so let's copy and we'll go back to vs code paste and as soon as I hit save let's close the extensions we should see so I just reloaded the browser and now this is actually running locally on my machine uh from that vs code from vs code and from this first map directory so uh wonderful I've got a globe on the page and I can kind of do all the same things but you'll notice if I reload it's centered back over here over Europe um and the very first thing we want to do is take a look at some of this uh some of this code and see if we can set up the initial View so let's go and uh I'm gonna hit format document to clean this up a little bit so let's take a look at some of this JavaScript code um so first thing you'll notice is uh in the script tag here you know there's only like you know 20 lines or so um but we have mapboxgl.access token and access tokens important because that's how mapbox keeps track of usage based on your accounts so um you know we have a generous free tier of course you can get started without any cost but if your map takes off or you're building it into an app that gets a lot of usage you know there are costs associated with it so this is uh important um this is actually built in because I'm already signed into mapbox and it it actually added it to the um to the example so that's a little like perk that's built into the example if you're signed in you don't need to copy and paste this if you weren't signed into mapbox and you copied and pasted the example uh this would actually have some placeholder in it and you would need to go get your access token which is uh simple to do but this saves some time so sign up for your mapbox account and then you can copy paste the examples so let's get on to the code so very simply this this little chunk of code right here is what instantiates the map creates a new mapbox Geo map on the page so there's a few options that we have to pass in here so we're calling new mapboxgl.map and then we pass in this object of options so the first one is container it's basically saying where do you want to put the map so when we hit when we have map here in quotes it's actually saying go find a div on the page whose ID is map and that's what this is so this is an empty div and if you go further up on the in the example code you'll see that this is styled to be a full screen div and that's a kind of a pitfall that a lot of people may fall into is inserting the map into a div that doesn't have any Dimensions so you want to make sure that that div has dimensions and if you look up here in the CSS you'll see that this is positioned absolutely so top and bottom are zero which makes it full height and then width is 100 so we have a full screen div called map and then we tell mapboxgl to use this container with ID map next things we want to set up are the Style zoom Center and projection so we'll skip style for now we're going to come back to that and then in Center Center and zoom are fairly straightforward so if you haven't done web mapping work before Zoom levels range from low level Zoom which means you're zoomed out seeing the entire world all the way to high zooms which would be maybe around 19 or 20 zoom level which will get you down to like sidewalk level so for example if I wanted to zoom in to a city I might switch this to zoom level 10 and we'll take a look at what that looks like and then for the center point this is just a longitudinal latitude so um you'll hear people say let long a lot but long lat is is the order that they need to be in which is basically the same as XY order um and so this is just a longitude 30 latitude 50 and what I like to do is I like to pull up this bboxfinder.com which is a nice little tool that can help you just quickly get some coordinates so this is another a thing that's in my spatial developer toolkit so for example if I wanted to zoom in on New York I'm going to position these crosshairs in the middle of the screen over New York and then I get a longitude latitude that I can copy down here in the bottom of the page so I'll go back to my code and just replace 3050 with what did I copy did that not work hold on let me go copy that again yeah negative 73.950863 comma 40.734917 and zoom level 10. so let's take a look at the map and see where that gets us so now we're zoomed in over New York um and you can kind of tweak that a little bit so if I wanted to try out zoom level nine you can save and reload you can see we're zoomed out a little bit more I could do zoom level 20 to show you just how far in 20 is and now we're looking at uh some street that I'm not familiar with in the middle of New York City um but let's let's go back to City level so maybe do 11. good um so you know you can Tinker around with these and play around and get the the map looking however you'd like it to look um so lastly uh we have projection um which is set to Globe and the globe projection is what makes it so that it turns into a globe once you get out below zoom level six uh which looks great um and then uh very last we have style so this is important uh and you can see here that this is called satellite streets v11 we have a URL that starts with mapbox colon slash slash um looks you know not a not a looks like a kind of funny URL because it starts with mapbox but um basically this is telling mapbox to go grab a predefined core style so I want to take a quick second to go look at this page which is on the docs if you go to docs.mapbox.com API Maps Styles you'll see a whole bunch of core Styles listed here so these are kind of the curated ready to use you know professionally designed um styles that mapbox designers have worked on so you know each one of these is actually bringing in a ton of data so all the data that you need for you know drawing every street and every coastline is all included and Behind These but but most importantly it's the actual details of how they get rendered on the map so we were looking at one called satellite streets which is built into the code snippet we copied before but we can try out another one of these so light light and dark are very popular especially if you're going to be presenting data and you want your data to pop out these are more subdued so I can copy the URL for light for example example and let's go paste that in here so we're changing the style and saying don't load satellite streets load light let's save that and see what we get so this is the light style you can see it's much more subdued uh the labels you know the labels jump out but the the streets and the land masses are very you know they're they're a lighter shade so you can imagine if we put some colored data on top of this it'll really stand out uh likewise we also have the dark style let's copy that I'll show you what that looks like so you have control over this and um what we're actually going to get to in later episodes is that you can actually make your own Styles that's a whole other thing that mattbox developers do uh is go into our mapbox studio tool and create their own Styles so you have complete control over you know you could have this and you could have it look exactly like this dark map but you may want to make the you know certain labels be different colors or you might want to change the color of the water so that's something powerful that you can do later but for now we can start with these core styles so I like the dark style um so I'm going to leave it like that but that's all there is to it to modify this example um wonderful so the next thing we want to do is we set our Center and zoom we tried out some different core Styles so we found you know we picked one that we like um and next we can move on to adding markers so um most of the time people who are using mapbox GL uh are gonna bring in you know more robust data so you might have a large data set that you need to you need to serve and we have mapbox tiling service that can which can help you you know load and ETL that data and serve it up uh immediately for use in the map you can also load geojson data which we're going to do in probably the next episode of this webinar um but the simplest thing to do is add markers and you know instead of loading a data file you can actually like hard code a marker in your in your JavaScript because um you know all it takes all you need to display a marker is really a latitude and longitude and then maybe some other configuration options so it's a great way to get started and sometimes you know that it depends on what you're building but that may be all you need is to put markers on the map so I'm going to go back to the docs and let's search for let's go back to let's go to mapbox GL ow let's see if we can find the marker documentation actually sorry let's let's skip that we're going to go back to examples because there's a good marker example here um okay so there's an example here called add a default marker to a web map and let's click on that and just like the other example we started with this is a functional web map that I can zoom and and uh zoom and scroll and um we have a full code underneath it for an entire web page um like we had before so we don't need all of this because we already have a functioning example with a map on it but we do have some uh Snippets down here that are actually doing the marker so we can we'll start with this and then we'll go check out the docs later because we want to expand upon it um but pretty straightforward um we we say const marker one so we're making a new variable we say new mapboxgl marker and we call set long lat and pass in a longitude and latitude as an array and then we call add to map so we can actually repeat this as many times as we need for the markers and we actually don't need to assign a variable so I'm just going to copy this chunk and let's go put that into our code so I'm going to format this a little bit and this should be all we need so this is going to so I copy this directly from the example I haven't updated the long lat um but just to see if it works I want to save this and reload my map and we'll see if there's a marker on it at this location um so obviously not no marker in New York but if we Zoom all the way out and find some other part of the world that this example was created on we should see a marker so there's our marker um in Copenhagen and now we want to move that marker somewhere that is within our initial view um so let's go back to my friend bbox finder and I'm going to put this marker let's put it in the Central Park so I'll line up these crosshairs on Central Park I'm going to copy this long let go back to my code and here we're saying uh add a new marker and I'm just going to update those coordinates I'm going to say in my comments here I'll just add a little a note that says uh add a marker in Central Park wonderful okay so let's save that and go see our marker in Central Park all right so this is great um so this is this is the default marker um for those of you who are curious uh you know most of the map is being rendered here in webgl using mapboxgl um but the markers if you just use the default Mark if you use the markers built into mattbox deal they're actually uh separate from the GL or from the the canvas and they're actually just HTML elements on top of the canvas so we move around it's it's kind of repositioning that um doesn't really do anything so that's what we're actually going to look at next is how can we add some basic interactivity um FYI which I think I didn't cover before but uh one of the great things about mapboxgl is that you're not limited to North up and you can also do incremental zooms so I'm actually holding down the control key on my computer right now and I can actually switch uh the the pitch and bearing of the map so sometimes it's helpful to um you know to to have the map start in you know not having North up so for example if I wanted to show you know a chunk of New York City here and line it up with the grid instead of with north um you know it all depends on your use case but you have that kind of control so those are just other options you pass in to to when you initialize the map if I reload it'll go back to normal that's fine I just wanted to show that this is possible um Okay so we've got a marker um let's go take a look at um another example and let's try and add a pop-up to this marker so I'm going to search for pop-up so most of the basic things you want to do in that box Geo there's probably a good example so attach a pop-up to a marker instance so yes we have a marker instance already let's click on this example same thing we did before actually before I go to the code we'll just click on it and see what it does so if I click on this this uh this image marker so this is not a default marker it's actually a HTML element with an image it has this pop-up so if I click on it the pop-up opens I can also click the little X to dismiss the pop-up and this will actually get us pretty far so I'm going to scroll down in the code here and we should see some familiar code so this looks like we what we already just did is add a new mapboxgl.marker um but up here we have we're you know creating a pop-up and saving it as a variable called pop-up uh and then importantly so this this code defines the pop-up and then down here we call this set pop-up method which actually connects the pop-up to the marker so this is this will get us pretty far so let's start with this and then we'll just remember this set pop-up that we need to call um and we'll go back to our code so we should set up or we should you know uh set up this pop-up before uh we add it to to the marker um so I copied and pasted that that's pretty much all I need to do and then down here remember there was a set pop-up method and we'll take that variable pop-up and pass it into set pop-up and now our marker in Central Park should have a nice pop-up over it let's go take a look so here's our marker and we can click on it and we get a useful message about the Washington Monument um so that's not very helpful but we can go through and just change this string so we're calling set text on the pop-up and then we can change that text to whatever we want so we can say uh Central Park and let's go back check out the code or check out the live site and now we've got Central Park so you can add whatever string you wanted to that and yeah that that's enough to get us going um so a couple other things we might want to do here to try out some other options so we called the we set up mapboxgl.marker but we didn't actually pass in any options so there's just an empty uh empty call to this method here but we can actually pass in options here so let's go take a look at the docs and see what we can find about markers so let's go to mapbox gl.js and let's go to API reference and there's a link here right at the top index called markers and controls and let's take a quick look at so this is the attribution control we don't we don't need that full screen control all these things are things you can add to your map there's also a geolocation control which will locate your user using their browser or their device so we don't want those we want marker so I'm going to click marker over here all right so this tells us all the things we can do with a marker so we instantiated marker and we're supposed to pass in an options object which is optional so we didn't but if we did if we wanted to these are all the different options we have so simplest you know to use might be color so we can change the color of the marker because it's just an HTML element and we can just quickly add any default any HTML color to it um there's also offset which would like move it away from the point um we also have a scale so I think scale and color might be ones that we can mess with quickly some people find this marker to be kind of big and if you had like 100 of them or 50 of them on the screen um they kind of can overlap each other depending on how spaced apart they are so scale might be a good idea so uh color is just a hex color so I can pass that in quickly I'll remember that and then scale uh it looks like it's a number um and actually doesn't tell us much here about which uh which other size we can use so we're going to try scaling it down so we'll do like if the default is one let's make it like 60 of the size so we'll try 0.6 um so let's do that so under marker we've got color um so we can add HTML named colors or we can add a hex color I'll go get a hex color in a moment here and then let's do scale 0.6 uh let's go find us a color so we'll just say HTML colored picker and let's grab a nice uh let's grab a nice neon green and copy that hex color so that needs to be a string we need a comma for our object and this should be good to go all right let's go look at our marker now so it is smaller now because we skipped down and it's also green so that's an example of just passing in some options there's plenty more you can do let's make it really tiny let's see what's 0.2 looks like oh it's tiny um hard to click on but uh you get the idea so let's do 0.6 um okay so that's that um so we have a functional marker with a pop-up here and what I'd like to show next uh because we've you know we've uh We've added this we've added the we've added a pop-up we've added a marker um I could literally copy and paste uh you know the pop-up and the marker code and just repeat it as many times as I want to um but uh for the heck of it I think you know might be helpful to actually just make a little um make a little Loop and add some data to this so we can actually use the same code so we can add this we can we can recycle this code to actually create multiple markers um the first thing I want to do is make some data so I'm going to say uh const um actually let's move this a little higher in the code um so I'm gonna I'm gonna hard code some data here I'm going to say const uh boroughs of New York City uh and then that'll be an array of objects and then I'm going to craft some data that we can use to generate markers so I'm going to need five of these actually let's just make one first and then we'll copy it so um inside of this uh I'm crafting my own data here so we'll just call this uh each Borough should have a name which would be for example Brooklyn and it will have a color which you know we'll just assign some random colors here we just want to make them show up differently the the point is I'm trying to show how to make sort of data driven markers here um that's enough to actually get started with oh they also need of course a long lat and actually these don't need quotes let's get rid of those so we got name color and long lat um so let's go actually get along that for Brooklyn so if I want to put this you know Central to Brooklyn you know there ish um let's copy that long lap okay so this is one object for my Burrows so let's copy this four more times and we'll change these out so we'll say Manhattan looks like Queens and we'll say uh Statin Island and then we will say the Bronx it looks like I'm missing some commas here okay so we're crafting data by hand and of course these need to be these are arrays so they actually need to be in square brackets let's do that okay so I'll come back in and do the colors in a moment but let's get moving on the the code so um what I want to do here is a four each so we'll do a burrows.4h okay and then I'll unpack the two variables from each one of the Burrows so we'll say name and long lat and what did I forget to do I forgot to actually update the long lats for these um so let's let's do that really quickly okay so we we did Brooklyn let's go back and get Manhattan we'll find well Central Park is already pretty good along that for that so there's Manhattan and let's go get Queens up here let's copy that okay so crafting so crafting my spatial data uh let's get Staten Island down here and let's get the Bronx up here okay so we have all of our long lats so each of these has a name each of these has a a coordinate along that coordinate associated with it so as we Loop through each one we just want to do our same code that we did down here so pop up and marker so I'm actually going to comment I'm going to copy these comment them out so we won't be we won't be doing the Central Park marker anymore and then in here let's clean this up a little bit okay um so same code but instead of the word Central Park in the pop-up when we set text we're just going to set text to name so it's going to pull the name out of our data out of our array of objects and then down here let's skip color for now we'll come back to that and then when we set the long lat instead of hard coding it here we're actually going to use the long lat variable from our data so this works we should see five markers on the map one for each burrow and the positions that we just showed and there they are so that's wonderful and then uh last but not least let's do some more data driven styling on these and say you know we want to pull out a color variable out of the data and um so I left these as empty strings but let's just go get a bunch of random colors so I'll start with green let's get that so Brooklyn will be Green Let's do purple and set that for Manhattan let's do this Orange and set that for queens and then let's get a dark blue for Staten Island and last but not least let's do a yellow for the Bronx and I have the data defined but I'm not actually using it anywhere so when we when we call mapbox Geo marker we'll pass in a variable instead of a hard-coded color and that will be so let's unpack color from the burrow object and then paste it in here so color is equal to color actually we can just abbreviate that this way because they're the same name and let's see what we get all right so uh did I use green twice I guess I did maybe not Manhattan yeah they're the same color okay it doesn't matter uh so I won't I won't spend any more time correcting it um but yeah this looks great so we've got a functional map here um so you can imagine you know if we had even more data we could just Loop over that as many times as we need to uh probably not you know thousands of times but a few hundred markers will probably be fine if I click on each one of these I get a nice little pop-up uh if I click on another one it closes the open pop-up and opens the one that I was you know most interested in um so if you can you can imagine here that you know this is a very rudimentary example but uh with just that little bit of JavaScript code you know you can actually build a useful map um if you have the right data and you just want to draw attention to certain locations um so again this is just the very beginning we're just scratching the surface here um you know what we want to add we would want to add like a legend uh or a title or that sort of thing um but all depends on what you're after so this is just kind of the the basics of using the tools um so I think yeah that's I think that's what we have uh on the agenda for today um so let's go let me show a quick slide for what we're going to cover the next session and then we can I can move over to some q a um oh yeah so here are the here are the Styles I showed you so you should definitely check out uh so remember light and dark are useful for um you know for overlaying data so like you see I have these colored colorful markers that stand out really well um you can imagine they wouldn't stand out as well if we were using the streets so streets is actually you know great for navigation it's probably similar more similar to the the maps you may have up when you're you know navigating on foot or in a vehicle so they call out a lot more attention to you know Street features and and highways and things like that we also have Outdoors which will have contour lines on it and you know useful for if you're building like a hiking app or or whatever something that people need to be outdoors a lot more and care more about uh terrain and that sort of thing and then we also have satellite imagery so you can have just the satellite imagery or you can have a hybrid where there's a satellite imagery with like a street overlay so it's got good labels um everything on top of it so lots of different options there when it comes to the styles um so next week you know so we set up this basic map with markers uh next week we're going to add some geojson data so geojson if you're not familiar with it is uh you know is a a web friendly data format um it's just an it's it's an opinionated uh arrangement of Json uh or a standard um so you know once you get your data into geojson it can play well with mapbox Geo and we can bring that in as a layer so we're going to do that we're going to understand sources and layers so these are just Core Concepts you need to be aware of if you're going to be interacting with a mapbox GL map we're going to add some data dependent styling similar to what we did with the markers but uh using you know the The Styling language or The Styling specification for mapboxgl and then we're going to get some features on Hover which is the beginning of interactivity so um that's what we'll cover next week and right now I will move on to some questions so give me just a moment let me go take a look at what's going on in the questions section okay um let me uh let me stop let me stop uh presenting this presentation and we'll go back to my very simple map and ask him okay so here's a couple questions one uh so someone asked is there an option to replace the hard-coded Long Lap values to always Center to where the person viewing the map is located uh for sure so I mean if you go back to the code um it depends on what you mean by that if you mean uh you want to Center on their location once like when the map first loads uh all you would have to do is pass in a different set of coordinates here for the the center point so this is the center point when the map first uh loads and as long as you can get access to that uh coordinate before you call this code you could center it on that person's location so that you can actually get you know there's there's there's ways to pull that out of the web browser um so yeah I think by whatever means necessary uh if you get that location you can pass it in here you can also instantiate the map you know looking at Planet Earth and then like zoom in on the person's location once you get that so if you if you if you have to load the map first and then get their location afterwards that's fine too um you can actually do something called map dot set Center and then you know you can call this at any time later on and uh it'll actually animate the map um to that location so you would just pass in the long lat here as an array um okay so that was first question second question I see in my document here in the pop-up example when instantiating the marker done element is passed as the entire options object does mapbox just detect this as a Dom element and set it equal to options.element uh yes I believe so so um what they're saying here is you can actually instead of passing in a full options object you can pass in L and as long as I've defined L beforehand um you know I was you can actually create a new element and this is how you basically make a marker out of any HTML element um so if you check out the examples you'll see you'll see that happening um and then you can pass it in like that but without the rest of the options um but you can also pass it in with uh L equals my element or whatever element you created outside of this code so there's a couple different options there um but yeah I would encourage you to go check out the examples so yeah this is actually an example it's got a good so const L equals document.createelement div l dot ID equals marker so you can add an ID and style that style it however you want to and then you just pass that in so yeah if you pass it in like this then you're basically saying I don't want to add any other options um so it's totally up to you [Music] um okay let's take a look more questions with satellite imagery what is the source of it and how often does it get updated um so I mean we have an entire team that works on uh data processing and a subset of that team that works exclusively on rasters um so uh I can't answer what is the source of it uh directly because there's like many many different sources and they're constantly being moved together so uh not something I can I can give a quick answer on now just that there are lots of different sources uh concatenated together to make a high quality satellite imagery data set how often does it get updated I believe that is uh extremely frequently like multiple times per day but I'll follow up with that during the next session and get you a bit a better answer on um on just how often that actually takes place quick question I usually need the geometry of cities countries Etc what's the best GIS database for that uh or is there a platform Service app to get geojson so mapbox actually has a boundaries data set which we curate and make available to our customers um it's uh it is something you have to to you know it's a it's a paid product actually but that's an option too if you're interested in it um I mean I think um I think Natural Earth is probably a good candidate for getting those geometries you might also check out openstreetmap uh so if you're just looking for you know good data sets with borders and things like that um you know those are two options osm and uh and natural Earth um I think yeah so I think that's all the questions we have so we're at about uh 42 minutes here um so if we don't have any additional questions coming from the the Stream um I think we can you know sign off for today and we will uh hopefully see you at the next one so I really appreciate you spending some time with me today uh and hope that uh you know you have enough now just after seeing me use a couple of these examples to go check out the rest of the examples uh find some things that that you you know you're excited about and give this a try so whatever you do also we would love to hear about it so uh best way to do that right now is Twitter um so maybe tag mattbox or even tag me and just share code snippet share working working code we didn't publish this to you know to the internet or anything so it's not live uh but maybe we can cover that in future sessions too is how to quickly get this code onto like GitHub Pages or an lfi or something like that um so I think that'll be it and uh we'll end this with a nice uh splash screen and uh thank you for tuning in today take care

Channel: Mapbox

Views: 18,940

Keywords:

Id: Ldw3mFGyjDE

Length: 40min 43sec (2443 seconds)

Published: Fri Nov 18 2022