Introduction to Open Source Web GIS with Leaflet

okay all right awesome welcome everybody to uh the o arc workshop series this is the uh introduction to webgis using leaflet um again this is the first time i teach this particular workshop so i'm very excited about this i'm very excited to have such a diverse group of participants here which speaks to the interest in creating interactive web content um the workshop is kind of prepped to kind of teach you the basics of javascript html and css using mapping as a visual component and i think it's important for academic academia to learn how to do this because in our research life cycle there's a component where we need to publish results and what better way to publish results but in a beautiful map so i'm a cartographer i love maths i love building interactive web maps and working with data research data and then publishing it in the form of a map so that's the hope for today to get you to a point where you are able to use uh kind of mostly open source tools to publish a interactive web app um so what i'm going to do now is i'm going to share my screen so let me get that started okay and let me just move a few things around so that i can see you guys and also have my chat window open okay i'm going to do my best to kind of have an eye on the chat window but i don't mind at all if any of you guys interrupt me and uh you know vocalize it's nice to hear a live voice as well so feel free if i'm going too fast or if something's not clear either put it in the chat or just unmute yourselves and do so so hopefully what you're seeing right now is uh my full screen my full secondary screen and on the left side i have a browser and on the right side i have vs code so this is actually a setup i recommend to do when you're doing web development is to have your code on one side and the browser which will show the results of your code on the other side otherwise you can also you know what is it uh i'll tab to switch between windows because that's a lot of what we're going to be doing okay so um again here is uh the uh hold on a second i will share the root of the workshop in the chat so here's the entire workshop material for today and uh here's the welcome screen the class setup instructions which i sent to you via email is here and again i think two-thirds of you were able to get this going you should have a github account you should have created a leaflet repo within your github account and enabled github pages which should give you a url to your kind of github route the github pages allows you to use github as a web server typically if you're going to host a website if you're within ucla you're going to have to go to your sysadmin and you're going to have to request a donate a domain name and then publish your website and have a web server it's a big complicated situation if you want to avoid that for small-scale projects then github is a great resource because you can create a github repo use github pages and you get a url that's yours and unique to your repo and when you add files to your repo and if those are html javascript files the github pages can read that and publish that content it's really a fantastic resource the next part of it uh i know a lot of you had difficulty might have been installing git um essentially if you open a command uh window and you can run git the command line git command then and if it returns you know something uh then it means that you have git installed otherwise again every machine is different every os is different it's just kind of a quagmire to get this installed but once you have it installed you're good to go hopefully you also ran these two commands uh in your terminal so that you can kind of associate your local git with your git hub account which all it needs is your the username so for me it's yoman and the email that's associated to your uh github account so to me it's yoman gmail.com um and then installing vs code hopefully that that one wasn't an issue for most of you if you don't have git but you have vs code you can follow today's lab it's just that you won't be able to publish your results uh for the world to see okay um right ah monica asked a really good question do you have to run this configuration uh commands every time you run git you don't it's a one-time thing for each machine that you'll be running and get yeah that's a great question okay so um assuming you have all this up and going if you go back to the root here there's a new file i added last night that's called lab so go ahead and click on that so here is our entire lab for today it's uh pretty lengthy because it's got a lot of screen grabs and code snippets all throughout so we're going to go over this lab today hopefully in the next two hours within the next two hours okay so um here is just a note that this is being recorded uh before i begin are there any other questions um i don't see anything in the chat so i'll go ahead and get us started how exciting huh all right um wendy is that a raised hand or is that a clap that's a clap okay that's a clap okay it's a woohoo great okay awesome all right let's get started um so uh i have my workshop material in one tab here i have my instance of the repo that i titled leaflet on another tab so hopefully you guys have your own leaflet repo should look like mine should be empty there's no files associated to it but you have this green button there so that you can copy the code uh or download the code go ahead and click on that button okay and this is your github um repos like link to clone or copy your repo this little icon here just copies that url so go ahead and copy that url now in bs code so switch over to vs code on the top left here on the left you know there are all these kind of tabs that give you different options to do within vs code the very top one is your explorer if you if you opened a brand new vs code instance you should see either open folder or clone repository so what i want you to do is click on the clone repository and then it pops up this box at the top that says hey enter your git url so if you copied your leaflet repo git url you should paste it in here and hit enter it'll ask you where do you want to uh put this uh in and i'm gonna just put it in my download section here and i'm gonna add it there okay so choose a location that you're comfortable with add it to your vs code it should ask you whether you want to open it go ahead and say open and it should kind of reinstantiate vs code i'm going to trust the authors and there we go your vs code should now look uh like this on the very top it should say leaflet and you should have your readme file here and francesca has a question yeah what if you don't have under open folder you don't have um the ability to clone from a repo is that so you don't have this button yeah i don't have that button for some reason i don't have does anybody else not have that but huh okay um do you have in the start here do you have clone repo as one of the options in the start uh i do not welcome no i have new new folder open folder and add workspace folder how about the source control tab do you have uh i have under help i have github repository and then when i click on that it says do you want to uh code to open the external website and it sends me to github microsoft vs code so is it just something that needs to be configured for vs code yes actually go through that process you might have to go to authenticate vs code with git yeah that might actually be a step that most of you for the first time might have to go through okay yeah thanks let me know how that goes um anybody else having a similar issue or are we good to move forward so far so far so good no that's great these are all common issues again it's very hard to normalize this across machines um but hopefully a majority of you uh are able to move forward so hopefully you have the clone repo and yeah i i get in visual studio i get get filled with a fatal error repository and then the the url acceptance is not found okay um that's a very specific error um let's do this um let's move ahead for those of you who were not able to get get installed or some part of git working as long as you have vs code open you can create a new file in your local directory without the git component so you can run this lab without the git it's just that you won't be able to publish and we can work on that uh afterwards but i want us to uh hopefully move forward uh with that okay so if you um are within your git repo you should see leaflet up here and um you should see these icons next to it if you don't have uh your git repo um for uh what that will look like i'm assuming you still have the ability to create a file okay um i'm going to mute uh other participants so okay um so great uh let's see where are we so we cloned the repo oh yeah so before we even start creating a file i want to install something called live server so live server whether you have git or not is a great extension to add to vs code if you're a web developer uh so one of the buttons here on the left is extensions go ahead and click on extensions and in the search box you can type in live server and it should show up in the results in vs code so click on that and you should see an install button there so go ahead and click on the install i've already installed it so i don't have that option here okay so live server essentially allows you to view it actually creates a local web server so it allows you to easily and automatically see your changes that you're typing in and doing html javascript automatically in a web browser it's a really great resource to have okay so i'm going to go back to my explorer and once you install it actually i don't see my go live button here you might actually have to close uh if you see a go live button in your bottom right that means live server was successfully installed if you don't you might actually have to close it once and open vs code again to kind of activate it sometimes the extensions need a little encouragement for them to be activated so hopefully see right here it says activating extensions and hopefully uh i still don't see my go live button there let's see what happens we can we can do without it but uh let's see what happens okay so let's let's get started let's create our first uh file here and the first thing we're going to do is we're going to create our html page so just to let you know i'm here in our lab okay so the button here right next to leaflet is a new file button so go ahead and click on that and type in index.html so that creates a file in your root and it opens up a new tab on the right here that's empty by default okay so what you want to do next is you see the code snippet here this is kind of a very uh hello world starter code html code github is pretty cool when you write code snippet it has a little copy button in the top right here so you can actually click on that and it'll copy this whole code chunk here you can of course just grab and copy and paste but i like that button over here go back to your vs code paste the code okay and uh go ahead and click on save and i'm gonna try since i don't see my go live button here i'm gonna try one more time to see if it'll get activated by closing and opening the s code because that's what was it was doing earlier and [Music] let's see ah there we go now i see my go live button it took like three restarts uh hopefully you see this live button if you do see the live button you can go ahead and click on it and what it'll do is it'll automatically open a new tab in your browser window with the web content in it so here i have my starter html code that is now showing up on my browser okay if you don't see the go live button or if you have trouble installing the extension you can right click on index.html which is on the vs code left side you can right click on it and what i like to do is reveal in file explorer you see that okay and what this will do is it'll open the file from wherever it is in your local machine and since it's an html file it'll be associated with whatever default browser you have for your computer then you can double click on it and then it'll show up on its own tab on the browser it's the same thing except that this is a file browser extension and the other one is actually a live web server on the on your local machine so i see sarah has a question yes thank you um so when i clicked on go live it asked me it to windows defender firewalls blocked some of the features of this app and so i was wondering if you had recommendations not knowing about data security and all that it should i just leave the public networks checked or also check the other two which are domain networks and private networks or does it not matter yeah i'm not sure about that actually but you know i mean it means you have a firewall on your machine um [Music] yeah sorry sarah i don't have a good answer to that okay you're essentially running a local web server so yeah but if if there's concerns about that maybe the second option which is right clicking and revealing it in the file explorer uh option might work or maybe yeah maybe or maybe like public would be the least risky so it's not within my workplace right okay okay all right so um there we go we have our first uh web file index.html and uh just um to go over this a little bit um we're not going to really go into detail with html we're going to work a little bit more in the javascript world but hypertext markup language has been around since the the browser internet world has been around and um you know the syntax doesn't really change it's a markup language it's dictated by these kind of uh you know brackets um opening brackets and closing [Music] tags as they're called so we have things like html opening html over here closing html down here the head section and the body section just very quickly the head section is where you would add the title of your website it is also where you import a bunch of both css and external libraries so you handle a lot of importation you know importing files importing libraries a lot of that is handled in the head the body is the visual part of it you know this is where you're going to enter html javascript that actually produces visual material for your site it's using a lot of things called divs which are divisions divisions within you know your website and it has classes and it has eventually we're going to add ids as well classes and ids are identifiers of different components of your website and you can style different components by using these classes and identifiers so that's just something to kind of keep in mind as we move forward okay um and then we've we have this on the go live and then we have that running okay so um as a web developer you will this will be your best friend and that is uh see the triple uh if you're using chrome the the triple dots here you can click on it go to more tools and developer tools or you can do control shift i or command shift i on the mac and what this does is it it pops up a panel somewhere on your browser window either at the bottom or on the right this is all kind of configurable and uh you have all these different tabs what i'd like you to do is you know like look around see what each one of these tabs does but the one i want you to kind of land on is the one that's cons that's called console this is the one we're going to be working a lot with today okay and the console should have a bunch of error messages to welcome you okay uh and um so what is this telling us is that i am referencing files that don't exist so here is the code i'm going to make that panel disappear so that i have more space here's my code and in the head i'm importing a style sheet that's located this is a relative path it's located in a folder called css and it's a file called style.css we haven't created this so the browser doesn't like that and it tells you oh wait i'm trying to style your website with a file that doesn't exist that's fine in the bottom here there's a javascript column okay and it starts with the script tag and it's um asking for a file called map.js that's located in the javascript folder we haven't created that either so let's do that so let's let's create these files that don't exist um okay so now we go down to um this section of the lab okay and uh if you click on the explore tab of your vs code and um you have your index.html and if you're using github repo you have your readme file there as well you want to create a new folder so earlier we created a new file now we want to create a new folder so go ahead and click on the new folder button and type in css hit enter the css folder that you created should be highlighted okay and if it's highlighted and you create a new file the new file will be created in that folder so go ahead and do that click on your file and create style dot css inside your css folder okay and when you do that it should create the file it should open it as a new tab and it should be empty okay so here is now the uh code snippet for some kind of uh css code so copy that code snippet put it in your style.css paste it in there and it should look like that okay so this now is cascading style sheets it doesn't look like html it's its own language it's dictated by kind of some identifier components in the beginning and then squiggly brackets which ident which is basically an object and within the object it has a whole bunch of these are called value pair a value key pairs right so you have the margin is zero the height is 100 width is 100 for the map we're going to make sure the height is 100 for the body we're going to use something called grid templates a relatively new thing within the css world that makes it easy to compartmentalize your website make nice looking layouts with kind of minimal css code this used to be really hard so we're going to use something called grid templates identifying rows columns areas and each one of these areas that have been identified will have its own kind of style associated to it what's the background color um what's the font size all these css components are things that you can add on your own depending on how you want your website to look and feel you can choose different fonts colors sizes padding etc etc when you save this okay so i'm going to go over to my hello world that is driven by my live server when you save your style sheet file it should automatically refresh your browser tab if it didn't because maybe you're using you're not using go live you're using um just the file uh explorer then you just hit uh command r control r to refresh the page now your site looks different right it looks kind of nice you have a header that's kind of dark and you have a footer that's like gray and then you have a section for your sidebar and a section for your map all this is dictated by your style sheet so that's the css side of things in web development is if i change something here for example if i change my background color in my style sheet and i save this it should be reflected on the website right so i changed my header to red and now my you know header is red it's pretty cool and i can you know go ahead and you can play with this make it whatever color you want the font size you can change this away the font color and so forth i'm not going to go into css beyond this because you could spend weeks on css there are css coders out there and that's all they do they design the kind of look and feel of the websites similar to like what a graphic designer would do a graphic web designer needs to know css okay any questions so far okay looking good um so let's so we've done the css now we need to uh start our javascript uh similar to how we created that css file let's go ahead and create our javascript folder and our javascript file so right now before you get going style.css is highlighted on my uh window here i want you to unhighlight it so click on an empty area okay and click on the new folder okay so that it's in the same level it's in the root essentially with index.html in the css folder create that folder and create the file and we're going to call it map.js and that should again create an empty tab with map.js in it um caroline asks whether i'm going to be sharing the recording absolutely i will be sending an email with the link to the recordings probably within a few days um so you can all rest assured that you will be able to follow you know this workshop at your own pace with the recordings at a later time great okay so now you have uh your emptymap.js file which is a javascript file and i just have some funky code two lines of code here that you can kind of add to this javascript file first one is an alert second one is a console and if i go back to my tab and i save my javascript file you should see that javascript in action on your web browser so what is this doing the first line says alert alert in javascript is a pop-up window so you can you can generate pop-up windows in javascript with the alert uh function here so it says hello javascript okay and click ok and the second line is console.log again that's a javascript command to output information in the console of your developer tools so your developer tools should be open and if you go to the console you should see that message written out in the console so that's pretty cool right you're communicating to the browser not just with what's visible to the user but invisible but visible through the console so you can do a lot of debugging you know these are messages for yourself as a web developer to output things along the way i'll put a variable to see if things are working along the way okay all right so um let's build a map because that's what we're here for uh all right so the first thing is that we need we can't just build a map as javascript because we need a map an interactive map requires so many different components it needs a base map it its data it's interactive so you want it to be slippy so you can move it left and right zooming in zooming out there's a lot of things involved in a web map that is beyond our capacity so we are going to leverage on existing projects that have built libraries for this particular purpose so i have a link here to the leaflet website so this is a fun place to go so let's go ahead and check that out so leaflet is an open source mapping interactive web map library and open source means that you don't have to pay you don't have to create an account you can just grab the javascript files and bring it into your project and use it and you know you can read about it this is an example of how you might embed an interactive leaflet map within your website um and it's you know zoomable it's got pop-ups you can have markers and there's a whole bunch of tutorials a large part of this workshop has has borrowed different elements from these tutorials the most important thing is that there's the docs and this is the entire library and everything it does is documented within the docs page here um and you know if you eventually build your own web map you're going to be spending a lot of time here okay i have a quick question about that um as boundaries change and roads change and all these things are these live fed uh is it just the code or i mean it has to pull data from somewhere to generate these images and so i don't know if i'm asking the question clearly but um i'm curious like 10 years from now will these maps be accurate from this website or do you have to like manually make sure that it's pulling from the source that's accurate and what is that source yeah sarah that is such a great question um if you look at for example you know the sample map that they have here it has streets buildings you know you can zoom in it's got labels for different elements this is called a base map the base map is actually independent from leaflet what leaflet does is it provides the interface for the interactivity to put a map in it for the markers for zooming in and out the base map itself actually comes from openstreetmap so openstreetmap again is an open source project that allows anybody you me to edit a map because it's open source and uh you know there's here is openstreetmap you can have a look at the street map this is the people's map it's a resource that we are all a we have all created collectively as long as this this project goes on and continues to be updated and if your leaflet map brings in the open the default which is the open uh street map base map it will be updated hopefully 10 years from now [Music] that's great um do you know if it's a similar source that like tableau and other um i don't know how do how does one compare as an academic like where these sources are coming from and deciding which of these tools to use i guess the bigger question but yeah you know um there are different options for base maps you can bring in you know google maps or mapbox maps those are not in the open source domain so then you are governed by the copyright that comes with those with the usage of those maps and a pricing scheme that comes with those um and that's why you know at least to get started with um i always encourage the open source solution so you don't have to think about that um until maybe you have a grant that allows you to have a budget for more big scale projects yeah sounds great thank you okay so all that means to say that we're going to bring in leaflet into our project so what i'd like us to do is to go activate the index.html tab if you don't have it open it should be in your explorer just click on the index.html and we're going to add leaflet to our project so here i have the two lines of code this is using a cdn which which is basically a server out there somewhere that is hosting these uh open source files for free that you can just kind of utilize so i'm going to copy these two lines of code from our lab and i'm going to enter it see the head tag make sure it's inside the head tags so i have my style sheet here and i'm going to paste it right there so right under my style sheet i'm going to put in my two lines of code um let me do that so you can see and because i'm a little anal with code i'm going to tab that in so that it nicely aligns and lets me know that these are the things that are within the head tag so i'm indenting everything one tab in and what are we importing we're importing the leaflet.css which is the stylesheet for leaflet and we're also importing the javascript leaflet.js okay so two files that we're importing and i'm going to hit save on my index.html file the other thing i'm going to do is i'm going to create an area or visible area remember the body is where we have the visible stuff and where it says my map right i'm actually going to add a new div so i'm going to delete my map and i'm going to add a new div with the id map you can copy and paste this from the lab but i just typed it in so i'm going to create a new div with the id map okay so this is in the content area this is where i'm going to add the map is what i'm saying okay and then we're gonna add the javascript to create that map here is the javascript um for now just copy it i'll explain it in a while so let me save my index.html and then i'm going to go back to my map.js file and i'm going to select all i'm going to delete everything into the clean slate and i'm going to paste this kind of starter map code and i'm going to go to my hello world tab here and when i save that you you should now have a map on your website yes so sarah asks a good question i just kind of did it myself but how do you wrap code in vs code uh there's a shortcut for that and on windows it's alt z so you do alt and z and it wraps your code so that you don't have to scroll left and right okay um and i think it's command or it might be option z on the mac so that wraps and unwrapping i think you just do the same thing it toggles it on and off okay so cool um do you all see a map on your website yeah uh and this is not just any map this is a world map in an instance you can see the entire world and in an instance you can zoom into anywhere in the world all the way down to the street level it's a really amazing that we're even able to do this it's a really amazing thing um so this is where i am right now uh in the math sciences building uh in a place called the technology sandbox okay so you can kind of look at the code so if you look at this code even if you don't know any javascript you can kind of maybe start to decipher it a little bit so you see l l stands for leaflet so anything that we're gonna do with the leaflet library that's mapping related it's gonna start with the letter l and it's saying let's create a map using the leaflet library and it has brackets and it has an argument within it where we're feeding it the word map this map refers to where do you want to put this map and why is it called map if i go back to my index dot html remember we created a div with an id equals map that is what it's referring to so it's saying create a leaflet map where the id is equal to map so here is uh creator map where id is equal to map set view in other words where where do you want to default this map to i have coordinates here latitude longitude coordinates you can change these coordinates go ahead and change it and the next number is a zoom level so 17 zoom level it goes from about zero for the entire world to about 20 to the street level so 17 is actually quite zoomed in and these are elements that you can change um and uh the marker below here right indicates that okay we're going to create a marker a leaflet marker at the same coordinates as the center of the map we're going to add that marker see how it's changed chained with a dot right so we have a chain here we're going to add that marker to the map and then we're changing something else we're going to create a pop-up for that marker and we're feeding it the text that will go in that pop-up so you can change this text as well and the final command here is to open the pop-up by default a lot of things going on here but hopefully uh you know you can start making sense of it the middle part here is the base map so this is saying i want to bring in the open street map base map which is what you see in the background here that's the middle part of the code here and we're adding the open street map to the map as well okay so francesca has a question thank you i was just wondering if um for the pop-up uh where you add the text if it's possible to create code to automatically populate that say if you have a csv that has a lot of data and you wanted those points to have text pop-ups automatically when you edit that csv is that possible yes that's a great question time permitting we will get there today but um yes and that's the whole purpose of this right now we're hard coding a lot of things but eventually and for bigger projects you want to generate the data not manually but through a spreadsheet a csv file from a google sheet or from a json file and then you want to populate these based on a column that exists in that spreadsheet like a title a description um the latitude launches coordinates as well if you have a spreadsheet of a whole bunch of locations and one of the columns is latitude the other column is longitude that's how you would uh create um a map with multiple markers kevin not sure what your error is you mind elaborating there um like after pasting the thing in the index do you have to write something after it mean this part here yeah your head um you don't have you should just be able to copy and paste it in here this part that you uh mentioned this is the um this is a comment so this is kind of it doesn't do anything other than tell you it's just a comment within your code but uh this part should be copied directly from the lab here so if you're running into errors make sure it's pasted in the right place that it's not you know within another tag the color coding here of the code editor should should help you because the red are the html tags and the arguments are in green so just make sure that it looks like this and if you're having issues you you might kind of want to start over okay see if it works yeah okay so we have a working map that's really exciting um and uh for those of you who are able to install git um let's go through the process of publishing this to the world right now this tab here has a local server right 127 is a local web server um or if you're using just a file browser it would probably say something like c drive or file colon slash slash or something like that we want to publish this so that we can tell our mom what we did today right um so we're going to publish this to github vs code comes with a great bunch of features that are git enabled um so again hopefully it'll work for most of you go to the tab and i'll show you where we're at go to this button here which is the source control button on ds code and you should see uh the files here on the left that you have created that do not exist on your github repo so these are what they call the changes that you've made uh and then there should be a box here that says message and that's what we're gonna do so we're gonna enable the source control tab add a message so my first map and um commit so the check box that you see up here is the commit button so go ahead and click on that commit button it should now be sending those files you see the little clock here that tells you that it's doing something so you wait till that clock disappears and now it means that you have committed those files and it's gone from the changes there is one more step that you have to do before you actually send it to github and that is to push your changes so the triple uh button here on the where i'm pointing out here has a push command as one of its options so finalize your commit by pushing it to your github level and again you'll see the clock here tells you that it's doing it it's doing it and when it's done that means that you have if it's gone and there's no errors it means it's successfully sent it to your repo and i'm going to double check this so i'm going to go to my leaflet repo i'm going to refresh and yay so you see i have those files that i worked with that are now you know a minute ago on my repo and yes francesca you have a question so i usually do this through the terminal as opposed to this this process which is really great um i'm wondering because i got a message that says there are no stage changes to commit would you like to stage all your changes and then commit them uh directly yeah if you get that message um go ahead and stage them uh prior to committing yeah i haven't figured that out yet um i've had some users tell me that it forces them to stage them that's the correct way to do it actually you need to stage it before well you should stage it before you push it and commit it but first i don't know so yes if that comes up stage it and then push it um and that's a great question about the terminal if any of you guys are familiar with git you're probably a little cringe-worthy about doing it through a gui um but vs code is great you one of the options here uh the menu items here is terminal right and you can launch a terminal within vs code so this is a great resource right so you have the terminal pop up within vs code and it defaults to the location of your repo and you can run git commands here right so you can do the whole git push get add the commit with the terminal if that's what you're more familiar with instead of the gui it does essentially the same thing all right so okay here's the exciting part if you were able to successfully commit and push your files to your repo and if you see them in your repo now if you go to your github pages url right so remember in settings of your repo i ask you to go to pages here and enable github pages right so if you have enabled github pages you should see the url in your pages click on that url and you should see the same thing same map but if you look at the url it's not one two seven point zero which is a local web server it's now your github your personal github url this url is something that you can text message all your friends post it on facebook on twitter and tell everybody that you're now a web cartographer okay so again i can't tell you how excited i was when i first learned about this about being able to use github as a place to host your web files and publish it it just kind of um i don't know it was to me it was kind of mind-boggling it's like oh great i don't have to go through so many hoops and hurdles and possibly cost to publish a interactive web map okay um i'm gonna pause here um make sure there are no issues and questions uh monica asks is there a data limit on what github allows you to host there is in terms of files i forgot what the data limit is 50 mega i forgot i forgot what the file there is a limit um so but i don't know what it is but i do know that it mostly affects data so when you have large data sets um that's when you hit those limitations html css javascript files are relatively really small so those shouldn't be a problem it's the data where you run each problem any other questions i think we're doing really good time here we it's it's 10 a.m i'm gonna forge ahead but want to ask how everybody is doing you're doing okay all right great okay and i actually was just trying to find my github website uh and that's the only part that i'm stuck on i have was able to go into leaflet and have the commit updates whatever but yeah remind us where you find the actual personal yeah if you if you go to your repo your leaflet repo and go to settings and then go to pages on the left and if you haven't enabled pages go ahead and enable it just choosing the main branch the root and then you know enabling it and then you should see this green bar with the url and that should basically take you you know the reason this is working uh if you look at the the url here uh github.io leaflet so that's my repo and what it does is it automatically if you have an index.html file in your root it will default to that file index.html is like a magical file or any web server that's that's the file that it looks for first if index.html exists it's going to render it it's going to run it okay oh yeah and i did add some terminal bonus instructions here in the lab so if you're more of a terminal person this is how you would do the same thing you do get status get add and then a git commit and finally a git push okay so let's do a little bit of javascript basics um what we're going to do next is actually we're going to live in [Music] um this tab here where you have the console open so it's the local web server actually it doesn't matter which one it could be your github pages but in any case go to where you see your map and then do make sure your console is open and let's run a few fun commands within the console yeah okay so the console as you recollect is a place where you can you know write javascript so that you can output information in the console but the console essentially is an interpreter the javascript interpreter to what's happening on this particular webpage so i can interact with all the elements that exist on this webpage through the console down below um and so as an example you can actually put your cursor in the console and type some javascript so you can type in an alert and i'm going to alert hello class and hit enter and it actually does that javascript within this browser window so um and this is javascript so what else can we do with javascript we can do math so i can say one plus one hit enter and uh it gives me the answer there you can create variables i'm going to copy and paste some of the examples i have here variable d1 let d2 let is another way of defining a variable it's kind of the new way and the kind of the preferred way nowadays but variable still works and then a const and constant is a variable that you cannot change so once you define variables you can actually call it so i can say what is v1 and i can hit enter and it'll tell me well d1 you just defined it and that's what v1 is so as you can see i'm using the console to actually write javascript and experiment with things within this browser window um let's let's look at the next example strings so if i copy and create two variables s1 and s2 these are strings so s1 and s2 mapping is fun if i add two strings together what will happen s2 right if i add two strings together it concatenates it right it puts it back to back but mapping is fun is there's a typo there right so how would you fix that um there's maybe different ways on how to fix it but what i want you to know is that you can also concatenate and add spaces right so i can say s1 plus the space plus s2 and that fixes that problem right so now there's a space there so concatenation is important in javascript and we're going to use this technique later on today we can also create numbers instead of strings so we have two numbers here x and y as variables and once we have variables we can do math with them as well so we can say x times y um and you can you can you can play with these as you wish and the next thing is we're going to create an array so the next line in the tutorial here is that we're down here right let cities equals square brackets the javascript arrays are defined with square brackets so go ahead and click on copy and let's create an array in our console window so now we have cities as an array of values we can run commands on an array for example cities.length right and it tells you how many values are in the array we can access different specific values from the array by typing in the name of the array and a square bracket and then a number so if i say one it's going to give me bangkok okay and it's not osaka it's bangkok because array start was zero you count the count starts with zero in most programming languages uh array counts begin with zero so it's zero for osaka one for bangkok so you can obviously change this to zero and it'll give me osaka if i type in a number that doesn't exist that array value doesn't exist so it gives me an undefined okay the next thing i want to cover is objects which are defined by squiggly brackets so kind of like css right the squiggly brackets the key value pair um and why is it so powerful it allows you to really for a single variable you can have an entire spreadsheet because you could have title latitude longitude description url image url on and on and on and on and on you can add as many key value pairs as you want so right now here is an object called city and if i type in city after i defined it it'll output the value in this format here little triangle i can expand upon it and it tells me well your object has a title has a latitude it has a longitude notice the color coding here is important too blue indicates numeric and red indicates a text a string value with brackets all right oh yeah and you can access different components like city with a dot notation i can say city.lat and it'll give me the latitude so that's one notation notice that there's another way to do the same thing and it's square bracket and single quote or double quote and the key that you want to output within the square brackets will give you the same thing okay okay so um let's combine all these things so we're gonna now create an object in arrays so the next uh chunk of code is a little longer so now we have data i'm saying let data equals what does it start with it starts with a square bracket which means it's an array within the array we're adding multiple objects so now this is starting to look like real data right so we have an array this is almost like a a table uh right in fact it is a table because it's an array of objects the titles are defined across multiple rows and so are the latitude and longitude values so once i have this and i type in data this is again what it looks like in the console it's a little triangle number five tells you that hey you have five values in your array when i expand upon it it gives me again each value within the array and i can expand that further to see them in detail okay so how do i work with an with an array of objects you can type in like data and i can again do the same thing right i can get the 0f value and it gives me that object within the array i can take this further say data.0 square bracket 0 dot title and i hope you're starting to see a pattern here about working with variables working with objects and arrays and how to access different components of them um i know that was a little tedious but there's a point to all of this so we're going to hopefully start to see some fruits of our labor here we're going to go and learn about loops so loops as many of you know is perhaps one of the most powerful coding features because it allows you to loop through a whole bunch of data in a very short amount of time and a few lines of code so let's loop through this data that we just created and so for example and the syntax for it is you type in the array so we've created two arrays here so one was called cities and then you type in the word for and then each end of each part is capitalized um and then you do a bracket and you type the word function we want to run a function for every single one of these array elements and within the function we're going to call each element of the array an item and then squiggly brackets and then i'm going to close the squiggly brackets and close the parentheses so this is kind of complicated syntax it takes a little time to get used to brackets square brackets squiggly brackets functions parentheses so there's no way around it other than you just have to practice and get used to it but this for each allows me to loop through every array item in cities and i'm going to run a function and i'm going to call every item within it with a word with a variable item and i can output this by saying console console.log each item of the array and if i hit enter on that notice what it's doing is that it's spitting out each item of that array okay that's pretty cool so the next part is doing the same thing but with the array of objects so in my code i'm right down here so rather than typing in this time i'm just going to copy and paste this the difference in this next chunk of code is that instead of cities we're looping through data and remember data is an array of objects and we're going to spit out each item and instead of a single value now we have the whole data for each value of the array each object okay okay so why did we do all that okay we're going to put all that into practice now all right so let's just use a little bit and go back to vs code so right now i have index and somewhere in here i have my map.js there we go okay so here's my map.js what i want us to do now is to create the data array of objects and put it in our javascript code so here again is the code in the tutorial page copy that in line one of map.js and we create some space and i'm going to paste the code that will create the data variable just like we did in the console and i have this thing in a section called globals so here it is data title um latitude and longitude and now we're going to create a marker for each one of these kind of like francesca said earlier well can we create markers through data can we create pop-up windows with content that's driven through data so we're going to attempt to do that next we're going to keep the variable for the map as is we're going to keep the base map as is what we're going to change is how is this part here where we're creating the marker so here's the marker code we're going to create a for loop on our data so it's data dot for each and we're going to go through function and item okay and the squiggly brackets so i'm used to it now you taught me how quickly i did that because i've done this a lot of times but essentially again the date the array that you want to loop through for each function item into brackets and then a squiggly bracket things that you'll do within that loop go within the squiggly bracket and then you close it with the parentheses okay what we're going to do now is this whole marker code here right we're going to drop this inside the loop okay because we want to create a marker for everything inside for every uh array object okay now we have to change a few things here right we don't want to create five markers on the technology sandbox right so we need to change these elements here the latitude and longitude array that's provided to the marker needs to change so i'm going to delete that and i'm going to say item dot latitude right comma item dot longitude and i'm going to add that to the map i'm going to bind the pop-up and instead of technology sandbox i'm going to delete that code so now my marker code looks empty for the bind pop-up and instead we're going to add the title item.title to be the pop-up text okay and then i'm going to save this go back to my hello world okay um and it defaults somewhere it doesn't make sense but there it is la and if i zoom out to the world right i should see markers on all corners of the world okay so hopefully this whole process makes sense what did we do we created a data variable that includes that is an array of objects of five objects uh these are cities that i've lived in so you know uh each one of them has a latitude and longitude coordinate then we're creating the map the leaflet map we're adding a base map open street map base map and now we're creating a loop we're looping through every data element we're creating a marker for every data object that is driven by the values of each one of those okay so i'm going to pause just want to make sure uh everyone is not completely lost clean this up a little bit okay all good so far okay i'm going to take that as a yes okay in order to to see it in your site do you have to re-push it in order to save it and then it be viewable right you right now i recommend just continue working locally so the url is still at 127. okay um you only push when you're ready for it to be published to the world yeah you might all have multiple tabs open so make sure you're on the one that's the local server uh to see the changes that you do in real time okay um so one thing you notice is that when you run this code it defaults you know in la when you really want it to default to the entire extent of your data markers so that's the intended user experience you want to accomplish so how do we do that um so we want to zoom to the extent of markers that's what we want to do in order to do that we're going to use something called a feature group for our markers so right now each marker is living on its own it's it's a you know solo artist we want to group these markers into something called a feature group which is part of the leaflet library it allows you to put all markers into a single layer so and we can identify we can name this layer and then we can collectively turn on or off all the markers for that layer and that's called a feature group um and there's i have a link here to documentation of exactly what a feature group is and it's part of the leaflet docs section so this is how you create a feature group and so forth so let's let's go ahead and do that the first thing is let's create a variable for our feature group so here's the code we're going to call it my markers and i'm going to copy that line of code i want to put this in my globals area so maybe i'll put it right under under my data before we do any of the mapping code below so i'm going to type that in here or paste it in here so i have my markers as a feature group l.feature group it's a leaflet feature group empty for now no arguments now what we're going to do is within the loop that we created we're going to delete the add map part we're not going to add each marker one at a time so i'm going to delete that part of it instead and then keep everything else instead i'm going to add so i'm going to say my markers which is my feature group and i'm going to say add layer and i'm going to add the marker to my feature group okay you can of course just copy this code yourself if you wanted to but i'm just showing you how you would type that in here so what is this doing it's creating a marker oh and actually i'm going to not open this by default all right so i'm going to delete that part as well okay so i'm creating a marker for every uh data item and i'm adding that marker to the feature group that's all i'm doing here okay when the loop is done that means this my markers feature group now has five markers inside of it now we want to add this my markers to the map right so i'm going to say my markers add two and i'm going to add it to the map okay so now if i do a refresh it's still not zoomed out to the extent of it but it should still all the markers should still be that but they're now here as a feature group what is the extent of all these markers that's what we want to find out right we want to find the extent and latitude launch new coordinates so that we can fit our map to the extent of the markers now um you don't have to follow along but i'm just going to show you a nifty little thing here in the console i have my markers right this is the feature group it comes with a command that i can type in called get bounds and if i hit enter on that it tells me the extent of all the markers that are in that feature group it's a really cool kind of gis thing right find me the extent and latitude launch the bounding box of all the markers in your feature group this is great because we can use this to set the default of our mark of our map so this next line of code which we can add to the bottom here right which is zoomed to the extent of all markers what does this do it says hey map fit the bounds you know in other words zoom out fifth bounds to the extent of one of my markers bounds does that kind of make sense so now if i save this uh now the map should not default in la but it should default to the extent where you can see all the markers okay so marlene asks uh actually a really good question uh when or why would you work directly in the console the console from most developers is a place where you can test things out right so it's before you write a lot of code save and then see the results you can actually test things out first in the console and kind of manipulate things until you get it right and then you're like ah that's what i want to do and then you go back to your code and write it out it's also just a nice place like a playground for javascript so you can just uh do anything here but it also allows you anything that you define here so what's defined here we define data and we define my markers all those elements are available to you in the console so i can say data right what is data and i can see the results here right so this is what the browser knows what data is based on what you wrote in your javascript so it's just a kind of a nice way to go back and forth between your code the results of your code and then the playground below it which is the console that lets you kind of interact with features that you've generated in your browser i know that answers your question yeah great okay so uh we're kind of in the last quarter of our workshop here uh i hope you're enjoying yourself so far so um okay so we're gonna introduce a new concept here and uh i'm gonna add a new library called jquery um i'm not gonna go into it too much just know that there's a link to the website here just know that jquery is another library that you can import it's used by millions of web developers because it essentially makes writing javascript or some components of writing javascript a lot easier so just know that it's it's a widely supported open source project that makes some javascript writing you know something that takes 10 lines of code to write in javascript allows you to do it in one minor code and so i'll show you what that means so first let's bring that in so there's the jquery link and remember i'm going to copy that remember when we bring in an external library where does it go it doesn't go in the javascript file it goes into the html file in the head area where we've already added leaflet so under leaflet you can add jquery okay and i'm gonna indent that so that it looks nicely aligned so in the head we bring in leaflet we bring in jquery and save that so now our website is jquery enabled okay so what can jquery do let's let's go back to the console so this is um you know marlene's question about what's the console useful for uh it's useful for experimentation so now that we have added jquery i'm going to make sure under sources that um jquery was important there it is code.jquery so jquery is part of our project here so going back to my console um we can actually write some jquery code here so jquery allows you to interact with dom elements of your website and what i mean by that is any component that you have defined in your website with a class or an id you can manipulate with jquery with ease and so for example jquery commands start with a dollar sign and then it's a bracket and i can say i want to access the header the header is a class and in order to access something that is a class the notation is a dot that represents a class what's the name of the um class is header where does that come from we defined it right here in the html file we said we want that div to have the class equals header so i'm going to grab that element using jquery okay so i can actually hit enter here and it returns something it tells me yes we found something on your website that has a div titled header in the console if i hit the up arrow it's like a terminal window it shows me the last command so i have dot header and i can add um command here jquery command called append so i'm going to append something to the header um and i'm going to say uh i don't know okay so now i don't know if you notice it but the header has the word map in it because i appended it to it that's pretty cool right um so that's how you can manipulate elements within your site i can do something like hide it so now i don't have a header i can bring it back with command show okay uh so there you go so kind of scary right you can manipulate any website that has jquery in it in this kind of easy way um so i won't go over all of these but know that you can do a lot of different things you can show things hide things fade things in and out there's an animation component to jquery uh instead of a pen you can pre-pen you can add text before the text that already exists you can replace text entirely with dot html so feel free to go ahead and do this know that whatever you manipulate here like if i hide my header and you're like oh what did i just do all you need to do is just refresh the page and it brings it back to its original state so feel free to do whatever you want within the console it's not going to break anything okay all right so all this jquery stuff which is kind of cool there's a reason we want to do that and that is because we want to manipulate and add content to the sidebar so we're going to use jquery jquery allows us to do that easily so and how do we go about that go back to vs code and go to map.js and you see you remember your loop here that creates a marker for each one of these i want to create uh these titles i want to add the titles of these markers on the sidebar so how do you go about doing that see the for loop here for the data we're going to use the same for loop and i'm going to add some space where it adds it to the feature group and here i'm going to use my jquery command so i'm going to say hey access the side bar okay access the sidebar appends to it and let's append the title does that make sense right so we're using the same loop we created the marker within the same loop we're also going to append the title to the sidebar if i save this you will notice here that each title was appended to my sidebar it doesn't look any good but it did its job each title is now in my sidebar so let's let's fix this a little bit um what i'm going to do and you can copy and paste from the code here but i'm going to type this in is instead of just appending the title i'm going to add some html here i'm going to say i'm going to say div class is equal to i'm going to call this sidebar dash item and close my div single quote to close that text and then i'm going to do a plus sign to concatenate and add the title so here's the title and then i'm going to concatenate my closing div tag so essentially what i'm doing is i'm creating not just by adding the title i'm putting the title in a div and i'm giving that div a class called sidebar item when i save this now you'll notice that instead of a one-liner each one of these now exists in its own div the final part of this is that now that each one of these divs has a class called sidebar item i'm going to create a css entry for that so in the code here i think there is the css entry here right there um we're going to create a css entry for sidebar item okay and we'll copy this where does this go it goes into our style sheet so style.css already has a bunch of styles for the different elements of the site in the very bottom here line 38 i'm going to type in and add another entry for sidebar item this is the class for that sidebar item and we're giving it some padding a background color a border color and a margin and save this and now my sidebar looks a lot more welcoming right it has each one of these elements on the side here okay so that kind of concludes um this part of the workshop um the next part is going to be about bringing in a csv file in working with that but man uh i covered a lot of stuff here uh and i know that it's been a lightning session for especially if you haven't worked with javascript or html before and believe me some of the stuff that we've done today takes entire courses to teach but there are shortcuts in life right so you know um you can get to a certain point if if you have a very specific need and in this case we're focusing our learning through the creation of a web app but we've learned a lot and just to review starting with index.html this is kind of the framework of our site it kind of governs what libraries we're bringing in it tells you that we're bringing in style sheets as a separate file javascript as a separate file it defines the elements that will exist on our site then the style sheet which defines the look and feel the fonts the width the heights the margins for all the different components of your site accessed through the classes and ids a class with a dot id with a and then the javascript we have an external javascript file that's brought into our project we've done a lot we've created variables that include data and this is an array of objects we've created a feature group so that we create a layer where all our markers go in we instantiate the math with dot map put it in the div that's titled map set a default view in a zoom level have a base map from open street map and then we added a loop that goes through our data adds a marker for every single one of our data items based on the latitude and longitude values and have a pop-up with the title in it added all these elements in sidebar added the feature group to the map and in the end we zoomed out to the extent of all our markers so much stuff that we covered in an hour really amazing and how would you make this your own you can probably start thinking about that right all you need to do this is not this is my life journey you have on your map you can start changing these elements these these could be uh places that you've been this could be art museums these could be cafes anything you want it to be you can start changing these values okay which segues us to the to the next and final part of the workshop which is i don't want to type in all this stuff i have a spreadsheet how do i how do i bring in a spreadsheet and map all the um values of my spreadsheet so um let's work on that next unless there are any questions before i do so okay all right so first things first i know this hurts but or you can i don't know what if you want to save this file but essentially we're going to delete everything that we just did so if you want to you can go here and maybe this is what you want to do map.js and you can essentially you can just highlight it and copy and paste it so you have a copy of what you just did right but i want you to go to map.js select everything all that hard work that we just did there it is and delete it clean slate okay now go back to um section called building a data driven map room and copy this kind of starter javascript code and paste it into the clean.map.js okay now if i save this and i go back to my tab uh all those markers should not be there anymore it should default to the world or africa and your sidebar should be empty again okay now let's look at this code the starter code uh it's a little more sophisticated than what we've done um this is kind of approaching kind of production level coding practices we have an area at the top where i just titled global variables and we've defined the map as an empty variable we have an area that i've titled initialize and this is a jquery you know our function that says when the document is loaded first do this so whatever is within the document ready function here is what it does first now uh here's a new thing called function we haven't covered that yet and but all the stuff in between should look familiar right we have a map with a view that's zero zero and three that means it's uh zero zero is off the coast of africa three zoom level that we're predefining and we have our openstreetmap base layer here what we've done here is we've wrapped it around a function that we've called create map so function is a javascript argument that says let's create a function let's call it create map okay this function has no arguments because it's the brackets are empty and then the squiggly brackets to define the function so what is this doing is we're taking all that code to create a map and putting it into a function so that you can call it with one line of code which is right here when the document is ready run this function create map where is this function is defined beneath it and what does it do it adds demand to the website so we're cleaning up our code we're making it more scalable we're making it um use functions instead of kind of raw code floating around within your um javascript file most everything in javascript you're going to create functions so that you can call functions here and there okay um all right so hopefully this makes sense global variables the initialize what does the initialize do it runs this function what does that function do it's defined down here and increase the map okay all right so now that we have our new kind of more sophisticated uh layout here let's talk about bringing in data okay and i have 15 minutes to do so so we're going to import a new library called pop-up parse and pop-up parse again is an open source library you can actually look at it here that brings in csv files into your javascript so how do you bring pop-up bars into your project see this link here go ahead and click on that link and it should open up a page that looks like gibberish really this is the javascript for pop-up parse what i want you to do is with this page open ctrl s or command s to save this file to wherever you added your code so i put it in a leaflet dash one folder yours is probably leaflet and put it in the javascript folder here's the javascript folder right so you should see your map.js in there uh and just save that in that folder now if i go to my vs code and i look i expand my js folder here you should see pop-up parse in there now okay so one more time from the tutorial here's the link that ends with a dot js go ahead and click on that okay and when you see it open on your browser click ctrl s or command s and save that file locally inside your javascript folder and you should see it in your vs code okay now that we have pop-up parts as a file we need to add it to index.html so bring up index.html again we have leaflet jquery and now we're going to add pop-up parts so the next line of code here um or you can actually just type it in so i i'm going to type it in i'm going to say script um source where what script are we bringing in this is a relative file so it's in my js folder and uh vs code is smart it tells me what files are in my js folder and choose that one close it and it automatically gives me the closing tag as well or you can just copy and paste that line of code okay so now our project is leaflet enabled jquery enabled and hover so we can bring in csv files okay let's find the csv file to bring in so we first have to create a csv file so for this workshop i have a link here where it says file from here okay so go ahead and click on that and again you should find a you know gibberish so this is uh a file called donuts.csv it's an art uh mural file of all artwork in la in form of murals and i'm going to save this and this time i'm going to put it in a data folder so you're going to create the data folder so you see leaflet up top here and then the css and js folders in your finder i have a new folder button here so i can create a new folder and i'm going to call it data and inside the data folder uh i'm going to save the donuts.csv file if you're not able to do that just put it anywhere in your repo root and as long as you see the donuts file in your root somewhere you can create the folder either using finder or within vs code but just make sure eventually that the donuts.csv file is inside your data folder in your vs code okay great okay i'll get so far okay um so now we have we've brought in pop-up bars and we've brought in a sample data data file uh data file looks like this it's latitude longitude a title a url and a thumbnail url so it's got all the components we need to map this data okay so let's let's go ahead and do that within the time that we have so the first thing is we're going to create a global variable for the path of the data okay so i'm going to copy that and i'm going to put it in the global variable space i'm now in map.js paste that in there so path is data slash units.csv that's where we put our data okay and then we're going to create a new function called read csv this is straight from the documentation from the pop-up parse website so i'm just going to copy this and i'm going to put this function beneath the create map function here's my create map function i'm going to paste this function right below it nice and pretty right here's a function for create map here's a function to read the csv what is this function doing again it's copied and pasted from their documentation essentially what it's doing it's using the papa library that we just brought in and the path of the file that we're bringing in is defined as data. data donuts so we're bringing in that csv file and then once it brings it in and it completely brings it in we're gonna console log out that data okay so we have two functions here remember the initialize function only does create map so make sure you add read csv as the other thing you want this whole website to do first create map and then read the csv okay so i'm going to go ahead and save that go over to my browser window here and in the console you see an error you can ignore this error message but you should see the data because we console logged the data in the console and what does it tell you this data csv file has a thousand rows that's a lot of data what does the data look like i can expand on these again it's an array of objects and it has a latitude longitude title reference url and so forth beautiful we have now imported a csv file into our javascript project okay okay now we're going to do the same thing that we did earlier we're going to create a feature group so i'm going to call it markers and i'm going to put and copy that line of code versus markers create feature group and put it in my global variable area we should now have map path and markers feature group um and then we're going to create a brand new function called map csv and copy that so now we have three functions create map read csv and at the bottom here we have map csv where is this being called this is actually being called within the read csv you can only begin to map something after the data has been read that's why it has to be here there's a sequence here that has to happen um so that's why the map csv is here and what does map csv here everything in here should look familiar because we just did this there is the loop it loops through the data from the csv file creates a marker for each element based on item that latitude and longitude it adds it to our feature group called markers it adds the feature group to the map and it fits the bounds to the extent of all the markers okay so let's see if that worked i'm going to save this and uh whoa if that worked you should see a whole bunch a thousand markers on your interactive leaflet map that's a lot of markers so markers are pretty heavy so uh before i wrap up i just want to show you that instead of markers you can actually use a circle and so instead of just marker you can say circle marker which is another option in leaflet i like circle markers a lot you can actually style them however you want to style you know how the how big you want those circles to be what color you want it to be so go ahead you can copy this code here map csv replace what's already in there i'm going to save this and now instead of markers you you see a whole bunch of blue dots in there and this is really spectacular because you can zoom into the street level and see the dots there and the final part of this and sorry i'm kind of rushing in the end here now that we have circles you can do a you can bind a pop-up as well so this code actually binds a pop-up like we've done in the past and again i'm just going to copy the entire function here replace it with what i have already in there um and just to know that it's a little sophisticated but what it's doing is instead of a marker we're using a circle and we're using and this is a new as well a mouse over effect instead of having to click every time for a binder pop-up we're using a mouse over effect to add information about that art piece in the pop-up so when i save this now when you zoom in right you can actually see the pop-up even includes an image right and that is because our csv data has a column that has a image url so it's bringing in these images image urls from that spreadsheet and just to let you know this spreadsheet comes from uh from the usc library from my good friend andy rodkowski who is one of the curators of this archive which is uh robin de dunnitz i think is the name of the photographer who went around in the uh i don't know over a span of 40 or 50 years and photographed murals all over la and created a an archive for it's really wonderful resource um well that actually concludes the workshop today with two minutes to spare um i know i covered a lot of material here probably many of you weren't able to follow every single uh part of it but i hope um you know the recording you know you can go uh through it again and what i wanted to kind of wrap up today with is to show you some examples of student projects so a lot of the material for this workshop was borrowed from a course that i teach called what is it called web gis an introduction to digital mapping it's offered in the dh program and just take a look at what the students were able to do with these tools that they're now you know empowered with right web gis and the digital humanities it's really amazing work in just 10 weeks again these are students who didn't know any javascript html to get started with and this is the work that they were able to accomplish really amazing work the one that i would maybe show you guys is the one that's relevant to today there was a group that took on the art archive the art navigation in la they called themselves data art and you know it's similar to what we did today right they're all the different art pieces you can hover over them it gives you all information about them you can zoom in they have this kind of surprise me button where it randomly picks an art piece anyways amazing work from our students and based on a lot of the foundations that we covered today okay so that wraps it up i want to thank you all for being here today i hope that was informative um i'll stick around if anybody has questions or would like to talk about your research your project i'm happy to do so i always love hearing from you guys but otherwise uh have a great day and i hope to hear from you in the future if you if you actually build a website please send me an email and let me know so thank you again and again i'll stick around for to chat with any of you okay

Channel: UCLA Office of Advanced Research Computing

Views: 582

Keywords:

Id: aZGwmWYaOfs

Length: 114min 10sec (6850 seconds)

Published: Wed Jul 14 2021