When setting up my Next.js site, I opted to build a custom cookie banner instead of using prebuilt solutions. This approach allowed me to maintain a consistent design and add personal touches. The process took time as I had to implement features such as opt-in functionality and conditional rendering based on the current page.

![Screenshot 2025-02-03 220702.png](https://cms.mxd.codes/uploads/Screenshot_2025_02_03_220702_ab0e32d08c.png)

This article outlines the steps I took to implement and design the cookie banner, which may help you build your own custom solution for a Next.js or React application.

## Conditional Rendering

The first step involves declaring a `visible` state variable, which is initially set to `false`:

```javascript
const CookieBanner = ({ debug }) => {
  const [visible, setVisible] = useState(false);
```

Using `useEffect()`, the component checks if the cookie consent is `undefined` or if `debug` mode is enabled. If so, the cookie banner becomes visible, and scrolling is disabled to ensure the user interacts with the banner first.

```javascript
  useEffect(() => {
    // If cookie is undefined or debug is true, show the banner
    if (Cookie.get("consent") === undefined || debug) {
      document.body.style.overflow = "hidden";
      setVisible(true);
    }
  }, []);
```

However, when users navigate to pages like [/privacy-policy](/privacy-policy) or [/site-notice](/site-notice) to get some informations about the website. the banner should not obstruct content. To achieve this, the component conditionally renders the banner only if the user has not visited one of these pages:

```javascript
  // Don't render if the banner should not be visible
  if (
    !visible ||
    window.location.href.includes("privacy-policy") ||
    window.location.href.includes("site-notice") ||
    window.location.href.includes("sitemap")
  ) {
    return null;
  }
```

Additionally, scrolling is re-enabled when users visit these pages. However, if they navigate elsewhere without accepting cookies, the banner reappears, and scrolling is disabled again:

```javascript
  useEffect(() => {
    // Handle page load and visibility
    if (
      window.location.href.includes("privacy-policy") ||
      window.location.href.includes("site-notice")
    ) {
      document.body.style.overflow = "scroll";
    } else if (Cookie.get("consent") === undefined || debug) {
      document.body.style.overflow = "hidden";
    }
  }, []);
```

Now the user has to finally decied if she or he is fine with using (third-party) cookies. For that reason there will be some explanation in the cookie banner how the cookies are used and the user will find two buttons for 'Accept required and optional cookies' and 'Accept required cookies'.

![2022_05_01_15_40_35_How_to_create_a_custom_cookie_banner_for_your_Next_js_application_Max_Dietrich_c85e1c6f80.png](https://cms.mxd.codes/uploads/2022_05_01_15_40_35_How_to_create_a_custom_cookie_banner_for_your_Next_js_application_Max_Dietrich_c85e1c6f80_958fcd82b5.png)

## Setting Cookies

The banner provides two options: 'Accept required and optional cookies' and 'Accept required cookies'. The first option is highlighted more prominently to encourage users to accept optional cookies.

```javascript
<Button onClick={() => handleConsent(true)}>Accept required and optional cookies</Button>
```

Clicking an option triggers the `handleConsent()` function, which:

- set the consent cookie with the value true or false depending of the users choice,
- enable Analytics (optional),
- enable Adsense (optional),
- set the `visible` variable to false and finally
- allow scrolling again.

```javascript
  const handleConsent = (accepted) => {
    Cookie.set("consent", accepted, { sameSite: "strict", expires: 365 });
    setVisible(false);
    document.body.style.overflow = "scroll";
    if (accepted) {
      // enableGoogleAnalytics();
      // enableGoogleAdsense();
    }
  };
```

Cookies are created with help of the [js-cookie](https://github.com/js-cookie/js-cookie). If you are using [Server Component](https://nextjs.org/docs/app/building-your-application/rendering/server-components) you can also use the [cookies](https://nextjs.org/docs/app/api-reference/functions/cookies) function from Nextjs.

The `enableGoogleAnalytics()` and `enableGoogleAdsense()` functions are stored separately because they will also be needed in the `_app.js` file, whichs wrapps the whole application.

The reason behind this is, that the analytics and ad scripts are just injected into the one page where the third-party cookies have been accepted by the user. But as soon as the user navigates to any other page after accepting third-party cookies the injected scripts are not exisiting in this page.

To ensure scripts persist across page changes, the `_app.js` file rechecks the consent state and reinjects scripts as needed:

```javascript
const MyApp = ({ Component, pageProps }) => {
  useEffect(() => {
    if (window.location.href.includes(config.domain)) {
      if (Cookie.get("consent") === "true") {
        enableGoogleAnalytics();
        enableGoogleAdsense();
      }
    }
  }, []); // Runs once on mount

  return <Component {...pageProps} />;
};
``` 

And that's it. That's how I created a cookie banner with two options which will be rendered conditionally depending on a consent cookie and depending on the current page the user is visiting. The whole `CookieBanner` component looks like the following:

```jsx
import styled from "styled-components"
import Link from "next/link"
import media from "styled-media-query"
import Image from "next/legacy/image"
import Logo from "@/components/logo/logo"
import { Button } from "@/styles/templates/button"
import { FaLinkedin } from "@react-icons/all-files/fa/FaLinkedin"
import { FaInstagram } from "@react-icons/all-files/fa/FaInstagram"
import { FaGithub } from "@react-icons/all-files/fa/FaGithub"
import { FaBluesky } from "@react-icons/all-files/fa6/FaBluesky"
import { FaXing } from "@react-icons/all-files/fa/FaXing"
import { SiStrava } from "@react-icons/all-files/si/SiStrava"
//import { enableGoogleAnalytics } from "@/components/google-analytics/google-analytics"
//import { enableGoogleAdsense } from "@/components/google-adsense/google-adsense"
import config from "@/src/data/internal/SiteConfig"
//import { push } from "@socialgouv/matomo-next"
import { useState, useEffect } from 'react';
import Cookie from 'js-cookie'; 

const Background = styled.div`
  position: fixed;
  z-index: 9997;
  right: 0;
  bottom: -200px;
  top: 0;  
  left: 0;
  background-color: rgba(0, 0, 0, 0.5);
`

const CookieContainer = styled.div`
  position: fixed;
  right: 0;
  bottom: 0;
  top: 0;
  left: 0;
  z-index: 9998;
  vertical-align: middle;
  white-space: nowrap;
  max-height: 100%;
  max-width: 100%;
  overflow-x: auto;
  overflow-y: auto;
  text-align: center;
  -webkit-tap-highlight-color: transparent;
  font-size: 14px;
  overflow-y: scroll;
`

const CookieInnerContainer = styled.div`
  width: var(--content-width);
  height: auto;
  max-width: none;
  border-radius: var(--border-radius);
  display: inline-block;
  z-index: 9999;
  background-color: var(--body-bg);
  white-space: normal;
  box-shadow: 0 2px 10px 0 rgb(0 0 0 / 20%);
  position: relative;
  line-height: 1.65;
  border: 1px solid var(--body-bg);
  vertical-align: middle;
  top: 20%;
  ${media.lessThan("medium")`
    width: 90%;
  `}
`

const Wrapper = styled.div`
  max-height: 100%;
  height: auto;
  max-width: none;
  text-align: left;
  border-radius: 16px;
  display: inline-block;
  white-space: normal;
`

const CookieHeader = styled.div`
  padding: var(--space);
  display: flex;
  justify-content: space-between;
`


const CookieContentBlock = styled.div`
  margin-top: var(--space);
  margin-bottom: var(--space-sm)
`

const CookieTextList = styled.ul`
  margin: 0;
  padding: 0;
  padding-inline-start: 1rem;
`

const CookieTextItem = styled.li`
  margin: var(--space-sm) 0;
`

const CookieBannerText = styled.div`
  padding: 0 var(--space);
`

const CookieHeadline = styled.h1`
  font-size: 24px;
  font-weight: 400;
  margin-bottom: var(--space);
`

const Text = styled.div`
  margin-bottom: var(--space-sm);
`

const CookieLink = styled.a`
  border-bottom: 1px solid var(--text-color);
  &:hover {
    border-bottom: none;
  }
  cursor: pointer;
  margin-right: var(--space-sm);
`

const TextLink = styled.a`
  border-bottom: 1px solid var(--text-color);
  &:hover {
    text-decoration: none;
    border-bottom: none;
  }
`

const List = styled.ol`
  list-style: none;
  padding-inline-start: 0;
  display: flex;
`

const SocialItem = styled.li`
  margin: var(--space-sm) var(--space-sm) var(--space-sm) 0;
  transition: 0.2s;
  background-color: var(--content-bg);
  padding: 8px 10px 4px 10px;
  &:hover {
    color: var(--secondary-color);
    cursor: pointer;
  }
`

const ButtonContainer = styled.div`
  margin: var(--space);
  display: flex;
  justify-content: space-between;
  ${media.lessThan("medium")`
    flex-direction: column;
    gap: var(--space-sm);
  `}
`


const CookieBanner = ({ debug }) => {
  const [visible, setVisible] = useState(false);
  
  useEffect(() => {
    const consent = Cookie.get("consent");
    if (!consent || debug) {
      document.body.style.overflow = "hidden";
      setVisible(true);
    } else {
      document.body.style.overflow = "scroll";
    }
  }, [debug]);

  const handleConsent = (accepted) => {
    Cookie.set("consent", accepted, { sameSite: "strict", expires: 365 });
    setVisible(false);
    document.body.style.overflow = "scroll";
  };

  if (!visible || ["privacy-policy", "site-notice", "sitemap"].some((page) => window.location.href.includes(page))) {
    return null;
  }

  const socialLinks = [
    { href: config.socials.bluesky, title: "@mmxdcodes on Bluesky", icon: <FaBluesky /> },
    { href: config.socials.github, title: "mxdietrich on GitHub", icon: <FaGithub /> },
    { href: config.socials.strava, title: "Max Dietrich on Strava", icon: <SiStrava /> },
    { href: config.socials.xing, title: "Max Dietrich on Xing", icon: <FaXing /> },
    { href: config.socials.linkedin, title: "Max Dietrich on Linkedin", icon: <FaLinkedin /> }
  ];

  return (
    <>
      <Background />
      <CookieContainer>
        <CookieInnerContainer>
          <Wrapper>
            <CookieHeader>
              <Logo />
              <Image
                src="/logos/android/android-launchericon-48-48.png"
                width="48"
                height="48"
                title="Max Dietrich"
                alt="Photo of Max Dietrich"
                className="profile u-photo"
              />
            </CookieHeader>

            <CookieBannerText>
              <CookieHeadline>Hi, welcome on mxd.codes 👋</CookieHeadline>
              <CookieContentBlock>
                <p>You can easily support me by accepting optional (third-party)
                cookies. These cookies will help with the following:</p>
                <CookieTextList>
                  <CookieTextItem>
                  <b>Collect audience interaction data and site statistics</b>
                  </CookieTextItem>
                  <CookieTextItem>
                    <b>Deliver advertisements and measure the effectiveness of
                    advertisements</b>
                  </CookieTextItem>
                  <CookieTextItem>
                  <b>Show personalized content (depending on your settings)</b>
                  </CookieTextItem>
                </CookieTextList>
              </CookieContentBlock>
              <Text>
                         <p>
            If you prefer not to share data but still want to support, visit <TextLink href="/support">mxd.codes/support</TextLink> or connect via socials:
            <List>
              {socialLinks.map(({ href, title, icon }) => (
                <SocialItem key={href} title={title}>
                  <a href={href} title={title}>{icon}</a>
                </SocialItem>
              ))}
            </List>
          </p>
                <p>
                  For more information about cookies and how they are used
                  please have a look at the Privacy Policy.
                </p>
              </Text>

              <Link href="/privacy-policy" legacyBehavior>
                <CookieLink>Privacy Policy</CookieLink>
              </Link>
              <Link href="/site-notice" legacyBehavior>
                <CookieLink>Site Notice</CookieLink>
              </Link>
            </CookieBannerText>

            <ButtonContainer>
            <Button onClick={() => handleConsent(false)} backgroundColor="var(--content-bg)" color="#70757a">
              Accept required cookies
            </Button>
            <Button onClick={() => handleConsent(true)}>Accept required and optional cookies</Button>
          </ButtonContainer>
          </Wrapper>
        </CookieInnerContainer>
      </CookieContainer>
    </>
  );
};

export default CookieBanner;
```

If you also want to know how the previously mentioned `enableGoogleAnalytics` and `enableGoogleAdsense()` functions work keep reading.

## Google Analytics in Next.js applications

To enable Google Analytics, three functions are used:

- `addGoogleAnalytics()` - Injects the analytics script into the document head.
- `initializeGoogleAnalytics()` - Configures and initializes Google Analytics.
- `trackGoogleAnalytics()` - Tracks page views when users navigate.
    
```javascript
export function enableGoogleAnalytics () {
    addGoogleAnalytics().then((status) => {
      if (status) {
        initializeGoogleAnalytics()
        trackGoogleAnalytics()
      }
    })
}
```

First of all the Analytics script will be created and appended with the individual `GA_TRACKING_ID` to the head-element.

```javascript
export function addGoogleAnalytics () {
    return new Promise((resolve, reject) => {
      const head = document.getElementsByTagName('head')[0]
      const scriptElement = document.createElement(`script`)
      scriptElement.type = `text/javascript`
      scriptElement.async
      scriptElement.defer
      scriptElement.src = `https://www.googletagmanager.com/gtag/js?id=${process.env.NEXT_PUBLIC_GA_TRACKING_ID}`
      scriptElement.onload = () => {
        resolve(true)
      }
      head.appendChild(scriptElement);
    });
}
```

After the script has been added to the site it needs to be initialized. I am also anonymizing IP adresses there and tracking a page view.

```javascript
export function initializeGoogleAnalytics () {
    window.dataLayer = window.dataLayer || [];
    window.gtag = function(){window.dataLayer.push(arguments);}
    window.gtag('js', new Date())
    window.gtag('config', process.env.NEXT_PUBLIC_GA_TRACKING_ID, {
      'anonymize_ip': true,
      'allow_google_signals': true
    })
    const pagePath = location ? location.pathname + location.search + location.hash : undefined
    window.gtag(`event`, `page_view`, { page_path: pagePath })
}
```

To be able to also track a user changing pages we will use "next-router". It will track a page_view event everytime the route change has completed (a different page has been visited).

```javascript
export function trackGoogleAnalytics () {
    Router.events.on('routeChangeComplete', (url) => {
      window.gtag(`event`, `page_view`, { page_path: url })
    });
}
```

So by calling the function `enableGoogleAnalytics()` the Google Analytics Script will be added to the page, Google Analytics will be initalized and also all page changes will be tracked with it.

You also can have a look at [https://github.com/dietrichmax/google-analytics-next](https://github.com/dietrichmax/google-analytics-next) which shows you how you can integrate Google Analytics in Nextjs.

## Google Adsense in Next.js applications

The `enableGoogleAdsense()` function is similiar to the `enableGoogleAnalytics()` function. It will also create the default Google Adsense script and place it into the head of your react application.

```javascript
export function enableGoogleAdsense () {
    const head = document.getElementsByTagName('head')[0]
    const scriptElement = document.createElement(`script`)
    scriptElement.type = `text/javascript`
    scriptElement.async
    scriptElement.src = `https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=${process.env.NEXT_PUBLIC_ADSENSE_ID}`
    scriptElement.crossOrigin = "anonymous"
    head.appendChild(scriptElement);
}
```

Afterwards you just need to place ad containers with the according client and slot id.

```javascript
import styled from 'styled-components';
import { useEffect, useState } from 'react';

