Implement interactive swiss map

Author: Doemuu

gatsby-config.js

@@ -50,6 +50,7 @@ module.exports = {
         icon: `src/images/DB.svg`, // This path is relative to the root of the site.
       },
     },
+    `gatsby-plugin-styled-components`,
     // this (optional) plugin enables Progressive Web App + Offline functionality
     // To learn more, visit: https://gatsby.dev/offline
     // `gatsby-plugin-offline`,

gatsby-node.js

@@ -1,3 +1,5 @@
+const cantons = require("./src/assets/cantons")
+
 exports.createPages = async ({ actions, graphql, reporter }) => {
   const { createPage } = actions
 
@@ -36,4 +38,16 @@ exports.createPages = async ({ actions, graphql, reporter }) => {
       },
     })
   })
+
+  const cantonPageTemplate = require.resolve("./src/templates/cantonTemplate.js")
+
+  cantons.forEach(canton =>
+    createPage({
+      path: `tour-de-suisse/${canton.id.toLowerCase()}`,
+      component: cantonPageTemplate,
+      context: {
+        canton,
+      },
+    })
+  )
 }

package-lock.json

@@ -8,6 +8,7 @@
     "@mdx-js/mdx": "^1.6.22",
     "@mdx-js/react": "^1.6.22",
     "@react-icons/all-files": "^4.1.0",
+    "babel-plugin-styled-components": "^1.13.2",
     "bootstrap": "^4.5.3",
     "dayjs": "^1.9.7",
     "dotenv": "^8.2.0",
@@ -20,6 +21,7 @@
     "gatsby-plugin-react-helmet": "^3.3.14",
     "gatsby-plugin-sass": "^2.4.2",
     "gatsby-plugin-sharp": "^2.7.1",
+    "gatsby-plugin-styled-components": "^4.11.0",
     "gatsby-source-filesystem": "^3.1.0",
     "gatsby-source-github-api": "^0.2.1",
     "gatsby-transformer-remark": "^3.1.0",
@@ -30,7 +32,8 @@
     "react-dom": "^16.14.0",
     "react-helmet": "^6.1.0",
     "react-icons": "^4.1.0",
-    "react-vertical-timeline-component": "^3.3.1"
+    "react-vertical-timeline-component": "^3.3.1",
+    "styled-components": "^5.3.0"
   },
   "devDependencies": {
     "prettier": "2.1.2"

package.json

@@ -0,0 +1,101 @@
+import { Link } from "gatsby"
+import React, { useState } from "react"
+import { Canton as CantonType } from "../../types/canton"
+
+interface CantonProps extends CantonType {
+  children?: React.ReactNode
+  onClick?: (id: string) => void
+  isActive: boolean
+}
+
+const Canton = ({
+  name,
+  capital,
+  path,
+  id,
+  onClick,
+  colour,
+  circleTransform,
+  textX,
+  textY,
+  isActive,
+}: CantonProps) => {
+  const [isFocus, setFocus] = useState(false)
+
+  return (
+    <Link
+      to={`/tour-de-suisse/${id.toLowerCase()}`}
+      css={`
+        &:hover {
+          text-decoration: none;
+        }
+      `}
+    >
+      <g transform="translate(154.89465,-548.33966)">
+        <g transform="matrix(0.4753467,0,0,0.4753467,-71.265996,459.47553)">
+          <g transform="translate(-190.45925,197.87884)">
+            <path
+              d={path}
+              onMouseOver={() => setFocus(true)}
+              onMouseLeave={() => setFocus(false)}
+              onClick={() => onClick?.(id)}
+              css={`
+                fill: ${isActive
+                  ? "var(--primary)"
+                  : colour ?? "var(--secondary)"};
+                stroke: white;
+                strok-width: 0.005;
+                &:hover {
+                  fill: var(--primary);
+                }
+              `}
+            />
+          </g>
+        </g>
+      </g>
+      <g transform="translate(154.89465,-548.33966)">
+        <g transform="matrix(0.4753467,0,0,0.4753467,-71.265996,459.47553)">
+          <circle
+            cx="340"
+            cy="160"
+            r="3"
+            transform={circleTransform}
+            css={`
+              fill: ${isFocus ? "white" : "#000000"};
+              stroke: ${isFocus ? "white" : "#000000"};
+              display: ${isFocus ? "block" : "none"};
+              stroke-width: 0pt;
+              z-index: 50;
+            `}
+          />
+          <text
+            x={textX}
+            y={textY}
+            css={`
+              font-size: 10px;
+              text-align: start;
+              line-height: 125%;
+              text-anchor: start;
+              fill: ${isFocus ? "#d3ebfa" : "#000000"};
+              display: ${isFocus ? "block" : "none"};
+              font-family: Verdana;
+              z-index: 50;
+            `}
+          >
+            <tspan
+              x={textX}
+              y={textY}
+              css={`
+                z-index: 50;
+              `}
+            >
+              {capital}
+            </tspan>
+          </text>
+        </g>
+      </g>
+    </Link>
+  )
+}
+
+export default Canton

src/assets/cantons.js

@@ -0,0 +1 @@
+import type {} from "styled-components/cssprop"

src/components/cantons/canton.tsx

@@ -0,0 +1,8 @@
+import React from "react"
+import Map from "../../components/cantons/map"
+
+const TDS = () => {
+  return <Map />
+}
+
+export default TDS

src/components/cantons/map.tsx

@@ -85,8 +85,9 @@
     strong {
       color: var(--primary);
     }
-    th, td{
-      padding:15px;
+    th,
+    td {
+      padding: 15px;
       width: 20%;
     }
   }

src/global.d.ts

@@ -0,0 +1,20 @@
+import React from "react"
+import Map from "../components/cantons/map"
+
+/**
+ *
+ * @param {Object} props
+ * @param {Object} props.pageContext
+ * @param {import("../types/canton").Canton} props.pageContext.canton
+ * @returns
+ */
+const TDS = ({ pageContext: { canton } }) => {
+  return (
+    <>
+      {canton.name}
+      <Map activeCanton={canton.id} />
+    </>
+  )
+}
+
+export default TDS

src/images/Schweizer_Karte_mit_Kantons-_und_Hauptstadtbezeichnungen_(deutsch).svg

@@ -0,0 +1,10 @@
+export interface Canton {
+  name: string
+  capital: string
+  id: string
+  path: string
+  colour?: string
+  circleTransform: string
+  textX: number
+  textY: number
+}