Python Geojson, Folium & Leaflet - Create Maps & Routes

welcome to my video about Python volume volume is very powerful library which combines the strength Python has with with data and the visualization and mapping features of leaflet is so you can do a lot of cool stuff with volume and that's why I want to create a series out of it just one example imagine you're a city and you have public transportation you can just display them on an interactive map like display where your current buses are looking other example is interactive crime maps like this one from San Francisco where you can see which in which courses how many crimes were committed and if you dig in more details you can see which crimes are committed how many in which areas and so on so cool stuff isn't it and there is even more let's start small so on the first video of series I want to show you how to create routes with markers with custom markers and with attachments to those markers like like I did here for my latest walk with my dog jungle but I think it's a very powerful tool you can use it to document your next road trip with pictures your next vacation your next high and so on alright let's start so I'm using Geo Jason IO here which allows you to create certain Jason coordinates here so first of all let's look for the location where I took my walk let's move to certainly mode and that's it I think I parked my car somewhere here and then started the walk so I parked here and then went over this way somehow until here and crossed field and then moved across the forest here I think it was somehow like this back to the road and then back to my car and basically a gio Jason generates those coordinates for you and you can just mark them all and export them and create a file out of this so I'm just using my editor here creating a document walk Jason and put this in let me check if this is the right format it's not walk Jason like this okay and so next to my walk Jason fire which basically now contains the coordinates I have created the logo which I will use as a custom marker on where I took picture of pictures of jungle and I want to attach images to those markers all right let's jump into the code let me create a new script here and first of all as always import volume so after importing volume as always let's create our map map with location and I already copied the coordinates and zoom start of 17 and let's just save it as index.html so actually I'm not using Jupiter notebooks this time because I have some trouble currently so next time I will use repeater again but in this case I will do it the old-fashioned way with just a Python script let's let's actually run it so and have a look at our foot sorry I'm in the wrong folder scripted py let's run it and it's finished let's open it with Chrome and we can see our map is being generated here alright let's go back to our script and do a couple of things so first of all we will load in our walk actually it's still not the right form and let's rename it just Jason Taneytown okay so let's read and the walk Jason and for this of course we need some oh s module so let's import OS and let's create a new variable walk data equals OS path join and read and walked up Jason data now actually folium has a built-in functionality to a read and display those Jason coordinates called geo jason so we can just call this by using folium dot geo jason handing over the walk data which we defined here and giving it a name and then as always headed to our map let's see how that looks let's execute script and check our index.html and as you can see here it got mapped or it gets displayed on our map and actually there is a way I quite not hit it 100% but it's okay so we got the basic route of our walk with with Django here and now as a next step we just need to add the markers which I already showed you how this work worked in the previous video but I will do it again in this case here when because it's slightly different when attached pictures to smack pop-ups all right so let's create our markers so this stays as a dis and basically we will do things a little bit differently then within the last video so in this video we will define a global tooltip because for all the markers I want to display the the same tooltip to click to see picture and we need to define an HTML string and this is important because in the mark pop-up we want to display a picture and this works by our I frame by at the volume I frame and the pictures in PNG format and encoded in base64 so we need to encode it to be able to display it so if you need more details on basic c4 and encoding decoding stuff just mention it in the comments perhaps I can do another video only about this but this will somehow make this session too long so I will just enter the string here and please don't get confused so IMG SRC equals data it's an image of time PNG encoded in base64 because as sources or global HTML string and now basically we start with our pictures so picture one picture 1 equals and now we have to import base64 so from base64 we're using p 64 encode and we are opening our picture now from the images folder here so images 1 PNG and we read the bytes our beam already to image and of course at the end decode it okay so we loaded our picture into the picture one variable and now we can create an iframe for this we need to from volume in or iframe separately let's do it like this so let's call it iframe one I call the iframe object and use our HTML string and wraps a picture inside the picture one of course and the iframe we have to define a width and a height so let's define it as all pictures are in 600 times 400 or 500 times 600 the first one is 600 times 400 so let's define the width 600 plus a little bit extra space and the height is 400 plus a little bit extra space now let's also define our pop-up one outside the marker pop-up one equals because basically now we have to specify a folium pop-up and within the pop-up we now hand over our iframe here which we defined up front and we should give it a max width that it doesn't increase the screen to 650 okay what's still missing is the icon so it's like I can one we will create a volume icon of color red and I can off Alif it can home to treason eyes I can hear now we can define the marker so mark 1 equals a folio marker with the location off and this is basically the location where I parked my castle the very first one here and notice here longitude and latitude are switched in the order within geo Drayson I also I have to do it the other way around like this so after we have our location we can specify our pop-up which we defined here's a pop-up one did I write it correctly yes so on the tooltip which we defined as a global tooltip here on top tooltip and our icon which we defined here I can one that I miss anything I hope not ah yes I missed something so of course we have to add it to our map and after what saves a map as index.html let's run it and see what it brings so let's run the script hope I didn't do any errors it works and let's refresh our page and as you can see we got a new marker here with our nice glyphicon home screen we have a tooltip click to see picture and when we click it we actually see our pictures actually here I parked our car and you see Django within the trunk okay let's move on to our second marker okay so for our second marker we can basically just copy the things we did for our first marker so let's do it like this copy this makes this a tool for all our variables and of course or two here because we want to low in the second picture which we want to wrap into the iframe which we want to wrap into the pop-up and for the I can we will do a slight change because let's create custom icons for pictures of Django here so let's do changes from volume icon icon to folium features custom I can and here we don't need to define a color but a path to the pictures or logo logo to PNG actually it is and we have to specify a size of sixties CR it's with brackets 60 like this so furthermore we need to change it here in the marker so we have to change it to pop up to tooltip is global and to icon to and add it to em let's save it and run it and hope it works oh I did something wrong here ah it's not sighs actually it's I can sighs sorry for that so let's try it again and it work so let's move back to our index.html refresh it and our okay I forgot to change the location so actually I didn't take the picture of jungle here directly it's a starting point I did it somewhere edits so let's take further first locations this one here perhaps and exchange it here and the marker like this and let's one more try go back to our map and yes perhaps II I took the picture and you can see it so let's move to our last marker and basically it's again the same let's copy all this stuff here let's change the variable to picture three because we are loading the third picture we have a third eye frame where we wrap our shirt picture into it we have a shirt pop-up where we put our third eye frame in and we have a shirt I can basically this I don't need to change it because but but I will just do it but actually it I will not change it I could also use I can to here or might make it a global variable or something like this to make things more easy but for now let's keep it like this and we define a mark of 3 here take the pop-up 3 keeps the global tooltip take the icon 3 and we have to change location so it was a little bit further so let's exchange it here that was the wrong one this one and this one and let's save it and run it and refresh it and hope it works yes actually here I got my second icon my second marker with the cert pick here of Django and actually I did an error here because actually this is the only picture which is which has a height of 600 so let's change it here in our iframe let's change the width to foreign plus 20 and the height to 600 plus 20 and run it one last time hopefully and refresher one last time click it and now you can see the line I've rame let's move around again starting point jungle in the car the next point jungle playing with another dog and last picture jungle posing for the camera that's it basically have fun try this out for your next road trip your next hiking tour your next walk with your dog or whatever and have fun in case of any questions feel free to ask them [Music]

Channel: Code & Dogs

Views: 21,012

Keywords: python, python3, javascript, leaflet, leaflet.js, folium, gps, longitude, latitude, programming, webdev, coding, development, geojson, geodata, 100daysofcode

Id: clP6W7W79MM

Length: 17min 57sec (1077 seconds)

Published: Wed Feb 27 2019