OpenWaterFoundation / owf-app-infomapper-ng

Open Water Foundation InfoMapper web application for menu-driven maps and visualizations, using Angular
GNU General Public License v3.0
1 stars 2 forks source link

Legend for raster has colors that are lighter than the map #363

Open smalers opened 3 years ago

smalers commented 3 years ago

I tried to fix the issue where raster map shows lines at the edges of pixels, perhaps due to Leaflet overlaying the edges on adjoining cells and somehow combining the colors to result in darker colors. I set the width of the line to zero, as follows. I also tried -1 for width with same result. I don't know if there is a way to specify "no color" (not the same as white) for outline color but such a special value might help.

# Category classification table for Municipal Land Development raster.
# - the value corresponds to raster data value for year
# - set colors to indicate red for most immediate development pressure
valueMin,valueMax,color,opacity,fillColor,fillOpacity,weight,label
# 2018 Current - Black (might change to gray)
-Infinity,<=2018,#000000,0.3,#000000,0.3,0,"<= ${valueMax}"
# 2019-2020 Near-term red
>=2019,<=2020,#ff0000,0.3,#ff0000,0.3,0,"${valueMin} - ${valueMax}"
# 2021-2025 red-orange
>=2021,<=2025,#ff4500,0.3,#ff4500,0.3,0,"${valueMin} - ${valueMax}"
# 2026-2030 orange
>=2026,<=2030,#ffa500,0.3,#ffa500,0.3,0,"${valueMin} - ${valueMax}"
# 2031-2035 orange-yellow
>=2031,<=2035,#f8d568,0.3,#f8d568,0.3,0,"${valueMin} - ${valueMax}"
# 2036-2040 yellow
>=2036,<=2040,#ffff00,0.3,#ffff00,0.3,0,"${valueMin} - ${valueMax}"
# 2041-2045 yellow-green
>=2041,<=2045,#adff2f,0.3,#adff2f,0.3,0,"${valueMin} - ${valueMax}"
# 2046-2050 green
>=2046,Infinity,#00ff00,0.3,#00ff00,0.3,0,">= ${valueMin}"
# No data - fully transparent
Nodata,Nodata,#ffffff,0.0,#ffffff,0.0,0,"No data"
# Use the following to clearly see no data.
#Nodata,Nodata,#0000ff,1.0,#0000ff,1.0,0,"No data"

This does not fix the issue, although it may improve in some cases. However, this points out that the colors used in the legend are not matching those in the map layer. The colors in the legend are too light. I also tried to try different background layers to see if that impacted the color.

Unfortunately, after trying different background layers, the raster failed to draw, although it seemed to perhaps be drawing behind the background layer, based on watching the refresh. Selecting the Top USGS layer caused this issue and since it is the last layer maybe there is logic that is not properly handling the size of layer array?

image

smalers commented 3 years ago

The InfoMapper is using HTML 5 canvas, which I think uses "alpha" (transparency), whereas Leaflet uses opacity. These are opposite of each other. See the following to convert. It is pretty simple. Hopefully this solves the issue. It might require some additional scaling if dealing with values 0-255.

https://stackoverflow.com/questions/60956245/transparency-to-opacity-conversion

Nightsphere commented 3 years ago

After spending some time messing around with the above formula, I'm still confused why I'm getting drastically different opacities on the map. Here is a screenshot of the map when using the original code with no changes:

image

Honestly they both look spot on to me, but I can clearly see a difference between them in the picture from the comment above, so I'm not sure what I should do. Changing the opacity or transparency of either of them using the formula will change the opacity to resemble the problematics image from Steve. Unless both of these images seem off/wrong and it's a monitor issue?