thallada/modmapper-web
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Improve heatmap layer coloring and opacity

Browse Source 
Also fix cell selection with heatmap layer disabled.
This commit is contained in:
Tyler Hallada 2022-01-17 17:10:59 -05:00
parent fb13ebfa6c
commit 8d94b68332
3 changed files with 18 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

24
components/Map.tsx
View File

@ -10,8 +10,8 @@ import ToggleLayersControl from "./ToggleLayersControl";
mapboxgl.accessToken = process.env.NEXT_PUBLIC_MAPBOX_TOKEN ?? ""; mapboxgl.accessToken = process.env.NEXT_PUBLIC_MAPBOX_TOKEN ?? "";
const colorGradient = new Gradient(); const colorGradient = new Gradient();
colorGradient.setGradient("#888888", "#00FF00", "#FFFF00", "#FF0000"); colorGradient.setGradient("#0000FF", "#00FF00", "#FFFF00", "#FFA500", "#FF0000");
colorGradient.setMidpoint(300); colorGradient.setMidpoint(360);
const Map: React.FC = () => { const Map: React.FC = () => {
const mapContainer = useRef<HTMLDivElement | null>( const mapContainer = useRef<HTMLDivElement | null>(
@ -212,6 +212,7 @@ const Map: React.FC = () => {
cellY: 50 - y, cellY: 50 - y,
label: `${x - 57}, ${50 - y}`, label: `${x - 57}, ${50 - y}`,
color: editCount ? colorGradient.getColor(editCount) : "#888888", color: editCount ? colorGradient.getColor(editCount) : "#888888",
opacity: editCount ? Math.min((editCount / 150) * 0.25, 0.5) : 0,
}, },
}); });
} }
@ -227,14 +228,21 @@ const Map: React.FC = () => {
id: "grid-layer", id: "grid-layer",
type: "fill", type: "fill",
source: "grid-source", source: "grid-source",
paint: {
"fill-opacity": 0,
},
},
"grid-labels-layer"
);
map.current.addLayer(
{
id: "heatmap-layer",
type: "fill",
source: "grid-source",
paint: { paint: {
"fill-color": ["get", "color"], "fill-color": ["get", "color"],
"fill-opacity": [ "fill-opacity": ["get", "opacity"],
"case",
["boolean", ["feature-state", "selected"], false],
0.5,
0.25,
],
"fill-outline-color": [ "fill-outline-color": [
"case", "case",
["boolean", ["feature-state", "selected"], false], ["boolean", ["feature-state", "selected"], false],

2
components/ToggleLayersControl.tsx
View File

@ -15,7 +15,7 @@ const ToggleLayersControl: React.FC<Props> = ({ map }) => {
useEffect(() => { useEffect(() => {
if (map.current && map.current.isStyleLoaded()) { if (map.current && map.current.isStyleLoaded()) {
map.current.setLayoutProperty( map.current.setLayoutProperty(
"grid-layer", "heatmap-layer",
"visibility", "visibility",
heatmapVisible ? "visible" : "none" heatmapVisible ? "visible" : "none"
); );

2
styles/Sidebar.module.css
View File

@ -4,7 +4,7 @@
left: 0; left: 0;
z-index: 1; z-index: 1;
height: 100%; height: 100%;
background-color: #f5f5f5; background-color: #fbefd5;
overflow-x: hidden; overflow-x: hidden;
width: 300px; width: 300px;
padding: 12px; padding: 12px;