export function GoogleAdsenseContainer ( { client, slot }) {

  useEffect(() => {
    (window.adsbygoogle = window.adsbygoogle || []).push({});
  }, []);

  const AdLabel = styled.span`
    font-size: 12px;
  `

  return (
    <div 
      style={{textAlign: 'left',overflow: 'hidden'}}
    >
    <AdLabel>Advertisment</AdLabel>
      <ins
        className="adsbygoogle"
        style={{ display: "block" }}
        data-ad-client={client}
        data-ad-slot={slot}
        data-ad-format="auto"
        data-full-width-responsive="true"
      ></ins>

    </div>
  );     
}
```

In case I missed some important information which you would add please let me know and if you liked the article feel free to share it.


Recently I implemented a custom cookie banner solution on my Next.js site which you probably have seen a few seconds before. There are a lot of prebuilt cookie banners you can use for React or Next js sites but i wanted to create a custom cookie banner which also has some personal touch and keeps the design with the website in line.

Implementing a Custom Cookie Banner in Next.js

Inspired by Aaron Parecki who has been [tracking his location since 2008](https://aaronparecki.com/gps/ "location tracking") with an iPhone app ([Overland](https://overland.p3k.app/ "Overland")) and a server side tracking API ([Compass](https://github.com/aaronpk/Compass "Compass")), I decided to go for a similar approach.

I wanted to track my position constantly with my Android smartphone, save the data to a Postgres database and use the data to display an map with all locations i have ever been to.

To be able to track my position i needed an stable android app and after some tinkering around with different tracking apps I found [OwnTracks](https://owntracks.org/ "OwnTracks")  which basically has all i need (and a good [documentation](https://owntracks.org/booklet/ "OwnTracks Documentation") of it).

In this article, we will explore a step-by-step guide on how to set up a location tracking system using OwnTracks for mobile devices, Node.js for a webhook server, PostgreSQL for data storage, and GeoServer, MapProxy, and Nginx for visualizing the location data.

But first of all we need a database to be able to actually save the data.

## Set up PostgreSQL 

To install [PostgrSQL 16](https://www.postgresql.org/about/news/postgresql-16-released-2715/ "PostgreSQL 16") you will need to the repository that provides the packages.
First, update the package index and install required packages:

```bash
sudo apt update
sudo apt install gnupg2 wget vim
```

The PostgreSQL repository can then be added using the command:

```bash
sudo sh -c 'echo "deb https://apt.postgresql.org/pub/repos/apt $(lsb_release -cs)-pgdg main" > /etc/apt/sources.list.d/pgdg.list'
```

Import the repository signing key:
```bash
curl -fsSL https://www.postgresql.org/media/keys/ACCC4CF8.asc | sudo gpg --dearmor -o /etc/apt/trusted.gpg.d/postgresql.gpg
```
And update your package list:

```bash
sudo apt update
```

Afterwards you can install the latest PostgreSQL (16) version with:
```bash
sudo apt-get -y install postgresql postgresql-contrib
```

Once installed, start and enable the service:
```bash
sudo systemctl start postgresql
sudo systemctl enable postgresql
```

Now you will need a user and database for your location data.

Connect to the PostgreSQL database with:
```bash
sudo su postgres
psql
```

and create a database with:
```sql
CREATE DATABASE locations;
```

aswell a user with:
```sql
CREATE USER USER <username> with encrypted password '<password>';
```

Then you can grant privileges for your user to the database:
```bash
GRANT ALL PRIVILEGES ON DATABASE locations TO <username>;
```

After you set up your database and user you also will need a table to store the data.
The table where I save my locations can be recreated with: 

```sql
CREATE TABLE public.locations (
	id bigserial NOT NULL,
	created_at timestamptz NULL DEFAULT CURRENT_TIMESTAMP,
	lat float8 NULL,
	lon float8 NULL,
	acc int4 NULL,
	alt int4 NULL,
	batt int4 NULL,
	bs int4 NULL,
	cog numeric(10, 2) NULL,
	rad int4 NULL,
	t varchar(255) NULL,
	tid varchar(255) NULL,
	tst int4 NULL,
	vac int4 NULL,
	vel int4 NULL,
	p numeric(10, 2) NULL,
	conn varchar(255) NULL,
	topic varchar(255) NULL,
	inregions jsonb NULL,
	ssid varchar(255) NULL,
	bssid varchar(255) NULL,
);
```
The most important attributes are **lat** (latitude), **lon** (longitude) and **alt** (altitude) which are used to render points later on.

Also I am saving the velocity, battery level of the smartphone and some more data which will be displayed at my [/now](/now "/now") page. The velocity and altitude are quite inaccurate though which probably also depends on the smartphone.

## Create a Node.js Webhook server

You can create a node.js server to act as a webhook to receive location data from OwnTracks. With the [pg](https://www.npmjs.com/package/pg "pg") npm package you can interact with the PostgreSQL database.

```javascript
const http = require("http");
const axios = require('axios');
const { Pool} = require('pg')

