About me

Academic Certificate in Geographical Information Systems

Technical system planner for steel and metal constructions

Cycling

Mountaineering

IndieWeb

Technical Skills

Python

ReactJS

JavaScript

TypeScript

Linux

Tools

ArcGIS Pro

QGIS

RIWA GIS

Jira

Confluence

Azure

mail@mxd.codes | https://mxd.codes

- Implementing and designing virtual desktops for GIS users
- Cloudification and modernization of GIS applications and geodata services
- Administration in the Windows server and cloud environment
- Project management and coordination of external service providers
- Error analysis and support via remote maintenance

- Developed an Excel-Addin with Autocomplete, ReactJS, OpenLayers and REST API
- Optimized QGIS Server Python Plugins for WMS requests
- Extended web-GIS applications for user interactions

- Consulting and project management for the implementation of GIS applications for customers (eg. digitization of water supply networks and introduction of split sewage charges)
- Responsible for spatial data management (e.g. automation of workflows and analysis and processing of spatial data)
- Migrated data from third-party gis applications with SQL, Python and FME
- Recording and prioritization of customer requirements and definition of future performance criteria
- Organization and implementation of GIS training courses

As a CAD-specialist, I was responsible for the digitization process of municipal water networks for local authorities .

As Technischer Systemplaner i was responsible for processing of service phases 1 to 5 according to HOAI for steel, wood, metal and membrane structures in international project teams.

Max Dietrich

content_PXL_20230701_031551845.jpg

cover_PXL_20230701_031551845.jpg

thumbnail_PXL_20230701_031551845.jpg

content_PXL_20230623_122024152.jpg

cover_PXL_20230623_122024152.jpg

thumbnail_PXL_20230623_122024152.jpg

content_PXL_20230705_204610196.jpg

cover_PXL_20230705_204610196.jpg

thumbnail_PXL_20230705_204610196.jpg

content_PXL_20230619_002545764.jpg

cover_PXL_20230619_002545764.jpg

thumbnail_PXL_20230619_002545764.jpg

content_PXL_20230702_004836254.jpg

cover_PXL_20230702_004836254.jpg

thumbnail_PXL_20230702_004836254.jpg

content_PXL_20230704_174757943.jpg

cover_PXL_20230704_174757943.jpg

thumbnail_PXL_20230704_174757943.jpg

content_PXL_20230619_140058494.jpg

cover_PXL_20230619_140058494.jpg

thumbnail_PXL_20230619_140058494.jpg

content_PXL_20230629_040505247.jpg

cover_PXL_20230629_040505247.jpg

thumbnail_PXL_20230629_040505247.jpg

content_PXL_20230621_010200163.jpg

cover_PXL_20230621_010200163.jpg

thumbnail_PXL_20230621_010200163.jpg

content_PXL_20230627_185234307.jpg

cover_PXL_20230627_185234307.jpg

thumbnail_PXL_20230627_185234307.jpg

content_PXL_20230629_231727178.jpg

cover_PXL_20230629_231727178.jpg

thumbnail_PXL_20230629_231727178.jpg

content_PXL_20230625_151646409.jpg

cover_PXL_20230625_151646409.jpg

thumbnail_PXL_20230625_151646409.jpg

content_PXL_20230626_222900844.jpg

cover_PXL_20230626_222900844.jpg

thumbnail_PXL_20230626_222900844.jpg

content_PXL_20230625_164112783.jpg

cover_PXL_20230625_164112783.jpg

thumbnail_PXL_20230625_164112783.jpg

content_PXL_20230625_151604653.jpg

cover_PXL_20230625_151604653.jpg

thumbnail_PXL_20230625_151604653.jpg

content_PXL_20230705_182544393.jpg

cover_PXL_20230705_182544393.jpg

thumbnail_PXL_20230705_182544393.jpg

content_PXL_20230701_011804772.jpg

cover_PXL_20230701_011804772.jpg

thumbnail_PXL_20230701_011804772.jpg

content_PXL_20230702_183556611.jpg

cover_PXL_20230702_183556611.jpg

thumbnail_PXL_20230702_183556611.jpg

content_PXL_20230702_200434150.jpg

cover_PXL_20230702_200434150.jpg

thumbnail_PXL_20230702_200434150.jpg

USA Roadtrip

