Skip to content

Commit

Permalink
Styles
Browse files Browse the repository at this point in the history
  • Loading branch information
@mbarrenechea
mbarrenechea committed Nov 28, 2023
1 parent d381afe commit 9471ab6
Show file tree
Hide file tree
Showing 5 changed files with 92 additions and 118 deletions.
4 changes: 3 additions & 1 deletion client/src/app/(app)/page.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,9 @@ export default function HomePage() {
<div className="relative z-10 h-full w-full bg-white">
<div className="h-full overflow-auto">
<div className="space-y-5 px-5 py-10">
<h1 className="font-metropolis text-3xl tracking-tight">Explore datasets</h1>
<h1 className="font-metropolis text-3xl tracking-tight text-gray-700">
Explore datasets
</h1>

<div className="space-y-5">
<DatasetsSearch />
Expand Down
2 changes: 1 addition & 1 deletion client/src/app/(app)/projects/page.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,7 @@ export default function ProjectsPage() {
<div className="relative z-10 h-full w-full bg-white">
<div className="h-full overflow-auto">
<div className="space-y-5 px-5 py-10">
<h1 className="font-metropolis text-3xl tracking-tight">Projects</h1>
<h1 className="font-metropolis text-3xl tracking-tight text-gray-700">Projects</h1>

<div className="space-y-5">
<ProjectsFilters />
Expand Down
8 changes: 7 additions & 1 deletion client/src/containers/map/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -21,7 +21,7 @@ export default function MapContainer({ id = "default" }: { id?: string }) {
const { [id]: map } = useMap();

const [bbox, setBbox] = useSyncBbox();
const [, setCountry] = useSyncCountry();
const [country, setCountry] = useSyncCountry();
const HOVER = useRef<mapboxgl.MapboxGeoJSONFeature | null>(null);

const handleMapViewStateChange = () => {
Expand Down Expand Up @@ -97,6 +97,12 @@ export default function MapContainer({ id = "default" }: { id?: string }) {
(f) => f.layer.source === "countries-source" || f.layer.source === "projects-source",
);

if (!COUNTRY_FEATURE) return;

if (country === COUNTRY_FEATURE?.properties?.iso3) {
return setCountry(null);
}

setCountry(COUNTRY_FEATURE?.properties?.iso3 || null);
}
};
Expand Down
194 changes: 80 additions & 114 deletions client/src/containers/map/layer-manager/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -61,7 +61,7 @@ const LayerManager = () => {
id: "countries-layer-line",
type: "line",
paint: {
"line-color": ["case", ["==", ["get", "iso3"], country], "#0095CB", "#777"],
"line-color": ["case", ["==", ["get", "iso3"], country], "#333", "#777"],
"line-opacity": 1,
"line-width": [
"case",
Expand All @@ -78,123 +78,89 @@ const LayerManager = () => {
/>

{pathname === "/projects" && (
<>
{/* <CountriesLayer
id="project-countries"
config={{
styles: [
{
id: "p-countries-layer-line",
type: "line",
paint: {
"line-color": "#000",
"line-opacity": 1,
"line-width": [
"case",
["==", ["get", "iso3"], country],
2,
["boolean", ["feature-state", "hover"], false],
1,
0.5,
],
},
<ProjectsLayer
id="projects"
config={{
styles: [
{
id: "projects-layer-circle",
type: "circle",
paint: {
"circle-color": [
"case",
["==", ["get", "iso3"], country],
"#5dc22c",
["boolean", ["feature-state", "hover"], false],
"#5dc22c",
"#78D64B",
],
"circle-radius": [
"interpolate",
["linear"],
["get", "projects"],
0,
10,
100,
20,
],
"circle-stroke-color": "#fff",
"circle-stroke-width": 2,
"circle-stroke-opacity": ["interpolate", ["linear"], ["zoom"], 3, 0, 4, 1],
"circle-opacity": ["interpolate", ["linear"], ["zoom"], 3, 0, 4, 1],
},
],
}}
/> */}

<ProjectsLayer
id="projects"
config={{
styles: [
{
id: "projects-layer-circle",
type: "circle",
paint: {
"circle-color": [
"case",
["==", ["get", "iso3"], country],
"#5dc22c",
["boolean", ["feature-state", "hover"], false],
"#5dc22c",
"#78D64B",
],
"circle-radius": [
"interpolate",
["linear"],
["get", "projects"],
0,
10,
100,
20,
],
"circle-stroke-color": "#fff",
"circle-stroke-width": 2,
"circle-stroke-opacity": ["interpolate", ["linear"], ["zoom"], 3, 0, 4, 1],
"circle-opacity": ["interpolate", ["linear"], ["zoom"], 3, 0, 4, 1],
},
},
{
id: "projects-layer-label",
type: "symbol",
paint: {
"text-opacity": ["interpolate", ["linear"], ["zoom"], 3, 0, 4, 1],
},
{
id: "projects-layer-label",
type: "symbol",
paint: {
"text-opacity": ["interpolate", ["linear"], ["zoom"], 3, 0, 4, 1],
},
layout: {
"text-field": ["get", "projects"],
"text-size": 12,
"text-allow-overlap": true,
"text-ignore-placement": true,
},
layout: {
"text-field": ["get", "projects"],
"text-size": 12,
"text-allow-overlap": true,
"text-ignore-placement": true,
},
{
id: "projects-heat",
type: "heatmap",
maxzoom: 9,
paint: {
// Increase the heatmap weight based on frequency and property magnitude
"heatmap-weight": [
"interpolate",
["linear"],
["get", "projects"],
0,
0,
5,
1,
],
// Increase the heatmap color weight weight by zoom level
// heatmap-intensity is a multiplier on top of heatmap-weight
"heatmap-intensity": ["interpolate", ["linear"], ["zoom"], 0, 1, 9, 3],
// Color ramp for heatmap. Domain is 0 (low) to 1 (high).
// Begin color ramp at 0-stop with a 0-transparancy color
// to create a blur-like effect.
"heatmap-color": [
"interpolate",
["linear"],
["heatmap-density"],
0,
"rgba(255,255,0,0)",
0.2,
"rgb(240,235,255)",
0.4,
"rgb(209,229,255)",
0.6,
"rgb(219,253,199)",
0.8,
"rgb(138,239,98)",
1,
"rgb(24,178,43)",
],
// Adjust the heatmap radius by zoom level
"heatmap-radius": ["interpolate", ["linear"], ["zoom"], 0, 20, 4, 40],
// Transition from heatmap to circle layer by zoom level
"heatmap-opacity": ["interpolate", ["linear"], ["zoom"], 3, 1, 4, 0],
},
},
{
id: "projects-heat",
type: "heatmap",
maxzoom: 9,
paint: {
// Increase the heatmap weight based on frequency and property magnitude
"heatmap-weight": ["interpolate", ["linear"], ["get", "projects"], 0, 0, 5, 1],
// Increase the heatmap color weight weight by zoom level
// heatmap-intensity is a multiplier on top of heatmap-weight
"heatmap-intensity": ["interpolate", ["linear"], ["zoom"], 0, 1, 9, 3],
// Color ramp for heatmap. Domain is 0 (low) to 1 (high).
// Begin color ramp at 0-stop with a 0-transparancy color
// to create a blur-like effect.
"heatmap-color": [
"interpolate",
["linear"],
["heatmap-density"],
0,
"rgba(255,255,0,0)",
0.2,
"rgb(240,235,255)",
0.4,
"rgb(209,229,255)",
0.6,
"rgb(219,253,199)",
0.8,
"rgb(138,239,98)",
1,
"rgb(24,178,43)",
],
// Adjust the heatmap radius by zoom level
"heatmap-radius": ["interpolate", ["linear"], ["zoom"], 0, 20, 4, 40],
// Transition from heatmap to circle layer by zoom level
"heatmap-opacity": ["interpolate", ["linear"], ["zoom"], 3, 1, 4, 0],
},
],
}}
/>
</>
},
],
}}
/>
)}

{/*
Expand Down
2 changes: 1 addition & 1 deletion client/src/containers/projects/item.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -41,7 +41,7 @@ const ProjectsItem = (project: ProjectListResponseDataItem) => {
<span className="block">{pillar?.data?.attributes?.name}</span>
</h3>

<h2 className="font-metropolis text-lg font-semibold text-gray-800 group-hover:underline">
<h2 className="font-metropolis font-semibold text-gray-700 group-hover:underline">
{project?.attributes?.name}
</h2>

Expand Down

0 comments on commit 9471ab6

Please sign in to comment.