const pool = new Pool({
  user: 'username',
  database: 'database',
  password: 'pw!',
  port: port,
  host: 'localhost',
})

async function insertData(body) {
  try {
    const res = await pool.query(
      "INSERT INTO locations (lat, lon, acc, alt, batt, bs, tst, vac, vel, conn, topic, inregions, ssid, bssid) VALUES ($1, $2, $3, $4, $5, $6, $7, $8, $9, $10, $11, $12, $13, $14)",
      [body.lat, body.lon, body.acc, body.alt, body.batt, body.bs, body.tst, body.vac, body.vel, body.conn, body.topic, body.inregions, body.ssid, body.bssid]
    );
    console.log(`Added location ${body.lat}, ${body.lon}`);
  } catch (error) {
    console.error(error)
  }
}

const server = http.createServer((request, response) => {
  let body = [];
  console.log(request.method)
  if (request.method === "POST") {
     request.on('data', (chunk) => {
      body.push(chunk);
      }).on('end', () => {
        body = JSON.parse(Buffer.concat(body).toString());
        insertData(body)
      })
  }

  response.end();
});

server.listen(9001);
```

So basically the webhook parses the request body and inserts the data via an insert statement into the postgres table. Also the server is listening on port 9001 so be sure you opened that port on your sever. The Url for Owntracks now could be **http://yourserverip:9001**.

## Setting up OwnTracks

The OwnTracks app runs in the background on your Android or iOS device and waits for the smart phone to tell it that the device has moved, whereupon OwnTracks sends out a message with its current coordinates (and a few other things we'll discuss in a moment)

With different settings for the app I could tailor the app exactly to my needs because I wanted the app to check my position every second and when i have moved more than two meters from my last known position it should send a POST-Request to my Strapi instance which will store the location data in a Postgres database.

In the following screenshot you can see the settings I am using for OwnTracks.

![content_Screenshot_Own_Tracks_settings_c7d95a33be.jpg](https://cms.mxd.codes/uploads/content_Screenshot_Own_Tracks_settings_c7d95a33be_4b3fcffdf5.jpg)

The most important seetings for me are the mode 
- **Significant location change mode**,
- **locatorDisplacement**,
- **locatorInterval**,
- **ignoreInaccurateLocations** and
- **url** for the POST-request.

The **significant location change mode** is a mode which will let you decide in which interval you want to track your position. I am using the **locationInterval** '1' which will track my position every second with an **LocatorDisplacement** of 1 which will check if i moved away a meter away from my last known position. If i did it will send an POST-request with the location data to the given url if the position data isn't more inaccurate than 10 meters.

Because the app has to run always in the background you probably have to switch off energy saving modes for your smartphone which might disable the background functionality. 

Be warned: You probably will have to charge your smartphone more often. Also sometimes the app has some tracking error if you are using parallel some other tracking app for example for activities like strava.

The url **http://yourserverip:9001** for the POST-request points to the nodejs server webhook which will run a insert command for the postgres database. 

Now the data will be stored in the postgres database but it still needs to be visualized somehow and therefore it needs a geometry attribute. 

## Creating a PostGIS extension

To be able to create a geometry you will need the [PostGIS](https://postgis.net/ "PostGIS") extension. You can extend your PostgreSQL database with 

```bash
sudo apt-get install postgis
sudo su postgres
psql
\c locations
CREATE EXTENSION postgis;
\q
```

Then create a view which creates a geometry based on the lat and lon attribute from the existing table. 

```sql
CREATE OR REPLACE VIEW public.locations_geom
AS SELECT id,
    lat,
    lon,
    alt,
    vel,
    st_setsrid(st_makepoint(lon, lat, alt::double precision), 4326) AS geom
   FROM locations;
