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

State of GeoRasterLayer: A LeafletJS Plugin for Visualizing GeoTIFFs (and soon other rasters)

00:00

Formal Metadata

Title
State of GeoRasterLayer: A LeafletJS Plugin for Visualizing GeoTIFFs (and soon other rasters)
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
Publisher
Release Date
Language
Production Year2022

Content Metadata

Subject Area
Genre
Abstract
GeoRasterLayer is a LeafletJS Plugin for visualizing GeoTIFFs. This presentation will show live demos of new features and discuss the roadmap for the next couple of years.
Keywords
202
Thumbnail
1:16:05
226
242
State of matterComputer virusLibrary (computing)Web 2.0MappingComputer animation
Axiom of choiceLevel (video gaming)MassComputer configurationMappingCodeTwitterSoftware developerComputer animation
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
Information overloadService (economics)Plug-in (computing)Cartesian coordinate systemSystem callComputer animationProgram flowchart
Dressing (medical)CodeQuicksortComputer fileCore dumpCodeInformationString (computer science)Data compressionProjective planeGeometryRaster graphicsComputer animation
Revision controlRepository (publishing)Home pageInformationSource codeInstance (computer science)Axonometric projectionCoordinate systemPhysical systemCodeSinguläres IntegralInstallation artProjective planeInformationEmbedded systemComputer animation
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
Raster graphicsMereologyPixelCartesian coordinate systemVisualization (computer graphics)Service (economics)Auditory maskingMedical imagingInterpolationLine (geometry)Level (video gaming)Vector spaceRight angleComputer animation
MappingPixelAreaQuicksortAlpha (investment)Musical ensembleLevel (video gaming)CodeComputer animation
AreaAuditory maskingPixelCodePoint (geometry)Strategy gameCASE <Informatik>Computer animation
GeometryLevel (video gaming)Function (mathematics)Auditory maskingRevision controlInstallation artPixelRaster graphicsAxonometric projectionRepository (publishing)Home pageCartesian coordinate systemMappingWeb 2.0Computer animation
Event horizonDigital filterElement (mathematics)Video game consoleClique-widthContent (media)Ext functorTesselationAreaWeb 2.0Square numberLevel (video gaming)1 (number)PixelClique-widthGraphics tabletDynamical systemComputer animation
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)
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
know Ukrainian developers on Twitter and listen to their stories. What is Georaster Layer?
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
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
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
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
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
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,
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
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.
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.
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
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
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.
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.
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?
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
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
to have to compute it while we're doing the rendering. The table on the right. Okay.
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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.
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
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
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
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
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.
Thank you. I look forward to q&a.