Challenges for displaying STAC Items and Assets in the browser
This is a modal window.
The media could not be loaded, either because the server or network failed or because the format is not supported.
Formal Metadata
| Title |
| |
| 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 | 10.5446/68437 (DOI) | |
| Publisher | ||
| Release Date | ||
| Language |
Content Metadata
| Subject Area | ||
| Genre | ||
| Abstract |
| |
| Keywords |
FOSS4G Europe 2024 Tartu20 / 156
6
33
35
53
55
59
61
67
70
87
97
99
102
103
104
105
107
111
121
122
123
124
125
126
127
128
134
144
150
151
155
00:00
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
00:57
Domain nameAlgebraLibrary (computing)Euclidean vectorStack (abstract data type)Library (computing)MappingParallel portMereologyConnectivity (graph theory)TesselationSoftware repositoryCartesian coordinate systemMobile appVideo game consoleDomain nameGoodness of fit
01:56
Order (biology)Library catalogOrthogonalityOpticsPoint cloudSummierbarkeitSpacetimeControl flowTerm (mathematics)ACIDGeometryImage resolutionConfiguration spaceMultiplicationLibrary catalogInternet service providerPresentation of a groupSquare numberSatellite
02:24
Table (information)Level (video gaming)Process (computing)Term (mathematics)Data managementMereologyProcess (computing)
02:42
DampingTable (information)View (database)Sampling (music)Green's functionOpticsMusical ensembleHexagonProcess (computing)Streaming mediaRange (statistics)InformationLevel (video gaming)Library (computing)Musical ensemblePolygonPixelComputer animationXMLLecture/ConferenceMeeting/Interview
03:47
Uniform resource locatorElectronic visual displayPixelPixelSign (mathematics)Projective planeUniform resource locatorMedical imagingMultiplication signLibrary (computing)BitComputer animation
04:19
Location-based serviceFreewareGame theoryLibrary (computing)Service (economics)Projective planeCode2 (number)Connectivity (graph theory)Error messageFiber bundleWeb page
04:53
World Wide Web ConsortiumLevel (video gaming)TesselationService (economics)Polygon
05:14
GeometryDemosceneInteractive televisionPolygonOrder (biology)AreaInstance (computer science)ApproximationCuboidProcess (computing)MultiplicationShared memoryXML
06:18
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
13:29
SoftwarePoint (geometry)Cartesian coordinate systemSoftwareComputer configurationOpen sourceMappingSoftware developerDecision theoryVector spaceView (database)TesselationJSONXMLLecture/ConferenceMeeting/Interview
16:02
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
20:42
Computer-assisted translationComputer animation
Transcript: English(auto-generated)
00:01
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
00:20
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
00:42
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
01:02
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
01:22
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
01:42
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
02:03
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
02:22
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
02:46
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
03:03
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
03:25
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
03:44
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
04:01
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
04:22
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
04:40
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
05:02
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
05:24
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
05:44
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
06:05
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
06:26
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
06:41
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
07:00
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
07:22
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
07:43
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
08:00
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
08:24
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
08:41
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
09:03
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
09:26
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
09:40
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
10:03
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
10:23
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
10:41
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
11:03
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
11:23
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
11:42
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
12:04
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
12:25
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
12:46
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
13:04
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
13:23
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
13:45
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
14:05
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
14:21
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
14:43
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
15:10
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
15:20
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
15:40
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
16:05
all right thank you very much so now we have the opportunity to ask some questions
16:25
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
16:46
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
17:02
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
17:21
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
17:47
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
18:15
one question because a couple years ago I also had data sets where polygons
18:21
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
18:43
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
19:03
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
19:20
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
20:04
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
20:22
thanks okay thank you good to know more questions all right then so thank
20:43
you again applause for him