```

At the moment I wrote/edited this post I have about two million datasets in the table, so fetching and rendering the data client-side would not be the best idea. This is where Geoserver takes over.

## Install and configure Geoserver

[GeoServer](https://geoserver.org/ "GeoServer") is an open source server for sharing geospatial data.

To setup GeoServer I created a stack in portainer:

```docker
version: '3'

networks:
  default:
    external: true
    name: nginx
    
services:
  geoserver:
    image: kartoza/geoserver:latest
    container_name: geoserver
    restart: always
    volumes:
      - /data/containers/geoserver:/opt/geoserver/data_dir
    ports:
      - "8080:8080"
    environment:
      GEOSERVER_DATA_DIR: ${GEOSERVER_DATA_DIR}
      GEOSERVER_ADMIN_PASSWORD: ${GEOSERVER_ADMIN_PASSWORD}
      GEOSERVER_ADMIN_USER: ${GEOSERVER_ADMIN_USER}
      INITIAL_MEMORY: ${INITIAL_MEMORY}
      MAXIMUM_MEMORY: ${MAXIMUM_MEMORY}
      DB_BACKEND: POSTGRES               
      HOST: ${POSTGRES_HOST}                         
      POSTGRES_PORT: 5432                
      POSTGRES_DB: gwc                
      POSTGRES_USER: ${POSTGRES_USER}    
      POSTGRES_PASS: ${POSTGRES_PASS}               
      POSTGRES_SCHEMA: public           
      DISK_QUOTA_SIZE: 20        
