climate-map-challenge by Jani Martikainen

README.md

@@ -1,3 +1,18 @@
+# CGI Climate Map Challenge
+Fork by Jani Martikainen (@jeejeemartikainen)
+
+This fork adds three toggleable layers to existing map for visualizing the fetched data from FMI-API (precipitation, temperature and snowdepth) and adds different type of markers for each datatype.
+
+Datapoints are animated/looped through the initial 145 hours and there's slider for going back and forth between the hours.
+
+Each marker type has it's own popup which shows current observation point, observation region and data value corresponding to layer. 
+
+This was my first real attempt to build something with React and Leaflet, so it was quite fun and challanging. With Chart.js and maybe somekind of heatmap layer there's nice possibilities for repurposing this data.
+
+I have cleared parts 1 and 2 of the challenge, maybe third aswell. CI-pipeline not yet implemented. 
+
+---- Original README.md ----
+
 This project was bootstrapped with [Create React App](https://github.com/facebook/create-react-app).
 
 # CGI Climate Map Challenge

package.json

@@ -2,6 +2,7 @@
   "name": "climate-map-challenge",
   "version": "0.1.0",
   "private": true,
+  "homepage": "./",
   "dependencies": {
     "@fmidev/metolib": "^2.0.6",
     "leaflet": "^1.3.4",

src/App.css

@@ -0,0 +1,14 @@
+.leaflet-popup-content-wrapper {
+    background-color: rgba(255,255,255,0.8);
+}
+
+.leaflet-popup-content {
+    margin: 15px 5px;
+}
+
+.leaflet-popup-content p {
+    font-size: 12px;    
+    margin: 0;
+}
+
+.leaflet-div-icon { background-color: transparent; border-color: transparent }

src/App.js

@@ -1,37 +1,32 @@
-import React, {useEffect, useState} from 'react';
-import Metolib from '@fmidev/metolib';
-import './App.css';
-import {Map, Marker, TileLayer} from "react-leaflet";
+import React, { useEffect, useState, useRef } from "react";
+import Metolib from "@fmidev/metolib";
+import { Map, TileLayer, LayersControl, LayerGroup } from "react-leaflet";
 import styled from "styled-components";
-import L from "leaflet";
-import Sidebar from './Sidebar';
-
-const MapContainer = styled(Map)`
-    width: calc(100vw - 300px);
-    height: 100vh;
-    position:absolute;
-    top:0px;
-    left:300px;
-`;
 
+// Styles
+import "./App.css";
+import "./Infobox.css";
 
-// Ugly hack to fix Leaflet icons with leaflet loaders
-delete L.Icon.Default.prototype._getIconUrl;
-L.Icon.Default.mergeOptions({
-  iconRetinaUrl: require('leaflet/dist/images/marker-icon-2x.png'),
-  iconUrl: require('leaflet/dist/images/marker-icon.png'),
-  shadowUrl: require('leaflet/dist/images/marker-shadow.png'),
-});
+// Custom elements
+import CustomCircleMarker from "./CustomCircleMarker.js";
+import CustomRectangleMarker from "./CustomRectangleMarker.js";
+import CustomIconMarker from "./CustomIconMarker.js";
+import TimelineControls from "./TimelineControls";
 
+const MapContainer = styled(Map)`
+  width: 100vw;
+  height: 100vh;
+  position: absolute;
+  top: 0px;
+  left: 0px;
+`;
 
 function App() {
   const [observationLocations, setObservationLocations] = useState([]);
 
-  const [selectedLocation, setSelectedLocation] = useState(null);
-
   useEffect(function fetchObservationLocations() {
     const connection = new Metolib.WfsConnection();
-    if (connection.connect('http://opendata.fmi.fi/wfs', 'fmi::observations::weather::cities::multipointcoverage')) {
+    if (connection.connect( "http://opendata.fmi.fi/wfs", "fmi::observations::weather::cities::multipointcoverage" )) {
       connection.getData({
         begin: Date.now() - 60e3 * 60 * 24 * 6,
         end: Date.now(),
@@ -40,48 +35,77 @@ function App() {
         bbox: "20.6455928891, 59.846373196, 31.5160921567, 70.1641930203",
         callback: (data, errors) => {
           if (errors.length > 0) {
-
-            errors.forEach(err => {
-              console.error('FMI API error: ' + err.errorText);
+            errors.forEach((err) => {
+              console.error("FMI API error: " + err.errorText);
             });
             return;
           }
 
-          setObservationLocations(data.locations
-            .map(loc => {
-              const [lon, lat] = loc.info.position.map(parseFloat);
-              return {...loc, position: {lat, lon}}
+          setObservationLocations(
+            data.locations.map((loc) => {
+              const [lat, lon] = loc.info.position.map(parseFloat);
+              return { ...loc, position: { lat, lon } };
             })
           );
 
           connection.disconnect();
-        }
+        },
       });
     }
   }, []);
 
+  // Controls and layers
+  const { Overlay } = LayersControl;
+  const mapRef = useRef();
+  const precipitationOverlay = useRef();
+  const snowdepthOverlay = useRef();
+  const temperatureOverlay = useRef();
+  let [v, setDataIndex] = useState(0);
+
   const position = [65, 26];
   const map = (
-    <MapContainer center={position} zoom={6}>
-      <TileLayer
-        url='https://{s}.basemaps.cartocdn.com/dark_all/{z}/{x}/{y}{r}.png'
-        attribution='&copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a> &copy; <a href="https://carto.com/attributions">CARTO</a>'
-        subdomains='abcd'
-        maxZoom={19}
-      />
-      {observationLocations.map(loc => <Marker position={[loc.position.lat, loc.position.lon]}
-                                               key={loc.info.id} onClick={() => setSelectedLocation(loc.info.id)}>
-      </Marker>)}
-    </MapContainer>
-  );
+    <>
+      <MapContainer center={position} zoom={6} ref={mapRef}>
+        <TimelineControls
+          observationData={observationLocations}
+          getCurrentDataIndex={setDataIndex}
+        />
+        <TileLayer
+          url="https://{s}.basemaps.cartocdn.com/dark_all/{z}/{x}/{y}{r}.png"
+          attribution='&copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a> &copy; <a href="https://carto.com/attributions">CARTO</a>'
+          subdomains="abcd"
+          maxZoom={19}
+        />
+        <LayersControl position="topleft">
+          <Overlay name="Rainfall" checked>
+            <LayerGroup id="rainfall" ref={precipitationOverlay}>
+              {observationLocations.map((loc) => (
+                <CustomRectangleMarker loc={loc} v={v} key={loc.info.id} />
+              ))}
+            </LayerGroup>
+          </Overlay>
 
-  return (
-    <div className="App">
-      <Sidebar selectedLocationId={selectedLocation} observationLocations={observationLocations}/>
-      {map}
-    </div>
-  );
+          <Overlay name="Snowdepth" checked>
+            <LayerGroup id="snowdepth" ref={snowdepthOverlay}>
+              {observationLocations.map((loc) => (
+                <CustomCircleMarker loc={loc} v={v} key={loc.info.id} />
+              ))}
+            </LayerGroup>
+          </Overlay>
 
+          <Overlay name="Temperatures" checked>
+            <LayerGroup id="temperature" ref={temperatureOverlay}>
+              {observationLocations.map((loc) => (
+                <CustomIconMarker loc={loc} v={v} key={loc.info.id} />
+              ))}
+            </LayerGroup>
+          </Overlay>
+        </LayersControl>
+      </MapContainer>
+      ;
+    </>
+  );
+  return <div className="App">{map}</div>;
 }
 
-export default App;
+export default App;

src/CustomCircleMarker.js

@@ -0,0 +1,31 @@
+import React from "react";
+import { CircleMarker, Popup } from "react-leaflet";
+
+/**
+ * 
+ * @param {*} props | .loc  | Location info
+ * @param {*} props | .v    | Dataset index which we are currently on
+ * @param {*} props | .key  | Unique key for the component
+ * @returns react-leaflet Circlemarker with popup
+ */
+const CustomCircleMarker = (props) => {
+  const radius = props.loc.data.snowdepth.timeValuePairs[props.v].value || 5;
+  const color =
+    props.loc.data.snowdepth.timeValuePairs[props.v].value + 160 || 160;
+
+  /**
+   * Custom marker definitions
+   */
+  let marker = <CircleMarker center={[props.loc.position.lat, props.loc.position.lon]} radius={radius} color={"hsl(" + color + ",100%,50%)"} stroke={false} key={props.loc.info.id}>
+      <Popup>
+        <p>Observation point: {props.loc.info.name}</p>
+        <p>Region: {props.loc.info.region}</p>
+        <p>
+          {props.loc.data.snowdepth.property.label + " (cm)"}: {props.loc.data.snowdepth.timeValuePairs[props.v].value || "data not available"}
+        </p>
+      </Popup>
+    </CircleMarker>;
+  return marker;
+};
+
+export default CustomCircleMarker;

src/CustomIconMarker.js

@@ -0,0 +1,63 @@
+import React from "react";
+import { Marker, Popup } from "react-leaflet";
+import L from "leaflet";
+
+// Custom icon setup
+const iconSun = new L.Icon({
+  iconUrl: require("./assets/icons/sun.svg"),
+  iconRetinaUrl: require("./assets/icons/sun.svg"),
+  iconSize: new L.Point(27, 27),
+  shadowSize: new L.Point(0, 0),
+  iconAnchor: new L.Point(12.5, 12.5),
+  popupAnchor: new L.Point(4, -12.5),
+  className: "leaflet-div-icon",
+});
+
+const iconSnow = new L.Icon({
+  iconUrl: require("./assets/icons/snow.svg"),
+  iconRetinaUrl: require("./assets/icons/snow.svg"),
+  iconSize: new L.Point(27, 27),
+  shadowSize: new L.Point(0, 0),
+  iconAnchor: new L.Point(12.5, 12.5),
+  popupAnchor: new L.Point(4, -12.5),
+  className: "leaflet-div-icon",
+});
+
+/**
+ *
+ * @param {*} props | .loc  | Location info
+ * @param {*} props | .v    | Dataset index which we are currently on
+ * @param {*} props | .key  | Unique key for the component
+ * @returns react-leaflet Marker with popup
+ */
+const CustomIconMarker = (props) => {
+  let icon = iconSun;
+  if (
+    props.loc.data.t.timeValuePairs[props.v].value &&
+    props.loc.data.t.timeValuePairs[props.v].value < 0
+  ) {
+    icon = iconSnow;
+  }
+
+  /**
+   * Customer marker definitions
+   */
+  let marker = (
+    <Marker
+      position={[props.loc.position.lat, props.loc.position.lon]}
+      key={props.loc.info.id}
+      icon={icon}
+    >
+      <Popup>
+        <p>Observation point: {props.loc.info.name}</p>
+        <p>Region: {props.loc.info.region}</p>
+        {props.loc.data.t.property.label + " (°C)"}:{" "}
+        {props.loc.data.t.timeValuePairs[props.v].value || "data not available"}
+      </Popup>
+    </Marker>
+  );
+
+  return marker;
+};
+
+export default CustomIconMarker;

src/CustomRectangleMarker.js

@@ -0,0 +1,51 @@
+import React from "react";
+import { Rectangle, Popup } from "react-leaflet";
+
+/**
+ * 
+ * @param {*} props | .loc  | Location info
+ * @param {*} props | .v    | Dataset index which we are currently on
+ * @param {*} props | .key  | Unique key for the component
+ * @returns react-leaflet Rectangle with popup
+ */
+const CustomRectangleMarker = (props) => {
+  // Latitude and longitude setup
+  const latitude = props.loc.position.lat;
+  const longitude = props.loc.position.lon;
+  const latlon = [latitude, longitude - 0.22];
+  const latlonCenter = [latitude, longitude];
+
+  // Visualization variables
+  const realRainfallAmount =
+    props.loc.data.r_1h.timeValuePairs[props.v].value || 0;
+  const rainfallAmount = realRainfallAmount < 1.1 ? realRainfallAmount : 1.1;
+  const rectangleColor = 180 + realRainfallAmount * 10;
+  const rectangleHeight = [latitude + rainfallAmount, longitude + 0.3];
+  const rectangle = [latlon, rectangleHeight];
+
+  /**
+   * Custom marker definitions
+   */
+  let marker = (
+    <Rectangle
+      center={latlonCenter}
+      color={"hsl(" + rectangleColor + ",100%,50%)"}
+      stroke={false}
+      bounds={rectangle}
+      key={props.loc.info.id}
+    >
+      <Popup>
+        <p>Observation point: {props.loc.info.name}</p>
+        <p>Region: {props.loc.info.region}</p>
+        <p>
+          {props.loc.data.r_1h.property.label + " (mm)"}:{" "}
+          {props.loc.data.r_1h.timeValuePairs[props.v].value ||
+            "data not available"}
+        </p>
+      </Popup>
+    </Rectangle>
+  );
+  return marker;
+};
+
+export default CustomRectangleMarker;

src/Infobox.css

@@ -0,0 +1,38 @@
+#infobox {
+    position: absolute;
+    z-index: 2000;
+    left: 50%;
+    top: 10px;
+    transform: translateX(-50%);
+
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+
+    padding: 0px 15px;
+    background-color: #cdcdcd;
+
+    font-size: 1rem;
+
+    border-radius: 5px;
+}
+
+.infobox__title,
+.infobox__subtitle,
+.infobox__date {
+    margin: 0;
+}
+p::first-child {
+    margin-top: 5px;
+}
+p::last-child {
+    margin-bottom: 5px;
+}
+.infobox__subtitle {
+    font-size: 0.7rem;
+}
+
+.slider__controller {
+    width: 100%;
+}