Build Interactive Geospatial Web Apps with Leafmap and Streamlit

hello in this video I'm going to show you how to create uh an interactive web app for mapping applications using streamlit B is a very popular python package for uh turning your python script into uh interet web app in just couple minutes and you can also deploy uh the web app for free using the stream that cloud so I'm going to show you step by step how to do that uh first I want to show you what it looks like so this is the map application that we're going to build uh you can for example have this kind of interactive map you can zoom in you can zoom out you can turn layer on and off so on the left side here you can also see the cber menu uh with different items uh for example we can also have a split map like you can have two different data layers side by side you can zoom in you can pain uh you can also turn the layer on off also laser for example so this kind of app can be built just within couple uh lights so you can see here only speed light the C and then you can have a app like this U very very easily um you can also have Mark cluster uh so you can plock points if you have any uh for example coordinates or cities GPS points if you want you can also P this on the map um very easily similarly you can create a heat map uh sometime you have some uh data you want to create a heat map for example population cluster uh you can do it like this Bas Maps so you can also seource base map uh you can find any base map that you like here's also a demo showing you how to do that like you can search the data and then just load the data interactively for example I can search a and then you can select any a based map uh select whatever you want and then you will be loaded onto the map uh you can select another one for example right so very very easy to use again uh not very difficult only couple minuts ago I'm going to show you how to do that and the last one is about web map services so you can also load uh basically web map services from the internet uh so you just need to pass the URL and here it's going to show you uh all the data layers available through this uh um URL and then you can just load the data directly for example This Is War L cover right I can also for example select uh any uh different data layers and it's going to low up and very very easily so this is the power using uh leave map and also uh stream L next let me show you how to get started and and so I'm going to have uh go to navigate to the open geospatial Solutions so this is a geub organization that I created they host some of the Python packages that I created and if you scroll down to this section about the web apps and so here actually I create the previous one called stream GEOS spal for creating a set time laps and then one is a bit more complicated so I also create a map template so we in this uh tutorial we're going to use this map template so you can just open this uh uh rle and then um this is basically giab template that allowed you to just uh uh use this one to create a new repoer so just loog into to your GitHub account and then just use template create a new repos and from here you can just uh for example select my name and then you can just use this uh you don't need to check this one and for here you can just give a name for example stream di um max for example uh you can choose whatever name you like and if you want you can give a description uh a stream uh B app or mapping application for example and then just create a rep so it's going to create this one basically put it under your account so it's basically the copying all the content all the files for my repor and that's it so after that you can make some changes so next I'm going to show you quickly how to deploy this one to uh stream the cloud because we already have all the files ready and also this um this one is the pre-commit uh you might see the error if you don't enable pre-commit uh for your GitHub repos it doesn't matter so and I'm going to show you how to deploy uh to the stream Cloud you can go to the stream website and then just click sign in from here make sure you uh have an account uh and then once you sign in you can um create a new web app based on the GitHub repy that we just uh create and so up right here just click new apps and from here uh you can either uh select this one for example here this is the web app but you need to type for example the uh this file that exist so you be homey this is the main file uh this this is the basically the entry point um to the uh to the web app or you can just click this one and then you can copy this entire URL come back to this one and then click this one paste GitHub URL then I can paste this one here either one five with the Advan setting if you have any secrets or environment available you can see you can past it here but for this web app we don't need to use any of those so we can just use the uh default one and after that uh here you can change the name so for example if you want a s name or something like that you can um in here so I say um mapping it's being used uh or maybe Maps uh Gio something like that whatever name that you want to or geom Ms let's say map something like that uh s name and then just click deploy and in this go it take uh two to three minutes and after that you should be able to see the web app so it's right now uh creating uh the virtual machine and then this building installing all the dependencies if you want you can look at the rep story here I'm going to show you for example it's the package to txt this one is actually uh using uh because it's a Linux machine so we us you um using some of the geospatial packages for example gal so those things need to be installed in the system and then we also have some couple requirements to txt a couple packages right including J and also geopandas Le map essentially we need the leaf map and uh we also need stream L this one is for doing the web map services so it's an optional dependency of the LIF M and right now is essentially U building and upper right a lower right corner here if you clicked the main is the app you see it's downloading installing all the packages and once it's time you be to see the web app okay and uh this way for it to finish next I'm going show you how you can actually clone this one to your local computer and then you can just uh install the packages so you can do the development uh locally you're also welcome to make changes in here um so it's basically um very flexible and for me I would like to use Vis Studio code to uh start doing coding and I will just click this one the green button copy then you can open your um fire Explorer and you can use the terminal so I'm just going to clone this repo three to my computer get clone control B hit enter all right so it's done so right now I should have this one ready to go and I can open it using uh vle and this it so now uh it's open it now you can take a look uh we do have the source code and everything up here and to make sure that you create uh the environment that you have uh streamit and leavea met install so these are some of the packages that you need to install uh you can just let me show you here you can use cond create to create a new Conta environment okay and after that you can just install uh all the packages within the requirements. txt so it's going to take uh couple seconds to create a new contact environment then I just cond activate uh St once we in the environment I can get into the uh directory and from here I can just P install Pyon R and then requirements.txt so it's going to install all the packages uh you welcome to use cond for channel if you know how to use that but uh for this one for simplification we are just going to just use the PIP uh install and once it's done then we should be able to uh activate the uh environment and you can start looking at the web so let's go back to here see if is finished um all right so it's just finish I just take uh roughly A Min to now you see we have the web app up in running and of course you're welcome to for example uh I'm not sure the screen is hard to see I'm going to change to the uh light mod right now so it's easier to see on the screen so the same pretty much exact the same that I show you earlier but right now is using your custom domain so for me it's Z Maps uh you can update the UR later um but let's try out some of these things see if it works right you can also change the base map uh so for example setly and um nlcd for example so everything is can be changed interactively and the split map it works just fine also for example Market cluster again you can see the source code I will show you how to add a new web app later basically the new item to the menu and base map you see everything works just fine and there's not really much you need to do just CL uh basically use the template to create a new report and then just deploy it to uh stream the cloud and within two to three minutes then you have the web at uh up and running okay so next let me come back to here and hopefully uh the installation is done now we can start doing the development so we can actually test things locally so I'm going to open my terminal here and then in the terminal uh you can testing it so I'm just going to contact activate St going to get into the Conta environment then you can just start um for example testing the web locally so what we need to type is streamed r b. py and it's going to open a new tab uh on your browser the take look so right now again let me switch to the uh light mode first okay so this is the one right now running on my local machine so you see here local local host uh 8050 and so use this template you already have a couple webs in here assume that you want to add a new one so I'm going to show you how to add that uh easy and so by default we're going to put the because it's a multi-page uh web app we're going to put all the apps within the under the Pages directory so you need to do something very much similar and so for the next one I show you maybe I'm going to create another um web app and similar we're going to use the split map but we're going to replace that one with some set imagery uh for this one here is a l cover for example right I'm going to do p with some other data so what we need to do here is to follow the instruction on the homepage right we already finished page one uh step one so the next one is customize the sidebar by changing the sidebar text and logo and add the python files um and then we to find some Emoji because the Emoji going to show up somewhere in here right so in in in on the left side here so we can find the emoji that we like um you can uh for example a heart base or a star something like that so for example I want this one you can just come here and then click copy all right then come back to vs code so I'm going to right click new file so you going to buy sequence all right 1 2 3 4 5 so for the next one going seven and then UND score they can paste the Emoji here and then uh you can give a name so for example this one I we can create a new name maybe call um um comparison whatever you like um because we want to uh compare to uh image maybe col okay better r.y and once you have this empty script now I'm going to copy from the split map right so because uh on the uh some of the uh boiler plate these are the same so all we need to do is just we want to change the split map to other images so just contrl a contrl uh control C and then just paste this one here but now you don't need to do anything let me just contrl s and that's it if you go back to um the web app here and um refresh it you have this one come up at the bottom here so right now you see we have the roster and it's the same but we're going to replace the content so the next I'm going to show you how we can replace the content here so all we need to do is replace the left layer and also right layer again I'm going to go to my open geopal Solutions and there's under data set here there's a data set repository again all the links are in the video description below you can just uh check that and I'm going to go to the releases and then scroll down to find uh roster and here I have two images uh this is uh maxr open data for uh libia and B4 and after so I'm going to maybe copy this one right click and then copy link address then come back back to here and I'm going to maybe uh get a new URL so this one I say before for example before the flatting double cach and then enter next one will be after equal to and then similarly I'm going to get the URL from here right click and then copy you're welcome to use any roster images that you like so they can do a comparison and after it what we need to do is just to change this one so for example the left layer we're going to change it to before before and the last layer going to change to after okay you can also get a a label for example left label equal to before that means under the layer manager you're going to show you the name of the layer so right label okay similar after and since this is a set imy there not L cover so we don't do it any this one okay so we remove it then control s then go back to the web app here okay usually after you change the source code there are couple options in here you can just click this one always read one okay so that means you're going to run the source code hopefully uh it will show up the web app and if you click this one here the source code should also be updated boom you see now it's done you can see the source code uh this is the source code that we use to create uh the web app and upper right corner here you should be to see the before and after so this is that basically to uh set images Max our open data and you can see the flooding right so this is the before and this is after if you zoom in you can clearly see the FL mean how serious it is uh the entire Breeze was uh throw away toally broken and also a lot of fling in the region so you can use the mouse to drag and you can see clearly compare the differences so this is the H uh big flooding and uh again what's the date it was uh back to here in uh July last uh I think September last year so the July one was the before the event so you see so we just what we did just successfully just update the URL to the last imagery and then just change another line so basically change three l call and add a new file to here now we have this web app so once you're done then you can just Commit This one commit the changes to GitHub so I'm just going to control s and from here I can just say it uh R VI app okay and then control enter Then syn the changes to GitHub all right it's done now I can come back to my uh GitHub repor and refresh you see so we just committed and if you go to the pages look at this one and after it's uh push get out assuming should build that automatically so if you go back to the C web here uh I think it's under goom Maps right so low right corner here you see it's right now it's rebuilding so hopefully after minute two once it's finished rebuilding we should able to see oh it's actually already here so if you click this one it's loading imagery so it might take couple seconds to low up but hopefully uh it's work and then just wait for the uh the build finish okay it's done so pretty quick I this is all the uh cloud ultim my Z so it's in the cloud so it might take some time to load up uh it's depends on the internet speed but it works pretty well look right so this is how you can quickly uh use the template to create a web app and you can add anything you like you can remove the items if you don't like it and you can customize for example about but those are more like the very standard uh Streit uh components so for example the SAR the title The Source course should be pretty simple most of the The Source course to be just 102 lies so you're welcome to go through the source core and then make changes as you see it you want to learn more about uh the package for example uh it's built on top of uh Lea map okay so just Google Lea map or you can learn a whole lot more about the package so I have a lck of my notebooks in here shows you how to use this and all you need to just use the same notebook and after you're done just simply run the function cost um map to stream for example this one I can visual one single imag uh you can also visualize special temporal asset catalog and all you need to just use the same stream Source c as D web Source C and at the end just turn this one into a stream lit web and set a height then you should be good to go and then just push the changes to GitHub or you can run it locally um once everything works fine then you can deploy and then you can share the link with anyone so hopefully you find this uh video uh useful if you any questions you're welcome to reach out to me uh via GitHub so you can post questions on GitHub um I'll happy to uh help you out thank you very much of attention um take care bye-bye

Channel: Streamlit

Views: 6,376

Keywords: geospatial, geospatial app, geospatial web app, gis, gis app, gis web app, geospatial streamlit app, geospatial streamlit, gis streamlit app, gis streamlit, leafmap, python, streamlit, geopandas, owslib, geopandas streamlit, owslib streamlit, leafmap tutorial, geopandas tutorial, streamlit tutorial, python tutorial

Id: hn2WqRX75DI

Length: 18min 47sec (1127 seconds)

Published: Mon Apr 29 2024