We're sorry but this page doesn't work properly without JavaScript enabled. Please enable it to continue.
Feedback

Challenges for displaying STAC Items and Assets in the browser

00:00

Formal Metadata

Title
Challenges for displaying STAC Items and Assets in the browser
Title of Series
Number of Parts
156
Author
Contributors
License
CC Attribution 3.0 Unported:
You are free to use, adapt and copy, distribute and transmit the work or content in adapted or unchanged form for any legal purpose as long as the work is attributed to the author in the manner specified by the author or licensor.
Identifiers
Publisher
Release Date
Language

Content Metadata

Subject Area
Genre
Abstract
At UP42 we are making extensive use of map visualizations of STAC Items and Assets, including vector files and very-high resolution imagery in our main React application. We will show our journey from simply displaying geometries on a using React Leaflet and HERE maps, to eventually adding high resolution previews and interactions. We will go through the main issues we had during this process and what we did to solve them, as well as presenting what we learned during this process. On this talk we will present how we handled displaying and interacting with GeoJson and GeoTIFF previews with the current open source tools. We will present some of our challenges like rendering COGs directly, handling different projections, authentication with Leaflet, performance, error handling, and integrating dynamic tiling services such as TiTiler.
Keywords
127
Service (economics)Process (computing)Interface (computing)Computer configurationComputing platformCore dumpProduct (business)Order (biology)TrailScale (map)Library catalogData managementFile formatExpert systemVideo game consoleSoftware development kitCodeMusical ensembleVideo game consoleLibrary catalogCartesian coordinate systemElectronic data processingPerspective (visual)DebuggerPresentation of a groupStack (abstract data type)Process (computing)Lecture/ConferenceMeeting/InterviewComputer animation
Domain nameAlgebraLibrary (computing)Euclidean vectorStack (abstract data type)Library (computing)MappingParallel portMereologyConnectivity (graph theory)TesselationSoftware repositoryCartesian coordinate systemMobile appVideo game consoleDomain nameGoodness of fit
Order (biology)Library catalogOrthogonalityOpticsPoint cloudSummierbarkeitSpacetimeControl flowTerm (mathematics)ACIDGeometryImage resolutionConfiguration spaceMultiplicationLibrary catalogInternet service providerPresentation of a groupSquare numberSatellite
Table (information)Level (video gaming)Process (computing)Term (mathematics)Data managementMereologyProcess (computing)
DampingTable (information)View (database)Sampling (music)Green's functionOpticsMusical ensembleHexagonProcess (computing)Streaming mediaRange (statistics)InformationLevel (video gaming)Library (computing)Musical ensemblePolygonPixelComputer animationXMLLecture/ConferenceMeeting/Interview
Uniform resource locatorElectronic visual displayPixelPixelSign (mathematics)Projective planeUniform resource locatorMedical imagingMultiplication signLibrary (computing)BitComputer animation
Location-based serviceFreewareGame theoryLibrary (computing)Service (economics)Projective planeCode2 (number)Connectivity (graph theory)Error messageFiber bundleWeb page
World Wide Web ConsortiumLevel (video gaming)TesselationService (economics)Polygon
GeometryDemosceneInteractive televisionPolygonOrder (biology)AreaInstance (computer science)ApproximationCuboidProcess (computing)MultiplicationShared memoryXML
Spring (hydrology)Plane (geometry)Rule of inferenceOpticsDigital filterGUI widgetMusical ensembleProcess (computing)Solomon (pianist)GradientLevel (video gaming)Element (mathematics)MathematicsFront and back endsLevel (video gaming)PixelWordConnectivity (graph theory)Medical imagingSquare numberPolygonUniform resource locatorDefault (computer science)Functional (mathematics)HookingPosition operatorAbsolute valueMusical ensembleAreaLibrary (computing)Software developerMultiplication signBuffer solutionRight angleInstance (computer science)Order (biology)Gene clusterCylinder (geometry)CuboidResultantCartesian coordinate systemEntire functionFigurate numberEvent horizonStack (abstract data type)Point (geometry)CASE <Informatik>Bit1 (number)Bound stateNumberWeb pageParameter (computer programming)State of matterComputing platformData managementGreatest elementDifferent (Kate Ryan album)Array data structureString (computer science)Electronic mailing listGeometryGame controllerZoom lensMeeting/InterviewLecture/ConferenceComputer animation
SoftwarePoint (geometry)Cartesian coordinate systemSoftwareComputer configurationOpen sourceMappingSoftware developerDecision theoryVector spaceView (database)TesselationJSONXMLLecture/ConferenceMeeting/Interview
Level (video gaming)Library (computing)Different (Kate Ryan album)CuboidHeegaard splittingPolygonCalculationFront and back endsOpen setDebuggerGeometryMixed realityWeb browserSet (mathematics)Right angleCASE <Informatik>Process (computing)AreaTesselationGoodness of fitInverter (logic gate)Point (geometry)MiniDiscMeeting/InterviewLecture/Conference
Computer-assisted translationComputer animation
Transcript: English(auto-generated)
So yeah, first of all a few disclaimers about this presentation. This is a very biased presentation. This is our own perspective from up 42 and how we dealt with things. It doesn't mean it's the right answer or this is the best answer but it's what we have to work with and it's also biased
because it's my perspective. This is how I felt was important and I chose to present you here today. And also the work that I'm displaying here is not only mine but it's the whole team. There's like a bunch of very talented people that work to develop what we have there. So to start we're going to be talking about the console today and this is the main front-end application
that we have and it deals with a lot of what up 42 has to offer. So ordering data from the catalog, getting tasking, managing your data, processing and all of that. This is handled in the console. This is our tech stack. We have
one React application. It's one Bono repo that is managed by several domains so we have multiple teams that work on it. This means that we can work in parallel without interfering with each other that much but it is one app with TypeScript because obviously TypeScript. We use material UI with some
modifications because we have our own custom component library that's based on it so it's not 100% material but it is close enough. We have lots of good stuff from that and some custom components that we built ourselves. And Leaflet, this is the part that is most relevant today because this is how
we handle our maps in our application. Everything is leaflet and this is what we're using for now. And here maps is not that relevant. This is just for the basic maps but that's where we get our tiles from so that's that. This is a screenshot of the catalog so here's where you can order existing
data from multiple providers that we have. You can move around the map and draw your own AOIs and get this data. That's tasking, same deal but here is for data that doesn't exist so you're pretty much asking a satellite to take a picture for you and that's how we do it and this is just a screenshot. I just
drew this nice little square there for the presentation and this is the data management. That is the part that I actually work with. This is from the data that you actually have purchased already regardless from where and this is where you actually use it. You can download it, run processing or do whatever it is that you do with your data. So on to the challenges and I'm
gonna start with the biggest one I guess that is more relevant that is actually displaying geotiff data on the map. So this wasn't super easy. So this is what it means. So of course when we get the stack items we don't only want
to see the polygons but we want to see what the data actually looks like. So see the pixels and all the different bands and all that. And we have geotiffs so why not just load them and just show them on the map right away which was what we tried first but it wasn't that easy. So we use this
library called GeoRasterLayer that works together with Leaflet but we had many issues with it. So this is we figured out that it was kind of niche. This wasn't evolved enough to be really used and there was
no real obvious solution. This is for Leaflet by the way. Other libraries might be able to handle that much much better but at the time with Leaflet it wasn't really doable. We had problems with projections. There was only one that it really liked, the others it was really bad. We had to
deal with sign URLs as well that was a bit of an issue too and also the transparency wasn't handled properly so we had some issues where some black pixels that was inside the image was also transparent and that's not exactly what we wanted. We're not really using this solution anymore but I would like to show this piece of code here mostly because the comment
that no one added there. So yeah we lazy loaded this component because the library was just too big and we didn't want to include that in the project and also this library didn't give us errors when things were
wrong especially for projections. I think there were some other issues as well so we just had a timeout if it didn't work in 15 seconds then we just give up and just saw a random error. So yes this wasn't the best solution and this was solved by back-end so they built a Tyler service and now everything is fine. We just get PNGs and these are just tiles that we
can render on the map no problem. So we are really not displaying directly the geotiffs on the map. Okay so some more issues with polygons and interactivity. This is some issues that we have that we have multiple
delivers that share the same the same polygon the same area and they get rendered on top of one another and of course this can happen when for instance you run some processing on something and then you have another you have the original delivery plus the processing on top and or multiple
orders that are the same then you have these and what we did there we had to create like only render one polygon so we grouped all the features that share the same bounding box which was good enough an approximation for that it's very unlikely that two polygons will have the same bounding box and we can see how many of them are overlapping and also that we don't start
adding up the transparencies right because if we have multiple polygons and all of them have like 10% transparency suddenly you have one solid polygon that you cannot see true anymore so that's how we fix that another challenge was the size of the polygons is especially for data
management because this is stuff that we already had and depending on the resume level we can't really see those polygons because they would be too tiny they would be like a pixel in the image and you don't see them so there is this function that gets when they are just this tiny percentage of the
visible area on the map then they turn into this markers or clusters this was done use this all this other library from leaflet that is called marker clusters if I'm not mistaken and it's it's not great development experience
there is a bit iffy and customizing how it looks and click events and all that was a bit challenging it works but it's it's not great it would be nice to have some other solution for that yes also for handling the different size of geometry so selecting the smaller ones when we get this data
from our second points it returns them ordered I think by date or it might even be able to sort it but it's not by area so we had to sort them by area before so that we have the bigger features on the bottom and the smallers on the top so this way we can select them all and this works most of the
times sometimes there are some weird results when you have some feature that has like a weird polygon like the first one that I show because this might have a much bigger area than it looks and they might end up below some of these big squares but for most of the time this works pretty well well this
is not exactly related to stack or polygons or anything but actually for a user for you want to have the actual coordinates of the map the state of the map saved in URL parameters this helps a lot so that we can share when you go to the map somewhere or those anything in this pages you can
share the URL directly with your team this helps a lot for QA when they found something that is wrong they can share with us and we can try and fix it because we can go directly where the problem is and of course it's not super easy to manage because we have to keep converting the numbers to strings
to arrays and so there is all of that but the end result is pretty nice and it's very useful for customer support as well also for customizing this map controls we as I said we have our custom component library and everything is custom designed so we want to show buttons that look
different add more more functionality in the map and more elements on top of it on leaflet is not super easy to get to customize the elements inside and or also to replace them you just can't easily replace like a button and put your own button instead so we hide a lot of custom of default
elements on leaflet and we put our own and then we just hook into the actual functions of how the map does and then attach that to our button so we override the whole thing it's a bit annoying because we have to put
everything absolute position so that it works correctly and it's it is challenging but again the end result works it's fine you wouldn't know that the amount of work that went into actually making buttons that that you can click on but they are there this is although this screenshot is not really
the best one to display but when you have some data you might want to show multiple bands at the same time on top of one another this is very useful for instance for change detection where you can see what what changed from the images that you that you wanted in this case I just picked up some random
infrared bands so they probably look the same but this is also a bit challenging with leaflet because there it is very sensitive to the order that you put things and you can't really move items once they are drawn so if you
want to change the order we have to re-render the list and it would be a bit challenging to go and start sorting things so right now we can display two layers at once and we get the most recent one on top but in the future we might want to be able to drag them change the order change
transparency and things like that but it's not it's not super easy to to handle that with leaflet and I guess this would be the last issue that yeah that anti-meridian as well as I learned here in this in this
conference the word is flat and it's a square but it's not really a square right it is mostly a cylinder when we have this leaflet because both sides they connect on the end and what happens is that if we have this area that you're trying to use in our stack search endpoint then the back end
really doesn't like it and it's it wants us to send some coordinates that are inside that box so what we do here is that we clamp the area that is valid because you also have some buffer around it so we clamp it to some valid areas and we send it to the back end so that it can return some some
data which is not exactly accurate as you can see in this screenshot we're looking at the whole Pacific and there is the entire United States there and there is nothing even though we have plenty of assets in the United States so we can only see this tiny one in Shanghai and there's probably some other I don't know in Europe somewhere that would be on the buffer so
yeah that is kind of a challenge and the solution for it of course would be to split this into two polygons either in the front end or in the back end figure out when so that the back end can handle it or do that for the back end when they can allow some results that are out of bounds but we
have not solved this problem so far because also customers haven't even noticed I think for most use case they have their own AOI so they upload directly the area that they really want to work with so no one is really just dragging around the map and looking at things so their AOIs would
work just fine and there we have no problem we also noticed that some other platforms have the same problem so it's not something that only we do it but it's it is out there but just keep it in mind if your application have the use case that this is important you might want to look into that it is
it might be a bit challenging to fix it either in front end or on the back end so yes what's next from us that's the main thing we are now ditching leaflet in favor of matbox because well it's not that leaflet sucks
or open-source sucks or anything like that but I think we've outgrown leaflet it's just that it was a very valid solution in the beginning and this application it has like I don't know five years or something started as a view application and then was rewritten into react and we kept a lot
of features that we have from the beginning we kept adding more and more features and we probably did all we could on leaflet so we did some research and realized that probably matbox was had all the features that
we have there will probably be other options some of them even in this room but that's the decision that we had that we made and in any way mean this leaflet is bad or anything it was perfectly valid for building well for building the entire application the company is there and it's running and people are using and they're paying us money to use their application so it
really does work but at some point we need to get something that is more robust and where we can easily use like vector tiles and use elevation and do a lot more than the combo that we have with leaflet and here maps can provide and with that one extra takeaway that that I have from this is
that while software is always evolving that's you can do whatever you can today but it's gonna be obsolete later in five years in six months in
one year it doesn't matter so whatever you do now you probably should be aware that things will change you will have to rewrite things again and then again and then again and then you retire that's kind of how it works with all software there is no way to just get the perfect one and also you cannot
really be too attached to any solution that you that you invest in because in a few years there might be something better there's I'm pretty sure there are people right now working on something that will make whatever decision that we make stupid in the next few years but that's that that's what it is working with software development I guess so thank you
all right thank you very much so now we have the opportunity to ask some questions
thank you for the talk that was inspiring I'm maintaining stack browser so I face all the same issues that you face and for example the idea was like the area calculation and sorting it is something that I didn't investigate yet but that seems like a good idea pretty much I came
to the same conclusion I did d-flat now or I'm about to do that and then going I'm going to open layers but I'm wondering like you've chosen map box JS did you consider map Libre and what were the like differences in those
libraries which led to choosing map box yes that's a good question and I cannot really answer truthfully because I wasn't 100% involved in this whole process but we did test a bunch of other libraries and map Libre may be on
the mix that was tested there but also we had people in the company that had experience with map box and were very happy about it and we would also be willing to pay for any solution especially because we are using here map still so we need the base map in any case we're going to be paying for those so that box would also provide that so that was the decision and but
as I said it doesn't mean it's the right one that's the one that we're making now maybe in the future it might prove to not be the best and then we migrate again to something else okay thank you for the talk I have
one question because a couple years ago I also had data sets where polygons
the anti-merigen like around New Zealand and like in the Pacific and back then that was a huge pain because a lot of library like it's not only the fronted libraries but also like the backend libraries like either they tell you that's an invalid geometry or they do things like they basically they mod 180 this and so you basically get the polygon the wrong way around
how do you deal with that do you have had this problem have you had this become better I mean we are using only our internal endpoints and the problem that we have is that the our endpoints they really want her the polygons to be inside those bumps so we kind of have to do that and as I
said we haven't really fixed it we just noticed the problem and it took us a while to figure out what it was because the we get the results and they're just in some other place in the map that you're not expecting but yeah I think I investigated some to try and and create something on the front end so
that split this polygons but it is not it's really not trivial it is something that yeah it should be better and I couldn't find any library or solution it was like that I searched but everyone was saying is like yeah just try and split the polygons but you kind of have to do that manually I guess which is not great any other questions hello thank you for your
talk regarding this anti meridian problem there is this nice library called the footprint facility 1.2 and it really works nice for example with Sentinel to tires crossing the anti meridian so I do recommend using it
thanks okay thank you good to know more questions all right then so thank
you again applause for him