```

After deploying GeoServer you can login with the default user "admin" and password "geoserver" or the credentials you assigned with environment variables.

To add a new datasource you have to click on **Stores** and **Add new store**. Then you can select PostGIS (or whatever datasource you want to use).

![Screenshot_2024_01_31_162720_b6e7885b51.png](https://cms.mxd.codes/uploads/Screenshot_2024_01_31_162720_b6e7885b51_737a7d28df.png)

Fill out host, port, database, schema, user and passwd and save your connection.
Afterwards you can select layers which you want to publish.

![Screenshot_2024_01_31_162805_b0ba171177.png](https://cms.mxd.codes/uploads/Screenshot_2024_01_31_162805_b0ba171177_75e18fdc67.png)

After you published your layer you can preview the layer at **Layer Preview**.

Now I am not using Geoserver as endpoint to serve the tiles because I have a Mapproxy instance running which will take care of transforming tiles from internal or external ressources.

## MapProxy

Setting up MapProxy is optional but in this post I will use the endpoints from MapProxy to render a web map. So if you decied to skip MapProxy you will have to adjust the wms URL's to your endpoint from GeoServer.

[MapProxy](https://mapproxy.org/ "MapProxy") is an open source proxy for geospatial data. It caches, accelerates and transforms data from existing map services and serves any desktop or web GIS client.
I have decided create a own docker image [mapproxy-docker](https://github.com/dietrichmax/mapproxy-docker " dietrichmax/mapproxy-docker") which you can setup use in a portainer stack with:

```yaml
version: '3.9'

networks:
  default:
    external: true
    name: nginx
    
services:
  mapproxy:
    image: mxdcodes/mapproxy-docker:latest
    container_name: mapproxy
    restart: always
    ports:
      - 3050:80
    volumes:
      - /mapproxy/config:/persistentConfigFolder
      - /mapproxy/cache_data:/persistentCacheFolder
```

The only thing MapProxy needs one or multiple configuration files in yaml format for each service. So set up a locations.yaml under ```/persistentConfigFolder/locations.yaml```:

```yaml
services:
  demo:
  tms:
    use_grid_names: true
    # origin for /tiles service
    origin: 'nw'
  kml:
      use_grid_names: true
  wmts:
  wms:
    md:
      title: Location Data
      abstract: For mxd.codes.

