State of GeoRasterLayer: A LeafletJS Plugin for Visualizing GeoTIFFs (and soon other rasters)
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 | 351 | |
| Author | ||
| 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/69026 (DOI) | |
| Publisher | ||
| Release Date | ||
| Language | ||
| Production Year | 2022 |
Content Metadata
| Subject Area | ||
| Genre | ||
| Abstract |
| |
| Keywords |
FOSS4G Firenze 2022218 / 351
1
7
13
22
25
31
33
36
39
41
43
44
46
52
53
55
58
59
60
76
80
93
98
104
108
127
128
133
135
141
142
143
150
151
168
173
176
178
190
196
200
201
202
204
211
219
225
226
236
242
251
258
263
270
284
285
292
00:00
State of matterComputer virusLibrary (computing)Web 2.0MappingComputer animation
00:22
Axiom of choiceLevel (video gaming)MassComputer configurationMappingCodeTwitterSoftware developerComputer animation
00:45
Plug-in (computing)Computer-generated imageryAxonometric projectionStandard deviationCovering spacePolarization (waves)Computer iconGoodness of fitPoint cloudLevel (video gaming)Semiconductor memoryMultiplication signData conversionComputer configurationComputer fileDifferent (Kate Ryan album)Plug-in (computing)Projective planeCrash (computing)Web browser1 (number)Web 2.0InformationOpen setLibrary (computing)Cartesian coordinate systemMedical imagingRaster graphicsComputer animation
03:12
Information overloadService (economics)Plug-in (computing)Cartesian coordinate systemSystem callComputer animationProgram flowchart
03:35
Dressing (medical)CodeQuicksortComputer fileCore dumpCodeInformationString (computer science)Data compressionProjective planeGeometryRaster graphicsComputer animation
04:43
Revision controlRepository (publishing)Home pageInformationSource codeInstance (computer science)Axonometric projectionCoordinate systemPhysical systemCodeSinguläres IntegralInstallation artProjective planeInformationEmbedded systemComputer animation
05:05
VolumenvisualisierungMaxima and minimaNumberPixelPosition operatorPoint (geometry)SatelliteMedical imagingOptical disc driveRandomizationMathematicsTouchscreenGraph coloringTesselationAreaRaster graphicsStatisticsDifferent (Kate Ryan album)Order (biology)Scaling (geometry)Table (information)CalculationRange (statistics)Level (video gaming)InformationArtistic renderingComputer animation
08:21
Raster graphicsMereologyPixelCartesian coordinate systemVisualization (computer graphics)Service (economics)Auditory maskingMedical imagingInterpolationLine (geometry)Level (video gaming)Vector spaceRight angleComputer animation
09:42
MappingPixelAreaQuicksortAlpha (investment)Musical ensembleLevel (video gaming)CodeComputer animation
10:12
AreaAuditory maskingPixelCodePoint (geometry)Strategy gameCASE <Informatik>Computer animation
10:39
GeometryLevel (video gaming)Function (mathematics)Auditory maskingRevision controlInstallation artPixelRaster graphicsAxonometric projectionRepository (publishing)Home pageCartesian coordinate systemMappingWeb 2.0Computer animation
10:57
Event horizonDigital filterElement (mathematics)Video game consoleClique-widthContent (media)Ext functorTesselationAreaWeb 2.0Square numberLevel (video gaming)1 (number)PixelClique-widthGraphics tabletDynamical systemComputer animation
12:02
Keilförmige AnordnungComputer-generated imageryASCIIGraphics processing unitOperator (mathematics)Raster graphicsWeb 2.0QuicksortNeuroinformatikAlgorithmSelf-organizationDifferent (Kate Ryan album)GeometryCompilation albumTesselationTrailMedical imagingAsynchronous Transfer ModeProjective planeMedianComputer animation
Transcript: English(auto-generated)
00:00
Hello, everyone. So before I describe this Leaflet plugin, I should describe what Leaflet is. And I'll be quick. I'm sure a lot of you already know. It's a JavaScript library for easily creating web maps. That's an example. You see the code below. Really
00:39
know Ukrainian developers on Twitter and listen to their stories. What is Georaster Layer?
00:48
It's a plugin for Leaflet, among many great plugins, for displaying geo-referenced images. For example, cloud-optimized geotiffs. Georaster Layer is built from the ground up to be
01:02
memory safe, which means it won't crash your browser. It can display geotiffs that are hundreds of megabytes. It has a bunch of features. I'm going to go over four of
01:24
the new ones. But I also want to leave time for questions, because I'm sure it's going to get I have a good conversation. So the first problem that we've solved recently
01:42
is the earth is not flat. I really wish it was. Geotiff files can come in thousands of different standard projections. And that's really good, because it preserves the quality
02:00
of the data. For example, you could have a land cover dataset for the whole world, which would be in 4326. And then you can see that you might have polar ice caps in UPS or Landsat and UTM. Really thousands of these. I just like manually creating
02:21
these icons, so I didn't want to create a thousand. So one of the options for reprojection, when you're visualizing, so your TIF might be in universal polar stereographic. That's not a good example. Maybe UTM and you're trying to display it on a web Mercator map,
02:44
you need to reproject it. So one of the options is to fetch projection information from epsg.io, which is really amazing. There's actually an example on open layers documentation on how to do this. And it really works. But geo raster layer for Leaflet is a library
03:08
that is used in a bunch of applications. So it would if each of those applications that's using the Leaflet plugin makes a call to epsg.io, it might overload the service.
03:29
Especially if everyone comes out of this wanting to use it. But if you don't, then we're fine. So the solution that we have here is epsg.io actually has a Docker container.
03:49
So you can just pull that down locally. And create like a CSV or some sort of file that has all of the projection information. This isn't including datum grids. But just
04:04
like the core projection strings. And then we're going to compress it. We're going to just really lower the file size using JSON code compression. JSON code compression basically
04:22
converts, creates JavaScript code that will create whatever you give it. So it's easily integrated into JavaScript projects. And then we're going to embed it in the geo raster layer for Leaflet package. And you can, too.
04:46
So if this sounds like fun, you should try it out and import the Proj4JS definitions to embed projection information in your own project. I also expect people have ideas on like a hundred other ways to solve this problem. And I look forward to the Q&A.
05:06
So problem number two. And this question is for the audience. So I hand you a pixel and its value is 10,000. What color should it be? Who wants to take a stab at this?
05:21
Yes. I love the positivity. So what information would you want? Like what questions would you want to ask in order to decide what color in grayscale you should choose for
05:41
a value of 10,000? Yes. So someone said minmax. Yeah. And then look at the minmax for the whole raster. Yeah. You guys got it. So we don't have them in max. So we're going
06:05
to have to compute it while we're doing the rendering. The table on the right. Okay.
06:28
So on the right, we see the history of the statistical calculations. So when we've loaded and rendered one tile, we've calculated the min and max for just that tile. So we
06:51
start loading our map, we're just going to have one tile to start. And so we calculate the min and max there. And you see that there's a range of 16,000 something. And
07:02
so when we want to scale our value of 10,000, we're going to kind of put in black and white. And it will be, you know, that color. And then when you go to tile 2, you see that oh, in this area of our image, the minimum value is lower than it was. We've never seen
07:26
it this low before. So we're going to adjust our statistics. And then you scale it and whoa, it's gone up 10. But if you actually look at the color, I mean, I don't know about you guys, but I can't really tell the difference. So you just keep doing
07:42
that for all the tiles. And at some point, you reach a point where, like, it really depends on the data, but like if it's a satellite image, odds are there aren't just completely random color changes that, you know, after maybe 10 tiles you've loaded. And that might take up a lot of your screen. You're not going to have any
08:06
big changes in the min max, maybe none after that. I feel like Vincent wants to say something. But for the Q&A. So the second problem that we solved was
08:28
masking. So this is an example that comes from I kind of clipped some images out of Gattis, which is an application from the U.S. Department of
08:41
Agriculture. It's a really amazing application. You should Google it. And so I kind of just used their visualization service to kind of show what this means. So on the first image on the left, that's a raster that's unmasked. You can tell it's kind of slanted, so there's some interpolation going on. But
09:03
the rasters are pixels, so it's got straight edges. But coastlines don't have straight edges. So you have this pixel that's kind of covering part of the coast kind of, you know, it looks gross. So you do an ocean mask, which
09:21
is this is a vector polygon, and you're covering up the ocean, and it makes it look nice. But what if you have a really nice base map and you're losing that base map by covering it? I mean, that would be such a shame, right? So I got a solution for you. And this is what we did at
09:41
GeoRaster later for Leaflet. So we converted every pixel that's outside of our sort of area of interest to zero in the alpha band. So the data is still there, just the transparency value is zero, so it's going
10:03
to be transparent, and it will let the base map shine through. So especially for all of you who work with base maps, I mean, you want to see your work. And this is the code for it. It's pretty simple. Obviously, this isn't the internals, but for you to do it, you want to
10:21
do two things. Point to your mask, and then say mask strategy that's inside or outside. So in this case, we want to mask or hide the pixels outside the United States, because that's such an American thing to do. And so you can, too. If you're, you know, you have an
10:45
application, you're looking at your country, and you don't want to show NDVI values outside of your country, you can apply that as well. Okay. So this is a fun one. The way web maps work is, you
11:07
know, slippy map tiles. There's these big squares, right? But what if your geotiff doesn't take up the whole square? So, like, I mean, I can't even reach the top there. So why not
11:24
just grab pixels for this area? And so that's what we do. And sorry, we in the way to, I guess, make this happen, is to pad it. So I think it's one of these ones, it's saying it's
11:43
like 200 pixels from the top. So we need to pad it because if we don't, it's going to snap up to the top. And we're just going to say the height and width. So the phrase that I'm calling it is dynamic tile sizing, but maybe we can call it something else too. And then so we have a roadmap.
12:06
We want to improve sort of the scaling algorithms. And we want to support a bunch of different geo referenced images and czar PM tiles, comp tiles are really interesting. So
12:24
we're tracking on that and we want to explore supporting that. Web GL is really performant. So we want to use Web GL when it's available. A lot of people use well, actually, by show of hands, who here has used react
12:42
leaflet? Okay, awesome. Yeah, so that it's catching on and more and more people are using it. And so we get a request to support that. So we're looking at what's like a maintainable way to do that. There's different resampling algorithms, like median, and mode and stuff like that. And
13:08
so we want to add that for people who who care about the details. And then we want to move more and more CPU operations to web workers. It's nice in the winter when your
13:23
computer overheats, but but not not not good in the summer. So and then and then what are your ideas? If you want to learn more, I can go to this GitHub organization. It's got geo raster layer for leaflet and other projects.
13:42
Thank you. I look forward to q&a.