Since I store blog posts in a self-hosted version of [strapi](https://strapi.io/ "strapi"), I've been looking for a way to automatically generate a table of contents from Markdown for all posts in my Next.js site.

The idea is that during the build process all captions are extracted from the article content (I use [getStaticProps](https://nextjs.org/docs/basic-features/data-fetching/get-static-props) for all articles) and then display them fixed next to the content using a separate component.

## Extracting headers with regex from markdown

After some research and trial and error I decided to use regex to extract the headers from the markdown text using the hash symbol.

Since there are links in the markdown text with anchor elements and codeblocks that also contains hash symbols which will be misinterpreted as headers, these are removed first from the whole text.

```js
  const regexReplaceCode = /(```.+?```)/gms
  const regexRemoveLinks = /\[(.*?)\]$.*?$/g

  const markdownWithoutLinks = markdown.replace(regexRemoveLinks, "")
  const markdownWithoutCodeBlocks =  markdownWithoutLinks.replace(regexReplaceCode, "")
```

Then, using the hash symbol, the headings ```h1``` to ```h6``` are filtered from the text and added to an array named titles.

```js
  const regXHeader = /#{1,6}.+/g
  const titles = markdownWithoutCodeBlocks.match(regXHeader)
```

Next, using the headings, levels of headings, titles, and anchor links are created and added to an array ```toc``` so that the headings can later be nested with child headings and anchor links can be added. The anchor links can then be used to jump from the table of contents to a heading.

```js
let globalID = 0
titles.map((tempTitle, i) => {
      const level = tempTitle.match(/#/g).length - 1
      const title = tempTitle.replace(/#/g, "").trim("")
      const anchor = `#${title.replace(/ /g, "-").toLowerCase()}`
      level === 1 ? (globalID += 1) : globalID

      toc.push({
        level: level,
        id: globalID,
        title: title,
        anchor: anchor,
      })
    })
```

The array toc is returned and I pass this for example as ```post.toc``` to the respective post, where ```post.toc``` in turn is passed as props to the ToC component.

```js
export async function getStaticProps({ params }) {
  const content = (await data?.posts[0]?.content) || ""
  const toc = getToc(content)

  return {
    props: {
      post: {
        content,
        toc
      },
    },
  }
}
```

## Rendering the table of contents

Each element from the ```toc``` array is now added to the table of contents component. The levels variable is used to dynamically create indentation for subordinate headings with margin and the anchor is used for links.

```js
import styled from "styled-components"

const ToCListItem = styled.li`
  list-style-type: none;
  margin-bottom: 1rem;
  padding-left: calc(var(--space-sm) * 0.5);
  border-left: 3px solid var(--secondary-color);
  margin-left: ${(props) => (props.level > 1 ? `${props.level * 10}px` : "0")};
`

export default function TableOfContents({ toc }) {
  function TOC() {
    return (
      <ol className="table-of-contents">
        {toc.map(({ level, id, title, anchor }) => (
          <ToCListItem key={id} level={level}>
            <a href={anchor}>{title}</a>
          </ToCListItem>
        ))}
      </ol>
    )
  }

  return (
    <>
      <p>Table of contents</p>
      <divr>
        <TOC />
      </div>
    </>
  )
}

```

However, the anchor links do not work yet, since the corresponding section IDs still have to be added to the titles in Markdown content. 

For rendering the actual post content I use [react-markdown](https://github.com/remarkjs/react-markdown "react-markdown"). With the help of custom renderers you can now edit all html elements in react-markdown. To add anchor links to the titles I use custom renderers for ```h1``` to ```h6```.

```js
const renderers = {
  h2: { children }) => {
    const anchor = `${children[0].replace(/ /g, "-").toLowerCase()}`
    return <h2 id={anchor}>{children}</h2>
  },
  h3: ({children }) => {.
    const anchor = `${children[0].replace(/ /g, "-").toLowerCase()}`
    return <h3 id={anchor}>{children}</h2>
  },
  h4: ({children }) => {.
    const anchor = `${children[0].replace(/ /g, "-").toLowerCase()}`
    return <h4 id={anchor}>{children}</h2>
  },
  h5: ({children }) => {.
    const anchor = `${children[0].replace(/ /g, "-").toLowerCase()}`
    return <h5 id={anchor}>{children}</h2>
  },
  h6: ({children }) => {.
    const anchor = `${children[0].replace(/ /g, "-").toLowerCase()}`
    return <h6 id={anchor}>{children}</h2>
  },
```

Lastly, I added a little scroll effect with the following css-property ```scroll-behavior: smooth```;

## Github Links

- [getToc function](https://github.com/dietrichmax/mxd-codes-frontend/blob/v2/src/utils/getToc.js)
- [toc component](https://github.com/dietrichmax/mxd-codes-frontend/blob/v2/src/components/article/article-toc/table-of-contents.js)
- [articles page](https://github.com/dietrichmax/mxd-codes-frontend/blob/v2/pages/articles/%5Bslug%5D.js)
- [renderers](https://github.com/dietrichmax/mxd-codes-frontend/blob/v2/src/utils/renderers.js)



Building a Table of Contents (TOC) from markdown for your React blog

content_IMG_20221027_120244.jpg

cover_IMG_20221027_120244.jpg

thumbnail_IMG_20221027_120244.jpg

content_IMG_20221028_102122.jpg

cover_IMG_20221028_102122.jpg

thumbnail_IMG_20221028_102122.jpg

content_IMG_20221028_115259.jpg

cover_IMG_20221028_115259.jpg

thumbnail_IMG_20221028_115259.jpg

content_IMG_20221027_124214.jpg

cover_IMG_20221027_124214.jpg

thumbnail_IMG_20221027_124214.jpg

content_IMG_20221031_111650.jpg

cover_IMG_20221031_111650.jpg

thumbnail_IMG_20221031_111650.jpg

instagram

Cyprus Coffee Ride

Recently I went out of storage for my homelab so I bought an used NAS (Synology DS214 play) to have some more capacities for [Proxmox](https://www.proxmox.com/de/ "Proxmox") Backups and OpenStreetMap. I still had a 1TB hdd lying around at home, which I now use for proxmox backups. 

To have some redundancy (and to learn something new) I decieded to copy the Proxmox backups to the cloud, in particular to an Azure Storage Account with [AzCopy](https://learn.microsoft.com/en-us/azure/storage/common/storage-use-azcopy-v10) and in the following I will describe with more details how I was able to do it.

Overall this article will cover the following informations:
- Creating an Azure Storage Account
- Getting started with AzCopy
- Creating a bash-script to copy the Proxmox backups to an Azure Storage Container

## Creating an Azure Storage Account

First off all you need an active Azure subscription and an storage account to be able to store your backups. In the [Azure Portal](https://portal.azure.com "Azure Portal") you can search for the service "Storage Accounts" which you will need.

![azure storage account.png](/uploads/azure_storage_account_e81efc2682.png)

In the service "Storage Accounts" you can create a new storage account. For the storage account you will need 
- an active azure subscription,
- a ressource group (create one if you don't have one it, e.g. RG-HOMELAB),
- a storage account name,
- selecting a region and 
- selecting redundancy (e.g. LRS;)
- Access tier "cold" (See Advanced)

![storage account_basics.png](/uploads/storage_account_basics_e82f1d8a4d.png)
![storage account_advanced.png](/uploads/storage_account_advanced_02f6609c40.png)

You can keep all the other settings as default. After your Storage Account has been deployed you can add a lifecycle rule from "Lifecycle Management" which will move files from the "cold" access tier to the archive storage. 

![storage lifecycle management.png](/uploads/storage_lifecycle_management_e113a6efb8.png)

For example I created a rule which moves all new files after one day to the archive storage tier.

![storage lifecycle lifecycle rule.png](/uploads/storage_lifecycle_lifecycle_rule_85a074cae0.png)

![storage lifecycle lifecycle rule 2.png](/uploads/storage_lifecycle_lifecycle_rule_2_5486e872ee.png)

By storing files in archive storage instead of in the regular "cold" access tier you can actually save about 82%. But keep in mind that accessing data in the Archive storage is more expensive than in the cold (or any other) storage tier.

Also you could create another rule which will for example will delete all all blobs which were created 365 days ago.

![storage pricing.png](/uploads/storage_pricing_8998b65a68.png)

Please have a look at [https://azure.microsoft.com/en-us/pricing/details/storage/blobs/](https://azure.microsoft.com/en-us/pricing/details/storage/blobs/ "Azure Storage Pricing") for uptodate Azure Storage pricing.

After the storage account has been configured you will need to create a Container where the actual files will be stored.
Go to  "Data storage" -> "Containers" and create a Container.
![create storage container.png](/uploads/create_storage_container_8ee34fe39e.png)
Again name it however you want.

Due to the fact that the current version of AzCopy V10 does not support Azure AD authorization in cron jobs I used an SAS token to be able to upload files to the container. You can create a SAS token in the container at "Shared access tokens".

![storage shared access token.png](/uploads/storage_shared_access_token_1646ebf346.png)

For the Shared access token you will need to select the permissions for Add/Create/Write and select an expiry date for security reasons. Then you can generate the SAS token and URL. Copy that **Blob SAS URL** because you will need it for the upload script.

## Getting started with AzCopy

> AzCopy is a command-line utility that you can use to copy blobs or files to or from a storage account. This article helps you download AzCopy, connect to your storage account, and then transfer data. (https://learn.microsoft.com/en-us/azure/storage/common/storage-use-azcopy-v10)

To get AzCopy for Linux you have to download a tar file and decompress the tar file anywhere you like. You can then just use AzCopy because it's an executable file, so nothing has to be installed.

```bash
#Download AzCopy
cd ~
wget https://aka.ms/downloadazcopy-v10-linux
 
#Expand Archive
tar -xvf downloadazcopy-v10-linux
 
#(Optional) Remove existing AzCopy version
rm /usr/bin/azcopy
 
#Move AzCopy to the destination you want to store it
cp ./azcopy_linux_amd64_*/azcopy /usr/bin/

# Remove Azcopy from home
rm -r downloadazcopy-v10-linux
rm -r azcopy_linux_amd64_10.16.2/

```

By adding the azcopy file location as system path you can just type azcopy from any directory on your system.
You can add it to your system path with:

```bash
nano ~/.profile
```
and then adding these lines:

```bash
export PATH=/usr/bin/azcopy:$PATH
```

Lastly, update your system variables:

```bash
source ~/.profile
```

## Creating a bash-script to synchronize the Proxmox backup directory to an Azure Storage Container

The only piece missing now is the script which will upload the the Proxmox backup files to the previously created azure storage container after the backup task has finished. 
For copying the backups to Azure we will use azcopy **copy** because acopy uses less memory and incurs lower billing costs because a copy operation does not need to index the source or destination before moving files in comparison to azcopy **sync**.
Azcopy also compares file names and last modified timestamp to only upload new or changed files to the storage container, which overall will reduce bandwidth usage and it will work perfectly with the previously created lifecycle rule.

For automatically starting the upload after the backup has finished  we can use a hook script for vzdump. Therefore you need to add the following line to the end of the "/etc/vzdump.conf" file.
```bash
script: /etc/your-custom-script.sh
```
Afterwards you can create the script which will upload the files with:
```bash
cd ~
mkdir scripts
cd scripts
nano upload-backups-to-azure.sh
```
Then copy paste the following content into the file and replace the content for src with the location of your dumps. Note that there is "/*" at the end of src so that only the files inside the directory will be copied. Also replace token with the **Blob SAS URL**.

```bash
#!/bin/bash
# Script to upload Proxmox backups to Azure Storage

src="/mnt/pve/xyz/dump/*"
token="Blob SAS URL"

dobackup(){
  echo "Uploading Proxmox backups from $src to Azure..."
  azcopy copy "$src" "$token" --overwrite=false
  echo "Finished Uploading!"
}

if [ "$1" == "job-end" ]; then
  dobackup
fi

exit 0
```

Close the file and make it executable for the user with:

```bash
chmod +x ~/scripts/upload-backups-to-azure.sh
```

Now the next time your backup task has finished the files will be automatically uploaded to your Azure storage container.
Due to the  hook script you can check the status of the copy process in the proxmox ui.

How to copy your Proxmox backups with AzCopy to Azure Storage Containers

From Docker to Kubernetes 

This guide is designed for people who want to learn docker infrastructure. Not just how to use docker, but how to stand up docker services in a robust and secure manner. This guide is about standing up a single node docker environment with backups, IP whitelisting, non-root containers (where supported), single sign-on and reverse proxying.

Doing More with Docker 

large_IMG_20220714_214009_965.jpg

medium_IMG_20220714_214009_965.jpg

small_IMG_20220714_214009_965.jpg

thumbnail_IMG_20220714_214009_965.jpg

large_IMG_20220714_214010_020.jpg

medium_IMG_20220714_214010_020.jpg

small_IMG_20220714_214010_020.jpg

thumbnail_IMG_20220714_214010_020.jpg

large_IMG_20220714_214009_999.jpg

medium_IMG_20220714_214009_999.jpg

small_IMG_20220714_214009_999.jpg

thumbnail_IMG_20220714_214009_999.jpg

large_IMG_20220714_214010_081.jpg

medium_IMG_20220714_214010_081.jpg

small_IMG_20220714_214010_081.jpg

thumbnail_IMG_20220714_214010_081.jpg

Trans Dolomiti MTB Tour

If you are looking for a Nginx configuration to upstream Nextjs sites have a look the the following Github Gist.

[https://gist.github.com/dietrichmax/845737a8de8b186aa27a699760eba691](https://gist.github.com/dietrichmax/845737a8de8b186aa27a699760eba691)

Nginx configuration to upstream Nextjs

thumbnail_content_IMG_20220321_114604_268e9efe5e.webp

Cap Formentor, Mallorca

content_IMG_20220321_133245[1].jpg

cover_IMG_20220321_133245[1].jpg

thumbnail_IMG_20220321_133245[1].jpg

content_IMG_20220321_114725[1].jpg

cover_IMG_20220321_114725[1].jpg

thumbnail_IMG_20220321_114725[1].jpg

content_IMG_20220322_124235[1].jpg

cover_IMG_20220322_124235[1].jpg

thumbnail_IMG_20220322_124235[1].jpg

Alcúdia, Illes Balears, Mallorca, Spanien

In this article I will explain how you can create a basic web map with Leaflet and React by using functional components without any third party packages. So i will strongly recommend to have a look at the [Leaflet API reference](https://leafletjs.com/reference.html).

## React and Leaflet

First of all you need a react app which you can create with:

```js
npx create-react-app leaflet-react
cd leaflet-react
```

Then you will need the Leaflet package which you can add with ```npm install leaflet``` or ```yarn add leaflet```.
After you have installed the package you can import it with ```import L from "leaflet"``` into your App.js. The import of the leaflet.css is also important because without it the map-tiles will be misplaced.

```js
import React, { useEffect } from "react";
import L from "leaflet";
import 'leaflet/dist/leaflet.css';

const App = () => {
  
    return (
    )
  };
  
export default App;
```

Now you can create the actual map by using the UseEffect hook:

```js
useEffect(() => {
  L.map("map", mapParams);
}, []);
```

The "map" parameter is the id of the html-element in which the map will be rendered. With mapParams you can passsome basic parameters as props for the Leaflet map. These parameters can just be created in a object [Leaflet API: Map Creation)](https://leafletjs.com/reference.html#map-factory):

```js
const mapParams = {
  center: [0, 0],
  zoom: 0,
  layers: [layer]
};
```

TileLayers with OpenStreetMap Data can be created with L.tileLayer(url, options) [(Leaflet API: TileLayer)](https://leafletjs.com/reference.html#tilelayer).

```js
  const layer = L.tileLayer(`https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png`, {
        attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
  });
```

Now you can create some basic css in js for the map container which makes the map fullscreen and will be passed as style props:

```js
const mapStyles = {
  width: "100%",
  height: "100vh"
 };
```

In the end you just need html element in which the map will be rendered:

```js
 return (
      <div>
        <div id="map" style={mapStyles} />
      </div>
    )
```

If you are curious how to add some more features like vector layers, some controls or markers have a look at the [Leaflet API Reference](https://leafletjs.com/reference.html) and much fun playing around with your Leaflet web map created with React and functional components. In case something didn't work out as expected you can just clone the following repositiory.

Github Repositiory: [https://github.com/dietrichmax/leaflet-react-functional-component](https://github.com/dietrichmax/leaflet-react-functional-component)
Live Demo: [https://dietrichmax.github.io/leaflet-react-functional-component/](https://dietrichmax.github.io/leaflet-react-functional-component/)

All code together:

```js
import React, { useEffect } from "react";
import L from "leaflet";
import 'leaflet/dist/leaflet.css';

const Map = () => {
    const mapStyles = {
        width: "100%",
        height: "100vh"
      };
      const layer = L.tileLayer(`https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png`, {
        attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
      });
  

    const mapParams = {
      center: [0, 0],
      zoom: 0,
      layers: [layer]
    };
     
    // This useEffect hook runs when the component is first mounted, 
    // similar to componentDidMount() lifecycle method of class-based
    // components:
    useEffect(() => {
        L.map("map", mapParams);
    }, []);
  
    return (
      <div>
        <div id="map" style={mapStyles} />
      </div>
    )
  };
  
  export default Map;
js

How to create web maps with Leaflet, React and functional components

reddit

twitter

How to create a custom cookie banner for your React application

Some blogs have these related articles or posts sections where visitors can have a preview at more content after they just read a post. That's what I wanted to create for my personal website which is built with React (Nextjs) and in this article I want to show you how you also can do it for any other react application.

## Related Posts Component

The keypoint to be able to show related Posts is that you somehow have to create a relation between the posts which doesn't exist yet. All my posts have

- a title,
- a description
- a date,
- tags and
- an image.

```md
---
title: "Post about Web-Development with React"
description: "This is a sample description for the post."
date: "2022-05-02"
tags: ["React", "Web-Development"]
image: "../image.jpg"
---
```

I decided to use the tags to create a relation between the posts because it's the only information which all posts can have in common and is related to the actual topic of the post. Therefore i needed data of all posts overall and data about the current posts. The data from the current post will be just passed as props to the component. All post data for my website is created in a CMS which can be accessed via GraphQL. The query to get allPosts looks like this.

```js
export async function getAllPosts() {
  const data = await fetchStrapiAPI(
    `
    {
      posts(sort: "published_at:desc") {
        id
        published_at
        title
        slug
        content
        excerpt
        tags {
          name
        }
        coverImage {
          url
        }
      }
    }
  `
  )
  return data?.posts
}
```

The only relevant information here is the slug and the tags with their names.

Now the current post gets filtered out from the posts array and a variable maxPosts for the maximum number of posts which should be displayed will be created.

```js
// filter out current post
let posts = allPosts.filter((aPost) => aPost.slug !==post.slug);
    
// define maxPosts to display
const maxPosts = 3
```

For better readability I assigned the tasks of the current posts to a variable called currentTags

```js
// get tags of current posts
const currentTags = post.tags.map((tag) => {
  return tag.name
})
```

Now you have to map through posts and the tags post.tags of these posts to check if one of these tags is the same as one of the currentTags. If one tag is the same we will just enumerate a new relevance variable.

```js
    // rate posts depending on tags
    posts.forEach((post) => {
        post.relevance = 0
        post.tags.forEach((tag) => {
            if (currentTags.includes(tag.name)) {
                post.relevance ++
            }
        })
    })
```

The post with the highest relevance will be the post with the most common tags and be the most related post. If you are also using categories you can of course also adjust the relevance depending on the categories and the tags. For example you could add two relevance points for categories and one relevance point for tags.

Then you can sort the array of all posts descending by relevance.

```js
    // sort posts by relevance
    const sortedPosts = posts.sort(function(a, b) {
        return b.relevance - a.relevance;
    });
```

In the end you can slice them with maxPosts and finally render them.

```js
import PostPreview from 'src/components/article/article-preview/article-preview'

export default function RecommendedPosts({ post, allPosts }) {

    // filter out current post
    let posts = allPosts.filter((aPost) => aPost.slug !==post.slug);
    
    // define maxPosts to display
    const maxPosts = 3

    // get tags of current posts
    const tags = post.tags.map((tag) => {
        return tag.name
    })

    // rate posts depending on tags
    posts.forEach((post) => {
        post.relevance = 0
        post.tags.forEach((tag) => {
            if (tags.includes(tag.name)) {
                post.relevance ++
            }
        })
    })

    // sort posts by relevance
    const sortedPosts = posts.sort(function(a, b) {
        return b.relevance - a.relevance;
    });

    return (
        <>
          {sortedPosts.slice(0,maxPosts).map((post, i) => (
            <PostPreview
              key={i} 
              postData={post}
            />
          ))}
        </>
    )
  }
```
  

How to build a related posts component for your React blog

In this article I am going to explain, how you can implement Google Adsense in Next.js applications (or any other react applications). There are several approaches for implementing Adsense on a react site and I want to show you how you can add Adsense with privacy in mind.

As soon as you signed up for your site on Adsense and it has been approved, you have to place the Adsense code (or ad unit code) in your pages. This code in general exists of three parts.

## Add Google Adsense script

The first part will load the actual Adsense script. This script is typically placed between the ```<head></head>``` or ```<body></body>``` section.

We will not just place it there because we just want the script to be inserted after a user has given consent to allow third-party cookies and services. So I for example outsourced it in a separate function which will be triggered by accepting cookies.

```js
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);
}
```

By clicking the 'Accept required and optional cookies' button on this site, this function will be triggered which will then place the adsense script into the <head></head> section.

If you want to use Auto ads you are actually already done as long as Auto Ads are enabled in your Adsense Account for your site.

Otherwise, if you want to place ad units individually you can do this now like the following.

## Add ad units

I would recommend to create a separate component for ad units. This could look like the following:

```js
import styled from 'styled-components';
import { useEffect } 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 this component you will find the other to parts of the original Adsense script. So here the actual ad unit element is placed with a small ad-label. You can load this component in every page and position you like and place your individual client and slot ID. After the ad unit is placed ```window.adsbygoogle``` in the useEffect hook will fill this ad unit with the actual advertisement graphics.

With the useEffect hook ads will also be requested/refreshed when a user navigates to any other page without refreshing the page.

How to add Google Adsense to Next.js applications

With [Gatsby 4](https://www.gatsbyjs.com/gatsby-4/) bringing in Server-Side Rendering (SSR) and Deferred Static Generation (DSG) you need an alternative methode to just hosting static files. Each page using SSR or DSG will be rendererd after a user requests it so there has be a server in the background which will handle these requests and build the pages if needed.

In this post i will show you how you can deploy your Gatsby site with SSR and/or DSG on your own server with a CI/CD pipeline via PM2 and Github Webhooks.

Therefore i will be using

- Gatsby 4,Nginx,
- Nginx
- PM2 and
- Github webhooks.

## Setup your server

First of all you need an server with root access. I strongly recommend to have a look at the guide ["Initial Server Setup with Ubuntu 18.04"](https://www.digitalocean.com/community/tutorials/initial-server-setup-with-ubuntu-18-04) from the DigitalOcean community which will lead you through the process of:

- Logging in and set up root user access to your server with SSH
- Creating a new user
- Granting Administrative Privileges to the new user
- Setting up a basic firewall
- Giving your regular user access to the server with SSH key authentication.

After you have done that you can continue by installing all necessary dependencies on your server.
Install Node.js

Again there is an guide by DigitalOcean which will help you [installing Node.js using PPA](https://www.digitalocean.com/community/tutorials/how-to-install-node-js-on-ubuntu-18-04#installing-using-a-ppa).

After completing

- install Node.js, NPM and
- the "build-essential package"

you will have to change npm's default directory.

Create a ```.npm-global``` directory and set the path to this directory for ```node_modules```:

```bash
cd ~
mkdir ~/.npm-global
npm config set prefix '~/.npm-global'
```

Create (or modify) a ```~/.profile``` and add the following line:

```bash
sudo nano ~/.profile

# set PATH so global node modules install without permission issues
export PATH=~/.npm-global/bin:$PATH
```

Now you have to update your system variables:

```bash
source ~/.profile
```

Now you should be able to check your installed Node.js version with:

```bash
node -v
```

## Install git

Check if git is already installed with:

```bash
git --version
```

If it isn't installed yet you can install it with

```bash
sudo apt install git
```

and configure Git with

```sbash
git config --global user.name "Your Name"
git config --global user.email "youremail@domain.com"
```

After git is installed and configured you can deploy your Gatsby site by cloning it from Github.

## Deploy from Github

It is important that you are loggin in as **non-root** user for the following steps.

```bash
cd ~
git clone https://github.com/your-githubuser/your-gatsby-repo.git path your-gatsby-site
```

After you have deployed your project (optionally with environment variables) you can install all dependencies and build your Gatsby site with:

```bash
cd ./your-gatsby-site/
npm install
npm run build
```

Now you should have a copy of your local project/Gatsby site on your remote server.

Next you are going to setup PM2 which will be used to keep your site alive and restart it with every reboot.

## Setup PM2

You can install PM2 with:

```bash
npm install pm2@latest -g
```

You will need to create/configure an ```ecosystem.config.js``` file which will restart the default Gatsby server.

```bash
cd ~
pm2 init
sudo nano ecosystem.config.js
```

Copy/paste the template and replace the content.

```js
module.exports = {
  apps: [
    {
      name: 'gatsby-site',
      cwd: ' /home/your-name/my-gatsby-site',
      script: 'npm',
      args: 'serve',
      env: {
        //NODE_ENV: 'production',
      },
    },
    // optionally a second project
],};
```
With

```bash
cd ~
pm2 start ecosystem.config.js
```

you can start your server which will run on the Port 9000.

You can always check the status with:

```bash
pm2 status
```

After the server reboots this PM2 should be always automatically be restarted. For that you are going to need a small Startup script which you can also copy/paste.
Generate and configure a startup script to launch PM2:

```bash
cd ~
pm2 startup systemd

[PM2] Init System found: systemd
[PM2] To setup the Startup Script, copy/paste the following command:
**sudo env PATH=$PATH:/usr/bin /usr/lib/node_modules/pm2/bin/pm2 startup systemd -u your-name --hp /home/your-name**
```

- Copy/paste the generated command:

```bash
**sudo env PATH=$PATH:/usr/bin /usr/lib/node_modules/pm2/bin/pm2 startup systemd -u your-name --hp /home/your-name**

[PM2] Init System found: systemd
Platform systemd

. . .


[PM2] [v] Command successfully executed.
+---------------------------------------+
[PM2] Freeze a process list on reboot via:
   $ pm2 save

[PM2] Remove init script via:
   $ pm2 unstartup systemd
```

- And save the new PM2 process list and environments. Then Start the service with systemctl.

```bash
pm2 save

[PM2] Saving current process list...
[PM2] Successfully saved in /home/your-name/.pm2/dump.pm2
```

If you reboot your server now with ```sudo reboot``` the script should be automatically restart your Gatsby site. Give it a try!

## Setup Github Webhook

One thing missing now is an continuos integration and continuos delivery (CI/CD) pipeline which you will setup using Github webhooks.

Therefore you need to create a new Webhook in your repository.

The following articles provide additional information to the steps below:

- [GitHub Creating Webhooks Guide](https://docs.github.com/en/developers/webhooks-and-events/webhooks/creating-webhooks#setting-up-a-webhook) and
- [DigitalOcean Guide to GitHub WebHooks](https://www.digitalocean.com/community/tutorials/how-to-use-node-js-and-github-webhooks-to-keep-remote-projects-in-sync).

You need to create a server script which will do something if it is triggered by the Github webhook.

```bash
cd ~
mkdir NodeWebHooks
cd NodeWebHooks
sudo nano webhook.js
```

The script is going to create a server running on Port 8100. (Your Github webhook should be of course sending the webhook to something like http://server-ip:8100.)

If it gets triggered by a webhook it will

- go into your repo ```~/my-gatsby-site/```,
- pull the latest commits,
- install all dependencies,
- build a new version of the site and
- restart the server via the PM2 script.

```js
const secret = "your-secret-key";
const repo = "~/my-gatsby-site/";

const http = require('http');
const crypto = require('crypto');
const exec = require('child_process').exec;

const BUILD_CMD = 'npm run build';
const PM2_CMD = 'pm2 restart gatsby-site';

http.createServer(function (req, res) {
    req.on('data', function(chunk) {
        let sig = "sha1=" + crypto.createHmac('sha1', secret).update(chunk.toString()).digest('hex');

        if (req.headers['x-hub-signature'] == sig) {
            exec('cd ' + repo + ` && git pull && npm install && ${BUILD_CMD} && ${PM2_CMD}`);
        }
    });

    res.end();
}).listen(8100);
```

You will need to allow communication on Port 8100 with:

```bash
sudo ufw allow 8100/tcp
sudo ufw enable
```

Command may disrupt existing ssh connections. Proceed with operation (y|n)? y
Firewall is active and enabled on system startup

Earlier you setup PM2 to restart your Gatsby site whenever the server reboots or is started. You will now do the same for the webhook script.

Run echo $PATH and copy the output for use in the next step.

```bash
echo $PATH

/home/your-name/.npm-global/bin:/home/your-name/bin:/home/your-name/.local/bin:/usr/local/sbin:/usr/local/bin:/usr/sbin:/usr/bin:/sbin:/bin:/usr/games:/usr/local/games:/snap/bin
```

Create a webhook.service file:

```bash
cd ~
sudo nano /etc/systemd/system/webhook.service
```
    
In the editor, copy/paste the following script, but make sure to replace your-name in two places with your username. Earlier, you ran echo ```$PATH```, copy this to the Environment=PATH= variable, then save and exit:

```bash
[Unit]
Description=Github webhook
After=network.target

[Service]
Environment=PATH=your_path
Type=simple
User=your-name
ExecStart=/usr/bin/nodejs /home/your-name/NodeWebHooks/webhook.js
Restart=on-failure

[Install]
WantedBy=multi-user.target
```
    
Enable and start the new service so it starts when the system boots:

```bash
sudo systemctl enable webhook.service
sudo systemctl start webhook
```
    
Check the status of the webhook:

```bash
sudo systemctl status webhook
```

You can test your webhook with these [instructions](https://www.digitalocean.com/community/tutorials/how-to-use-node-js-and-github-webhooks-to-keep-remote-projects-in-sync#step-4-testing-the-webhook "Test Webhook").

The Gatsby server is now running on your-ip:9000 and you implemented a CI/CD pipeline via PM2 and Github Webhooks but you still can't access your website via a domain because you need to configure a webserver like Nginx.

## Configure Nginx

I am using Cloudflare to manage DNS for my domains but you can do this with every other provider also.

Create two A Records which will point ```your-domain.com``` and ```www.your-domain.com``` to the IP-adress of your server.

After that you will need to configure Nginx.

The following instructions are based on [How To Install Nginx on Ubuntu 18.04 [Quickstart]](https://www.digitalocean.com/community/tutorials/how-to-install-nginx-on-ubuntu-18-04-quickstart).

- Update your local package index:

```bash
sudo apt update
```

- install Nginx:

```bash
sudo apt install nginx
```
    
and adjust the Firewall:

```bash
sudo ufw allow 'Nginx Full'
sudo ufw delete allow 'Nginx HTTP'
```

You should now be able to see the Nginx landing page on:

```http://your_server_ip```

## Setting up Server Blocks
    
Create the directory for your-domain.com, using the -p flag to create any necessary parent directories:

```bash
sudo mkdir -p /var/www/your-domain.com/html
```
    
Assign ownership of the directory:

```bash
sudo chown -R $USER:$USER /var/www/your-domain.com/html
```
    
The permissions of your web roots should be correct if you haven’t modified your umask value, but you can make sure by typing:

```bash
sudo chmod -R 755 /var/www/example.com
```
    
Make a new server block at /etc/nginx/sites-available/your-domain.com:

```bash
sudo nano /etc/nginx/sites-available/example.com
```
    
Copy/Paste the following Gatsby-nginx configuration and update the server_name sections:

```bash
server {
    # Listen HTTP
    listen 80;
    listen [::]:80;

    server_name your-domain.com www.your-domain.com;

    # Redirect HTTP to HTTPS
    return 301 https://$host$request_uri;
}

server {
    # Listen HTTP
    listen 443 ssl;
    listen [::]:443 ssl;

    server_name your-domain.com www.your-domain.com;

    # SSL config
    include snippets/self-signed.conf;
    include snippets/ssl-params.conf;

    # Proxy Config
    location / {
        proxy_pass http://localhost:9000
        proxy_http_version 1.1;
        proxy_set_header X-Forwarded-Host $host;
        proxy_set_header X-Forwarded-Server $host;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_set_header X-Forwarded-Proto $scheme;
        proxy_set_header Host $http_host;
        proxy_set_header Upgrade $http_upgrade;
        proxy_set_header Connection "Upgrade";
        proxy_pass_request_headers on;
    }
    location ~ /.well-known {
       allow all;
    }
}
```

Save the file and close it when you are finished.

Enable the file by creating a link from it to the sites-enabled directory:

```bash
sudo ln -s /etc/nginx/sites-available/your-domain.com /etc/nginx/sites-enabled/
```
    
Test for syntax errors:

```bash
sudo nginx -t
```
    
and finally enable the changes:

```bash
sudo systemctl restart nginx
```

Nginx should now be serving your gatsby site on your domain name. That means if you have a look at ```http://your-domain.com``` you should see your Gatsby site.

In the end should deny traffic to Port 9000 because Nginx is handling the requests with:

```bash
cd ~
sudo ufw deny 9000
```

To install SSL, you will need to [install and run Certbot by Let's Encrypt](https://www.digitalocean.com/community/tutorials/how-to-secure-nginx-with-let-s-encrypt-on-ubuntu-18-04).



How to deploy your Gatsby site on your own server

2021-03-02 i started tracking my current location with [OwnTracks](https://owntracks.org/ "OwnTracks") and [Strapi](https://strapi.io/ "Strapi") ([How i constantly track my location and display a web-map with all the locations](/articles/constant-location-tracking-with-owntracks-strapi-and-visualizing-data-with-deckgl "How i constantly track my location and display a web-map with all the locations")) and created a [/map](/map "map with locations") which shows all the locations i have ever been to. Recently i reached one million datasets and unfortunately that means every user had to download about 50MB of location data before the map could be rendered. So i definitely needed a much faster solution and decided to render and serve server side some tiles which will be used to display the locations. In the end i built a tile-server following [Manually building a tile server (20.04 LTS)](https://switch2osm.org/serving-tiles/manually-building-a-tile-server-20-04-lts/ "Manually building a tile server (20.04 LTS)") with a custom Mapnik stylesheet.

In this article i want to show you how you can build your own Mapnik stylesheet for displaying any data from PostgreSQL/PostGIS.

The Mapnik stylesheet XML is not very handy but fortunately there are some tools which will help you to create one. After some research i decided to go with [TileMill](https://tilemill-project.github.io/tilemill/ "TileMill") which is an open source map design studio to design maps. It offers a simple UI and (more important) the possibility to export the created map-style as Mapnik stylesheet.

Actually i couldn't get the latest version running so i decided to go with TileMill v0.10.1 which offers anything you will need to create a stylesheet. At [https://tilemill-project.github.io/tilemill/docs/win-install/](https://tilemill-project.github.io/tilemill/docs/win-install/) you can download and install TileMill.

After you have installed TileMill you can create a new project and uncheck 'default data'. Otherwise TileMill will create some kind of basemap with a default style.

![tilemill_create_project.png](/uploads/tilemill_create_project_028d3d068a.png)

Now you will have to add some data to the project. Therefore you click on the layer button and add a new layer.

![tilemill_add_layer.png](/uploads/tilemill_add_layer_9bfeb33806.png)

Switch to the **PostGIS** tab and fill out ID, Connection, Unique key field, Geometry field and SRS. It's actually pretty straight forward. 
Keep in mind that TileMill doesn't like large datasets so i would recommend you to set some extent.

In SRS you have to specify the PROJ.4 projection string. If you don't it know a look at https://epsg.io/{epsg-code} where you will replace {epsg-code} with the epsg code of your coordinate system and scroll down to PROJ.4 where you can copy the projection string. 

![proj4.png](/uploads/proj4_2c3dab1b78.png)
Afterwards save the layer and the project. You won't see your data/features yet because you need to define some style for it. You can style the map with CartoCSS which is very similiar to CSS. For example i specified my layer id as locations and i am styling points so the CartoCSS properties could look like the following.

```
#locations {
   [vel >= 0] { marker-width:6; marker-fill: #f45; marker-line-color: #813; marker-allow-overlap: true; }
   [vel >= 50] { marker-width:6; marker-fill: #f45; marker-line-color: #813; marker-allow-overlap: true; }
   [vel >= 100] { marker-width:6; marker-fill: #f45; marker-line-color: #813; marker-allow-overlap: true; }
}
```


With CartoCSS you can also dynamically style your features depending on some attribute values. For more information about CartoCSS have a look at [Styling data from TileMill](https://tilemill-project.github.io/tilemill/docs/crashcourse/styling/ "Styling data").

When you are happy with your style you can export if as Mapnik-XML and use if for example for your tile-server.

![tilemill_export_mapnik_xml.png](/uploads/tilemill_export_mapnik_xml_2d50702c3b.png)
 
At [/map](/map) you can see my current stylesheet in 'action'.
 

How to create a Mapnik stylesheet for displaying any data from PostgreSQL/PostGIS

If you are curious how you can get OpenLayers 6 working with functional and/or class components in React you can have a look at these two examples i created.

**React with functional components**
- Github Repo:  [OpenLayers 6 React example using a function component](https://github.com/dietrichmax/openlayers-react-functional-component)
- Live Demo: [https://dietrichmax.github.io/openlayers-react-functional-component/](https://dietrichmax.github.io/openlayers-react-functional-component/)

**React with class components**
- Github Repo:  [OpenLayers 6 React example using a class component](https://github.com/dietrichmax/openlayers-react-class-component)
- Live Demo: [https://dietrichmax.github.io/openlayers-react-class-component/](https://dietrichmax.github.io/openlayers-react-class-component/).

Openlayers 6 with React

Playing with Copernicus DEM and #blender:
Shaded relief map of the alps.

![alps.png](/uploads/alps_77e6abb17f.png)

#gischat #gis #geospatial #dataviz #opensource #maps #geoshare

Shaded relief map of the alps

This guide will help you prepare DEM data using QGIS in order to render 3D looking shaded-relief maps in Blender.

Tutorials for making 3D-looking maps with Blender and QGIS

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).

## 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.

![Screenshot_OwnTracks settings.jpg](/uploads/Screenshot_Own_Tracks_settings_c7d95a33be.jpg)

The most important seetings for me are the mode **Significant location change mode**, **locatorDisplacement**, **locatorInterval**, **ignoreInaccurateLocations** and the **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 2 which will check if i moved away two meters 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 100 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 for the POST-request is an strapi API url which looks like https://strapi.url/locationEndpoint. Strapi will then automatically handle the request and store the data in whatever database and table you have configured for Strapi. 

I am using the following attributes where the most important are **lat** (latitude), **lon** (longitude) and **alt** (altitude).

![Screenshot Location Table.png](/uploads/Screenshot_Location_Table_eee78ddafe.png)

I am also 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.

## Web-Map

**Edit 25.01.2022:** 
Recently i switched to a server side approach to visualise the data because rendering about one million points on client side takes way too long. So i built a tile server which is serving PNG-tiles with the location data. Right now the [/map](/map) is created with OpenLayers.

If you are curious how you can set up a tile server which is serving data from Postgres with Mapnik, Apache and Nginx you can skip the following content and head directly to the article [Manually building a tile server (20.04 LTS)](https://switch2osm.org/serving-tiles/manually-building-a-tile-server-20-04-lts/ "Manually building a tile server (20.04 LTS)") and follow all steps except **Stylesheet configuration** because in the Mapnik stylesheet you have to create your custom style and a connection with your PostgreSQL table where your data is stored. See [How to create a Mapnik Stylesheet for displaying any data from PostgreSQL/PostGIS](/articles/how-to-create-a-mapnik-stylesheet-for-displaying-any-data-from-postgre-sql-post-gis "How to create a Mapnik Stylesheet for displaying any data from PostgreSQL/PostGIS").

If you only want to render some 'small' amount of data you can continue with the following.

At the beginning i rendered the data on client side with deck.gl. The following steps describe how to display data from PostgreSQL with deck.gl and Next.js (which is outdated for the /map page).

Due to the fact that amount of data is growing and growing i use [Prisma](https://www.prisma.io/ "Prisma") to get the data directly from postgres. If i would use the methods provided by Strapi it takes quite some time to generate the page with the map.

At the moment the [/map](/map "/map") page is built very simple:

```js
import Layout from '@/components/layout/layout'
import SEO from '@/components/seo/seo'
import Title from '@/components/title/page-title'
import styled from 'styled-components';
import media from 'styled-media-query';
import { getLocationsCount } from "@/lib/data/external/cms"
import prisma from '@/lib/utils/prisma'
import dynamic from 'next/dynamic'

const Livemap = dynamic(
  () => import('@/components/maps/deckgl/livemap'),
)

const MapContainer = styled.div`
  margin: auto;
  max-width: 1200px;
  padding: var(--space);
  ${media.lessThan('medium')`
    padding: var(--space-sm);
  `}
`

const Description = styled.p`
  max-width: 1200px;
  margin: auto;
  padding: 0 var(--space) var(--space) var(--space);
  ${media.lessThan('medium')`
    padding-left: var(--space-sm);
    padding-right: var(--space-sm);
  `}
`

const InternalLink = styled.a`
  color: var(--text-color);
  border-bottom: 1px solid var(--thirdy-color);
  cursor: pointer;
  :hover {
    border-bottom: 1px solid transparent;
  }
`

export default function Map({ locations, locationsCount } ) {

  
  return (
    <Layout>
  
      <SEO   
        title="Map"
        slug="map"
      />
      <Title>Map</Title>
      
      <MapContainer>
        <Livemap data={locations} />
      </MapContainer>
      <Description>
        Since 2021-03-02 i am tracking my current location. Right now there are {locationsCount} locations displayed on the map. 
        The map is always centered at my last known position.
      </Description>
      <Description>
        If you are curious how that works have a look at the article <InternalLink href="/articles/how-i-track-my-location-and-display-the-data-on-my-website" title="How i track my location and display the data on my website">How i track my location and display the data on my website</InternalLink> where i am describing the details behind it.
      </Description>    
    </Layout>
  )
}

export async function getStaticProps() {
  const locationsCount = (await getLocationsCount()) || []
  
  const locations = await prisma.locations.findMany({
    select: {
      lat: true,
      lon: true,
      alt: true,
      vel: false,
    },
  });

  return {
    revalidate:  86400,
    props: {
      locations,
      locationsCount
    }
  }
}
  

```

Everyday it fetches all the location data and passes it to the map-component.

Performance wise i made some bad experience with the default mapping libraries Leaflet and OpenLayers because of the client side rendered data but after some research i decided to go with [deck.gl](/https://deck.gl/ "deck.gl") which is made for visualizing large scale datasets.

```js
import React, { useState } from 'react';
import {StaticMap, LinearInterpolator, WebMercatorViewport} from 'react-map-gl';
import DeckGL from '@deck.gl/react';
import {ScatterplotLayer} from '@deck.gl/layers';
import styled from 'styled-components'

const MapContainer = styled.div`
    position: relative;
    height: 600px;
`


export default function Livemap({
  data,
}) {
    const [viewport, setViewport] = useState({
        longitude: data.slice(-1)[0].lon,
        latitude: data.slice(-1)[0].lat,
        zoom: 12,
        bearing: 0,
        pitch: 0,
    });


    const layers = [
        new ScatterplotLayer({
          id: 'scatter-plot',
          data,
          opacity: 0.1,
          stroked: false,
          filled: true,
          radiusScale: 3,
          radiusMinPixels: 0.65,
          getPosition: d => [d.lon, d.lat, 0 /*d.alt*/],
          getFillColor: d => [Math.sqrt(d.vel*20), 184, 50],
        })
    ];

    
    
    return (
        <MapContainer>
            <DeckGL layers={layers} initialViewState={viewport} controller={true}>
                <StaticMap 
                    reuseMaps 
                    mapStyle="https://basemaps.cartocdn.com/gl/dark-matter-gl-style/style.json" 
                    preventStyleDiffing={true} 
    
                />
            </DeckGL>
        </MapContainer>
  )
}

```

I am using an scatterplot layer which will render every location as point and adjusts the color based on the velocity. The viewport is always centered at the last known location and as basemap i am using dark-matter for the both dark and light mode. 

You can find more information about the deck.gl map at the [deck.gl scatterplot example](https://deck.gl/examples/scatterplot-layer/).

How i constantly track my location and display a web-map with all the locations

Went on top of the Brünnstein via the Dr.-Julius-Mayr-Weg and took a rest at the Brünnsteinhaus 🍰. 

content_IMG_20210721_120725.jpg

cover_IMG_20210721_120725.jpg

thumbnail_IMG_20210721_120725.jpg

content_IMG_20210721_101803.jpg

cover_IMG_20210721_101803.jpg

thumbnail_IMG_20210721_101803.jpg

content_IMG_20210721_113524.jpg

cover_IMG_20210721_113524.jpg

thumbnail_IMG_20210721_113524.jpg

content_IMG_20210721_114207.jpg

cover_IMG_20210721_114207.jpg

thumbnail_IMG_20210721_114207.jpg

content_IMG_20210721_103939.jpg

cover_IMG_20210721_103939.jpg

thumbnail_IMG_20210721_103939.jpg

content_IMG_20210721_114159.jpg

cover_IMG_20210721_114159.jpg

thumbnail_IMG_20210721_114159.jpg

content_IMG_20210721_125420.jpg

cover_IMG_20210721_125420.jpg

thumbnail_IMG_20210721_125420.jpg

content_IMG_20210721_153857.jpg

cover_IMG_20210721_153857.jpg

thumbnail_IMG_20210721_153857.jpg

Brünnstein

The creator/s of a11yproject.com have created a checklist for reviewing a website in terms of accessibility.

Hi, my name is
Max Dietrich.
I'm a software developer and cyclist from Wasserburg am Inn, Germany.
On this website I am writing about my learnings in web-development and creating web-maps.
I' am also a proud member of the IndieWeb community.
I've been tracking my location since 2021. Read more.

Building a Table of Contents (TOC) from markdown for your React blog
Max DietrichMax Dietrich

How to copy your Proxmox backups with AzCopy to Azure Storage Containers
Max DietrichMax Dietrich

From Docker to Kubernetes

Doing More with Docker

How to create web maps with Leaflet, React and functional components
Max DietrichMax Dietrich

How to create a custom cookie banner for your React application
Max DietrichMax Dietrich

Hi, my name isMax Dietrich.I'm a software developer and cyclist from Wasserburg am Inn, Germany. On this website I am writing about my learnings in web-development and creating web-maps. I' am also a proud member of the IndieWeb community.I've been tracking my location since 2021. Read more.

Building a Table of Contents (TOC) from markdown for your React blogMax DietrichMax Dietrich

How to copy your Proxmox backups with AzCopy to Azure Storage ContainersMax DietrichMax Dietrich

From Docker to Kubernetes

Doing More with Docker

How to create web maps with Leaflet, React and functional componentsMax DietrichMax Dietrich

How to create a custom cookie banner for your React applicationMax DietrichMax Dietrich

Hi, my name is
Max Dietrich.
I'm a software developer and cyclist from Wasserburg am Inn, Germany.
On this website I am writing about my learnings in web-development and creating web-maps.
I' am also a proud member of the IndieWeb community.
I've been tracking my location since 2021. Read more.

Building a Table of Contents (TOC) from markdown for your React blog
Max DietrichMax Dietrich

How to copy your Proxmox backups with AzCopy to Azure Storage Containers
Max DietrichMax Dietrich

How to create web maps with Leaflet, React and functional components
Max DietrichMax Dietrich

How to create a custom cookie banner for your React application
Max DietrichMax Dietrich