layers:
  - name: locations
    title: Locations - mxd.codes
    sources: [locations_cache]

caches:
  locations_cache:
    grids: [webmercator]
    sources: [locations_wms]

sources:
  locations_wms:
    type: wms
    req:
      url: http://geoserver:8080/geoserver/mxdcodes/wms?
      layers: locations
      transparent: true

grids:
    webmercator:
        base: GLOBAL_WEBMERCATOR

globals:
  # cache options
  cache:
    # where to store the cached images
    base_dir: '/cache_data'
    # where to store lockfiles for concurrent_requests
    lock_dir: '/cache_data/locks'
    # where to store lockfiles for tile creation
    tile_lock_dir: '/cache_data/tile_locks'
    # request x*y tiles in one step
    meta_size: [4, 4]
  # image/transformation options
  image:
    # use best resampling for vector data
    resampling_method: bilinear # nearest/bicubic/bilinear
    formats:
      image/jpeg:
        encoding_options:
          # jpeg quality [0-100]
          jpeg_quality: 80
```

Be sure to replace the sources url with the url from your GeoServer instance.

Now you should have a endpoint for your wms tiles under **http://serverurl:3050/locations/service?** which you can use to create web map on your website.

I also created each service under a seperate subdomain and setup https for it with Cloudflare but I won't go into detail here because you will find hundreds of tutorials online.

## Creating a Web Map with Leaflet and React

The end product of all this should be a simple map on my [personal website](https://mxd.codes "mxd.codes") under [/map](/map "map"). The map component looks like the following:

```javascript
import React, { useState, useRef, useEffect } from "react"
import "ol/ol.css"
import Map from "ol/Map"
import TileLayer from "ol/layer/Tile"
import View from "ol/View"
import XYZ from "ol/source/XYZ"
import { transform, get as getProjection } from "ol/proj"
import WMTSTileGrid from "ol/tilegrid/WMTS.js"
import WMTS from "ol/source/WMTS.js"
import TileWMS from "ol/source/TileWMS.js"
import OSM from "ol/source/OSM.js"
import { getTopLeft, getWidth } from "ol/extent.js"

function LiveMap({data}) {
  const [map, setMap] = useState()
  const mapElement = useRef()
  const mapRef = useRef()
  mapRef.current = map

  const projection = getProjection("EPSG:3857")
  const projectionExtent = projection.getExtent()
  const size = getWidth(projectionExtent) / 256
  const resolutions = new Array(19)
  const matrixIds = new Array(19)
  for (let z = 0; z < 19; ++z) {
    // generate resolutions and matrixIds arrays for this WMTS
    resolutions[z] = size / Math.pow(2, z)
    matrixIds[z] = z
  }

  const locData = new TileLayer({
    opacity: 0.9,
    preload: Infinity,
    source: new WMTS({
      attributions: '&copy; <a href="https://mxd.codes/">Max Dietrich</a>',
      url: "tilelayerurl",
      layer: "locations",
      matrixSet: "webmercator",
      format: "image/png",
      projection: projection,
      tileGrid: new WMTSTileGrid({
        origin: getTopLeft(projectionExtent),
        resolutions: resolutions,
        matrixIds: matrixIds,
      }),
      style: "default",
      wrapX: true,
    }),
  })

  const aerial = new TileLayer({
    opacity: 0.9,
    preload: Infinity,
    source: new WMTS({
      attributions:
        "Tiles &copy; Esri &mdash; Source: Esri, i-cubed, USDA, USGS, AEX, GeoEye, Getmapping, Aerogrid, IGN, IGP, UPR-EGP, and the GIS User Community",
      url: "tilelayerurl",
      layer: "arcgisaerial",
      matrixSet: "webmercator",
      format: "image/png",
      projection: projection,
      tileGrid: new WMTSTileGrid({
        origin: getTopLeft(projectionExtent),
        resolutions: resolutions,
        matrixIds: matrixIds,
      }),
      style: "default",
      wrapX: true,
    }),
  })

  const center = transform([data.lon, data.lat], "EPSG:4326", "EPSG:3857")

  useEffect(() => {
    const initialMap = new Map({
      target: mapElement.current,
      layers: [aerial, locData],
      view: new View({
        center: center,
        zoom: 16,
        maxZoom: 16,
      }),
    })
    setMap(initialMap)
  }, [])

  return (
    <div
      style={{ height: "100%", width: "100%" }}
      ref={mapElement}
      className="map-container"
    />
  )
}

