Real-time Map Imagery Manipulation with Python, Slippy Maps, Flask, and Pillow: Building Interactive

foreign this is the last presentation of this block and then we have like some lunch break so I have here another add light part time hit up member so all of our homes we just seen yourself to a developer with over a 15 years of experiencing uh worked in lots of GIS projects it's gonna give a nice presentation about flask or full stack application in using tiles very interesting uh okay Owen it's with you 30 minutes two thank you uh thank you so much for joining me today um I'm really was really happy to see such a big geospatial Presence at the conference so that's that's exciting so as as Pedro was saying um a little bit about me I'm currently a senior software engineer working for anditi which is an organization that provides geospatial visualization and Analysis I've been a software engineer for over 15 years and I've worked on a variety of projects but I'm passionate about geospatial data management and delivery uh so the goal of uh this this presentation is to talk about transforming and optimizing large image data sets for dynamic use on a front-end interface so when I well I've been working I've worked for organizations in the past where we've we get large image data sets often from aerial photography um and what you can get it from you know aerial photography or satellite data and you get the files that you get from that are typically single large data sets and you know you need to be able to put them in a format that you could use so what we do is we take those large image data sets and we transform them into a slippy tile format and then we we store that data in a Cloud store and then we create an API endpoint to access that data and then we can also enhance the data through that API endpoint and manipulate that data in transition so you know why do we do this so when we get those large files sometimes those large files can be you know multiple gigabytes in size and it's pretty difficult to download all that data to your computer straight away so uh we we put it into this tiled format and this tiled format allows us to more easily stream that data to the end user um you would be probably familiar with this using similar Technologies like Google Maps which really um certainly created a big um you know industry in terms of providing you know rusted data for for General use and they were one of the original inventors of a slippy map tile format um and uh yeah it allows us to more easily access that data on a web app or a mobile device for this example I'm using a data set that I obtained from open aerial map open aerial map is a great open source repository of Aero imagery where you can you can download aerial imagery that other people put up online aerial map is a great example because it provides you know raw files raw Geo tests that are pre-built that you can you can download and you can test so if you if you wanted to try out some of this sort of stuff yourself or you know play around with some geospatial tools it just gives you the ability to to have some open imagery to be able to use for this particular example I'm using a town in Laos uh so um a bit more about the slippy tile map format so the slippy tile map format Works uh in a pyramid structure where you have at the top you have one tile that would represent a a large area so one tire would represent the entire Earth and then at the bottom where you have finer detail with tiles that represent close to the ground so at the top you could have a single tile all the way down to billions of tiles it could represent the higher detail at ground level these tiles are separated up into rows columns and zoom levels so nxy and Z coordinate so for for this example and there is a lot of geospatial libraries that you can you can use for manipulating roster data one particular tool that is uh is is great to use as well is called rust.io but for this example I'm actually using a tool called gdal the reason why I use gdal is because gdo is one of the underlying pinning Technologies of things like rust or IO um and uh so you you kind of have a bit more access to the functionality um so it gives me um in some cases it's given me a bit more freedom to to work with the data but for a lot of General cases things like raster are really good as well uh then I'm going to store the starter in AWS using the S3 and I'm also using Botto 3 which is part of the AWS SDK for python is a C plus plus project and we use Python bindings to leverage that technology so this is uh an example of how I'd use gdal warp and what it takes in is the tile bound so um we'll do we do a calculation to figure out what bounds uh the the tail the tail represents in this particular example looking at balance in 4326 because there are different projections um I guess the other aspect that I could go into as well is that um this uh this method also allows us to use data that's produced in different Native projections which is something that you know different systems use and produce especially at like different countries and regions and we can we can use this to essentially create like one format that allows all geospatial software to use so this uh in this example we've got those bounds produces the tiles in 256 by 256 pixels which is the standard size of a tile in the slippy map format although you can use five twelve by 512 for high definition tiles and then we use bottle three to upload the tiles so this is an example this is an example of uploading a a tile to uploading an image and uploading entail to an F3 S3 store although you could use this this type of Curry to essentially upload any type of file to uh an S3 store as well oh sorry let me break out of this for a second so I'm just going to run a script now and so this script I just wanted to show you kind of just to give you more of an active example of how you I'm running this script and this is uploading the tiles so you could see this as really as like two different processes so it's the tile pipeline of like creating that data and then the the visualization of creating the API to deliver that data and so I can I'll run this script now you can see that as the uh the script runs um it's gone through and it's created Tiles at different Zoom levels different Tiles at different Zoom levels and the output is in this map directory so now you can see that uh what it's taken is one big large file and then it's separated up into these individual map tiles so uh The Next Step we're going to look at is creating an API to modify the data in stream so what do I mean by that so what the what I'm what I want to be able to do is I want to be able to modify this data and change properties of the data but without saving it to a server so being able to to modify that data in the byte stream and be able to give that those those that real-time data update to the end user so we in our our system retrieves a tile from that data store then it's our API then uses pillow to modify that data and then that modified data gets then gets returned to the client so I'm just going to give you an example of this so this this tool that I'm using is a qjs and qjs is a tool that you can use to visualize map tiles it's also a great open source project so what I'm going to load first is this is actually the original file and that's one of the reasons why you can see those bands associated with the red green and blue band and this is yeah so this is the the original original data and it was a single file so I can zoom into that so now I'm going to come over here and I'm going to start my my flask API endpoint [Applause] and so what it's done here is it's retrieving the data from that store and and by no means am I giving you an example of great usable data in this presentation but this is an example of how I've taken that that original image from the data store and then I've brightened it up substantially but in no but this this data never actually had to be like saved to the device and then modified and then returned it was all done in that flight stream this is an example of doing just a a PNG overlay so I had a single PNG that was saved on the server and then as it came through the API it pasted the PNG over the top of the image that it retrieved from that data store this is something you could also I've just put a a simple PNG here but you could use you know polygons or Point Vector data and paste that over the top or any other assets that you would like to show on on your tiles and then lastly I was going to show you an example of applying a histogram now again you know I know it's actually doing the histogram to individual Tiles at the moment so it's essentially so you can see it's a bit patchy in terms of How It's displayed but I think what I really wanted to demonstrate by doing this is just the simple flexibility that you have so there's really nothing that you can't do with this data um so this is this is a very simple example of the API endpoint that we just used but I restricted it just to show you the um the way that actually brightens the data and just as I thought it would take a long time to go through all the other functions but see you can see here that we're retrieving those parameters so the layer name the zoom the row the column so we can locate that tile then we after we get that that inventory back from the S3 service we're applying that brightness filter directly to that data enhancing that data and then returning it directly back in the in the byte stream um so [Applause] uh after all of that what I was gonna I wanna what I'd really like to show you as well it's just an example of um you know one of the use cases that um you can use it use this data for so after you've created that API you can use that for um you know full stack development creating you know mapping applications where you could use custom raster data that could be retrieved and used by that that data source in this example we're using a ccmjs which utilizes the 3js library the JavaScript 3.js library to create a 3D globe on that 3D Globe then we can place that raster imagery this project was also created with react and I distributed the the front end onto an S3 bucket and the data is being delivered by a Lambda function on AWS foreign is provided by Bing Maps so that would be satellite imagery produced in the same using the same processors that we just saw so we're just going to zoom into the map okay so and here we've got that that map that we were looking at before but now we're seeing that all of the uh the tiles on this 3D globe and we can navigate around and just an example to show you so we're using that bing bing data service and that's the the quality of the data that they're producing uh from from satellite data and this is the aerial imagery that was produced by that data set you can see how much you can zoom in and see that that level of quality which I think is really quite good for um you know open source imagery there is a a few little hiccups in the data that I've seen But for something that was completely open source and available I thought it was really good and as part of this you can light it up and you can see the looking the wrong way yeah so you can that way you can combine different data sources which I wasn't going to go into today but you can see there's a there's a Terrain data source in the background then you've got that you can see that 2D imagery and see what is around those areas and you can also you know potentially like drape the uh the 2D imagery over the 3D terrain and other you know interesting way there is a lot of other interesting ways to use the data so I feel like I might have gone quite fast today but that was uh that was my full presentation um so uh thank you so much for uh for joining me today [Applause] because we finished earlier we can take questions so any questions from the audience and working so I have one here I'm just curious if you've looked at dynamically generating uh slippy tiles themselves from like an upstream data source so that you can avoid having to process all of that original data source have you looked at doing that sort of thing dynamically well sorry what was that like so so if you're pilling in some data like that and you've got and then you slice that up into tiles that's cool but what if the original data set is absolutely huge and you only want to bring in subsets of that dynamically can you generate the slippy tiles dynamically on demand uh yeah there is ways of doing that but I've actually found like especially with the large data sets it's it's more difficult um I've had success with creating larger image data stores on single servers and I can use a gdo and actually I think it you if you were looking for a you know like an ad hoc solution I can do I can you can potentially set up something that can cut and deliver those tiles on on one one server but in terms of actually being able to provide that service to a more distributed user base then I found that that it's um yeah it's just not not efficient enough so um but um but yeah if if you were just doing this for say for instance like an internal Network there is ways of just just doing it more like creating the data on the Fly and being able to keep that data in its original format any other question trying to find hands are up there I have to you go there cool so let's check on the Discord channel in the meanwhile yeah yeah I was gonna ask about the um when you overlay the logo as like a watermark if you could do geospecific and I think you've kind of answered this with your last slide here so if you uh yeah could you explain how you did the thank you because that's kind of like I assume annotating a single tile based on some conditional parameters or something like that oh sure actually the the thank you was part of the the the framework that I provided it wasn't wasn't the tiles but um the but you can do geo spatial specific data so you could overlay that with any sort of data that you want you know Vector data potentially other raster data if you wanted to layer like additional rusted so you know the possibilities are uh endless this uh this was a part of the uh the cesium framework so if I was to actually like go on the side okay I think I could you could do that if you did it further Upstream would that be in the generating the rest of I guess it would be would be or did you do that with the flask where you're kind of on the Fly manipulating it oh no so this is this is uh this is all part of the front end framework the um the CCM front-end framework but if you wanted to splice in other Geo type data would is that something you could do with the tiles so I think you've got to mentioned annotating it with some other bits yeah no absolutely and so would that be it'd be done through the flash type piece you had where you're doing the brightness and other bits because that was kind of applied to all tiles uh yeah so I mean as they've said the kind of the possibility is endless so I mean the the data that's coming through that the python API is like you're retrieving essentially like single flat tiles yeah um but in terms of the freedom that you have like using like utilizing pillow or other other libraries I think with the um uh uh you know but I didn't go into it entirely but when I was doing that histogram data was actually using a CV to do the histogram so I was actually second gate naming navigating around um pillow um but there is like endless possibilities of like how you can manipulate that data and how you can apply you know geospatial assets and then um you know retrieve it to that so you could do it at that layer because pillow is just sort of general image manipulation so you could do the Geo stuff at that quite a bit as well okay yeah I mean so I guess it and it really comes down to like efficiency so if you wanted to um if you wanted to do that manipulate manipulation there you could another service that you can use with uh you know geospatial data one of the more common um data sources is uh um like MBT Vector data tiles yeah um one of the great things about using like you know Vector data so actually having to be able to split up those two Services is um that you can have the vector data embedded within that tile and then being able to you know directly query that data in the front-end interface which is something you can't do with the roster data so generally with the products that I've made in the past um I typically do split that split those data sources up yeah and and you could do that in the previous desktop app you had but you'd also do that with cesium and have those two different layers so could you explain that just a little bit yeah sorry it's really weird okay oh there we go um so you could do that both in this front end as well so you kind of had the image data set and then have the vectors as a separate layer yeah so that and that would that would be typically done in like the front end framework that we use um you know I said for this one I'm using CCM uh J CCM JS which is um you know allows you to to be able to display um you know 3D data 2D data um but you know we uh I've I've also used like open layers and mapbox and other different front-end Frameworks where the the processes would be slightly different one of the things that I really do love about CCM is it's actually from my own experience it's the most difficult to use but it has the most freedom in what you can do with it cool thank you any more questions oh I've got one and then you okay cool cheers um so kind of tacking off the question um about the vector data and the rest of the data is it possible to apply a similar technique to the um the actual Terrain map itself and sort of patch in height data into the map um well with um I think if if I was to so yeah there's definitely different data data sources so you can have terrain data you can have 3D um you know 3D tiles which are you know essentially you can create like 3D buildings um and at the moment I work on a project where we we bring in lidar data or like you know Point data so and typically we combine those data sources like on on that front-end interface if um you can manipulate the terrain actually with the front-end framework so um the the front-end framework can manipulate that data as it comes in and say like for instance if you wanted to say in this particular area I don't want to display terrain you could just ask the front-end framework to remove that and then if you want to bring in another data source I'd recommend doing that more on the front end than the back end awesome thanks um you mentioned oh sorry yeah this is oh okay yeah sorry you mentioned that you applied that histogram to one of the pictures right one of the small tiles and you got those patchy results can you apply it on a much larger scale as well and then break it up afterwards or how would you do that yeah no it's a great question actually it's really what you saw was kind of um more or less up where I was up to in my own personal research so um what when I was you know experimenting with what uh what capabilities that I had I was able to create those histograms with those individual Tales I think that you know that's something that you possibly could do and actually be able to you know provide that histogram to large areas but that's something that I haven't experimented with yet but something I'm interested in experimenting with in the future thank you sorry if there's questions off topic um my team wants to self-host open street map tiles to be consumed by a leaflet client where should we begin so you want to use um open street map tiles and you want to use leaflet to be able to deliver them that's correct yeah um I mean I think if I was to tackle that project myself it would really just be like you know setting up a um you know a leaf lift project and then using the open street map tiles in that example that I showed you before that was uh you know open street maps uh here on the bottom so you know openstreetmaps has a open readily available API to be able to attain that data which is also rusted source which would have which can be you know constructed in a similar sort of fashion but essentially if you were just looking to get this data you know it's really just about going through that process of setting up the the leaflet system um you know personally I think that if I was going to do a project like that I would be I'd be looking at something like um open Street uh like open layers just to provide a bit more you know freedom in you know what how I could manipulate and display the data but you know at least that's still a great solution as well um but I think those those two technologies match up perfectly well so it's really just um I think there's any real challenges there all right so with that uh we ran out of time now but uh the Discord channel is always open for questions and if you can didn't pop up to check if there's any other questions about the talk so we're gonna now thank you ollie for this great presentation and here's our note in a mug for you as a thank you all right so

Channel: PyCon AU

Views: 356

Keywords: OliverHolmes, pyconau, pyconau_2023

Id: XaDGAnYUHrw

Length: 29min 39sec (1779 seconds)

Published: Thu Aug 24 2023