Skip to content

Commit

Permalink
Refactor Map component to follow compnent structure
Browse files Browse the repository at this point in the history
  • Loading branch information
@b18050
b18050 committed Sep 27, 2024
1 parent f352154 commit 7721787
Showing 1 changed file with 94 additions and 109 deletions.
203 changes: 94 additions & 109 deletions assets/js/Ioda/components/map/Map.js
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,5 @@
import React, { Component } from "react";
import React, {useEffect} from "react";
import { useState } from "react";
import { Map, TileLayer, GeoJSON } from "react-leaflet";
import { humanizeNumber } from "../../utils";
import {
Expand All @@ -10,160 +11,144 @@ import {
import MapLegend from "./MapLegend";

const mapAccessToken =
"pk.eyJ1Ijoid2ViZXIwMjUiLCJhIjoiY2tmNXp5bG0wMDAzaTMxbWQzcXQ1Y3k2eCJ9.NMu5bfrybATuYQ7HdYvq-g";
"pk.eyJ1Ijoid2ViZXIwMjUiLCJhIjoiY2tmNXp5bG0wMDAzaTMxbWQzcXQ1Y3k2eCJ9.NMu5bfrybATuYQ7HdYvq-g";

const DEFAULT_NONE = "#f2f2f0";

class TopoMap extends Component {
constructor(props) {
super(props);
this.state = {
hoverName: "",
hoverScore: 0,
hoverTooltipDisplay: false,
screenWidthBelow680: false,
};
}
const TopoMap = ({ handleEntityShapeClick, hideLegend, propBounds, topoData, scores, entityType }) => {
const [hoverName, setHoverName] = useState("");
const [hoverScore, setHoverScore] = useState(0);
const [hoverTooltipDisplay, setHoverTooltipDisplay] = useState(false);
const [screenWidthBelow680, setScreenWidthBelow680] = useState(false);

componentDidMount() {
window.addEventListener("resize", this.resize.bind(this), {
passive: true,
});
}
useEffect(() => {
window.addEventListener('resize', resize, { passive: true });

resize() {
// Cleanup function
return () => {
window.removeEventListener('resize', resize);
};
}, []);

const resize = () => {
let screenWidthBelow680 = window.innerWidth <= 680;
if (screenWidthBelow680 !== this.state.screenWidthBelow680) {
this.setState({
screenWidthBelow680: screenWidthBelow680,
});
if (screenWidthBelow680 !== screenWidthBelow680) {
setScreenWidthBelow680(screenWidthBelow680)
}
}

onEachFeature = (feature, layer) => {
const onEachFeature = (feature, layer) => {
layer.on({
mouseover: (e) => this.mouseOverFeature(e, feature),
mouseout: (e) => this.mouseOutFeature(e),
click: () => this.clickFeature(feature),
mouseover: (e) => mouseOverFeature(e, feature),
mouseout: (e) => mouseOutFeature(e),
click: () => clickFeature(feature),
});
};

mouseOverFeature = (e, feature) => {
this.setState(
{
hoverName: feature.properties.name,
hoverScore: feature.properties.score
? humanizeNumber(feature.properties.score)
: 0,
hoverTooltipDisplay: true,
},
() => {
let hoverColor =
e.target.options && e.target.options.fillColor
const mouseOverFeature = (e, feature) => {

setHoverName(feature.properties.name);
setHoverScore(feature.properties.score ? humanizeNumber(feature.properties.score) : 0);
setHoverTooltipDisplay(true);
let hoverColor =
e.target.options && e.target.options.fillColor
? shadeColor(e.target.options.fillColor, -10)
: shadeColor(DEFAULT_NONE, -10);
e.target.setStyle({
fillColor: hoverColor,
color: "#fff",
opacity: 1,
fillOpacity: 0.4,
weight: 3,
dashArray: "2",
});
}
);
e.target.setStyle({
fillColor: hoverColor,
color: "#fff",
opacity: 1,
fillOpacity: 0.4,
weight: 3,
dashArray: "2",
});
};

mouseOutFeature = (e) => {
const mouseOutFeature = (e) => {
e.target.setStyle({
weight: 2,
fillOpacity: 0.7,
});

this.setState({
hoverName: "",
hoverScore: 0,
hoverTooltipDisplay: false,
});
setHoverName("");
setHoverScore(0);
setHoverTooltipDisplay(false);
};

clickFeature = (feature) => {
this.props.handleEntityShapeClick(feature);
const clickFeature = (feature) => {
handleEntityShapeClick(feature);
};

render() {
let { scores } = this.props;
let position = [20, 0];
let zoom = this.state.screenWidthBelow680 ? 1 : 2;

const entityType = this.props.entityType;
let position = [20, 0];
let zoom = screenWidthBelow680 ? 1 : 2;

let bounds = {};
if (entityType === "country") {
bounds = getThresholdBoundsForCountry();
} else if (entityType === "region") {
bounds = getThresholdBoundsForRegion();
}
let bounds = {};
if (entityType === "country") {
bounds = getThresholdBoundsForCountry();
} else if (entityType === "region") {
bounds = getThresholdBoundsForRegion();
}

return (
return (
<div
className="topo-map"
style={{ position: "relative", height: "inherit", width: "100%" }}
className="topo-map"
style={{ position: "relative", height: "inherit", width: "100%" }}
>
<div
className={
this.state.hoverTooltipDisplay
? "topo-map__tooltip topo-map__tooltip-visible"
: "topo-map__tooltip"
}
className={
hoverTooltipDisplay
? "topo-map__tooltip topo-map__tooltip-visible"
: "topo-map__tooltip"
}
>
<p>
{this.state.hoverName}
{this.state.hoverScore !== 0 ? ` - ${this.state.hoverScore}` : null}
{hoverName}
{hoverScore !== 0 ? ` - ${hoverScore}` : null}
</p>
</div>

{!this.props.hideLegend && (
<MapLegend
style={{ position: "absolute", bottom: "1rem", left: "1rem" }}
highThreshold={bounds.high ?? 0}
lowThreshold={bounds.low ?? 0}
/>
{!hideLegend && (
<MapLegend
style={{ position: "absolute", bottom: "1rem", left: "1rem" }}
highThreshold={bounds.high ?? 0}
lowThreshold={bounds.low ?? 0}
/>
)}

<Map
center={this.props.bounds ? null : position}
zoom={this.props.bounds ? null : zoom}
bounds={this.props.bounds ? this.props.bounds : null}
minZoom={1}
scrollWheelZoom={false}
touchZoom={true}
dragging={!this.state.screenWidthBelow680}
style={{ width: "inherit", height: "inherit", overflow: "hidden" }}
center={propBounds ? null : position}
zoom={propBounds ? null : zoom}
bounds={propBounds ? propBounds : null}
minZoom={1}
scrollWheelZoom={false}
touchZoom={true}
dragging={!screenWidthBelow680}
style={{ width: "inherit", height: "inherit", overflow: "hidden" }}
>
<TileLayer
id="mapbox/light-v10"
url={`https://api.mapbox.com/styles/v1/{id}/tiles/{z}/{x}/{y}?access_token=${mapAccessToken}`}
id="mapbox/light-v10"
url={`https://api.mapbox.com/styles/v1/{id}/tiles/{z}/{x}/{y}?access_token=${mapAccessToken}`}
/>
<GeoJSON
data={this.props.topoData}
onEachFeature={this.onEachFeature}
style={(feature) => ({
color: "transparent",
weight: 2,
fillColor: !scores
? DEFAULT_NONE
: !feature.properties.score
? DEFAULT_NONE
: getEntityScaleColor(feature.properties.score, entityType),
fillOpacity: !feature.properties.score ? 0.2 : 0.5,
dashArray: "2",
})}
data={topoData}
onEachFeature={onEachFeature}
style={(feature) => ({
color: "transparent",
weight: 2,
fillColor: !scores
? DEFAULT_NONE
: !feature.properties.score
? DEFAULT_NONE
: getEntityScaleColor(feature.properties.score, entityType),
fillOpacity: !feature.properties.score ? 0.2 : 0.5,
dashArray: "2",
})}
/>
</Map>
</div>
);
}
);

}

export default TopoMap;
export default TopoMap;

0 comments on commit 7721787

Please sign in to comment.