export default LiveMap
```


Inspired by Aaron Parecki and who he has been tracking his location since 2008 with an iPhone app and a server side tracking API i decided to go for a similar approach.

I wanted to track my position constantly with my Android smartphone and use the data to display a map with all locations i have ever been to.

A Guide to Location Tracking and Visualization with OwnTracks, Node.js, PostgreSQL, GeoServer, MapProxy, Nginx and OpenLayers

With getting into the [IndieWeb](https://indieweb.org/ "IndieWeb") i started to reflect about myself and how i can actually own my data instead of giving them to so called [silos](https://indieweb.org/silo "silos").

Due to the fact I am a passionate (mountain) bike rider i was thinking about how i could use tracking/activity apps in a way to get my data back, because obviously when i am going for a ride with my bike and i am tracking the route with strava and/or komoot the data is then saved by them.
Considering that every route is tracked on a Garmin device anyway and then synchronised to the apps i decided to have a look at the Garmin Connect/Activity API.

Unfortunately the [official Garmin Activity API](https://developer.garmin.com/gc-developer-program/activity-api/ "Garmin Activity API") is only available for approved business developer.

But after some searching i found the npm-package [garmin-connect](https://github.com/Pythe1337N/garmin-connect "garmin-connect") which allows you to connect to Garmin Connect for sending and receiving activity data.

## Fetching and storing activities from Garmin Connect with Strapi

You can install the package with
```bash
npm install garmin-connect
```
or

```bash
yarn add garmin-connect
```
and use it like
```javascript
const { GarminConnect } = require('garmin-connect');
// Create a new Garmin Connect Client
const GCClient = new GarminConnect();
// Uses credentials from garmin.config.json or uses supplied params
await GCClient.login('my.email@example.com', 'MySecretPassword');
const userInfo = await GCClient.getActivities());
```
I stored the email and the password for the login in environment variables and used them with 
```javascript
const { GarminConnect } = require('garmin-connect');
const GCClient = new GarminConnect();
await GCClient.login(process.env.GARMIN_EMAIL ,process.env.GARMIN_PWD);
const userInfo = await GCClient.getActivities());
```

Afterwards experimented a bit with the Garmin Connect and found out there are some very low limits. 
Approximately after ~50 requests in one minute couldn't get anymore any data and had to wait for some (maybe one?; i am not sure) hours until the request was successful again.

In general you can probably do way more with Garmin Connect as you will need, like for example:
- Get user info
- Get social user info
- Get heart rate
- Set body weight
- Get list of workouts
- Add new workouts
- Add workouts to you calendar
- Remove previously added workouts
- Get list of activities
- Get details about one specific activity
- Get the step count

I used only `GCClient.getActivities();` to get all activities and and  `GCClient.getActivity({ activityId: id });` to get the details of the activity (like spatial data representing the route, start-point and end-point).

To be able to store the data in Strapi i created a new content type collection  **activities** with the following fields/attributes:

![content_type_activity_3b64fb0368.png](https://cms.mxd.codes/uploads/content_type_activity_3b64fb0368_65ef0f7674.png)

Afterwards new entrys for activities can be created.

> Strapi has a documention which explains how to fetch external data and create entries with it: [Fetching external data](https://strapi.io/documentation/developer-docs/latest/guides/external-data.html#call-the-function "Fetching external data").

To get the data from Garmin Connect into Strapi i created a function `getGarminConnectActivities.js`  for Strapi ([https://gist.github.com/dietrichmax/306b36abd5a9d1ac0c938adcd15f2f69](https://gist.github.com/dietrichmax/306b36abd5a9d1ac0c938adcd15f2f69 "getGarminConnectActivities.js"))

The function will take care of:
- getting existing activities in Strapi,
- get recent activites from Garmin Connect,
- checking if an activity already exists in Strapi,
- creating the activity in Strapi if it doesn't exist yet and also get the details for it.

and basically looks like this:
```javascript
module.exports = async () => {
  await GCClient.login(process.env.GARMIN_USERNAME, process.env.GARMIN_PWD)
  const activities = await GCClient.getActivities()
  const exisitingActivities = await getExistingActivities()
  activities ? activities.map((activity) => {
    const isExisting = exisitingActivities.includes(activity.activityId)
    isExisting ? console.log(activity.activityId + " already exists") : createEntry(activity)
  })
  : console.log("no activities found")
}
```

After all activities from Garmin are fetched, i am mapping through them to

- check if they already exist in my cms
- and create them if needed

The exisiting activities in my CMS  are fetched with
```javascript
const getExistingActivities = async () => {
  const existingActivityIds = []
  const activities = await axios.get(`https://strapi.url/activities`)
  
  activities.data.map((activity) => {
    existingActivityIds.push(activity.activityID)
  })
  return existingActivityIds
}
```
and the activityIds (originally from Garmin Connect) are returned to be able to check if an entry already exists.
If the entry doesn't exist, details for the missing activity are fetched and a new entry is created with:

```javascript
const createEntry = async (activity) => {
  const details = await GCClient.getActivity({ activityId: activity.activityId });
  await strapi.query('activity').create({
    activityID: activity.activityId,
    activityName: activity.activityName,
    beginTimestamp: activity.beginTimestamp,
    activityType: activity.activityType,
    distance: activity.distance,
    duration: activity.duration,
    elapsedDuration:  activity.elapsedDuration,
    movingDuration: activity.movingDuration,
    elevationGain: activity.elevationGain,
    elevationLoss: activity.elevationLoss,
    minElevation: activity.minElevation,
    maxElevation: activity.minElevation,
    sportTypeId: activity.sportTypeId,
    averageSpeed: activity.averageSpeed * 3.6 //(m/s -> km/h),
    maxSpeed: activity.maxSpeed * 3.6 //(m/s -> km/h),,
    startLatitude: activity.startLatitude,
    startLongitude: activity.startLongitude,
    endLatitude: activity.endLatitude,
    endLongitude: activity.endLongitude,
    details: details
  })
}
```

You can save way more but i tried to cut it down to the ones i really need or eventually will need.

Only thing missing is some automatic triggering. For this you can use cron jobs in Strapi ([/config/functions/cron.js](https://strapi.io/documentation/developer-docs/latest/guides/external-data.html#call-the-function "cron.js")).

```javascript
module.exports = {
// Add your own logic here (e.g. send a queue of email, create a database backup, etc.).

    '0 0 18 * * *': () => {
      strapi.config.functions.getGarminConnectActivities();
    },
};
```

I decied to trigger the function everyday at 6 pm so i can have a look at my activites in the evening. 😎

Thats the fun from the 'backend part'.

Next step is to visualize the data in NextJS.

## Visualizing the data with NextJS

I am really liking the embeddable tours of [komoot](https://www.komoot.de/b2b/embed "komoot embed") optic-wise, so i decided to create a similiar looking option for the preview of my activities in the [posts-feed](/ "all posts") and [activites-feed](/activities).

So the preview should consist of
- an title of the activitie (+datetime),
- an symbol displaying the activity type (cycling, running, etc.)
- some basic metrics like distance, duration and average speed,
- a map displaying the line of the route with osm-data and and aerial-view,
- and optionally a graph displaying the elevation along the track (still in work).

The component looks like this at the moment:

![activity_post_preview_eeca5a51b1.png](https://cms.mxd.codes/uploads/activity_post_preview_eeca5a51b1_05959d7192.png)

### Showing some Metrics

In the **activityType** object you can find ```typeId``` which correlates to the type of the activity, e.g. cycling, running etc.
I created a small function which will return a icon from [react-icons](https://github.com/react-icons/react-icons "react-icons") visualizing the activity type.

``` javascript
import { FaRunning, FaBiking } from 'react-icons/fa';

const getTypeIcon = activity => {
    if (activity.activityType.typeId == 5) {
        return <FaBiking/>
    } else if (activity.activityType.typeId == 15) {
      return <FaRunning/>
 }

getTypeIcon(activity)
```

Due to the fact the duration is given in seconds and i wanted it to display like 1h 10m 12s there is also a need for a workaround which looks like the following:
```javascript
const secondsToHms = (s) => {
    const hours = (((s - s % 3600) / 3600) % 60)
    const minutes = (((s - s % 60) / 60) % 60)  
    const seconds = (s % 60)  
    return (`${hours}h ${minutes}min ${seconds}s`)
 }
secondsToHms(activity.duration)
```

### Displaying  a Map with "react-leaflet"

Then i created a small map with [react-leaflet](https://react-leaflet.js.org/ "react-leaflet") displaying 
- the track as polyline,
- the start point and
- the end point.

Therefore i created a new map-component:
```javascript
import React, { useEffect, useState } from "react"
import { Marker, MapContainer, TileLayer, LayersControl, Polyline } from "react-leaflet";

const Map = (data) => {
  const geo = data.data
  const style= { 
    color: '#11a9ed',
    weight: "5"
  }

  const bounds = [[geo.maxLat, geo.maxLon], [geo.minLat, geo.minLon]]
  return (
    <MapContainer
      style={{ height: "500px", width: "100%" }}
      bounds={bounds}       
      scrollWheelZoom={false}
    >
    <LayersControl position="topright">
      <LayersControl.BaseLayer checked name="OpenStreetMap.Mapnik">
        <TileLayer 
          url='https://{s}.basemaps.cartocdn.com/rastertiles/voyager/{z}/{x}/{y}{r}.png'
          attribution ='&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors &copy; <a href="https://carto.com/attributions">CARTO</a>'

        />
        </LayersControl.BaseLayer>
        <LayersControl.BaseLayer name="Esri World Imagery">
          <TileLayer
            attribution='Tiles &copy; Esri &mdash; Source: Esri, i-cubed, USDA, USGS, AEX, GeoEye, Getmapping, Aerogrid, IGN, IGP, UPR-EGP'
            url="https://server.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}"
          />
        </LayersControl.BaseLayer>

        <Marker id="start" position={geo.startPoint}/>
        <Polyline pathOptions={style} positions={geo.polyline} />
        <Marker id="end" position={geo.endPoint}/>

      </LayersControl>
    </MapContainer>
  );
};

export default Map;
``` 
Luckily the data from the Garmin Connect has already exactly the structure we need to create the map, which are the coordinates for the polyline and the two points.

The coordinates can be found in **geoPolylineDTO** in the activitydetails 

![activity_details_a6d325373e.png](https://cms.mxd.codes/uploads/activity_details_a6d325373e_6bb242aae0.png)

With maxLat, maxLon, minLat and minLon i created the bounds which will set the default view for the map when passed to the MapContainer.
```javascript
const bounds = [[geo.maxLat, geo.maxLon], [geo.minLat, geo.minLon]]

<MapContainer
      style={{ height: "200px", width: "100%" }}
      bounds={bounds}       
      scrollWheelZoom={false}
 >
.
.

```
Then i added the LayerControl to be able to toggle between the two Tilelayers
- OSM (Carto) and
- Aerial Image (Esri)

After that i just created two markers and a polyline with the exisiting objects `startPoint`, `endPoint` and `polyline`.

```javascript
.
.
        <Marker id="start" position={geo.startPoint}/>
        <Polyline pathOptions={style} positions={geo.polyline} />
        <Marker id="end" position={geo.endPoint}/>
.
.
```

You can find several other tilelayers in [leaflet-providers-preview](/leaflet-extras-github/leaflet-providers/preview/ "leaflet-providers-preview").

For an example of the preview head over to [/activities](/activities  "activitites").
You can find the code for the [activity-preview](https://github.com/DaTurboD/mxd-codes-frontend/blob/v2/components/activity/activity-preview/activity-preview.js "activity-preview") in my github-repositiory.

For the actual post of the activity i made the map a bit larger and added some more metrics for now.

(osm)
![activity_post_bd91b407f4.png](https://cms.mxd.codes/uploads/activity_post_bd91b407f4_a951c65969.png)

(Aerial view)
![activity_post_aerial_11e09d89bf.png](https://cms.mxd.codes/uploads/activity_post_aerial_11e09d89bf_4424be4cd9.png)



Step-by-step guide explaining how to fetch data from Garmin Connect, store it in Strapi and visualize it with NextJS and React-Leaflet.

Data privacy

Implementing a Custom Cookie Banner in Next.js

A Guide to Location Tracking and Visualization with OwnTracks, Node.js, PostgreSQL, GeoServer, MapProxy, Nginx and OpenLayers

Fetching and storing activities from Garmin Connect with Strapi and visualizing them with NextJS