{"version":"https://jsonfeed.org/version/1.1","title":"Max Dietrich - Technical Product Owner GIS","description":"Technical Product Owner GIS at Bayernwerk (E.ON). I ride my mountain bike in the alps, code and design my website and publish new content whenever I can.","home_page_url":"https://mxd.codes","feed_url":"https://mxd.codes/feed.json","language":"en","authors":[{"name":"Max Dietrich","url":"https://mxd.codes"}],"items":[{"id":"https://mxd.codes/articles/self-hosted-analytics-with-next-js-and-postgresql","url":"https://mxd.codes/articles/self-hosted-analytics-with-next-js-and-postgresql","title":"Self-hosted Analytics with Next.js and PostgreSQL","summary":"How I built a privacy-first analytics system for mxd.codes using Next.js API routes, PostgreSQL and MaxMind GeoLite2 -without any third-party tracking service.","content_html":"<p>For a long time I used <a href=\"https://plausible.io/\">Plausible Analytics</a> to track pageviews on this site. It is a great product, but I was already running a PostgreSQL instance for comments, webmentions and location data. Adding another service just for analytics felt unnecessary. So I built my own.</p>\n<p>The result is a simple, self-hosted analytics system built entirely on Next.js API routes and PostgreSQL. No cookies, no third-party scripts, no vendor lock-in. All collected data is displayed publicly on <a href=\"/about-this-site\">/about-this-site</a>.</p>\n<h2 id=\"thedatabaseschema\">The database schema</h2>\n<p>Everything is stored in a single <code>pageviews</code> table:</p>\n<pre><code class=\"sql language-sql\">CREATE TABLE IF NOT EXISTS pageviews (\n  id SERIAL PRIMARY KEY,\n  path TEXT NOT NULL,\n  referrer TEXT,\n  visitor_hash TEXT NOT NULL,\n  country TEXT,\n  city TEXT,\n  latitude REAL,\n  longitude REAL,\n  user_agent TEXT,\n  device_type TEXT,\n  browser TEXT,\n  os TEXT,\n  language TEXT,\n  screen_width INT,\n  created_at TIMESTAMPTZ DEFAULT NOW()\n);\n</code></pre>\n<p>Each row represents a single pageview. There are no sessions, no persistent user IDs and no cookies. Unique visitors are identified by a daily rotating hash described below.</p>\n<p>To keep queries fast I added partial indexes on the columns used most often:</p>\n<pre><code class=\"sql language-sql\">CREATE INDEX ON pageviews (created_at);\nCREATE INDEX ON pageviews (path);\nCREATE INDEX ON pageviews (visitor_hash, created_at);\nCREATE INDEX ON pageviews (latitude, longitude) WHERE latitude IS NOT NULL AND longitude IS NOT NULL;\n</code></pre>\n<h2 id=\"trackingpageviewsfromtheclient\">Tracking pageviews from the client</h2>\n<p>The tracking component is a small React component included in the root layout:</p>\n<pre><code class=\"tsx language-tsx\">\"use client\";\n\nimport { usePathname } from \"next/navigation\";\nimport { useEffect, useRef } from \"react\";\n\nexport default function PageviewTracker() {\n  const pathname = usePathname();\n  const lastTrackedPath = useRef&lt;string | null&gt;(null);\n\n  useEffect(() =&gt; {\n    if (pathname === lastTrackedPath.current) return;\n    if (localStorage.getItem(\"notrack\") === \"1\") return;\n    lastTrackedPath.current = pathname;\n\n    const payload = JSON.stringify({\n      path: pathname,\n      referrer: document.referrer || null,\n      screenWidth: window.screen?.width || null,\n    });\n\n    if (navigator.sendBeacon) {\n      const blob = new Blob([payload], { type: \"application/json\" });\n      navigator.sendBeacon(\"/api/pageview\", blob);\n    } else {\n      fetch(\"/api/pageview\", {\n        method: \"POST\",\n        headers: { \"Content-Type\": \"application/json\" },\n        body: payload,\n        keepalive: true,\n      }).catch(() =&gt; {});\n    }\n  }, [pathname]);\n\n  return null;\n}\n</code></pre>\n<p>It uses <code>usePathname</code> to detect route changes in the Next.js App Router and fires on every navigation. <code>navigator.sendBeacon</code> is preferred over <code>fetch</code> because it is non-blocking and survives page unloads reliably.</p>\n<h2 id=\"thepageviewapiroute\">The pageview API route</h2>\n<p>The API route at <code>/api/pageview</code> handles each incoming event. It does several things before writing to the database:</p>\n<p><strong>Rate limiting</strong> rejects more than 30 requests per minute from the same IP. The limiter is a plain <code>Map</code> in memory. Each IP gets a counter and a reset timestamp. No Redis, no external dependency:</p>\n<pre><code class=\"typescript language-typescript\">const rateLimitMap = new Map&lt;string, { count: number; resetTime: number }&gt;();\n\nif (!entry || now &gt; entry.resetTime) {\n  rateLimitMap.set(ip, { count: 1, resetTime: now + interval });\n  return { success: true, remaining: limit - 1 };\n}\nif (entry.count &gt;= limit) {\n  return { success: false, remaining: 0 };\n}\n</code></pre>\n<p>The client IP is read from <code>x-real-ip</code> first (set by nginx), falling back to the last entry in <code>x-forwarded-for</code>. Using the last entry rather than the first prevents clients from spoofing the header by prepending a fake IP.</p>\n<p><strong>Bot filtering</strong> tests the User-Agent against a regex of known crawler patterns before doing any database work.</p>\n<p><strong>Same-origin validation</strong> rejects requests that did not originate from the site. It parses the <code>Origin</code> or <code>Referer</code> header with <code>new URL()</code> and compares the <code>host</code> against the request <code>Host</code> header. A simple substring check would allow <code>evil-mxd.codes</code> to pass, so exact host matching is important. Requests with no <code>Origin</code> or <code>Referer</code> are allowed through. Those are same-site form submissions or direct navigations where the browser does not send either header.</p>\n<p><strong>Geolocation</strong> looks up the visitor's IP using the <a href=\"https://dev.maxmind.com/geoip/geolite2-free-geolocation-data\">MaxMind GeoLite2</a> City database. The <code>.mmdb</code> file is loaded on the first request and cached in memory via <code>@maxmind/geoip2-node</code> and reused for every request with no external API call and no network latency. Coordinates are rounded to one decimal place to reduce precision:</p>\n<pre><code class=\"typescript language-typescript\">latitude: Math.round(response.location.latitude * 10) / 10\n</code></pre>\n<p><strong>User-Agent parsing</strong> is done with plain regex functions instead of a library. The browser, OS and device type are each extracted with a short chain of pattern checks. The order matters. Edge and Opera both include <code>chrome</code> in their User-Agent string, so they have to be matched first.</p>\n<p><strong>Visitor hashing</strong> creates a daily identifier without storing any persistent user data. The hash is a SHA-256 of the IP address, a server-side secret and the current date. The same visitor gets the same hash all day, which makes unique visitor counting possible. On the next day the hash is different, so there is no cross-day tracking.</p>\n<h2 id=\"queryingthedata\">Querying the data</h2>\n<p>All analytics queries live in <code>src/lib/analytics.ts</code>. The functions cover the most common dimensions:</p>\n<ul>\n<li><code>getAnalyticsStats()</code> returns total pageviews and total unique visitor-days</li>\n<li><code>getCurrentVisitors()</code> counts distinct hashes seen in the last 5 minutes</li>\n<li><code>getTopPages(limit)</code> groups by path and orders by view count</li>\n<li><code>getTopReferrers(limit)</code> filters out self-referrals and empty referrers</li>\n<li><code>getTopBrowsers</code>, <code>getTopOS</code>, <code>getTopLanguages</code>, <code>getTopCountries</code>, <code>getTopCities</code> each group by their column</li>\n<li><code>getDeviceBreakdown()</code> splits into mobile, tablet and desktop</li>\n<li><code>getScreenWidthDistribution()</code> buckets screen widths into four categories</li>\n<li><code>getPageviewsOverTime(days)</code> returns a daily count for the last N days for the sparkline chart</li>\n<li><code>getVisitorLocations()</code> returns grouped coordinates for the visitor map</li>\n</ul>\n<p>The <code>/api/stats</code> endpoint handles the overall pageview and visit counts, current visitor count and a few additional counts from other tables (comments, webmentions, emoji reactions, subscribers). It caches the result in memory for 24 hours. The more detailed breakdown queries (top pages, referrers, device types, countries and so on) are called directly from the <code>about-this-site</code> page on the server at request time.</p>\n<h2 id=\"renderingthedashboard\">Rendering the dashboard</h2>\n<p>Everything is displayed at <a href=\"/about-this-site\">/about-this-site</a>, a server-rendered page with <code>dynamic = \"force-dynamic\"</code> so it always shows fresh data. The page fetches all the analytics functions in parallel on the server and passes the results down as props.</p>\n<p>The 30-day pageview trend is rendered as an SVG sparkline chart built without any charting library:</p>\n<pre><code class=\"tsx language-tsx\">const w = 400;\nconst h = 80;\nconst padding = 4;\nconst range = maxViews - minViews || 1;\n\nconst coords = data.map((d, i) =&gt; {\n  const x = (i / (data.length - 1)) * (w - padding * 2) + padding;\n  const y = h - padding - ((d.views - minViews) / range) * (h - padding * 2);\n  return { x, y };\n});\n\nconst polyline = coords.map((c) =&gt; `${c.x},${c.y}`).join(\" \");\nconst areaPath = `M${coords[0].x},${coords[0].y} ${coords\n  .slice(1)\n  .map((c) =&gt; `L${c.x},${c.y}`)\n  .join(\" \")} L${w - padding},${h - padding} L${padding},${h - padding} Z`;\n</code></pre>\n<p>The area fill uses an SVG <code>&lt;path&gt;</code> element and the line is a <code>&lt;polyline&gt;</code>. Normalizing against the range (<code>maxViews - minViews</code>) rather than the absolute max keeps the chart readable even on low-traffic days. Colors come from the CSS custom property <code>--secondary-color</code> so the chart respects the site's light and dark theme automatically. Here is the live chart for this site:</p>\n<p><AnalyticsSparklineDemo /></p>\n<p>Visitor locations are rendered on an interactive map using OpenLayers with cluster styling that scales logarithmically with the number of visits from each location.</p>\n<p>The rest of the page uses simple HTML lists and inline percentage bars rendered with CSS <code>width</code> set proportionally to the maximum value in each group.</p>\n<h2 id=\"privacy\">Privacy</h2>\n<p>No cookies are set. No data is shared with third parties. The IP address is used only to look up a rough location and to create the daily hash, then it is discarded. Coordinates are stored with reduced precision.</p>\n<p>The full analytics dashboard is publicly visible at <a href=\"/about-this-site\">/about-this-site</a>, which I think is a reasonable trade-off: if I am collecting data, I should be transparent about what it shows.</p>","date_published":"2026-03-19T00:00:00.000Z","date_modified":"2026-03-19T00:00:00.000Z","tags":["next-js","react","selfhosted","data-privacy","indie-web","javascript"],"authors":[{"name":"Max Dietrich","url":"https://mxd.codes"}]},{"id":"https://mxd.codes/articles/colota-v1-1-0-native-maps-tracking-profiles-pause-zones","url":"https://mxd.codes/articles/colota-v1-1-0-native-maps-tracking-profiles-pause-zones","title":"Colota v1.1.0: Native Maps, Tracking Profiles, and Pause Zones","summary":"After releasing Colota 1.0 as an open-source Android GPS tracker, I spent the last months rebuilding the map engine, adding automatic tracking profiles, geofence-based pause zones, and a bunch of smaller improvements.","content_html":"<p>I have been using <a href=\"https://colota.app\">Colota</a> daily since the closed testing phase and kept running into things that bothered me. The WebView-based maps felt sluggish, switching GPS settings between walking and driving was annoying, and I did not want to record my location while sitting at my desk all day. Version 1.1.0 is the result of fixing all of that.</p>\n<h2 id=\"nativemapswithmaplibregl\">Native Maps with MapLibre GL</h2>\n<p>The biggest change is the map engine. In v1.0 the maps were rendered using OpenLayers inside a WebView. Panning had noticeable lag, pinch-to-zoom was not smooth, and memory usage was higher than it should be.</p>\n<p>I replaced the entire map stack with <a href=\"https://github.com/maplibre/maplibre-react-native\">MapLibre GL Native</a> via <code>@maplibre/maplibre-react-native</code>. The maps now render on the GPU. Panning and zooming that used to stutter are instant now, even with geofence overlays and accuracy circles drawn on top.</p>\n<p>The tile source is <a href=\"https://openfreemap.org\">OpenFreeMap</a> which provides free vector tiles based on OpenStreetMap data without requiring an API key. This keeps Colota fully FOSS-compatible, which matters for the F-Droid build.</p>\n<p><img src=\"https://raw.githubusercontent.com/dietrichmax/colota/main/screenshots/mobile/original/Dashboard.png\" alt=\"Dashboard with live tracking map\" /></p>\n<h3 id=\"darkmode\">Dark Mode</h3>\n<p>With vector tiles and MapLibre I could add a proper dark mode for the map. The app fetches the OpenFreeMap style JSON once, transforms the paint properties to dark colors, and caches the result. No extra network request after the first load.</p>\n<p><img src=\"https://raw.githubusercontent.com/dietrichmax/colota/main/screenshots/mobile/original/DarkMode.png\" alt=\"Dark mode dashboard\" /></p>\n<p>The color palette uses a navy/indigo family that fits well with the rest of the dark theme. Water is almost black, buildings are a subtle purple-gray, and text labels use a light gray with a dark halo for readability.</p>\n<h2 id=\"trackingprofiles\">Tracking Profiles</h2>\n<p>This was the feature I wanted most for my own use. The GPS settings that work well for walking (high frequency, small distance threshold) drain the battery when driving. And the settings that work for driving miss too many points when walking.</p>\n<p>Tracking profiles solve this by automatically switching GPS settings based on conditions. You can define profiles that activate when:</p>\n<ol>\n<li>The phone is <strong>charging</strong></li>\n<li><strong>Android Auto</strong> is connected (car mode)</li>\n<li>Speed is <strong>above</strong> a threshold</li>\n<li>Speed is <strong>below</strong> a threshold</li>\n</ol>\n<p><img src=\"https://raw.githubusercontent.com/dietrichmax/colota/main/screenshots/mobile/original/TrackingProfiles.png\" alt=\"Profile editor with condition selection\" /></p>\n<p>For example, I have a \"Driving\" profile that activates when Android Auto connects. It sets the GPS interval to 4 seconds with a 20m distance threshold. When I disconnect from the car, it switches back to my default settings (2 second interval, 2m threshold).</p>\n<p>The profile system uses priority-based resolution when multiple profiles match. It also has a deactivation delay to prevent rapid toggling when your speed fluctuates around the threshold.</p>\n<h2 id=\"pausezones\">Pause Zones</h2>\n<p>Sometimes you do not want to record your location at all. I do not need a GPS point every second while sitting at my desk at home or at the office.</p>\n<p>Pause zones are geofences that automatically stop location recording when you enter them. You define a center point and a radius on the map, give it a name, and the app handles the rest. When you leave the zone, recording resumes automatically.</p>\n<p><img src=\"https://raw.githubusercontent.com/dietrichmax/colota/main/apps/docs/static/img/screenshots/Geofences.png\" alt=\"Geofence screen with pause zone\" /></p>\n<p>The distance calculation uses the haversine formula. The geofence check runs on every GPS fix inside the foreground service, so it works even when the React Native UI is not active. The zones are also visible on the dashboard map as colored circles with labels.</p>\n<h2 id=\"speedcoloredtracks\">Speed-Colored Tracks</h2>\n<p>The location history map got a visual upgrade. Track segments are now colored by speed using a green-to-yellow-to-red gradient. This makes it easy to see at a glance where you were walking, cycling, or driving.</p>\n<p>Each point on the track is tappable. A popup shows the exact coordinates, speed, accuracy, altitude, and timestamp. I also added a daily distance counter that shows how far you moved on any given day.</p>\n<h2 id=\"deeplinksetup\">Deep Link Setup</h2>\n<p>Setting up the app with all the server details (endpoint URL, auth credentials, sync settings) is tedious to do manually. Colota now supports a <code>colota://setup</code> deep link that lets you encode the entire configuration in a base64 payload.</p>\n<p>The URL format looks like this:</p>\n<pre><code class=\"bash language-bash\">colota://setup?config=eyJlbmRwb2ludCI6Imh0dHBzOi8vZXhhbXBsZS5jb20vYXBpL2xvY2F0aW9ucyIsInVzZXJuYW1lIjoidXNlciJ9\n</code></pre>\n<p>The base64 payload decodes to a JSON object with all configuration fields. You can generate a setup link on your server and share it. Scanning or tapping it on the phone configures everything in one step.</p>\n<h2 id=\"settingsandsyncpresets\">Settings and Sync Presets</h2>\n<p>The settings screen got a cleanup. Sync presets (Instant, Balanced, Power Saver) make it easier to pick the right tradeoff between freshness and battery life without touching individual values.</p>\n<p><img src=\"https://raw.githubusercontent.com/dietrichmax/colota/main/screenshots/mobile/original/Settings.png\" alt=\"Settings screen\" /></p>\n<h2 id=\"smallerimprovements\">Smaller Improvements</h2>\n<ul>\n<li><strong>Improved About screen</strong> with debug info copy and build variant display</li>\n<li><strong>Better data management</strong> with sync progress indicators and database vacuum feedback</li>\n<li><strong>Fixed map panning</strong> being blocked during active tracking (the user location overlay was re-rendering every 250ms, removed the animation and memoized the marker coordinates)</li>\n<li><strong>Fixed stale tracking state</strong> after Android revokes location permission in the background</li>\n<li><strong>Reliable Android Auto detection</strong> using the CarConnection API instead of broadcast hacks</li>\n</ul>\n<h2 id=\"newicon\">New Icon</h2>\n<p>The app has a new icon. The old one was a placeholder I threw together in five minutes. The new one follows the Android adaptive icon guidelines and actually looks decent on both light and dark launchers.</p>\n<h2 id=\"tryitout\">Try It Out</h2>\n<p>The app is available on <a href=\"https://play.google.com/store/apps/details?id=com.colota\">Google Play</a>, <a href=\"https://f-droid.org\">F-Droid</a> (pending review), and as a direct APK download on <a href=\"https://github.com/dietrichmax/colota/releases\">GitHub</a>. The full source code is AGPL-3.0 licensed.</p>\n<p>For setup instructions with different backends (Traccar, Home Assistant, OwnTracks, Dawarich, PhoneTrack) check the <a href=\"https://colota.app/docs\">documentation</a>. If you run into issues with background tracking being killed by your phone manufacturer, have a look at the <a href=\"https://colota.app/docs/guides/battery-optimization\">battery optimization guide</a>.</p>\n<p>If you have been following along from my <a href=\"/articles/constant-location-tracking-with-owntracks-strapi-and-visualizing-data-with-deckgl\">earlier post about location tracking with OwnTracks and Node.js</a>, Colota is basically the evolution of that setup. The tracking app is now my own, fully open-source, and does not depend on OwnTracks anymore. The server-side stack (PostgreSQL, GeoServer, MapProxy) still works the same way. You just point Colota to your webhook endpoint and it sends the same kind of location payloads.</p>","date_published":"2026-02-21T00:00:00.000Z","date_modified":"2026-02-21T00:00:00.000Z","tags":["android","react-native","gps","maplibre","open-source","selfhosted","data-privacy"],"image":"https://mxd.codes/content/posts/published/colota-v1-1-0-native-maps-tracking-profiles-pause-zones/cover.png","banner_image":"https://mxd.codes/content/posts/published/colota-v1-1-0-native-maps-tracking-profiles-pause-zones/cover.png","authors":[{"name":"Max Dietrich","url":"https://mxd.codes"}]},{"id":"https://mxd.codes/photos/gran-canaria-2026","url":"https://mxd.codes/photos/gran-canaria-2026","title":"Gran Canaria 2026","content_html":"","date_published":"2026-02-12T12:00:00.000Z","image":"https://mxd.codes/content/photos/gran-canaria-2026/photo-21.jpg","attachments":[{"url":"https://mxd.codes/content/photos/gran-canaria-2026/photo-21.jpg","mime_type":"image/jpeg","title":"PXL_20260206_185057008.MP.jpg"},{"url":"https://mxd.codes/content/photos/gran-canaria-2026/photo-1.jpg","mime_type":"image/jpeg","title":"IMG-20260124-WA0013.jpg"},{"url":"https://mxd.codes/content/photos/gran-canaria-2026/photo-2.jpg","mime_type":"image/jpeg","title":"IMG-20260127-WA0024.jpg"},{"url":"https://mxd.codes/content/photos/gran-canaria-2026/photo-3.jpg","mime_type":"image/jpeg","title":"IMG-20260127-WA0033.jpg"},{"url":"https://mxd.codes/content/photos/gran-canaria-2026/photo-4.jpg","mime_type":"image/jpeg","title":"IMG-20260127-WA0058.jpg"},{"url":"https://mxd.codes/content/photos/gran-canaria-2026/photo-5.jpg","mime_type":"image/jpeg","title":"IMG-20260128-WA0003.jpg"},{"url":"https://mxd.codes/content/photos/gran-canaria-2026/photo-6.jpg","mime_type":"image/jpeg","title":"IMG-20260128-WA0008.jpg"},{"url":"https://mxd.codes/content/photos/gran-canaria-2026/photo-7.jpg","mime_type":"image/jpeg","title":"IMG-20260129-WA0031.jpg"},{"url":"https://mxd.codes/content/photos/gran-canaria-2026/photo-8.jpg","mime_type":"image/jpeg","title":"IMG-20260129-WA0039.jpg"},{"url":"https://mxd.codes/content/photos/gran-canaria-2026/photo-9.jpg","mime_type":"image/jpeg","title":"IMG-20260129-WA0042.jpg"},{"url":"https://mxd.codes/content/photos/gran-canaria-2026/photo-10.jpg","mime_type":"image/jpeg","title":"IMG-20260201-WA0005.jpg"},{"url":"https://mxd.codes/content/photos/gran-canaria-2026/photo-11.jpg","mime_type":"image/jpeg","title":"IMG-20260203-WA0017.jpg"},{"url":"https://mxd.codes/content/photos/gran-canaria-2026/photo-12.jpg","mime_type":"image/jpeg","title":"IMG-20260204-WA0008.jpg"},{"url":"https://mxd.codes/content/photos/gran-canaria-2026/photo-13.jpg","mime_type":"image/jpeg","title":"IMG-20260204-WA0017.jpg"},{"url":"https://mxd.codes/content/photos/gran-canaria-2026/photo-14.jpg","mime_type":"image/jpeg","title":"IMG-20260205-WA0001.jpg"},{"url":"https://mxd.codes/content/photos/gran-canaria-2026/photo-15.jpg","mime_type":"image/jpeg","title":"IMG-20260207-WA0003.jpg"},{"url":"https://mxd.codes/content/photos/gran-canaria-2026/photo-16.jpg","mime_type":"image/jpeg","title":"IMG-20260212-WA0004.jpg"},{"url":"https://mxd.codes/content/photos/gran-canaria-2026/photo-17.jpg","mime_type":"image/jpeg","title":"PXL_20260130_144952315.MP.jpg"},{"url":"https://mxd.codes/content/photos/gran-canaria-2026/photo-18.jpg","mime_type":"image/jpeg","title":"PXL_20260201_172433358.MP~2.jpg"},{"url":"https://mxd.codes/content/photos/gran-canaria-2026/photo-19.jpg","mime_type":"image/jpeg","title":"PXL_20260202_145723748.MP.jpg"},{"url":"https://mxd.codes/content/photos/gran-canaria-2026/photo-20.jpg","mime_type":"image/jpeg","title":"PXL_20260205_152639299.MP.jpg"}],"authors":[{"name":"Max Dietrich","url":"https://mxd.codes"}]},{"id":"https://mxd.codes/photos/croatia-and-italy-2026","url":"https://mxd.codes/photos/croatia-and-italy-2026","title":"Croatia and Italy 2026","content_html":"","date_published":"2025-09-22T14:44:59.840Z","image":"https://mxd.codes/content/photos/croatia-and-italy-2026/photo-1.jpg","attachments":[{"url":"https://mxd.codes/content/photos/croatia-and-italy-2026/photo-1.jpg","mime_type":"image/jpeg","title":"IMG-20250913-WA0012.jpg"},{"url":"https://mxd.codes/content/photos/croatia-and-italy-2026/photo-2.jpg","mime_type":"image/jpeg","title":"PXL_20250911_144141402.MP.jpg"},{"url":"https://mxd.codes/content/photos/croatia-and-italy-2026/photo-3.jpg","mime_type":"image/jpeg","title":"PXL_20250914_122609684.MP.jpg"},{"url":"https://mxd.codes/content/photos/croatia-and-italy-2026/photo-4.jpg","mime_type":"image/jpeg","title":"PXL_20250914_105430904.MP.jpg"},{"url":"https://mxd.codes/content/photos/croatia-and-italy-2026/photo-5.jpg","mime_type":"image/jpeg","title":"IMG-20250914-WA0055.jpg"},{"url":"https://mxd.codes/content/photos/croatia-and-italy-2026/photo-6.jpg","mime_type":"image/jpeg","title":"IMG-20250913-WA0013.jpg"},{"url":"https://mxd.codes/content/photos/croatia-and-italy-2026/photo-7.jpg","mime_type":"image/jpeg","title":"IMG-20250913-WA0056.jpg"},{"url":"https://mxd.codes/content/photos/croatia-and-italy-2026/photo-8.jpg","mime_type":"image/jpeg","title":"PXL_20250911_120114106.MP.jpg"},{"url":"https://mxd.codes/content/photos/croatia-and-italy-2026/photo-9.jpg","mime_type":"image/jpeg","title":"PXL_20250915_170617328.MP.jpg"},{"url":"https://mxd.codes/content/photos/croatia-and-italy-2026/photo-10.jpg","mime_type":"image/jpeg","title":"PXL_20250914_131127865.MP.jpg"},{"url":"https://mxd.codes/content/photos/croatia-and-italy-2026/photo-11.jpg","mime_type":"image/jpeg","title":"PXL_20250911_145818877.MP.jpg"},{"url":"https://mxd.codes/content/photos/croatia-and-italy-2026/photo-12.jpg","mime_type":"image/jpeg","title":"PXL_20250913_170135015.jpg"},{"url":"https://mxd.codes/content/photos/croatia-and-italy-2026/photo-13.jpg","mime_type":"image/jpeg","title":"PXL_20250914_122836912.MP.jpg"},{"url":"https://mxd.codes/content/photos/croatia-and-italy-2026/photo-14.jpg","mime_type":"image/jpeg","title":"PXL_20250911_122347690.MP.jpg"},{"url":"https://mxd.codes/content/photos/croatia-and-italy-2026/photo-15.jpg","mime_type":"image/jpeg","title":"PXL_20250914_114208122.MP.jpg"},{"url":"https://mxd.codes/content/photos/croatia-and-italy-2026/photo-16.jpg","mime_type":"image/jpeg","title":"PXL_20250915_162540439.MP.jpg"},{"url":"https://mxd.codes/content/photos/croatia-and-italy-2026/photo-17.jpg","mime_type":"image/jpeg","title":"PXL_20250914_163734297.MP.jpg"},{"url":"https://mxd.codes/content/photos/croatia-and-italy-2026/photo-18.jpg","mime_type":"image/jpeg","title":"PXL_20250910_181629542.MP.jpg"},{"url":"https://mxd.codes/content/photos/croatia-and-italy-2026/photo-19.jpg","mime_type":"image/jpeg","title":"PXL_20250916_143217989.MP~2.jpg"},{"url":"https://mxd.codes/content/photos/croatia-and-italy-2026/photo-20.jpg","mime_type":"image/jpeg","title":"PXL_20250912_183430558.jpg"}],"authors":[{"name":"Max Dietrich","url":"https://mxd.codes"}]},{"id":"https://mxd.codes/articles/effortless-wildcard-ssl-secure-your-domain-with-let-s-encrypt-nginx-docker-and-cloudflare-dns","url":"https://mxd.codes/articles/effortless-wildcard-ssl-secure-your-domain-with-let-s-encrypt-nginx-docker-and-cloudflare-dns","title":"Effortless Wildcard SSL: Secure Your Domain with Let's Encrypt, Nginx, Docker and Cloudflare DNS","summary":"Learn how to generate and automate Let's Encrypt wildcard SSL certificates for Nginx using Docker and Cloudflare DNS API. Secure all your subdomains with easy setup, automatic renewal, and zero-downtime Nginx reloads.","content_html":"<p>Securing web applications with HTTPS is a must, and Let’s Encrypt makes it easy by offering free SSL certificates. But what if you want a <strong>wildcard certificate</strong> to cover all subdomains under a domain? Fortunately, <a href=\"https://letsencrypt.org/\" title=\"Let’s Encrypt\">Let’s Encrypt</a> supports wildcard certificates via the <strong><a href=\"https://letsencrypt.org/docs/challenge-types/#dns-01-challenge\" title=\"DNS-01 challenge\">DNS-01 challenge</a></strong>, which requires updating DNS TXT records.</p>\n<p>This guide is <strong>specific to using Cloudflare as your DNS provider</strong>, using their API to automate DNS updates during certificate issuance and renewal. Let’s walk through the process step by step.</p>\n<h2 id=\"prerequisites\">Prerequisites</h2>\n<p>Before we dive in, make sure you have:</p>\n<ol>\n<li>A registered domain managed via <strong>Cloudflare</strong> (e.g., <code>example.com</code>)</li>\n<li>A <strong>Cloudflare API token</strong> with DNS edit permissions (see Step 2)</li>\n<li><a href=\"https://docs.docker.com/engine/install/\" title=\"Install Docker Engine\">Docker and Docker Compose installed</a></li>\n</ol>\n<blockquote>\n  <p>If you use other DNS providers like DigitalOcean or AWS Route 53, you’ll need different DNS plugins and API credentials. This guide is tailored specifically for Cloudflare.</p>\n</blockquote>\n<h2 id=\"step1setupthedockerenvironment\">Step 1: Set Up the Docker Environment</h2>\n<p>Create a directory for your setup:</p>\n<pre><code class=\"bash language-bash\">mkdir nginx-wildcard-ssl &amp;&amp; cd nginx-wildcard-ssl\n</code></pre>\n<p>Create a <strong>docker-compose.yml</strong> file with the following content:</p>\n<pre><code class=\"yaml language-yaml\">version: '3'\nservices:\n  nginx:\n    image: nginx:latest\n    container_name: nginx\n    restart: unless-stopped\n    ports:\n      - \"80:80\"\n      - \"443:443\"\n    volumes:\n      ## Config\n      - ./nginx/nginx.conf:/etc/nginx/nginx.conf:ro\n      - ./nginx/sites-available:/etc/nginx/sites-enabled:ro\n      ## SSL\n      - /etc/ssl:/etc/ssl\n      - /data/containers/nginx/ssl/dhparam.pem:/etc/ssl/dhparam.pem:ro\n      - /data/containers/certbot/conf:/etc/letsencrypt:ro\n      ## Logs (optional)\n      #- /data/containers/nginx/logs:/var/log/nginx:rw\n    command: /bin/sh -c \"while :; do sleep 6h &amp; wait $${!}; nginx -s reload; done &amp; nginx -g 'daemon off;'\"\n    networks:\n      - web\n      - internal\n\n  certbot:\n    container_name: certbot\n    image: certbot/dns-cloudflare\n    restart: unless-stopped\n    volumes:\n      - /data/containers/certbot/conf:/etc/letsencrypt:rw\n      - /data/containers/certbot/www:/var/www/certbot:rw\n    entrypoint: \"/bin/sh -c 'trap exit TERM; while :; do certbot renew --dns-cloudflare --dns-cloudflare-credentials /etc/letsencrypt/.secrets/cloudflare.ini; sleep 48h &amp; wait $${!}; nginx -s reload; done;'\"\n    networks:\n      - internal\n\nnetworks:\n  web:\n    external: true\n    name: nginx\n  internal:\n    driver: bridge\n</code></pre>\n<h2 id=\"step2prepareyourcloudflareapitoken\">Step 2: Prepare Your Cloudflare API Token</h2>\n<p>To allow Certbot to update DNS TXT records automatically for the DNS-01 challenge, you need a <strong>Cloudflare API token</strong> with DNS edit permissions.</p>\n<p><strong>How to create the API token:</strong></p>\n<ul>\n<li>Log into your Cloudflare dashboard: <a href=\"https://dash.cloudflare.com/\">https://dash.cloudflare.com/</a>.</li>\n<li>Click your user icon → <strong>My Profile</strong> → <strong>API Tokens</strong>.</li>\n<li>Click <strong>Create Token</strong>.</li>\n<li>Use the <strong>Edit zone DNS</strong> template or create a custom token with:</li>\n<li><strong>Permissions</strong>: Zone → DNS → Edit</li>\n<li><strong>Zone Resources</strong>: Restrict to your domain(s) for security.</li>\n<li>Name your token (e.g., <code>Certbot DNS Token</code>).</li>\n<li>Click <strong>Continue to summary</strong> and then <strong>Create Token</strong>.</li>\n<li><strong>Copy the token immediately</strong> — you won't be able to see it again.</li>\n</ul>\n<p><strong>Save the token securely</strong></p>\n<p>Create a file <code>/data/containers/certbot/conf/.secrets/cloudflare.ini</code> with:</p>\n<pre><code class=\"ini language-ini\">dns_cloudflare_api_token = your_cloudflare_api_token_here\n</code></pre>\n<p><strong>Important:</strong> This file contains sensitive credentials!</p>\n<p>So it's recommended to restrict permissions for the file. Therefore secure the credentials file with:</p>\n<pre><code class=\"bash language-bash\">chmod 600 /data/containers/certbot/conf/.secrets/cloudflare.ini\n</code></pre>\n<p>This command sets file permissions so only the owner can read and write the file. It prevents other users on the system from reading your API token, enhancing security.</p>\n<h2 id=\"step3requestyourwildcardcertificate\">Step 3: Request Your Wildcard Certificate</h2>\n<p>Request your wildcard certificate by running:</p>\n<pre><code class=\"bash language-bash\">docker run --rm \\\n  -v /data/containers/certbot/conf:/etc/letsencrypt \\\n  -v /data/containers/certbot/www:/var/www/certbot \\\n  certbot/dns-cloudflare certonly \\\n  --dns-cloudflare \\\n  --dns-cloudflare-credentials /etc/letsencrypt/.secrets/cloudflare.ini \\\n  --email your-email@example.com \\\n  --agree-tos \\\n  --no-eff-email \\\n  -d example.com \\\n  -d \"*.example.com\"\n</code></pre>\n<p><strong>What this command does:</strong></p>\n<ul>\n<li>Runs the Certbot Docker container with the Cloudflare DNS plugin.</li>\n<li>Mounts your configuration and webroot folders inside the container.</li>\n<li>Uses the Cloudflare API token to create temporary DNS TXT records required by Let’s Encrypt to prove domain ownership.</li>\n<li>Requests certificates for both your apex domain (example.com) and all subdomains (*.example.com).</li>\n<li>Stores the certificates in /etc/letsencrypt/live/example.com/ (inside the container, mapped to your host folder).</li>\n<li>Agrees to the Let's Encrypt terms of service.</li>\n<li>Uses your email for urgent notices (expiry reminders).</li>\n</ul>\n<p>If successful, you’ll see something like:</p>\n<pre><code class=\"shell language-shell\">IMPORTANT NOTES:\n - Congratulations! Your certificate and chain have been saved at:\n   /etc/letsencrypt/live/example.com/fullchain.pem\n   Your key file has been saved at:\n   /etc/letsencrypt/live/example.com/privkey.pem\n - Your certificate will expire on 2025-09-15. To obtain a new or tweaked\n   version of this certificate in the future, simply run certbot again.\n - If you like Certbot, please consider supporting our work by:\n\n   Donating to ISRG / Let's Encrypt:   https://letsencrypt.org/donate\n</code></pre>\n<h2 id=\"step4configurenginxtousethewildcardcertificate\">Step 4: Configure Nginx to Use the Wildcard Certificate</h2>\n<p>Create a virtual host config, for example <code>./nginx/sites-available/example.conf</code>:</p>\n<pre><code class=\"nginx language-nginx\">server {\n    listen 443 ssl;\n    server_name example.com *.example.com;\n\n    ssl_certificate /etc/letsencrypt/live/example.com/fullchain.pem;\n    ssl_certificate_key /etc/letsencrypt/live/example.com/privkey.pem;\n    ssl_dhparam /etc/ssl/dhparam.pem;\n\n    location / {\n        proxy_pass http://your_backend;\n        proxy_set_header Host $host;\n        proxy_set_header X-Real-IP $remote_addr;\n        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;\n        proxy_set_header X-Forwarded-Proto $scheme;\n    }\n}\n\nserver {\n    listen 80;\n    server_name example.com *.example.com;\n    return 301 https://$host$request_uri;\n}\n</code></pre>\n<p>You’ll also need a basic <code>nginx.conf</code> to include your sites:</p>\n<pre><code class=\"nginx language-nginx\">user  nginx;\nworker_processes  auto;\n\nerror_log  /var/log/nginx/error.log warn;\npid        /var/run/nginx.pid;\n\nevents {\n    worker_connections  1024;\n}\n\nhttp {\n    include       /etc/nginx/mime.types;\n    default_type  application/octet-stream;\n\n    # Logging\n    access_log    /var/log/nginx/access.log;\n    error_log     /var/log/nginx/error.log;\n\n    # Performance\n    sendfile        on;\n    tcp_nopush      on;\n    tcp_nodelay     on;\n    keepalive_timeout  65;\n    types_hash_max_size 2048;\n\n    # Gzip Compression\n    gzip on;\n    gzip_disable \"msie6\";\n    gzip_vary on;\n    gzip_proxied any;\n    gzip_comp_level 6;\n    gzip_buffers 16 8k;\n    gzip_min_length 1024;\n    gzip_types text/plain text/css application/json application/javascript text/xml application/xml application/xml+rss text/javascript;\n\n    # Security Headers (can be overridden in virtual hosts)\n    add_header X-Frame-Options \"SAMEORIGIN\";\n    add_header X-Content-Type-Options \"nosniff\";\n\n    # SSL Defaults (override per-site)\n    ssl_protocols TLSv1.2 TLSv1.3;\n    ssl_prefer_server_ciphers on;\n\n    # Include Virtual Hosts\n    include /etc/nginx/sites-enabled/*.conf;\n}\n</code></pre>\n<p>Restart the stack or reload Nginx to apply changes:</p>\n<pre><code class=\"bash language-bash\">docker-compose up -d\n</code></pre>\n<h2 id=\"step5automaterenewalandnginxreload\">Step 5: Automate Renewal and Nginx Reload</h2>\n<p>The Certbot container is configured to:</p>\n<ul>\n<li>Automatically attempt certificate renewal every 48 hours.</li>\n<li>After successful renewal, it triggers an Nginx reload to apply the updated certificates <strong>without downtime</strong>.</li>\n</ul>\n<p>This is handled by the command in <code>docker-compose.yml</code>:</p>\n<pre><code class=\"yaml language-yaml\">entrypoint: \"/bin/sh -c 'trap exit TERM; while :; do certbot renew --dns-cloudflare --dns-cloudflare-credentials /etc/letsencrypt/.secrets/cloudflare.ini; sleep 48h &amp; wait $${!}; nginx -s reload; done;'\"\n</code></pre>\n<p>You can test renewal manually with:</p>\n<pre><code class=\"bash language-bash\">docker run --rm \\\n  -v /data/containers/certbot/conf:/etc/letsencrypt \\\n  certbot/certbot renew --dry-run\n</code></pre>\n<h1 id=\"summary\">Summary</h1>\n<ul>\n<li>This guide is tailored for domains managed on <strong>Cloudflare</strong>.</li>\n<li>You set up Docker containers running Nginx and Certbot with the Cloudflare DNS plugin.</li>\n<li>Created a Cloudflare API token to allow DNS automation.</li>\n<li>Requested and installed a wildcard SSL certificate covering your domain and all subdomains.</li>\n<li>Nginx uses the wildcard certificate for HTTPS.</li>\n<li>Automatic certificate renewal and zero-downtime Nginx reload are configured.</li>\n</ul>\n<p>If you use another DNS provider, look for the appropriate Certbot DNS plugin and adjust the API credentials accordingly.</p>\n<p>Feel free to ask if you want me to help with other providers or configurations!</p>","date_published":"2025-06-15T10:49:10.361Z","date_modified":"2025-06-15T11:06:15.971Z","tags":["selfhosted","docker"],"image":"https://mxd.codes/content/posts/published/effortless-wildcard-ssl-secure-your-domain-with-let-s-encrypt-nginx-docker-and-cloudflare-dns/cover.png","banner_image":"https://mxd.codes/content/posts/published/effortless-wildcard-ssl-secure-your-domain-with-let-s-encrypt-nginx-docker-and-cloudflare-dns/cover.png","authors":[{"name":"Max Dietrich","url":"https://mxd.codes"}]},{"id":"https://mxd.codes/articles/how-to-integrate-plausible-analytics-in-a-next-js-app-without-getting-blocked","url":"https://mxd.codes/articles/how-to-integrate-plausible-analytics-in-a-next-js-app-without-getting-blocked","title":"How to Integrate Plausible Analytics in a Next.js App (Without Getting Blocked)","summary":"Learn how to integrate Plausible Analytics into a Next.js App Router project with route tracking and ad blocker-resistant proxying. A complete guide for privacy-focused, cookie-free analytics.\n","content_html":"<p><a href=\"https://plausible.io/\" title=\"Plausible\">Plausible</a> Analytics is a lightweight, privacy-focused, cookie-free analytics solution. In this article, we’ll implement it inside a <a href=\"/topics/next-js\" title=\"Next.JS posts\">Next.js</a> App Router project in a way that bypasses ad blockers using proxying.\nBy proxying the tracking script and API requests through your own domain, you significantly reduce the chance of them being blocked by common ad-blocking extensions.</p>\n<p>We’ll also ensure that page views are correctly tracked on every route change in a client-side rendered app.</p>\n<blockquote>\n  <p>This guide assumes you are self-hosting Plausible on a custom subdomain such as <code>analytics.yourdomain.com</code>.</p>\n</blockquote>\n<h2 id=\"proxytheplausiblescriptandapi\">Proxy the Plausible Script and API</h2>\n<p>To reduce the chance of being blocked by ad blockers, we'll proxy Plausible's script and API through your own domain.</p>\n<p>In your <code>next.config.js</code>, add the following:</p>\n<pre><code class=\"js language-js\">async rewrites() {\n  return [\n    {\n      source: \"/js/script.js\",\n      destination:\n        \"https://analytics.yourdomain.com/js/script.file-downloads.hash.outbound-links.pageview-props.revenue.tagged-events.js\",\n    },\n    {\n      source: \"/api/event\",\n      destination: \"https://analytics.yourdomain.com/api/event\",\n    },\n  ];\n}\n</code></pre>\n<p>Next.js uses this to route requests internally without triggering a redirect (i.e., the user sees the original URL in their browser).</p>\n<ul>\n<li>When a user or script on your site requests <code>/js/script.js</code> or <code>/api/event</code>, the request is internally proxied to the external URL.</li>\n<li>The browser still thinks it loaded locally, but the content is coming from <code>analytics.yourdomain.com</code>.</li>\n</ul>\n<p><strong>What is this script variant?</strong></p>\n<p>The URL points to a <a href=\"/topics/self-hosted\" title=\"Self-hosted posts\">self-hosted</a> and enhanced version of the Plausible tracking script:</p>\n<p><code>script.file-downloads.hash.outbound-links.pageview-props.revenue.tagged-events.js</code></p>\n<p>This version includes support for:</p>\n<ul>\n<li>File downloads  </li>\n<li>URL hash tracking  </li>\n<li>Outbound link clicks  </li>\n<li>Custom pageview properties  </li>\n<li>Revenue tracking  </li>\n<li>Tagged events  </li>\n</ul>\n<p>This is ideal if you want richer insights without modifying your app further.</p>\n<h2 id=\"createaroutetrackercomponent\">Create a Route Tracker Component</h2>\n<p>Create a new file: <code>app/RouteTracker.tsx</code></p>\n<pre><code class=\"tsx language-tsx\">'use client';\n\nimport { usePathname } from 'next/navigation';\nimport { useEffect } from 'react';\n\nconst RouteTracker = () =&gt; {\n  const pathname = usePathname();\n\n  useEffect(() =&gt; {\n    // 1. Add the Plausible script to the DOM if not already added\n    if (!document.getElementById(\"next-p\")) {\n      const script = document.createElement(\"script\");\n      script.id = \"next-p\";\n      script.async = true;\n      script.defer = true;\n      script.setAttribute(\"data-domain\", \"yourdomain.com\");\n      script.src = \"/js/script.js\"; // Note: this uses the proxied script\n      document.head.appendChild(script);\n    }\n\n    // 2. Add Plausible's minimal global initializer\n    if (!document.getElementById(\"next-p-init\")) {\n      const initScript = document.createElement(\"script\");\n      initScript.id = \"next-p-init\";\n      initScript.innerHTML =\n        \"window.plausible = window.plausible || function() { (window.plausible.q = window.plausible.q || []).push(arguments) }\";\n      document.head.appendChild(initScript);\n    }\n\n    // 3. Manually track a pageview when route changes\n    const trackPageview = (url: string) =&gt; {\n      const eventData = {\n        name: \"pageview\",\n        url,\n        domain: window.location.hostname,\n        ...(document.referrer &amp;&amp; { referrer: document.referrer }),\n      };\n\n      fetch(\"/api/event\", {\n        method: \"POST\",\n        headers: {\n          \"Content-Type\": \"application/json\",\n        },\n        body: JSON.stringify(eventData),\n      }).catch((err) =&gt; console.error(\"Error tracking pageview:\", err));\n    };\n\n    trackPageview(pathname);\n  }, [pathname]);\n\n  return null;\n};\n\nexport default RouteTracker;\n</code></pre>\n<p><strong>What this does</strong></p>\n<ul>\n<li><strong>Dynamically injects the Plausible script</strong> into the page, ensuring it's only loaded once.</li>\n<li><strong>Adds a global Plausible initializer</strong>, so custom events can be tracked if needed.</li>\n<li><strong>Manually sends a pageview event</strong> whenever the route changes in the client, which is essential in App Router / SPA apps.</li>\n</ul>\n<h2 id=\"usethecomponentinyourlayout\">Use the Component in Your Layout</h2>\n<p>Open your root layout file (<code>app/layout.tsx</code>) and import the tracker:</p>\n<pre><code class=\"tsx language-tsx\">import RouteTracker from \"@/src/hooks/plausible\"; // adjust path to match your project\n</code></pre>\n<p>Then include it in your layout:</p>\n<pre><code class=\"tsx language-tsx\">&lt;body&gt;\n  &lt;RouteTracker /&gt;\n  {children}\n&lt;/body&gt;\n</code></pre>\n<p><strong>Final Notes</strong></p>\n<ul>\n<li>This implementation ensures Plausible is loaded only on the client and is less likely to be blocked.</li>\n<li>All route changes are tracked, making it perfect for SPA-like behavior with App Router.</li>\n<li>You benefit from all of Plausible’s extended features using the custom script variant.</li>\n</ul>\n<p>By combining script proxying and client-side tracking, you get powerful, privacy-compliant analytics without sacrificing usability or insight.</p>","date_published":"2025-06-10T19:25:05.698Z","date_modified":"2025-06-11T19:30:58.878Z","tags":["analytics","next-js","react","data-privacy","selfhosted"],"image":"https://mxd.codes/content/posts/published/how-to-integrate-plausible-analytics-in-a-next-js-app-without-getting-blocked/cover.png","banner_image":"https://mxd.codes/content/posts/published/how-to-integrate-plausible-analytics-in-a-next-js-app-without-getting-blocked/cover.png","authors":[{"name":"Max Dietrich","url":"https://mxd.codes"}]},{"id":"https://mxd.codes/articles/how-to-create-a-backup-script-for-postgre-sql-and-maria-db-containers-on-a-server","url":"https://mxd.codes/articles/how-to-create-a-backup-script-for-postgre-sql-and-maria-db-containers-on-a-server","title":"How to Create a Backup Script for PostgreSQL and MariaDB Containers on a Server","summary":"Learn how to automate backups for PostgreSQL and MariaDB running in Docker containers on a server. Protect your data with this simple, customizable backup script, ensuring regular backups with minimal effort.","content_html":"<p>When running databases like PostgreSQL and MariaDB on a server, ensuring regular backups is crucial for protecting your data from unexpected events such as crashes, human error, or system failure. While there are several ways to create backups, scripting a backup solution gives you complete control and automation.</p>\n<p>In this article, we'll show you how to create a simple yet effective backup script for PostgreSQL and MariaDB running in Docker containers on a server. We'll automate the process to ensure that your databases are regularly backed up without you needing to manually intervene.</p>\n<h2 id=\"whyyouneedbackups\">Why You Need Backups?</h2>\n<p>Before diving into the script, let’s take a moment to highlight why having regular backups is essential:</p>\n<ol>\n<li>Protection Against Data Loss: Regular backups prevent loss of valuable data due to failures or accidents.</li>\n<li>Disaster Recovery: Having up-to-date backups makes it easier to restore services quickly after a failure.</li>\n<li>Compliance and Audits: Some industries require maintaining backup copies of data for regulatory compliance.</li>\n<li>Peace of Mind: Knowing your data is safe provides confidence and good sleep.</li>\n</ol>\n<h2 id=\"prerequisites\">Prerequisites</h2>\n<p>Before creating the backup script, make sure you have:</p>\n<ul>\n<li>A VPS running a Linux-based operating system.</li>\n<li>Docker installed and running.</li>\n<li>PostgreSQL and MariaDB running inside Docker containers.</li>\n<li>Basic knowledge of using the terminal and running Docker commands.</li>\n</ul>\n<p>For the purpose of this tutorial, let’s assume your PostgreSQL and MariaDB containers are named <code>postgres_container</code> and <code>mariadb_container</code>.</p>\n<h2 id=\"createabackupdirectory\">Create a Backup Directory</h2>\n<p>Start by creating a directory on your server where the backups will be stored. This will help keep everything organized.</p>\n<pre><code class=\"bash language-bash\">mkdir -p /home/youruser/backup\n</code></pre>\n<p>Replace <code>/home/youruser/backup</code> with the location where you'd like to store your backups.</p>\n<h2 id=\"createthebackupscript\">Create the Backup Script</h2>\n<p>Now let’s create a bash script that will run daily backups for both PostgreSQL and MariaDB databases. Open your favorite text editor and create a file named <code>backup_databases.sh</code>.</p>\n<pre><code class=\"bash language-bash\">#!/bin/bash\nset -euo pipefail\n\n# Backup a PostgreSQL database into a daily file.\n\nBACKUP_DIR=\"/data/backups\"\nLOG_FILE=\"/var/log/db_backup.log\"\nDAYS_TO_KEEP=30\nPOSTGRESDATABASES=(\"db1\" \"db2\") # PostgreSQL DBs to backup\nMARIADBDATABASES=(\"db1\") # MariaDB DBs to backup\nPOSTGRESCONTAINER=\"postgres_container\"\nMARIADBCONTAINER=\"mariadb_container\"\n\n# Create necessary directories\nmkdir -p \"${BACKUP_DIR}\"\nmkdir -p \"$(dirname \"${LOG_FILE}\")\"\n\n# Create backup directory if it doesn't exist\nmkdir -p \"${BACKUP_DIR}\"\n\n# Function to log messages\nlog() {\n    local level=\"$1\"\n    local message=\"$2\"\n    local timestamp\n    timestamp=$(date +\"%Y-%m-%d %H:%M:%S\")\n\n    # Log to both stdout and a log file\n    echo -e \"${timestamp} [${level}] ${message}\" | tee -a \"${LOG_FILE}\"\n}\n\nfor DATABASE in \"${POSTGRESDATABASES[@]}\"; do\n    TIMESTAMP=$(date +\"%Y%m%d%H%M\")\n    FILE=\"${TIMESTAMP}_${DATABASE}.sql.gz\"\n    OUTPUT_FILE=\"${BACKUP_DIR}/${FILE}\"\n\n    log \"INFO\" \"Starting backup for database: ${DATABASE}\"\n\n    # Perform the backup and compress the output\n    if docker exec -i \"${POSTGRESCONTAINER}\" /usr/bin/pg_dump -U \"${USER}\" \"${DATABASE}\" | gzip -9 &gt; \"${OUTPUT_FILE}\"; then\n        log \"SUCCESS\" \"Backup created: ${OUTPUT_FILE}\"\n        ls -l \"${OUTPUT_FILE}\" | tee -a \"${LOG_FILE}\"\n    else\n        log \"ERROR\" \"Backup failed for database ${DATABASE}\" &gt;&amp;2\n        continue\n    fi\n\n    # Prune old backups\n    find \"${BACKUP_DIR}\" -maxdepth 1 -mtime +\"${DAYS_TO_KEEP}\" -name \"*${DATABASE}.sql.gz\" -exec rm -f {} \\; \\\n        &amp;&amp; log \"INFO\" \"Old backups deleted for database ${DATABASE}\" \\\n        || log \"ERROR\" \"Failed to delete old backups for ${DATABASE}\" &gt;&amp;2\ndone\n\n## MariaDB Backup\nfor DATABASE in ${MARIADBDATABASES[@]}; do\n    TIMESTAMP=$(date +\"%Y%m%d%H%M\")\n    FILE=\"${TIMESTAMP}_${DATABASE}.sql.gz\"\n    OUTPUT_FILE=\"${BACKUP_DIR}/${FILE}\"\n\n    # Perform the database backup (dump)\n    if docker exec ${MARIADBCONTAINER} /usr/bin/mariadb-dump -u  root --password=yourpassword ${DATABASE} | gzip -9 &gt;  ${OUTPUT_FILE}; then\n        log \"SUCCESS\" \"Backup created: ${OUTPUT_FILE}\"\n        ls -l \"${OUTPUT_FILE}\" | tee -a \"${LOG_FILE}\"\n    else\n        log \"ERROR\" \"Backup failed for database ${DATABASE}\" &gt;&amp;2\n        continue\n    fi\n\n    # Prune old backups\n    find \"${BACKUP_DIR}\" -maxdepth 1 -mtime +\"${DAYS_TO_KEEP}\" -name \"*${DATABASE}.sql.gz\" -exec rm -f {} \\; \\\n        &amp;&amp; log \"INFO\" \"Old backups deleted for database ${DATABASE}\" \\\n        || log \"ERROR\" \"Failed to delete old backups for ${DATABASE}\" &gt;&amp;2\ndone\n\nlog \"INFO\" \"Finished database backups!\"\n</code></pre>\n<p><strong>Explanation:</strong></p>\n<ul>\n<li><strong>Variables:</strong> The script starts by defining a backup directory and more parameters like days to keep backups and individual databases to backup.</li>\n<li><strong>PostgreSQL Backup:</strong> It uses <code>docker exec</code> to run the <code>pg_dump</code> command inside the PostgreSQL container to dump previously defined databases.</li>\n<li><strong>MariaDB Backup:</strong> Similarly, it uses <code>docker exec</code> to run the <code>mysqldump</code> inside the MariaDB container and backup previously defined databases.</li>\n<li><strong>Compression:</strong> All backups are compressed using <code>gzip</code> to save space.</li>\n<li><strong>Backup Cleanup:</strong> Finally, the script deletes backups older than <code>DAYS_TO_KEEP</code> days to prevent disk space issues.</li>\n</ul>\n<p><strong>Customizing the Script:</strong></p>\n<ul>\n<li>Change <code>BACKUP_DIR</code> to the directory where you want to store your backups.</li>\n<li>Replace <code>DAYS_TO_KEEP</code> with the days how long you want to keep backups.</li>\n<li>Replace <code>POSTGRESDATABASES</code> with the PostgreSQL databases to backup.</li>\n<li>Replace <code>MARIADBDATABASES</code> with the MariaDB databases to backup.</li>\n<li>Replace <code>POSTGRESCONTAINER</code> and  <code>MARIADBCONTAINER</code> with the name of your PostgreSQL and MariaDB containers.</li>\n<li>Replace <code>yourpassword</code> with the password for the root user in MariaDB..</li>\n</ul>\n<h2 id=\"makethescriptexecutable\">Make the Script Executable</h2>\n<p>After saving the script, make it executable:</p>\n<pre><code class=\"bash language-bash\">chmod +x /path/to/backup_databases.sh\n</code></pre>\n<h2 id=\"automatethebackupwithcron\">Automate the Backup with Cron</h2>\n<p>To schedule automatic backups, set up a cron job.</p>\n<ul>\n<li>Open the crontab editor:</li>\n</ul>\n<pre><code class=\"bash language-bash\">crontab -e\n</code></pre>\n<ul>\n<li>Add the following line to run the backup script daily at 2:00 AM:</li>\n</ul>\n<pre><code class=\"bash language-bash\">0 2 * * * /path/to/backup_databases.sh\n</code></pre>\n<p>This will execute the backup script every day at 2:00 AM.</p>\n<p>Make sure to adjust the path <code>/path/to/backup_databases.sh</code> to the correct location of your script.</p>\n<h2 id=\"verifythebackup\">Verify the Backup</h2>\n<p>It’s always a good idea to manually run the backup script once to ensure everything is working correctly.</p>\n<pre><code class=\"bash language-bash\">/path/to/backup_databases.sh\n</code></pre>\n<p>Check the backup directory to ensure that the backup files have been created and compressed.</p>\n<h2 id=\"restorefrombackupbonus\">Restore from Backup (Bonus)</h2>\n<p>In case you need to restore a backup, you can use the following commands to load the backups back into your PostgreSQL and MariaDB containers.</p>\n<p><strong>PostgreSQL Restore:</strong></p>\n<pre><code class=\"bash language-bash\">docker exec -i postgres_container psql -U postgres -d database &lt; /home/youruser/backup/DATE_DATABASE.sql\n</code></pre>\n<p><strong>MariaDB Restore:</strong></p>\n<pre><code class=\"bash language-bash\">docker exec -i mariadb_container mariadb u root --password=yourpassword database &lt; /home/youruser/backup/DATE_DATABASE.sql\n</code></pre>\n<p>Replace <code>DATE</code> and <code>DATABASE</code> with the appropriate backup file’s date and database name</p>\n<p>By following these steps, you've created a simple and automated backup solution for your PostgreSQL and MariaDB databases running inside Docker containers. Regular backups are essential for protecting your data, and this script ensures that your backups run smoothly without manual intervention. You can also use this script to backup databases e.g. in Unraid with the <code>User Script</code>plugin.</p>\n<p>You can further enhance this backup strategy by sending notifications, backing up to remote storage (e.g., AWS S3 or Google Cloud), or setting up encryption for additional security.</p>\n<p>With your databases securely backed up, you can rest easy knowing your data is safe and easily recoverable in case of an emergency.</p>","date_published":"2025-02-02T15:59:44.506Z","date_modified":"2025-02-16T22:08:27.915Z","tags":["d-1","selfhosted","docker"],"image":"https://mxd.codes/content/posts/published/how-to-create-a-backup-script-for-postgre-sql-and-maria-db-containers-on-a-server/cover.png","banner_image":"https://mxd.codes/content/posts/published/how-to-create-a-backup-script-for-postgre-sql-and-maria-db-containers-on-a-server/cover.png","authors":[{"name":"Max Dietrich","url":"https://mxd.codes"}]},{"id":"https://mxd.codes/photos/farewell-to-winter-and-the-cold","url":"https://mxd.codes/photos/farewell-to-winter-and-the-cold","title":"Farewell to winter and the cold!","content_html":"","date_published":"2025-02-02T13:02:25.702Z","image":"https://mxd.codes/content/photos/farewell-to-winter-and-the-cold/photo-1.jpg","attachments":[{"url":"https://mxd.codes/content/photos/farewell-to-winter-and-the-cold/photo-1.jpg","mime_type":"image/jpeg","title":"PXL_20250124_152413591.MP.jpg"},{"url":"https://mxd.codes/content/photos/farewell-to-winter-and-the-cold/photo-2.jpg","mime_type":"image/jpeg","title":"PXL_20250123_155110483.MP.jpg"},{"url":"https://mxd.codes/content/photos/farewell-to-winter-and-the-cold/photo-3.jpg","mime_type":"image/jpeg","title":"PXL_20250124_152601419.MP.jpg"},{"url":"https://mxd.codes/content/photos/farewell-to-winter-and-the-cold/photo-4.jpg","mime_type":"image/jpeg","title":"PXL_20250124_161215756.MP.jpg"},{"url":"https://mxd.codes/content/photos/farewell-to-winter-and-the-cold/photo-5.jpg","mime_type":"image/jpeg","title":"PXL_20250121_155002681.MP.jpg"},{"url":"https://mxd.codes/content/photos/farewell-to-winter-and-the-cold/photo-6.jpg","mime_type":"image/jpeg","title":"PXL_20250117_180657303.RAW-01.COVER.jpg"},{"url":"https://mxd.codes/content/photos/farewell-to-winter-and-the-cold/photo-7.jpg","mime_type":"image/jpeg","title":"PXL_20250129_161324994.MP.jpg"}],"authors":[{"name":"Max Dietrich","url":"https://mxd.codes"}]},{"id":"https://mxd.codes/articles/enhancing-social-interactions-implementing-webmentions-with-next-js","url":"https://mxd.codes/articles/enhancing-social-interactions-implementing-webmentions-with-next-js","title":" Enhancing Social Interactions: Implementing Webmentions with Next.js and PostgreSQL","summary":"Learn how to integrate Webmentions into your Next.js site using PostgreSQL. Enhance engagement, foster social interactions, and build a dynamic web community with this step-by-step guide.","content_html":"<p>Webmentions are a powerful tool for adding decentralized social interactions, such as comments, likes, reposts, and replies, directly on your website. If you're building a dynamic site with Next.js, integrating Webmentions can help encourage cross-site conversations, boost SEO, and enhance user engagement. In this guide, I will show you how to implement Webmentions into your Next.js project with PostgreSQL for storing and displaying them.</p>\n<h2 id=\"whatarewebmentions\">What Are Webmentions?</h2>\n<p><a href=\"https://www.w3.org/TR/webmention/\">Webmention</a> is an open web standard (W3C Recommendation) that enables decentralized cross-site interactions.</p>\n<p>In simpler terms, Webmentions allow users to interact with your content across the web by leaving <a href=\"https://indieweb.org/comment\">comments</a>, <a href=\"https://indieweb.org/like\">likes</a>, <a href=\"https://indieweb.org/repost\">reposts</a> and other <a href=\"https://indieweb.org/responses\">responses</a> on other sites. These interactions enrich your site’s user experience, and they help establish meaningful connections with others.</p>\n<p>When you link to a webpage, you can send a Webmention notification. If the receiving site supports Webmentions, it may display your post as a comment, like, or response—enabling rich cross-site conversations.</p>\n<p><strong>Why Should You Use Webmentions?</strong></p>\n<ul>\n<li>Encourage Engagement: Promote cross-site discussions and interactions.</li>\n<li>Boost Social Proof: Display interactions from well-known sources to establish credibility.</li>\n<li>Enhance SEO: Webmentions generate backlinks, improving visibility and search engine rankings.</li>\n</ul>\n<p>Here’s an example of how Webmentions appear on my site:</p>\n<p><img src=\"2024_02_23_18_23_ad04b4ba37.png\" alt=\"2024-02-23_18-23.png\" title=\"screnshot showing how webmentions are displayed at mxd.codes as example\" /></p>\n<p>You can check a live version of this in the Webmentions section of this article: [/articles/fetching-and-storing-activities-from-garmin-connect-with-strapi-and-visualizing-them-with-next-js#replies].</p>\n<p>A typical webmentions structure in JSON looks like this:</p>\n<pre><code class=\"json language-json\">{\n  \"type\": \"entry\",\n  \"author\": {\n    \"type\": \"card\",\n    \"name\": \"Some Name\",\n    \"photo\": \"URL to author image\",\n    \"url\": \"URL to author profile\"\n  },\n  \"url\": \"Webmention URL\",\n  \"wm-received\": \"Date of Webmention\",\n  \"wm-id\": 1876563,\n  \"wm-source\": \"Source URL\",\n  \"wm-target\": \"Target URL\",\n  \"wm-property\": \"Type of mention (e.g., like-of, repost-of)\",\n  \"wm-private\": false\n}\n</code></pre>\n<p>To keep your Webmentions accessible even if an external service is discontinued, it’s a good idea to store them locally. In this tutorial, we’ll guide you through setting up a PostgreSQL database to store Webmentions and display them dynamically in your Next.js app.</p>\n<h2 id=\"settinguppostgresql\">Setting Up PostgreSQL</h2>\n<p>Before we dive into Webmentions, ensure you have PostgreSQL installed on your server. If not, check on of these <a href=\"https://www.ecosia.org/search?method=index&q=setup+postgresql\">guides</a>.</p>\n<p>Once PostgreSQL is ready:</p>\n<ul>\n<li><strong>Create a New Database:</strong></li>\n</ul>\n<pre><code class=\"bash language-bash\"># Create a new database for storing Webmentions\ncreatedb personalwebsite\n</code></pre>\n<ul>\n<li><strong>Create a Table to Store Webmentions:</strong> Here's the SQL structure to store Webmentions in your database:</li>\n</ul>\n<pre><code class=\"sql language-sql\">-- Define a table structure to store Webmentions\n\n-- DROP TABLE public.webmentions;\n\nCREATE TABLE public.webmentions (\n    id serial4 NOT NULL,\n    wm_id int8 NOT NULL,\n    wm_source text NOT NULL,\n    wm_target text NOT NULL,\n    wm_property text NOT NULL,\n    url text NULL,\n    author_name text NULL,\n    author_photo text NULL,\n    author_url text NULL,\n    content_html text NULL,\n    content_text text NULL,\n    published_at timestamp NULL,\n    received_at timestamp DEFAULT CURRENT_TIMESTAMP NULL,\n    CONSTRAINT webmentions_pkey PRIMARY KEY (id),\n    CONSTRAINT webmentions_wm_id_key UNIQUE (wm_id)\n);\n</code></pre>\n<ul>\n<li><strong>Create a Log Table for Fetching Webmentions:</strong> This table logs each fetch, allowing you to track when Webmentions were last retrieved and avoid overloading the service:</li>\n</ul>\n<pre><code class=\"sql language-sql\">-- public.webmention_fetch_log definition\n\n-- Drop table\n\n-- DROP TABLE public.webmention_fetch_log;\n\nCREATE TABLE public.webmention_fetch_log (\n    id serial4 NOT NULL,\n    last_fetch timestamptz NOT NULL,\n    CONSTRAINT webmention_fetch_log_pkey PRIMARY KEY (id)\n);\n</code></pre>\n<h2 id=\"usingwebmentioniotoreceivewebmentions\">Using Webmention.io to Receive Webmentions</h2>\n<p>Before we store webmentions to display them we have to get them somewhere. If you dont want to implement your own Webmentions Receiver I recommend to use <a href=\"https://webmention.io/\">Webmention.io</a> which is a service to easily receive webmentions.</p>\n<p><strong>Steps:</strong></p>\n<ol>\n<li><strong>Set Up IndieAuth for Your Site:</strong> Follow these<a href=\"https://indieauth.com/setup\"> IndieAuth setup instructions</a></li>\n<li><strong>Sign Up for Webmention.io:</strong> Create an account at<a href=\"https://webmention.io/\"> Webmention.io</a></li>\n<li><strong>Add the Webmention Link to Your <code>_app.tsx</code>:</strong></li>\n</ol>\n<pre><code class=\"html language-html\">&lt;Head&gt;\n  ...\n  &lt;link rel=\"webmention\" href=\"https://webmention.io/username/webmention\" /&gt;\n  ...\n  &lt;/Head&gt;\n</code></pre>\n<p>From here on, Webmention.io will collect all the Webmentions for your site. Now, let’s create a script that fetches and stores them every ten minutes in the PostgreSQL database</p>\n<h2 id=\"fetchingwebmentionsfromwebmentionioapi\">Fetching Webmentions from Webmention.io API</h2>\n<p>To keep Webmentions up-to-date, we'll fetch them periodically. Here’s the logic of the script.</p>\n<p><img src=\"fetch_Webmentions_396b7d7dd6.jpg\" alt=\"fetchWebmentions.jpg\" title=\"diagram showing the logic of the fetch webmentions script\" /></p>\n<p>Create a script <code>src/utils/fetch-webmentions.js</code> to fetch and store Webmentions:</p>\n<pre><code class=\"jsx language-jsx\">import fetch from \"node-fetch\"\nimport { Pool } from \"pg\"\n\nconst pool = new Pool({\n  user: process.env.PGUSER,\n  host: process.env.PGHOST,\n  database: process.env.PGDATABASE,\n  password: process.env.PGPASSWORD,\n  port: process.env.PGPORT,\n})\n\nfunction isNotOlderThanTenMinutes(date: Date) {\n  if (!(date instanceof Date) || isNaN(date.getTime())) return false\n  return Date.now() - date.getTime() &lt;= 10 * 60 * 1000\n}\n\nexport async function fetchAndStoreWebmentions() {\n  const client = await pool.connect() // Use a client for transaction safety\n  try {\n    console.log(\"🔄 Checking last webmention fetch...\")\n\n    // Get the latest fetch timestamp\n    const { rows } = await client.query(\n      `SELECT last_fetch FROM webmention_fetch_log ORDER BY last_fetch DESC LIMIT 1`\n    )\n    const lastFetchDate = rows[0]?.last_fetch\n\n    if (isNotOlderThanTenMinutes(lastFetchDate)) {\n      console.log(\"✅ Webmentions are already updated!\")\n      return\n    }\n\n    // Insert new fetch timestamp\n    const now = new Date().toISOString()\n    await client.query(`INSERT INTO webmention_fetch_log (last_fetch) VALUES ($1)`, [now])\n    console.log(\"📌 Updated Webmentions fetch log\")\n\n    // Generate Webmention API URL\n    const baseUrl = `https://webmention.io/api/mentions.jf2?domain=mxd.codes&amp;per-page=1000&amp;page=0&amp;token=${process.env.WEBMENTION_IO_TOKEN}`\n    const webmentionsUrl =\n      lastFetchDate instanceof Date &amp;&amp; !isNaN(lastFetchDate.getTime())\n        ? `${baseUrl}&amp;since=${lastFetchDate.toISOString()}`\n        : baseUrl\n\n    // Fetch new Webmentions from Webmention.io\n    console.log(\"🔄 Fetching webmentions from Webmention.io...\")\n    const response = await fetch(webmentionsUrl)\n    const { children: webmentions } = await response.json()\n\n    if (!Array.isArray(webmentions) || webmentions.length === 0) {\n      console.log(\"⚠️ No new webmentions found.\")\n      return\n    }\n\n    console.log(`📥 Processing ${webmentions.length} webmentions...`)\n\n    // Prepare batch insert query\n    const insertQuery = `\n      INSERT INTO webmentions (\n        wm_id, wm_source, wm_target, wm_property, url,\n        author_name, author_photo, author_url, content_html, content_text, published_at, received_at\n      ) VALUES ($1, $2, $3, $4, $5, $6, $7, $8, $9, $10, $11, $12)\n      ON CONFLICT (wm_id) DO NOTHING;\n    `\n\n    for (const mention of webmentions) {\n      const values = [\n        mention[\"wm-id\"],\n        mention[\"wm-source\"],\n        mention[\"wm-target\"],\n        mention[\"wm-property\"],\n        mention[\"url\"],\n        mention.author?.name || null,\n        mention.author?.photo || null,\n        mention.author?.url || null,\n        mention.content?.html || null,\n        mention.content?.text || null,\n        mention.published ? new Date(mention.published) : null,\n        new Date(mention[\"wm-received\"]),\n      ]\n      await pool.query(insertQuery, values)\n    }\n\n    console.log(`✅ Stored ${webmentions.length} webmentions successfully!`)\n  } catch (error) {\n    console.error(\"❌ Error fetching or storing webmentions:\", error)\n  } finally {\n    client.release() // Ensure client is released back to the pool\n  }\n}\n\n// Run the function\nfetchAndStoreWebmentions()\n</code></pre>\n<p>This function can now be called everytime before webmentions are queried for a page from PostgreSQL database.\nIdeally, you should abstract the logic for determining whether new webmentions need to be fetched into an API layer. This prevents unnecessary database queries with every request, but this is out of scope for this article.</p>\n<h2 id=\"retrievingwebmentionsforapage\">Retrieving Webmentions for a Page</h2>\n<p>To retrieve Webmentions dynamically for a page, we create an API route in <code>pages/api/get-webmentions.js</code>. This route allows us to fetch mentions for a specific target URL stored in our PostgreSQL database.</p>\n<pre><code class=\"jsx language-jsx\">import { Pool } from \"pg\"\nimport { fetchAndStoreWebmentions } from \"@/src/utils/fetch-webmentions\"\n\nconst pool = new Pool({\n  user: process.env.PGUSER,\n  host: process.env.PGHOST,\n  database: process.env.PGDATABASE,\n  password: process.env.PGPASSWORD,\n  port: process.env.PGPORT,\n})\n\nexport default async function handler(req, res) {\n  if (req.method !== \"GET\")\n    return res.status(405).json({ error: \"Method not allowed\" })\n\n  const { target } = req.query\n  if (!target) return res.status(400).json({ error: \"Missing target URL\" })\n\n  // Updating Webmentions before selecting for page url\n  await fetchAndStoreWebmentions()\n  const query = `SELECT wm_id, wm_source, wm_target, wm_property, url, author_name, author_photo, author_url, content_text, published_at FROM webmentions WHERE wm_target LIKE '%${target}%' ORDER BY received_at DESC;`\n  const result = await pool.query(query)\n\n  res.json(result.rows)\n}\n</code></pre>\n<p>Now you can call this API route and pass a query param <code>target</code> with the URL to get all Webmentions for a page.</p>\n<h2 id=\"displayingwebmentionsinnextjs\">Displaying Webmentions in Next.js</h2>\n<p>To visually display Webmentions on our website, we create a dedicated React component <code>components/Webmentions.js</code>. This component fetches the Webmentions from our API and renders them.</p>\n<pre><code class=\"javascript language-javascript\">import { useEffect, useState } from \"react\";\n\n// React component to display Webmentions for a given page\nconst Webmentions = ({ targetUrl }) =&gt; {\n  const [mentions, setMentions] = useState([]);\n\n  useEffect(() =&gt; {\n  // Fetch Webmentions for the target URL from the API route\n    fetch(`/api/get-webmentions?target=${encodeURIComponent(targetUrl)}`)\n      .then((res) =&gt; res.json())\n      .then((data) =&gt; setMentions(data));\n  }, [targetUrl]);\n\n  return (\n    &lt;div&gt;\n      &lt;h3&gt;Webmentions&lt;/h3&gt;\n      {mentions.length === 0 ? (\n        &lt;p&gt;No webmentions yet.&lt;/p&gt;\n      ) : (\n        mentions.map((mention) =&gt; (\n          &lt;div className=\"vcard h-card p-author\" key={mention.wm_id} style={{ border: \"1px solid #ddd\", padding: \"10px\", marginBottom: \"10px\" }}&gt;\n            {mention.author_photo &amp;&amp; (\n               // Display author profile picture if available\n              &lt;img src={mention.author_photo} alt={mention.author_name} className=\"u-photo\" style={{ width: \"40px\", height: \"40px\", borderRadius: \"50%\" }} /&gt;\n            )}\n            &lt;p&gt;\n              &lt;strong&gt;{mention.author_name}&lt;/strong&gt; {mention.wm_property.replace(\"-\", \" \")}\n              {mention.wm_property === \"like-of\" &amp;&amp; \" ❤️\"}\n              {mention.wm_property === \"repost-of\" &amp;&amp; \" 🔁\"}\n              {mention.wm_property === \"in-reply-to\" &amp;&amp; \" 💬\"}\n            &lt;/p&gt;\n            &lt;a className=\"u-url\" href={mention.url || mention.wm_source} target=\"_blank\" rel=\"noopener noreferrer\"&gt;View Mention&lt;/a&gt;\n          &lt;/div&gt;\n        ))\n      )}\n    &lt;/div&gt;\n  );\n};\n\nexport default Webmentions;\n</code></pre>\n<p>I highly recommend periodically verifying the authenticity of Webmention sources to prevent spam.</p>\n<h2 id=\"testingwebmentions\">Testing Webmentions</h2>\n<p>To ensure your Webmentions setup works correctly, use the following tools:</p>\n<ul>\n<li><a href=\"https://webmention.rocks/\">Webmention Rocks!</a> – A tool for testing Webmention implementations.</li>\n</ul>\n<p>By integrating Webmentions into your Next.js site, you can create an interactive and engaging web community. Whether you're running a blog, portfolio, or e-commerce site, Webmentions provide a powerful way to enhance content, boost SEO, and encourage meaningful connections.</p>\n<p>If you have created a response to this post you can send me a webmention and it will appear below the post.</p>\n<h2 id=\"morelinks\">More Links</h2>\n<ul>\n<li><a href=\"https://indieweb.org/Webmention\">IndieWeb Webmention</a></li>\n<li>You can read more about Webmention and the IndieWeb on the <a href=\"https://indieweb.org\">https://indieweb.org/</a>.</li>\n</ul>","date_published":"2025-02-02T00:03:37.284Z","date_modified":"2025-06-09T18:21:08.196Z","tags":["react","next-js","indie-web","selfhosted","d-1","seo"],"image":"https://mxd.codes/content/posts/published/enhancing-social-interactions-implementing-webmentions-with-next-js/cover.png","banner_image":"https://mxd.codes/content/posts/published/enhancing-social-interactions-implementing-webmentions-with-next-js/cover.png","authors":[{"name":"Max Dietrich","url":"https://mxd.codes"}]},{"id":"https://mxd.codes/articles/docker-staticmaps-a-selfhosted-version-to-generate-static-map-images","url":"https://mxd.codes/articles/docker-staticmaps-a-selfhosted-version-to-generate-static-map-images","title":"docker-staticmaps: A selfhosted Static Maps API","summary":"A containerized web version for staticmaps with express.","content_html":"<p>Many developers rely on Google’s Static Maps API to generate map images, but this has limitations such as:</p>\n<ul>\n<li>API rate limits</li>\n<li>Cost for high-volume usage</li>\n<li>Potential data privacy concerns</li>\n<li>Dependency on an external service</li>\n</ul>\n<p>For a long time I was looking for an alternative to Maps Static API from Google which can be selfhosted but I couldn't find anything which seemed to fit my needs.</p>\n<p>However I found <a href=\"https://www.npmjs.com/package/staticmaps\" title=\"staticmaps\">staticmaps</a> which is a Node.JS library for creating map images with markers, polylines, polygons and text. But the library doesn't provide a web interface so I decided to built one on top of it with <a href=\"https://github.com/expressjs/express\" title=\"express\">express</a> and containerized the staticmaps API.</p>\n<h2 id=\"dockerstaticmapsapi\">Docker Static Maps API</h2>\n<p><a href=\"https://github.com/dietrichmax/docker-staticmaps\" title=\"Docker Static Maps API\">docker-staticmaps</a> is a containerized web version for <a href=\"https://www.npmjs.com/package/staticmaps\">staticmaps</a> with <a href=\"https://github.com/expressjs/express\">express</a>.</p>\n<p>In general <code>docker-staticmaps</code> provides a self-hosted alternative that allows you to generate static map images on your own server without relying on third-party APIs.</p>\n<h2 id=\"demo\">Demo</h2>\n<p><StaticmapsDemo/></p>\n<h2 id=\"usage\">Usage</h2>\n<p>To get a static map from the endpoint <code>/staticmaps</code> several prameters have to be provided.</p>\n<ul>\n<li><code>center</code> - Center coordinates of the map in the format <code>lon, lat</code></li>\n<li><code>zoom</code> - Set the zoom level for the map.</li>\n<li><code>width</code> - default <code>300</code> - Width in pixels of the final image</li>\n<li><code>height</code> - default <code>300</code> - Height in pixels of the final image</li>\n<li><code>format</code> - default <code>png</code> (e.g. <code>png</code>, <code>jpg</code> or <code>webp</code>)</li>\n<li><code>basemap</code> - default <code>osm</code> - Map base layer</li>\n</ul>\n<h3 id=\"basemaps\">Basemaps</h3>\n<p>For different basemaps docker-staticmaps is using exisiting tile-services from various providers. Be sure to check their Terms of Use for your use case or use a <code>custom</code> tileserver with the <code>tileUrl</code> parameter!</p>\n<ul>\n<li><code>basemap</code> - default \"osm\" - Select the basemap</li>\n<li><code>osm</code> - default - <a href=\"https://www.openstreetmap.org/\">Open Street Map</a></li>\n<li><code>streets</code> - <a href=\"https://www.arcgis.com/home/webmap/viewer.html?webmap=7990d7ea55204450b8110d57e20c99ab\">Esri street basemap</a></li>\n<li><code>satellite</code> - Esri's <a href=\"https://www.arcgis.com/home/webmap/viewer.html?webmap=d802f08316e84c6592ef681c50178f17&center=-71.055499,42.364247&level=15\">satellite basemap</a></li>\n<li><code>hybrid</code> - Satellite basemap with labels</li>\n<li><code>topo</code> - Esri <a href=\"https://www.arcgis.com/home/webmap/viewer.html?webmap=a72b0766aea04b48bf7a0e8c27ccc007\">topographic map</a></li>\n<li><code>gray</code> - Esri gray canvas with labels</li>\n<li><code>gray-background</code> - Esri <a href=\"https://www.arcgis.com/home/webmap/viewer.html?webmap=8b3d38c0819547faa83f7b7aca80bd76\">gray canvas</a> without labels</li>\n<li><code>oceans</code> - Esri <a href=\"https://www.arcgis.com/home/webmap/viewer.html?webmap=5ae9e138a17842688b0b79283a4353f6&center=-122.255816,36.573652&level=8\">ocean basemap</a></li>\n<li><code>national-geographic</code> - <a href=\"https://www.arcgis.com/home/webmap/viewer.html?webmap=d94dcdbe78e141c2b2d3a91d5ca8b9c9\">National Geographic basemap</a></li>\n<li><code>otm</code> - <a href=\"https://www.opentopomap.org/\">OpenTopoMap</a></li>\n<li><code>stamen-toner</code> - <a href=\"http://maps.stamen.com/toner/\">Stamen Toner</a> black and white map with labels</li>\n<li><code>stamen-toner-background</code> - <a href=\"http://maps.stamen.com/toner-background/\">Stamen Toner</a> map without labels</li>\n<li><code>stamen-toner-lite</code> - <a href=\"http://maps.stamen.com/toner-lite/\">Stamen Toner Light</a> with labels</li>\n<li><code>stamen-terrain</code> - <a href=\"http://maps.stamen.com/terrain/\">Stamen Terrain</a> with labels</li>\n<li><code>stamen-terrain-background</code> - <a href=\"http://maps.stamen.com/terrain-background/\">Stamen Terrain</a> without labels</li>\n<li><code>stamen-watercolor</code> - <a href=\"http://maps.stamen.com/watercolor/\">Stamen Watercolor</a></li>\n<li><code>carto-light</code> - <a href=\"https://carto.com/location-data-services/basemaps/\">Carto</a> Free usage for up to 75,000 mapviews per month, non-commercial services only.</li>\n<li><code>carto-dark</code> - <a href=\"https://carto.com/location-data-services/basemaps/\">Carto</a> Free usage for up to 75,000 mapviews per month, non-commercial services only.</li>\n<li><code>carto-voyager</code> - <a href=\"https://carto.com/location-data-services/basemaps/\">Carto</a> Free usage for up to 75,000 mapviews per month, non-commercial services only.</li>\n<li><code>custom</code> - Pass through the tile URL using parameter <code>tileurl</code></li>\n</ul>\n<h3 id=\"polylines\">Polylines</h3>\n<p>With the parameter <code>polyline</code> you can add a polyline to the map in the following format:</p>\n<p><code>polyline=polylineStyle|polylineCoord1|polylineCoord2|...</code></p>\n<ul>\n<li><code>polylineCoord</code> - required - in format <code>lat,lon</code> and seperated by <code>|</code>. Atleast two locations are needed to draw a polyline.</li>\n</ul>\n<p>The <code>polylineStyle</code> consists of the following two parameters separated by <code>|</code>.</p>\n<ul>\n<li><code>weight</code> - default <code>5</code> - Weight of the polyline in pixels, e.g. <code>weight:5</code></li>\n<li><code>color</code> - default <code>blue</code> -24-Bit-color hex value, e.g. <code>color:0000ff</code></li>\n</ul>\n<p>If no <code>center</code> is specified, the polyline will be centered.</p>\n<p><details>\n  <summary>Polyline with no <code>zoom</code>, <code>weight:6</code> and <code>color:0000ff</code></summary>\n  </p>\n<p>http://localhost:3000/staticmaps?width=600&height=600&polyline=weight:6|color:0000ff|48.726304979176675,-3.9829935637739382|48.72623035828412,-3.9829726446543385|48.726126671101639,-3.9829546542797467|48.725965124843256,-3.9829070729298808|48.725871429380568,-3.9828726793245273|48.725764250990267,-3.9828064532306628|48.725679557682362,-3.9827385375789146|48.72567025076134,-3.9827310750289113|48.725529844164292,-3.9826617613709225|48.725412537198615,-3.9826296635284164|48.725351694726704,-3.9826201452878531|48.725258599474508,-3.9826063049230411|48.725157520450125,-3.9825900299314232|48.725077863838543,-3.9825779905509102|48.724930435729831,-3.9825514102373938|48.724815578113535,-3.9825237355887291|48.724760905376989,-3.9825013965800564|48.724677938456551,-3.9824534296566916|48.724379435330384,-3.9822469276001118|48.724304509274596,-3.9821850264836076|48.7242453124599,-3.9821320570321772|48.724206187829317,-3.9821063430223207|48.724117073204575,-3.9820862134785551</p>\n<p></details></p>\n<p><img src=\"polylinepath_d9f50f216a.png\" alt=\"polylinepath.png\" title=\"Screenshot of polyline static map image\" /></p>\n<h3 id=\"polygons\">Polygons</h3>\n<p>With the parameter <code>polygon</code> you can add a polygon to the map in the following format:</p>\n<p><code>polygon=polygonStyle|polygonCoord1|polygonCoord2|...</code></p>\n<ul>\n<li><code>polygonCoord</code> - required - in format <code>lat,lon</code> and seperated by <code>|</code>. First and last locations have to be the same to close the polygon.</li>\n</ul>\n<p>The <code>polygonStyle</code> consists of the following two parameters separated by <code>|</code>.</p>\n<ul>\n<li><code>color</code> - default <code>blue</code> -24-Bit-color hex value, e.g. <code>color:4874db</code></li>\n<li><code>weight</code> - default <code>5</code> - Weight of the polygon in pixels, e.g. <code>weight:5</code></li>\n<li><code>fill</code> - default <code>green</code> -24-Bit-color hex value, e.g. <code>fill:eb7a34</code></li>\n</ul>\n<p>If no <code>center</code> is specified, the polygon will be centered.</p>\n<p><details>\n  <summary>Polygon with no <code>zoom</code>, <code>color:4874db</code>,<code>weight:7</code> and <code>fill:eb7a3</code></summary>\n    <p>http://localhost:3000/staticmaps?width=600&height=600&polygon=color:4874db|weight:7|fill:eb7a34|41.891169,12.491691|41.890633,12.493697|41.889012,12.492989|41.889467,12.490811|41.891169,12.491691</p>\n  </details></p>\n<p><img src=\"polygonexample_a8167c572c.png\" alt=\"polygonexample.png\" title=\"Screenshot of polygon static map image\" /></p>\n<h3 id=\"markers\">Markers</h3>\n<p>With the parameter <code>markers</code> you can draw one or multiple markers depending on how much pair of coordinates you pass to the parameter</p>\n<p><code>markers=markerCoord1|markerCoord2|...</code></p>\n<ul>\n<li><code>markerCoord</code> - required - in format <code>lat,lon</code> and separated by <code>|</code>. Atleast one coordinate is needed to draw a marker.</li>\n</ul>\n<p>If no <code>center</code> is specified, the markers will be centered.</p>\n<p><details>\n  <summary>Markers</summary>\n  </p>\n<p>http://localhost:3000/staticmaps?width=600&height=600&markers=48.726304979176675,-3.9829935637739382|48.724117073204575,-3.9820862134785551</p>\n<p></details></p>\n<p><img src=\"markers_e3060a2b45.png\" alt=\"markers.png\" title=\"Screenshot of marker static map image\" /></p>\n<h3 id=\"circles\">Circles</h3>\n<p>With the parameter <code>circle</code> you can add a circle to the map in the following format:</p>\n<p><code>circle=circleStyle|circleCoord</code></p>\n<ul>\n<li><code>circleCoord</code> - required - in format <code>lat,lon</code> and separated by <code>|</code>. Atleast one locations is needed to draw a marker.</li>\n</ul>\n<p>The <code>circleStyle</code> consists of the following parameters seperated by <code>|</code>.</p>\n<ul>\n<li><code>radius</code> - required - Circle radius in meter, e.g. <code>radius:500</code></li>\n<li><code>color</code> - default <code>#0000bb</code> -  Stroke color of the circle, e.g. <code>color:#0000bb</code></li>\n<li><code>width</code> - default <code>3</code> - Stroke width of the circle, e.g. <code>width:3</code></li>\n<li><code>fill</code> - default <code>#AA0000</code> - Fill color of the circle, e.g. <code>fill:#AA0000</code></li>\n</ul>\n<p>If no <code>center</code> is specified, the circle will be centered.</p>\n<p><details>\n  <summary>Circle with no zoom</summary>\n  </p>\n<p>http://localhost:3000/staticmaps?width=600&height=600&basemap=osm&circle=radius:100|48.726304979176675,-3.9829935637739382</p>\n<p></details></p>\n<p><img src=\"circle_646b7609a9.png\" alt=\"circle.png\" /></p>\n<h3 id=\"moreusageexamples\">More usage Examples</h3>\n<p><details>\n  <summary>Minimal example: <code>center</code> and <code>zoom</code></summary>\n  </p>\n<p>http://localhost:3000/staticmaps?center=-119.49280,37.81084&zoom=9</p>\n<p></details></p>\n<p><img src=\"minimalexample_ce216c4b8e.png\" alt=\"minimalexample.png\" title=\"Screenshot of circle static map image\" /></p>\n<p><details>\n  <summary><code>width=500</code>, <code>height=500</code>, <code>center=-73.99515,40.76761</code>,  <code>zoom=10</code>, <code>format=webp</code>, <code>basemap=carto-voyager</code></summary>\n  </p>\n<p>http://localhost:3000/staticmaps?width=500&height=500&center=-73.99515,40.76761&zoom=10&format=webp&basemap=carto-voyager</p>\n<p></details></p>\n<p><img src=\"example2_2e3cbb505b.webp\" alt=\"example2.webp\" /></p>\n<p><details>\n  <summary>Markers and Polyline</summary>\n  </p>\n<p>http://localhost:3000/staticmaps?width=600&height=600&polyline=weight:6|color:0000ff|48.726304979176675,-3.9829935637739382|48.72623035828412,-3.9829726446543385|48.726126671101639,-3.9829546542797467|48.725965124843256,-3.9829070729298808|48.725871429380568,-3.9828726793245273|48.725764250990267,-3.9828064532306628|48.725679557682362,-3.9827385375789146|48.72567025076134,-3.9827310750289113|48.725529844164292,-3.9826617613709225|48.725412537198615,-3.9826296635284164|48.725351694726704,-3.9826201452878531|48.725258599474508,-3.9826063049230411|48.725157520450125,-3.9825900299314232|48.725077863838543,-3.9825779905509102|48.724930435729831,-3.9825514102373938|48.724815578113535,-3.9825237355887291|48.724760905376989,-3.9825013965800564|48.724677938456551,-3.9824534296566916|48.724379435330384,-3.9822469276001118|48.724304509274596,-3.9821850264836076|48.7242453124599,-3.9821320570321772|48.724206187829317,-3.9821063430223207|48.724117073204575,-3.9820862134785551&markers=48.726304979176675,-3.9829935637739382|48.724117073204575,-3.9820862134785551</p>\n<p></details></p>\n<p><img src=\"markersandpolyline_04626a7660.png\" alt=\"markersandpolyline.png\" title=\"Screenshot of polyline with markers static map image\" /></p>\n<h2 id=\"deployment\">Deployment</h2>\n<p><strong>with Docker</strong></p>\n<pre><code class=\"bash language-bash\">docker run -d  \\\n  --name='static-maps-api' \\\n  -p '3003:3000/tcp' \\\n  'mxdcodes/docker-staticmaps:latest'\n</code></pre>\n<p><strong>with Node.js</strong></p>\n<pre><code class=\"bash language-bash\">git clone https://github.com/dietrichmax/docker-staticmaps\nnpm i\nnpm run start\n</code></pre>\n<p><strong>Links</strong></p>\n<ul>\n<li>GitHub: <a href=\"https://github.com/dietrichmax/docker-staticmaps\">https://github.com/dietrichmax/docker-staticmaps</a></li>\n<li>Docker Hub: <a href=\"https://hub.docker.com/r/mxdcodes/docker-staticmaps\">https://hub.docker.com/r/mxdcodes/docker-staticmaps</a></li>\n</ul>","date_published":"2024-12-28T19:02:25.115Z","date_modified":"2025-06-09T18:20:10.585Z","tags":["docker","node-js","web-mapping","selfhosted","javascript","open-source","gis"],"image":"https://mxd.codes/content/posts/published/docker-staticmaps-a-selfhosted-version-to-generate-static-map-images/cover.png","banner_image":"https://mxd.codes/content/posts/published/docker-staticmaps-a-selfhosted-version-to-generate-static-map-images/cover.png","authors":[{"name":"Max Dietrich","url":"https://mxd.codes"}]},{"id":"https://mxd.codes/photos/bretagne-24","url":"https://mxd.codes/photos/bretagne-24","title":"Bretagne 24","content_html":"","date_published":"2024-09-12T19:46:59.805Z","image":"https://mxd.codes/content/photos/bretagne-24/photo-1.jpg","attachments":[{"url":"https://mxd.codes/content/photos/bretagne-24/photo-1.jpg","mime_type":"image/jpeg","title":"PXL_20240904_133420936.jpg"},{"url":"https://mxd.codes/content/photos/bretagne-24/photo-2.jpg","mime_type":"image/jpeg","title":"PXL_20240906_110957625.RAW-01.COVER.jpg"},{"url":"https://mxd.codes/content/photos/bretagne-24/photo-3.jpg","mime_type":"image/jpeg","title":".trashed-1728143817-PXL_20240905_131452890.RAW-01.MP.COVER.jpg"},{"url":"https://mxd.codes/content/photos/bretagne-24/photo-4.jpg","mime_type":"image/jpeg","title":"PXL_20240904_113551571.jpg"},{"url":"https://mxd.codes/content/photos/bretagne-24/photo-5.jpg","mime_type":"image/jpeg","title":"PXL_20240901_141808428.MP.jpg"}],"authors":[{"name":"Max Dietrich","url":"https://mxd.codes"}]},{"id":"https://mxd.codes/photos/asturias","url":"https://mxd.codes/photos/asturias","title":"Asturias","content_html":"","date_published":"2024-05-12T19:50:34.586Z","image":"https://mxd.codes/content/photos/asturias/photo-1.jpg","attachments":[{"url":"https://mxd.codes/content/photos/asturias/photo-1.jpg","mime_type":"image/jpeg","title":"PXL_20240427_145537026.jpg"},{"url":"https://mxd.codes/content/photos/asturias/photo-2.jpg","mime_type":"image/jpeg","title":"PXL_20240427_145400397.jpg"},{"url":"https://mxd.codes/content/photos/asturias/photo-3.jpg","mime_type":"image/jpeg","title":"PXL_20240425_140613585.jpg"},{"url":"https://mxd.codes/content/photos/asturias/photo-4.jpg","mime_type":"image/jpeg","title":"PXL_20240426_211028415.jpg"}],"authors":[{"name":"Max Dietrich","url":"https://mxd.codes"}]},{"id":"https://mxd.codes/articles/using-google-adsense-with-gatsby-js","url":"https://mxd.codes/articles/using-google-adsense-with-gatsby-js","title":"Using Google Adsense with GatsbyJS","summary":"In general there are two possibilies to use Google Adsense on your GatsbyJS website Auto Ads and custom display blocks.Depending on whether you choose to include Adsense ads on certain spots or whether you will leave this job to the Google AI, you can choose one/and or the other.","content_html":"<p>In general there are two possibilies to use GoogleAdsense on your GatsbyJS website:</p>\n<ul>\n<li><strong>Auto Ads</strong> and</li>\n<li>custom <strong>ad blocks</strong>.</li>\n</ul>\n<p>Depending on whether you choose to include Adsense ads on certain spots or whether you will leave this job to the Google AI, you can choose one/and or the other.</p>\n<h2 id=\"autoads\">Auto Ads</h2>\n<p>With Auto Ads, the optimal positions for an advertising banner are determined using a Google AI and a display ad is automatically switched there. All you have to do is place the following AdSense code in <code>html.js</code>.</p>\n<pre><code class=\"html language-html\">&lt;script data-ad-client=\"ca-pub-0037698828864449\" async src=\"https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js\"&gt;&lt;/script&gt;\n</code></pre>\n<p><img src=\"adsense_auto_ads_a296306c19_64d9e7b57b.png\" alt=\"adsense_auto_ads_a296306c19.png\" />\nand activate Auto ads in Adsense.</p>\n<p>On GIS-Netzwerk.com I used Auto ads and I'm honestly surprised how well it works.\nAds are displayed in a text every few paragraphs and are also responsive.</p>\n<h3 id=\"adloads\">Ad loads</h3>\n<p>You also have the option of increasing or decreasing the number of ads in the settings.\nUnfortunately, you cannot specify a specific number of ads.</p>\n<p><img src=\"ad_load_f3a8f19537_cc65c9d77d.png\" alt=\"ad_load_f3a8f19537.png\" /></p>\n<p>In my opinion, a lot of ads are shown even when you set it to \"min\".\nYou can play around with the ad load and find out the best setting for your purposes.\nSomestimes it can take a few minutes until the new ad load is effective.</p>\n<h3 id=\"displayformats\">Display formats</h3>\n<p>You can also influence the ad formats.\nBasically there are:</p>\n<ul>\n<li>In-page ads (displayed in the main part of the page)</li>\n<li>Matched content (tool for content promotion)</li>\n<li>Anchor ads (mobile ads on the edge of the screen)</li>\n<li>Vignette ads (mobile full screen display, at page transitions)</li>\n</ul>\n<p>I have only deactivated anchor texts, because I personally find them very annoying.</p>\n<p><img src=\"ad_formats_71b13c9759_a596b280eb.png\" alt=\"ad_formats_71b13c9759.png\" /></p>\n<p>In addition, you can also completely exclude individual pages from advertisements.</p>\n<h2 id=\"adsensewithgatsbyjs\">Adsense with GatsbyJS</h2>\n<p>If you want to use Auto ads on your GatsbyJS page, you can do it super easily with the plugin <a href=\"https://www.gatsbyjs.com/packageshttps://www.gatsbyjs.com-plugin-google-adsense/\" title=\"gatsby-plugin-google-adsense\">gatsby-plugin-google-adsense</a>.</p>\n<p><strong>Install</strong></p>\n<pre><code class=\"bash language-bash\">npm install --save gatsby-plugin-google-adsense\n</code></pre>\n<p>or</p>\n<pre><code class=\"bash language-bash\">yarn add gatsby-plugin-google-adsense\n</code></pre>\n<p><strong>modify gatsby-config.js</strong></p>\n<pre><code class=\"javascript language-javascript\">// In your gatsby-config.js file\nplugins: [\n    {\n      resolve: `gatsby-plugin-google-adsense`,\n      options: {\n        publisherId: `ca-pub-xxxxxxxxxx`\n      },\n    },\n]\n</code></pre>\n<p>The remaining settings can then be adjusted on <a href=\"https://www.google.de/adsense/\" title=\"Adsense\">Adsense</a>.</p>\n<h2 id=\"adunits\">Ad units</h2>\n<p>In addition to auto ads, there is also the \"classic\" option of inserting individual ad units at specific positions.\nWith the React Component <a href=\"/github/hustcc/react-adsense\" title=\"react-adsense\">react-adsense</a> you can insert Google AdSense and Baidu ads in any place.</p>\n<pre><code class=\"bash language-bash\">npm install --save react-adsense\n</code></pre>\n<p>or</p>\n<pre><code class=\"bash language-bash\">yarn add react-adsense\n</code></pre>\n<p>In order for the components to be rendered, you still need the AdSense script code. You can either insert this manually in the <code>html.js</code> file or, if you want to combine individual ad units with Auto ads, you can also use the plug-in already mentioned to insert the script.</p>\n<blockquote>\n  <p>When auto ads and individual ad units are combined, the individual ad units always have a higher \"priority\". This means that all ad units that are inserted manually are usually also rendered and, if the text / ads ratio permits, additional ads from Auto ads are automatically inserted.</p>\n</blockquote>\n<p>If the script has been integrated and react-adsense has been installed, you can use</p>\n<pre><code class=\"javascript language-javascript\">import React from 'react';\nimport AdSense from 'react-adsense';\n\n// ads with no set-up\n&lt;AdSense.Google\n  client='ca-pub-7292810486004926'\n  slot='7806394673'\n/&gt;\n\n// ads with custom format\n&lt;AdSense.Google\n  client='ca-pub-7292810486004926'\n  slot='7806394673'\n  style={{ width: 500, height: 300, float: 'left' }}\n  format=''\n/&gt;\n\n// responsive and native ads\n&lt;AdSense.Google\n  client='ca-pub-7292810486004926'\n  slot='7806394673'\n  style={{ display: 'block' }}\n  layout='in-article'\n  format='fluid'\n/&gt;\n\n// auto full width responsive ads\n&lt;AdSense.Google\n  client='ca-pub-7292810486004926'\n  slot='7806394673'\n  style={{ display: 'block' }}\n  format='auto'\n  responsive='true'\n  layoutKey='-gw-1+2a-9x+5c'\n/&gt;\n</code></pre>\n<p>to insert components for the ad units.</p>\n<p>The respective client id</p>\n<pre><code class=\"javascript language-javascript\">client='ca-pub-7292810486004926'\n</code></pre>\n<p>\nand the ad slot </p>\n<pre><code class=\"javascript language-javascript\">slot='7806394673'\n</code></pre>\n<p><strong>must always be specified</strong>.</p>\n<p>The rest is optional.</p>\n<pre><code class=\"javascript language-javascript\">Optional props:\n    className:\n    style:\n    layout:\n    layoutKey:\n    format:\n    responsive:\n</code></pre>\n<p>In case you have more questions there is also ad Adsense community where you can get some answers.\n<a href=\"https://support.google.com/adsense/community\" title=\"Google AdSense Help Community\">Google AdSense Help Community</a></p>","date_published":"2024-02-22T14:19:02.793Z","date_modified":"2025-02-01T16:46:28.539Z","tags":["react","gatsby","a-1"],"image":"https://mxd.codes/content/posts/published/using-google-adsense-with-gatsby-js/cover.png","banner_image":"https://mxd.codes/content/posts/published/using-google-adsense-with-gatsby-js/cover.png","authors":[{"name":"Max Dietrich","url":"https://mxd.codes"}]},{"id":"https://mxd.codes/articles/how-to-create-a-web-map-with-open-layers-and-react","url":"https://mxd.codes/articles/how-to-create-a-web-map-with-open-layers-and-react","title":"Mastering React and OpenLayers Integration: A Comprehensive Guide","summary":"Unlock the full potential of interactive maps in your React applications by delving into the seamless integration of OpenLayers.","content_html":"<p>Maps have long been a fundamental element in web development, transforming static websites into dynamic, location-aware applications. Whether you're navigating through the bustling streets of a city, planning a route for your next adventure, or visualizing data in a geographic context, maps play a crucial role in enhancing user experiences.</p>\n<h2 id=\"overviewofopenlayersanditscapabilities\">Overview of OpenLayers and its Capabilities</h2>\n<p><a href=\"https://openlayers.org/\" title=\"OpenLayers\">OpenLayers</a>, a robust open-source JavaScript library, stands at the forefront of enabling you to seamlessly integrate interactive maps into web applications. Its versatile and feature-rich nature makes it a go-to choice for projects requiring dynamic geospatial visualizations.</p>\n<p>At its core, OpenLayers provides a comprehensive set of tools to manipulate maps, overlay data, and interact with geographic information. Its capabilities extend from simple map displays to complex <a href=\"/articles/what-is-gis-geographic-information-system\" title=\"GIS\">GIS</a> applications, offering you the flexibility to create compelling and interactive mapping solutions. OpenLayers supports a modular and extensible architecture, allowing you to tailor their maps precisely to project requirements.</p>\n<h2 id=\"explanationofkeyconceptsmapslayersviewsandsources\">Explanation of Key Concepts: Maps, Layers, Views, and Sources</h2>\n<p>Understanding the key concepts within OpenLayers is fundamental to harnessing its full potential:</p>\n<p><strong>Map</strong></p>\n<p>In OpenLayers, a map is a container for various layers and the view, serving as the canvas where geographical data is displayed. you can create multiple maps within an application, each with its set of layers and views.</p>\n<p>The markup below could be used to create a  <code>&lt;div&gt;</code> that contains your map.</p>\n<pre><code class=\"javascript language-javascript\">&lt;div id=\"map\" style=\"width: 100%; height: 400px\"&gt;&lt;/div&gt;\n</code></pre>\n<p>The script below constructs a map that is rendered in the  <code>&lt;div&gt;</code> above, using the map id of the element as a selector.</p>\n<pre><code class=\"javascript language-javascript\">import Map from 'ol/Map.js';\n\nconst map = new Map({target: 'map'});\n</code></pre>\n<p>API Doc: <a href=\"https://openlayers.org/en/latest/apidoc/module-ol_Map-Map.html\" title=\"ol/Map\">ol/Map</a></p>\n<p><strong>View</strong></p>\n<p>The <code>view</code> in OpenLayers determines the <code>center</code>, <code>zoom</code> and <code>projection</code> of the map. It acts as the window through which users observe the geographic data. you can configure different views to represent varying perspectives or zoom levels within a single map.</p>\n<pre><code class=\"javascript language-javascript\">import View from 'ol/View.js';\n\nmap.setView(new View({\n  center: [0, 0],\n  zoom: 2,\n}));\n</code></pre>\n<p>The projection determines the coordinate system of the center and the units for map resolution calculations. If not specified (like in the above snippet), the default projection is Spherical Mercator (EPSG:3857), with meters as map units.</p>\n<p>The available zoom levels are determined by <code>maxZoom</code> (default: 28), <code>zoomFactor</code> (default: 2) and <code>maxResolutio</code>n (default is calculated in such a way that the projection's validity extent fits in a 256x256 pixel tile).</p>\n<p>API Doc: <a href=\"https://openlayers.org/en/latest/apidoc/module-ol_View-View.html\" title=\"ol/View\">ol/View</a></p>\n<p><strong>Source</strong></p>\n<p>Sources provide the data for layers. OpenLayers supports different sources, including Tile sources for raster data, Vector sources for vector data, and Image sources for static images. These sources can fetch data from various providers or be customized to handle specific data formats.</p>\n<p>To get remote data for a layer you can use the  <code>ol/source</code> subclasses.</p>\n<pre><code class=\"javascript language-javascript\">import OSM from 'ol/source/OSM.js';\n\nconst source = OSM();\n</code></pre>\n<p>API Doc: <a href=\"https://openlayers.org/en/latest/apidoc/module-ol_source.html\" title=\"ol/source\">ol/source</a>.</p>\n<p><strong>Layer</strong></p>\n<p>Layers define the visual content of the map. OpenLayers supports various layer types, such as Tile layers for raster data, Vector layers for vector data, and Image layers for rendering images. Layers can be stacked to combine different types of information into a single, coherent map.</p>\n<ul>\n<li><code>ol/layer/Tile</code> - Renders sources that provide tiled images in grids that are organized by zoom levels for specific resolutions.</li>\n<li><code>ol/layer/Image</code> - Renders sources that provide map images at arbitrary extents and resolutions.</li>\n<li><code>ol/layer/Vector</code> - Renders vector data client-side.</li>\n<li><code>ol/layer/VectorTile</code> - Renders data that is provided as vector tiles.</li>\n</ul>\n<pre><code class=\"javascript language-javascript\">import TileLayer from 'ol/layer/Tile.js';\n\n// ...\nconst layer = new TileLayer({source: source});\nmap.addLayer(layer);\n</code></pre>\n<p>API Doc: <a href=\"https://openlayers.org/en/latest/apidoc/module-ol_layer_Layer-Layer.html\" title=\"ol/layer\">ol/slayer</a>.</p>\n<h2 id=\"installingopenlayers\">Installing OpenLayers</h2>\n<p>To start your journey into the world of interactive maps with OpenLayers and React, the first step is to install OpenLayers using your preferred package manager – npm or yarn. Open a terminal and execute one of the following commands:</p>\n<pre><code class=\"bash language-bash\">npm install ol\n# or\nyarn add ol\n</code></pre>\n<p>This command fetches the latest version of OpenLayers and installs it as a dependency in your project. With the library now available, you're ready to embark on the next steps of integrating OpenLayers with React.</p>\n<h2 id=\"settingupabasicreactcomponentforthemap\">Setting Up a Basic React Component for the Map</h2>\n<p>Now that OpenLayers is part of your project, the next crucial step is to create a React component that will serve as the container for your interactive map.</p>\n<p>If you try to render the Map before the component has been mounted (meaning outside of useEffect)  like following you will get an error message.</p>\n<pre><code class=\"javascript language-javascript\">const MapComponent = () =&gt; {\n  const mapRef = useRef()\n\n  // Incorrect: Rendering content before the component has mounted\n  const map = new Map({\n      target: mapRef.current\n      ...\n  })\n  return &lt;div ref={mapRef} style={{ width: '100%', height: '400px' }}&gt;&lt;/div&gt;;\n};\n</code></pre>\n<p><strong>Solution:</strong>\nEnsure that you only render content when the component has properly mounted. You can use lifecycle methods like <code>componentDidMount</code> in class components or <code>useEffect</code> in functional components.</p>\n<pre><code class=\"javascript language-javascript\">const MapComponent = () =&gt; {\n  const mapRef = useRef()\n\n  useEffect(() =&gt; {\n    // Code here runs after the component has mounted\n    const map = new Map({\n      target: mapRef.current,\n    ...\n    } \n    return () =&gt; map.setTarget(undefined)\n  }, []);\n\n  return &lt;div ref={mapRef} style={{ width: '100%', height: '400px' }}&gt;&lt;/div&gt;;\n};\n</code></pre>\n<p>The return function will reponsible for resource cleanup for the map.</p>\n<p>So a basic OpenLayers React example could look like the following:</p>\n<pre><code class=\"javascript language-javascript\">// MapComponent.js\nimport React, { useEffect, useRef } from \"react\"\nimport { Map, View } from \"ol\"\nimport TileLayer from \"ol/layer/Tile\"\nimport OSM from \"ol/source/OSM\"\nimport \"ol/ol.css\"\n\nfunction MapComponent() {\n  const mapRef = useRef&lt;HTMLDivElement | null&gt;(null)\n\n  useEffect(() =&gt; {\n    const osmLayer = new TileLayer({\n      preload: Infinity,\n      source: new OSM(),\n    })\n\n    const map = new Map({\n      target: mapRef.current,\n      layers: [osmLayer],\n      view: new View({\n        center: [0, 0],\n        zoom: 0,\n      }),\n    })\n    return () =&gt; map.setTarget(undefined)\n  }, [])\n\n  return (\n    &lt;div\n      style={{ height: \"300px\", width: \"100%\" }}\n      ref={mapRef}\n      className=\"map-container\"\n    /&gt;\n  )\n}\n\nexport default MapComponent\n</code></pre>\n<p><MapComponent /></p>\n<p>In this example, the <code>MapComponent</code> initializes an OpenLayers map with a simple OpenStreetMap layer and the <code>useEffect</code> hook ensures that the map is created when the component mounts.</p>\n<p>To ensure the correct styling and functionality of OpenLayers, it's crucial to import the necessary CSS and modules. In the <code>MapComponent.js</code> file, notice the import statement for the OpenLayers CSS:</p>\n<pre><code class=\"jsx language-jsx\">import 'ol/ol.css'; // Import OpenLayers CSS\n</code></pre>\n<p>This line imports the essential stylesheets required for OpenLayers to render properly. \nAdditionally, other modules from OpenLayers, such as Map, View, TileLayer, and OSM, are imported to create the map instance and layers.</p>\n<p>By following these steps, you've successfully set up a basic React component housing an OpenLayers map. You're now ready to delve deeper into the capabilities of OpenLayers and explore advanced features for creating dynamic and interactive maps within your React applications.</p>\n<p>Also I created two examples for React and Openlayers:</p>\n<ul>\n<li><a href=\"https://github.com/dietrichmax/openlayers-react-functional-component\" title=\"OpenLayers 6 React example using a functional component\">OpenLayers 6 React example using a functional component</a></li>\n<li><a href=\"https://github.com/dietrichmax/openlayers-react-class-component\" title=\"OpenLayers 6 React example using a class component\">OpenLayers 6 React example using a class component</a></li>\n</ul>\n<h2 id=\"markerspopupsandcustomoverlays\">Markers, Popups, and Custom Overlays</h2>\n<p>Markers, popups, and custom overlays enhance the visual storytelling capabilities of a map, providing users with valuable context. OpenLayers simplifies the process of adding these elements:</p>\n<ul>\n<li><strong>Markers:</strong> Representing specific points of interest on a map becomes intuitive with markers. you can add markers to highlight locations, making the map more informative and engaging.</li>\n</ul>\n<p><img src=\"Screenshot_2024_01_18_152148_f19d10c63b_79d26e5486.png\" alt=\"Screenshot_2024_01_18_152148_f19d10c63b.png\" title=\"Screenshot of a map with markers\" /></p>\n<ul>\n<li><strong>Popups:</strong> Interactive popups can be attached to markers, providing additional information when users click on specific map features. This allows for a more detailed exploration of the data.</li>\n</ul>\n<p><img src=\"Screenshot_2024_01_18_152206_2e473efa56_d031150b4b.png\" alt=\"Screenshot_2024_01_18_152206_2e473efa56.png\" title=\"screenshot of a map with popups\" /></p>\n<ul>\n<li><strong>Custom Overlays</strong>: OpenLayers allows you to create custom overlays, enabling the display of additional information in a tailored manner. This could include tooltips, legends, or any other supplementary elements.</li>\n</ul>\n<p>Here's a simplified example demonstrating the addition of a marker with a popup:</p>\n<pre><code class=\"javascript language-javascript\">// MarkerPopupMap.js\nimport { useEffect, useRef } from \"react\"\nimport \"ol/ol.css\"\nimport Map from \"ol/Map\"\nimport View from \"ol/View\"\nimport Overlay from \"ol/Overlay\"\nimport { toLonLat } from \"ol/proj.js\"\nimport { toStringHDMS } from \"ol/coordinate.js\"\nimport styled from \"styled-components\"\nimport { Icon, Style } from \"ol/style.js\"\nimport Feature from \"ol/Feature.js\"\nimport { Vector as VectorSource } from \"ol/source.js\"\nimport { Tile as TileLayer, Vector as VectorLayer } from \"ol/layer.js\"\nimport Point from \"ol/geom/Point.js\"\n\nconst Popup = styled.div`\n  background-color: var(--content-bg);\n  padding: var(--space-sm);\n`\n\nconst MarkerPopupMap = () =&gt; {\n  const mapRef = useRef()\n  const popupRef = useRef()\n\n  const osm = new TileLayer({\n      preload: Infinity,\n      source: new OSM(),\n    })\n\n  const iconFeature = new Feature({\n    geometry: new Point([0, 0]),\n    name: \"Null Island\",\n    population: 4000,\n    rainfall: 500,\n  })\n\n  const iconStyle = new Style({\n    image: new Icon({\n      anchor: [0.5, 46],\n      anchorXUnits: \"fraction\",\n      anchorYUnits: \"pixels\",\n      src: \"https://openlayers.org/en/latest/examples/data/icon.png\",\n    }),\n  })\n\n  iconFeature.setStyle(iconStyle)\n\n  const vectorSource = new VectorSource({\n    features: [iconFeature],\n  })\n\n  const vectorLayer = new VectorLayer({\n    source: vectorSource,\n  })\n\n  useEffect(() =&gt; {\n    const overlay = new Overlay({\n      element: popupRef.current,\n      autoPan: {\n        animation: {\n          duration: 250,\n        },\n      },\n    })\n\n    const map = new Map({\n      target: mapRef.current,\n      layers: [osm, vectorLayer],\n      view: new View({\n        center: [0, 0],\n        zoom: 3,\n      }),\n      overlays: [overlay],\n    })\n\n    /**\n     * Add a click handler to the map to render the popup.\n     */\n\n    map.on(\"singleclick\", function (evt) {\n      // Get Coordinates of click\n      const coordinate = evt.coordinate;\n      const hdms = toStringHDMS(toLonLat(coordinate));\n\n      // Show popup at clicked position\n      overlay.setPosition(coordinate);\n\n      if (popupRef.current) {\n        popupRef.current.innerHTML = `&lt;p&gt;You clicked here:&lt;/p&gt;&lt;code&gt;` + hdms + `&lt;/code&gt;`;\n      }\n\n      overlay.setPosition(coordinate)\n    })\n\n    return () =&gt; map.setTarget(undefined)\n  }, [])\n\n  return (\n    &lt;div&gt;\n      &lt;div ref={mapRef} style={{ width: \"100%\", height: \"400px\" }} /&gt;\n      &lt;div ref={popupRef} className=\"ol-popup\" style={popupStyle} /&gt;\n    &lt;/div&gt;\n  )\n}\n\nconst popupStyle = {\n  position: \"absolute\",\n  backgroundColor: \"white\",\n  padding: \"5px\",\n  borderRadius: \"5px\",\n  border: \"1px solid black\",\n  transform: \"translate(-50%, -100%)\",\n  pointerEvents: \"none\",\n  width: \"220px\",\n  color: \"black\"\n};\n\nexport default MarkerPopupMap\n</code></pre>\n<p>Click anywhere on the map to create a popup:\n<MarkerPopupMap/></p>\n<h2 id=\"handlingmapeventsanduserinteractions\">Handling Map Events and User Interactions:</h2>\n<p>Interactive maps come to life when you handle events and user interactions effectively. OpenLayers simplifies this process by providing robust event handling mechanisms. Consider the following example demonstrating how to capture a click event on the map:</p>\n<pre><code class=\"javascript language-javascript\">    // Handle a click event on the map\n    map.on('click', (event) =&gt; {\n      const clickedCoordinate = event.coordinate;\n      console.log('Clicked Coordinate:', clickedCoordinate);\n    });\n</code></pre>\n<p>This example displays OpenLayers' event handling to log the coordinates of a click event on the map. you can extend this functionality to respond to various user interactions, such as dragging, zooming, or even custom gestures.</p>\n<p><strong>useState for Managing State:</strong> Use the useState hook to manage state within the React component. This is particularly useful for dynamic changes to the map, such as updating the center or zoom level based on user interactions.</p>\n<pre><code class=\"javascript language-javascript\">const [mapCenter, setMapCenter] = useState([0, 0]);\n\n// Update the map's center based on user interaction\nconst handleMapInteraction = (event) =&gt; {\n  const newCenter = event.map.getView().getCenter();\n  setMapCenter(newCenter);\n};\n</code></pre>\n<h2 id=\"advancedopenlayersmapfeatures\">Advanced OpenLayers Map Features</h2>\n<p><strong>Adding Vector Layers and Working with GeoJSON Data</strong></p>\n<p>Vector layers in OpenLayers allow you to display and interact with vector data, opening up possibilities for intricate and detailed map representations. Leveraging GeoJSON, a popular format for encoding geographic data, is a common practice. Below is an example of incorporating a vector layer with GeoJSON data into a React component:</p>\n<pre><code class=\"javascript language-javascript\">// VectorLayerMap.js\nimport { useEffect, useRef } from \"react\"\nimport \"ol/ol.css\"\nimport Map from \"ol/Map\"\nimport View from \"ol/View\"\nimport TileLayer from \"ol/layer/Tile\"\nimport OSM from \"ol/source/OSM\"\nimport VectorLayer from \"ol/layer/Vector\"\nimport VectorSource from \"ol/source/Vector\"\nimport GeoJSON from \"ol/format/GeoJSON\"\nimport {getCenter} from 'ol/extent';\n\nconst VectorLayerMap = () =&gt; {\n  const mapRef = useRef()\n\n  // read geojson feature\n  const geoJSONFeatures = new GeoJSON().readFeatures(geojsonObject)\n\n  // create vector source\n  const vectorSource = new VectorSource({\n    features: geoJSONFeatures,\n  })\n\n  // create vector layer with source\n  const vectorLayer = new VectorLayer({\n    source: vectorSource,\n  })\n\n  // default view\n  const view = new View({\n    center: [0, 0],\n    zoom: 2,\n  })\n\n  useEffect(() =&gt; {\n    const map = new Map({\n      target: mapRef.current,\n      layers: [\n        new TileLayer({\n          source: new OSM(),\n        }),\n        vectorLayer,\n      ],\n      view: view\n    })\n\n    // fit view to geometry of geojson feature with padding\n    view.fit(geoJSONFeatures[0].getGeometry().getExtent(), { padding: [100, 100, 100, 100]});\n\n    return () =&gt; map.setTarget(undefined)\n  }, [])\n\n  return (\n    &lt;div\n      ref={mapRef}\n      style={{ position: \"relative\", width: \"100%\", height: \"400px\" }}\n    &gt;&lt;/div&gt;\n  )\n}\n\nexport default VectorLayerMap\n\nconst geojsonObject = {\n  type: \"Feature\",\n  geometry: {\n    type: \"MultiLineString\",\n    coordinates: [\n      [\n        [-1e6, -7.5e5],\n        [-1e6, 7.5e5],\n      ],\n      [\n        [1e6, -7.5e5],\n        [1e6, 7.5e5],\n      ],\n      [\n        [-7.5e5, -1e6],\n        [7.5e5, -1e6],\n      ],\n      [\n        [-7.5e5, 1e6],\n        [7.5e5, 1e6],\n      ],\n    ],\n  },\n}\n</code></pre>\n<p><VectorLayerMapGeojson /></p>\n<h2 id=\"optimizingreactandopenlayersintegrationstrategiesforrenderingperformance\">Optimizing React and OpenLayers Integration: Strategies for Rendering Performance</h2>\n<p><strong>1. Addressing Rendering Performance Concerns:</strong></p>\n<p>Efficient rendering is paramount in any web application, and integrating OpenLayers with React requires careful consideration of performance concerns. Here are some strategies to address rendering performance:</p>\n<ul>\n<li><p><strong>Debouncing and Throttling:</strong> When handling events that trigger frequent updates, such as map movements or zoom changes, implement debouncing or throttling techniques. This prevents excessive re-renders and ensures that updates are processed at a controlled rate.</p></li>\n<li><p><strong>Batched State Updates:</strong> Use React's <code>setState</code> batching mechanism to group multiple state updates into a single render cycle. This reduces the number of renders triggered by multiple state changes, resulting in a more efficient rendering process.</p></li>\n</ul>\n<p><strong>2. Implementing Lazy Loading for Map Components:</strong></p>\n<p>To enhance overall application performance, especially in scenarios where maps are not initially visible or are part of larger applications, consider implementing lazy loading for map components. This ensures that the OpenLayers library and associated map components are only loaded when needed.</p>\n<ul>\n<li><strong>Dynamic Imports:</strong> Use dynamic imports and React's <code>React.lazy</code> to load OpenLayers and map components lazily. This approach allows you to split your code into smaller chunks that are loaded on-demand, reducing the initial page load time.</li>\n</ul>\n<pre><code class=\"javascript language-javascript\">// Example using React.lazy\nconst LazyLoadedMap = React.lazy(() =&gt; import('./LazyLoadedMap'));\n\nconst App = () =&gt; (\n  &lt;div&gt;\n    {/* Other components */}\n    &lt;React.Suspense fallback={&lt;div&gt;Loading...&lt;/div&gt;}&gt;\n      &lt;LazyLoadedMap /&gt;\n    &lt;/React.Suspense&gt;\n  &lt;/div&gt;\n);\n</code></pre>\n<p><strong>3. Memoization Techniques Using React Hooks:</strong> </p>\n<p>Memoization is a powerful technique to optimize expensive calculations and prevent unnecessary renders. React provides hooks like <code>useMemo</code> and <code>useCallback</code> for effective memoization.</p>\n<p><strong>useMemo:</strong> Use <code>useMemo</code> to memoize the result of a computation and ensure that it is only recalculated when dependencies change. This is particularly useful when dealing with derived data or complex computations within your map components.</p>\n<pre><code class=\"javascript language-javascript\">const expensiveData = /* some expensive computation */;\n\nconst MyMapComponent = ({ center, zoom }) =&gt; {\n  const memoizedData = React.useMemo(() =&gt; expensiveData, [center, zoom]);\n\n  // Component logic using memoizedData...\n};\n</code></pre>\n<p><strong>useCallback:</strong> When passing functions as props to child components, use <code>useCallback</code> to memoize those functions. This ensures that the same function reference is maintained across renders unless its dependencies change.</p>\n<pre><code class=\"javascript language-javascript\">const MyMapComponent = ({ onMapClick }) =&gt; {\n  const handleClick = React.useCallback(() =&gt; {\n    // Handle map click...\n    onMapClick();\n  }, [onMapClick]);\n\n  // Component logic using handleClick...\n};\n</code></pre>\n<p>These practices contribute to a more responsive and optimized integration of OpenLayers within React applications, enhancing the overall user experience.</p>\n<p>For additional inspiration and examples, explore the <a href=\"https://openlayers.org/en/latest/apidoc/\" title=\"OpenLayers API Documentation\">OpenLayers API Documentation</a>. You can also find valuable examples specific to React and OpenLayers at <a href=\"https://codesandbox.io/examples/package/react-openlayers\">https://codesandbox.io/examples/package/react-openlayers</a>.</p>\n<p><strong>Resources:</strong></p>\n<ul>\n<li><a href=\"https://openlayers.org/doc/tutorials/\" title=\"OpenLayers - Tutorials\">OpenLayers - Tutorials</a></li>\n</ul>","date_published":"2024-02-22T14:18:16.469Z","date_modified":"2026-02-04T22:39:03.494Z","tags":["web-mapping","open-layers","react"],"image":"https://mxd.codes/content/posts/published/how-to-create-a-web-map-with-open-layers-and-react/cover.png","banner_image":"https://mxd.codes/content/posts/published/how-to-create-a-web-map-with-open-layers-and-react/cover.png","authors":[{"name":"Max Dietrich","url":"https://mxd.codes"}]},{"id":"https://mxd.codes/articles/geography-and-gis-blogs","url":"https://mxd.codes/articles/geography-and-gis-blogs","title":"Geography and GIS Blogs","summary":"Here you will find a list of interesting and informative geographic and gis blogs.","content_html":"<h2 id=\"gisandgeoblogs\">GIS and Geo Blogs</h2>\n<p>Of course, to find out new things, I take a look at one or the other website that deals with <a href=\"/articles/what-is-gis-geographic-information-system\" title=\"What is GIS?\">GIS</a> Or geoinformatics in general. You can find them here:</p>\n<ol>\n<li>GIS Lounge</li>\n</ol>\n<p>Maps and GIS by Caitlin Dempsey Morais. She has been blogging about GIS for more than 20 years.</p>\n<p><a href=\"https://www.gislounge.com/\">https://www.gislounge.com/</a></p>\n<ol>\n<li>GIS Geography</li>\n</ol>\n<p>Blog about GIS and Geographie.</p>\n<p><a href=\"https://gisgeography.com/\">www.gisgeography.com</a></p>\n<ol>\n<li>Free and Open Source GIS Ramblings</li>\n</ol>\n<p>Anita Graser's blog about QGIS, open source, analysis and simulation.</p>\n<p><a href=\"https://anitagraser.com/\">https://anitagraser.com/</a></p>\n<ol>\n<li>Geospatial World</li>\n</ol>\n<p>How does location localization affect us?</p>\n<p><a href=\"https://www.geospatialworld.net\">https://www.geospatialworld.net</a></p>\n<ol>\n<li>Geoawesomeness</li>\n</ol>\n<p>Blog about GIS, geodata and everything that goes with it.</p>\n<p><a href=\"https://geoawesomeness.com/\">www.geoawesomness.com</a></p>\n<ol>\n<li>GISTimes</li>\n</ol>\n<p>GIStimes is for everything that happens on the geodata market.</p>\n<p><a href=\"http://www.gistimes.com\">http://www.gistimes.com</a></p>\n<ol>\n<li>GIS Professional</li>\n</ol>\n<p>GIS news and articles about GNSS, Big Data, Addressing, BIM, and Smart Cities.</p>\n<p><a href=\"https://www.gis-professional.com/news\">https://www.gis-professional.com/news</a></p>\n<ol>\n<li>Geospatial-solutions</li>\n</ol>\n<p><a href=\"http://geospatial-solutions.com/\">http://geospatial-solutions.com/</a></p>\n<ol>\n<li>Google Maps Blog</li>\n</ol>\n<p>Google Maps blog.</p>\n<p><a href=\"https://www.blog.google/products/maps/\">https://www.blog.google/products/maps/</a></p>\n<ol>\n<li>Carto</li>\n</ol>\n<p>SaaS provider CartoDB also runs a very interesting GIS blog.</p>\n<p><a href=\"https://carto.com/\">https://carto.com/</a></p>\n<ol>\n<li>Reddit r/gis GIS-Community</li>\n</ol>\n<p>A Reddit community about geographic information systems.</p>\n<p><a href=\"https://www.reddit.com/r/gis/\">https://www.reddit.com/r/gis/</a></p>\n<ol>\n<li>Benjaminspaulding</li>\n</ol>\n<p>Geodata, analysis, programming.</p>\n<p><a href=\"https://www.benjaminspaulding.com/\">https://www.benjaminspaulding.com/</a></p>\n<ol>\n<li>GISuser</li>\n</ol>\n<p>GIS and technology news for mapping experts.</p>\n<p><a href=\"http://gisuser.com/\">http://gisuser.com/</a></p>\n<ol>\n<li>Esri Newsroom</li>\n</ol>\n<p>Esri's blog.</p>\n<p><a href=\"https://www.esri.com/about/newsroom/blog\">https://www.esri.com/about/newsroom/blog</a></p>\n<ol>\n<li>ThinkGeoBlog</li>\n</ol>\n<p>GIS themes for .NET developers.</p>\n<p><a href=\"http://blog.thinkgeo.com/\">http://blog.thinkgeo.com/</a></p>\n<p>There is also a much larger list of links to GIS Blogs on Wiki.GIS (http://wiki.gis.com/wiki/index.php/List<em>of</em>GIS-related_Blogs). By the way, Wiki.GIS is a very extensive GIS encyclopedia.</p>","date_published":"2024-02-22T12:05:03.422Z","date_modified":"2024-02-22T14:15:24.357Z","tags":["gis"],"image":"https://mxd.codes/content/posts/published/geography-and-gis-blogs/cover.png","banner_image":"https://mxd.codes/content/posts/published/geography-and-gis-blogs/cover.png","authors":[{"name":"Max Dietrich","url":"https://mxd.codes"}]},{"id":"https://mxd.codes/articles/docker-ci-cd-for-nextjs-with-github-actions","url":"https://mxd.codes/articles/docker-ci-cd-for-nextjs-with-github-actions","title":"Dockerizing a Next.js Application with GitHub Actions","summary":"In this article, we'll explore how to Dockerize a Next.js application and automate its deployment using GitHub Actions, thereby simplifying the deployment workflow and enhancing development productivity.","content_html":"<p>In this article, we'll explore how to Dockerize a Next.js application and automate its deployment using GitHub Actions, thereby simplifying the deployment workflow and enhancing development productivity.</p>\n<h2 id=\"prerequisites\">Prerequisites</h2>\n<p>Before we dive into Dockerizing our Next.js application and setting up GitHub Actions for deployment, ensure you have the following prerequisites:</p>\n<ol>\n<li>A Next.js project.</li>\n<li><a href=\"https://docs.docker.com/engine/install/\">Docker installed on your local machine</a>.</li>\n<li>A GitHub repository for your Next.js project.</li>\n</ol>\n<h2 id=\"settingupdocker\">Setting up Docker</h2>\n<p>Docker allows you to package your application and its dependencies into a container, ensuring consistency across different environments. Start by creating a <code>Dockerfile</code> in the root of your Next.js project:</p>\n<pre><code class=\"docker language-docker\">FROM node:18-alpine AS base\n\n# Install dependencies only when needed\nFROM base AS deps\n# Check https://github.com/nodejs/docker-node/tree/b4117f9333da4138b03a546ec926ef50a31506c3#nodealpine to understand why libc6-compat might be needed.\nRUN apk add --no-cache libc6-compat\nWORKDIR /app\n\n# Install dependencies based on the preferred package manager\nCOPY package.json yarn.lock* package-lock.json* pnpm-lock.yaml* ./\nRUN \\\n  if [ -f yarn.lock ]; then yarn --frozen-lockfile; \\\n  elif [ -f package-lock.json ]; then npm ci; \\\n  elif [ -f pnpm-lock.yaml ]; then corepack enable pnpm &amp;&amp; pnpm i --frozen-lockfile; \\\n  else echo \"Lockfile not found.\" &amp;&amp; exit 1; \\\n  fi\n\n\n# Rebuild the source code only when needed\nFROM base AS builder\nWORKDIR /app\nCOPY --from=deps /app/node_modules ./node_modules\nCOPY . .\n\n# Next.js collects completely anonymous telemetry data about general usage.\n# Learn more here: https://nextjs.org/telemetry\n# Uncomment the following line in case you want to disable telemetry during the build.\n# ENV NEXT_TELEMETRY_DISABLED 1\n\nRUN \\\n  if [ -f yarn.lock ]; then yarn run build; \\\n  elif [ -f package-lock.json ]; then npm run build; \\\n  elif [ -f pnpm-lock.yaml ]; then corepack enable pnpm &amp;&amp; pnpm run build; \\\n  else echo \"Lockfile not found.\" &amp;&amp; exit 1; \\\n  fi\n\n# Production image, copy all the files and run next\nFROM base AS runner\nWORKDIR /app\n\nENV NODE_ENV production\n# Uncomment the following line in case you want to disable telemetry during runtime.\n# ENV NEXT_TELEMETRY_DISABLED 1\n\nRUN addgroup --system --gid 1001 nodejs\nRUN adduser --system --uid 1001 nextjs\n\nCOPY --from=builder /app/public ./public\n\n# Set the correct permission for prerender cache\nRUN mkdir .next\nRUN chown nextjs:nodejs .next\n\n# Automatically leverage output traces to reduce image size\n# https://nextjs.org/docs/advanced-features/output-file-tracing\nCOPY --from=builder --chown=nextjs:nodejs /app/.next/standalone ./\nCOPY --from=builder --chown=nextjs:nodejs /app/.next/static ./.next/static\n\nUSER nextjs\n\nEXPOSE 3000\n\nENV PORT 3000\n# set hostname to localhost\nENV HOSTNAME \"0.0.0.0\"\n\n# server.js is created by next build from the standalone output\n# https://nextjs.org/docs/pages/api-reference/next-config-js/output\nCMD [\"node\", \"server.js\"]\n</code></pre>\n<p>This Dockerfile is the default Dockerfile <a href=\"https://github.com/vercel/next.js/blob/canary/examples/with-docker/Dockerfile\">provided by Vercel</a> to set up a Node.js environment, install dependencies, build the Next.js application, and exposing port 3000.</p>\n<p>You have to ensure you are using <code>output: \"standalone\"</code> in your <code>next.config.js</code>.</p>\n<pre><code class=\"javascript language-javascript\">const nextConfig = {\n  output: \"standalone\",\n}\n</code></pre>\n<p>The <code>standalone</code> mode in Next.js builds a self-contained application that includes all necessary files, libraries, and dependencies required to run the application. This contrasts with the default mode (\"experimental-serverless-trace\"), which generates smaller bundles but relies on additional runtime steps.</p>\n<p>Before proceeding further, it's crucial to test our Dockerized Next.js application locally to ensure everything functions as expected. Open a terminal in the project directory and execute the following commands:</p>\n<pre><code class=\"bash language-bash\"># Build the Docker image\ndocker build -t my-nextjs-app .\n\n# Run the Docker container\ndocker run -p 3000:3000 my-nextjs-app\n</code></pre>\n<p>Visit <code>http://localhost:3000</code> in your web browser to verify that your Next.js application is running within the Docker container.</p>\n<h2 id=\"settingupgithubactionsforcontinuousdeployment\">Setting up GitHub Actions for Continuous Deployment:</h2>\n<p>GitHub Actions automate the CI/CD pipeline directly from your GitHub repository.  Basically the pipeline looks like this:</p>\n<ul>\n<li><strong>Code Commit & Push</strong>:\nDeveloper writes code and pushes changes to a GitHub repository.\nThis triggers the GitHub Actions workflow, defined in .github/workflows/docker-ci.yml.</li>\n</ul>\n<pre><code class=\"yaml language-yaml\">name: Build and Deploy Next.js\n\non:\n  push:\n    branches:\n      - main # Triggers when code is pushed to the main branch\n</code></pre>\n<p>Once the workflow is triggered, the following steps occur:</p>\n<ul>\n<li><strong>Checkout Repository</strong>:\nPulls the latest code from GitHub.</li>\n</ul>\n<pre><code class=\"yaml language-yaml\">  jobs:\n  build:\n    runs-on: ubuntu-latest\n\n    steps:\n      - name: Checkout repository\n        uses: actions/checkout@v3\n</code></pre>\n<ul>\n<li><strong>Install Dependencies & Build Next.js</strong>:\nInstalls project dependencies and builds the Next.js app in standalone mode.</li>\n</ul>\n<pre><code class=\"yaml language-yaml\">      - name: Install dependencies\n        run: npm install\n\n      - name: Build Next.js app\n        run: npm run build\n</code></pre>\n<ul>\n<li><strong>Run Tests</strong> (optional but highly recommended):\nEnsures the application works before deployment.</li>\n</ul>\n<pre><code class=\"yaml language-yaml\">      - name: Run tests\n        run: npm run test\n</code></pre>\n<ul>\n<li><strong>Build and Tag Docker Image</strong>:\nCreates a Docker image with the Next.js app.</li>\n</ul>\n<pre><code class=\"yaml language-yaml\">      - name: Build Docker Image\n        run: docker build -t myapp:latest .\n</code></pre>\n<ul>\n<li><strong>Push Docker Image to Registry</strong>:\nAuthenticates and pushes the image to Docker Hub or GitHub Container Registry.</li>\n</ul>\n<pre><code class=\"yaml language-yaml\">        - name: Log in to Docker Hub\n        run: echo \"${{ secrets.DOCKER_PASSWORD }}\" | docker login -u \"${{ secrets.DOCKER_USERNAME }}\" --password-stdin\n\n      - name: Push\n</code></pre>\n<p>Putting it together: Create a <code>.github/workflows/pipeline.yml</code> file with the following content if you want to publish your docker images to <a href=\"https://hub.docker.com/\">Docker Hub</a> and <a href=\"https://ghcr.io\">GitHub</a>. If you just want to use one of them you have to remove the according login step and remove the according tags.</p>\n<pre><code class=\"yaml language-yaml\">name: Docker Build &amp; Publish\n\non:\n  push:\n    branches: [main]\n\njobs:\n  push_to_registries:\n    name: Push Docker image to multiple registries\n    runs-on: ubuntu-latest\n    permissions:\n      packages: write\n      contents: read\n      attestations: write\n      id-token: write\n\n    steps:\n      - name: Check out repository code 🛎️\n        uses: actions/checkout@v4\n\n      - name: Set up Docker Buildx 🚀\n        uses: docker/setup-buildx-action@v3\n\n      - name: Login to Docker Hub 🚢\n        uses: docker/login-action@v3\n        with:\n          username: ${{ secrets.DOCKER_HUB_USERNAME}}\n          password: ${{ secrets.DOCKER_HUB_ACCESS_TOKEN}}\n\n      - name: Log in to the Container registry\n        uses: docker/login-action@65b78e6e13532edd9afa3aa52ac7964289d1a9c1\n        with:\n          registry: ghcr.io\n          username: ${{ github.actor }}\n          password: ${{ secrets.GITHUB_TOKEN }}\n\n      - name: Build and push 🏗️\n        uses: docker/build-push-action@v2\n        with:\n          context: .\n          file: ./Dockerfile\n          push: true\n          tags: |\n            ${{ secrets.DOCKER_HUB_USERNAME}}/{docker_repository}:${{ github.sha }}\n            ${{ secrets.DOCKER_HUB_USERNAME}}/{docker_repository}:latest\n            ghcr.io/${{ github.repository }}:${{ github.sha }}\n            ghcr.io/${{ github.repository }}:latest\n</code></pre>\n<p>If you want to publish to Docker Hub you have to store secrets <code>${{ secrets.DOCKER_USERNAME }}</code> and <code>${{ secrets.DOCKER_PASSWORD }}</code> in your repository's under <code>settings</code> -&gt; <code>Secrets and variables</code> -&gt; <code>Actions</code> -&gt; <code>Repository secrets</code>.</p>\n<p>This workflow will build your container from your GitHub repositiory and push it to your Docker Container registry with two tags:</p>\n<ul>\n<li><code>:latest</code> and</li>\n<li><code>:{github.sha}</code></li>\n</ul>\n<h2 id=\"passingenvironmentvariablestotheworkflow\">Passing environment variables to the Workflow</h2>\n<p>In case you need some environment variables you have to adjust the <code>Dockerfile</code> with some additional parameters. To be able to use environment variables which are stored in your repository as secrets you will need to mount and export every environment variable like the following to your <code>npm run build</code> command.</p>\n<pre><code class=\"bash language-bash\">RUN --mount=type=secret,id=NEXT_PUBLIC_CMS_URL \\\n  export NEXT_PUBLIC_CMS_URL=$(cat /run/secrets/NEXT_PUBLIC_CMS_URL) &amp;&amp; \\\n  npm run build\n</code></pre>\n<p>You can have a look at the Dockerfile for my site for a example: <a href=\"https://github.com/dietrichmax/personal-site/blob/main/docker/Dockerfile\">personal website Dockerfile</a>.</p>\n<p>Also you will need to modify the step <code>Build and push</code> in the workflow like this:</p>\n<pre><code class=\"yaml language-yaml\">- name: Build and push 🏗️\n  uses: docker/build-push-action@v2\n  with:\n      context: .\n      file: ./Dockerfile\n      push: true\n      tags: |\n        ${{ secrets.DOCKER_HUB_USERNAME}}/personal-website:${{ github.sha }}\n        ${{ secrets.DOCKER_HUB_USERNAME}}/personal-website:latest\n      secrets: |\n        \"NEXT_PUBLIC_STRAPI_API_URL=${{ secrets.NEXT_PUBLIC_CMS_URL }}\"\n</code></pre>\n<h2 id=\"conclusion\">Conclusion</h2>\n<p>With this setup, every push to the main branch of your GitHub repository triggers the CI/CD pipeline. Continuous Integration and Continuous Deployment for Dockerized Next.js applications provide a streamlined and efficient development process, ensuring that your application is always in a deployable state. By combining GitHub Actions with Docker, you can automate the deployment process and focus on building and improving your Next.js application.</p>","date_published":"2024-02-06T20:00:01.998Z","date_modified":"2025-04-16T09:44:56.069Z","tags":["docker","ci-cd","next-js","react"],"image":"https://mxd.codes/content/posts/published/docker-ci-cd-for-nextjs-with-github-actions/cover.png","banner_image":"https://mxd.codes/content/posts/published/docker-ci-cd-for-nextjs-with-github-actions/cover.png","authors":[{"name":"Max Dietrich","url":"https://mxd.codes"}]},{"id":"https://mxd.codes/articles/setting-up-map-proxy-with-docker-and-serving-cached-tiles-via-nginx","url":"https://mxd.codes/articles/setting-up-map-proxy-with-docker-and-serving-cached-tiles-via-nginx","title":" Setting Up MapProxy with Docker and Serving Cached Tiles via Nginx","summary":"MapProxy is a powerful open-source proxy for geospatial data that allows for efficient caching and serving of map tiles. Combining MapProxy with Docker and Nginx can provide a scalable and easily manageable solution for serving cached map tiles.","content_html":"<p><a href=\"https://mapproxy.org/\" title=\"MapProxy\">MapProxy</a> is a powerful open-source proxy for geospatial data that allows for efficient caching and serving of map tiles. Combining MapProxy with Docker and Nginx can provide a scalable and easily manageable solution for serving cached map tiles. This guide will walk you through the process of setting up MapProxy using Docker and configuring Nginx to serve cached tiles.</p>\n<p><strong>Prerequisites:</strong></p>\n<ol>\n<li>Docker installed on your system</li>\n<li>Basic understanding of Docker</li>\n<li>Basic understanding of Nginx</li>\n</ol>\n<p>If you don't meet this prerequisites yet I recommend to have a look at the following guides first:</p>\n<ul>\n<li><a href=\"https://nginx.org/en/docs/beginners_guide.html\" title=\"Nginx Beginner’s Guide\">Nginx Beginner’s Guide</a></li>\n<li><a href=\"https://docs.docker.com/get-started/overview/\" title=\"Docker overview\">Docker overview</a></li>\n<li><a href=\"https://docs.docker.com/engine/install/\" title=\"Install Docker Engine\">Install Docker Engine</a></li>\n</ul>\n<h2 id=\"setupmapproxywithdocker\">Set Up MapProxy with Docker</h2>\n<p>Start by creating a Network in Docker with:</p>\n<pre><code class=\"bash language-bash\">sudo docker create network nginx\n</code></pre>\n<p>By adding the network nginx to the Nginx Container and the Mapproxy container the containers can communicate with each other without exposing ports on the server.</p>\n<p>Create a Docker Compose file <code>docker-compose.yml</code> with the following content:</p>\n<pre><code class=\"docker language-docker\">networks:\n  default:\n    external: true\n    name: nginx\n\nservices:\n  mapproxy:\n    image: kartoza/mapproxy\n    container_name: mapproxy\n    restart: always\n    environment:\n      PRODUCTION: true\n      PROCESSES: 4\n      CHEAPER: 2\n      THREADS: 8\n      MULTI_MAPPROXY: true\n      MULTI_MAPPROXY_DATA_DIR: /multi_mapproxy/configurations\n      ALLOW_LISTING: true\n    volumes:\n      - /data/containers/mapproxy/data:/multi_mapproxy\n</code></pre>\n<p>Save the file and run:</p>\n<pre><code class=\"bash language-bash\">docker-compose up -d\n</code></pre>\n<p>This will pull the MapProxy Docker image and start a container. MapProxy will be accessible on the container with <code>http://localhost:8080</code>.</p>\n<h2 id=\"setupnginxwithdocker\">Set Up Nginx with Docker</h2>\n<p>Afterwards you need to create a Docker Compose file <code>docker-compose.yml</code> for Nginx. Here's a example:</p>\n<pre><code class=\"docker language-docker\">version: '3'\n\nnetworks:\n  default:\n    external: true\n    name: nginx\n\nservices:\n  nginx:\n    image: nginx:latest\n    container_name: nginx\n    restart: always\n    ports:\n      - \"80:80\"\n      - \"443:443\"\n    volumes:\n      ## Config\n      - /data/containers/nginx/config/:/etc/nginx/\n      ## SSL\n      - /etc/letsencrypt/:/etc/letsencrypt/\n      - /etc/ssl/:/etc/ssl/\n      ## Logs\n      - /data/containers/nginx/logs/:/var/log/nginx\n      ## Cache\n      - /data/containers/nginx/cache:/var/cache/nginx\n</code></pre>\n<p>Then you can create a virtual host for mapproxy under <code>/data/containers/nginx/config/sites-available/mapproxy</code> with:</p>\n<pre><code class=\"bash language-bash\">sudo nano /data/containers/nginx/config/sites-available/mapproxy\n</code></pre>\n<p>Copy and paste the following virtual host configuration for your Mapproxy Container :</p>\n<pre><code class=\"nginx language-nginx\">upstream mapproxy_upstream {\n  server mapproxy:8080;\n}\n\nserver {\n\n  server_name mapproxy.domain.com;\n\n  listen 80;\n\n  ## Mapproxy default\n  location / {\n    proxy_pass http://mapproxy_upstream/;\n    proxy_set_header Host $http_host;\n  }\n}\n</code></pre>\n<p>After you created your configuration you need to create a symlink to <code>/data/containers/nginx/config/sites-enabled/</code> with:</p>\n<pre><code class=\"bash language-bash\">sudo ln -S /data/containers/nginx/config/sites-available/mapproxy /data/containers/nginx/config/sites-enabled/\n</code></pre>\n<p>In order that your domain gets resolved you have to create a A-record for your Domain under which you want to publish MapProxy which points to your server ip.\nThen you need to restart your Nginx Container and now should be able to access http://mapproxy.domain.com where you will be greeted by your MapProxy Instance.</p>\n<p><img src=\"Screenshot_2024_01_25_154515_63e86fb113_aed92b8f04.png\" alt=\"Screenshot_2024_01_25_154515_63e86fb113.png\" /></p>\n<h2 id=\"step3cachingthetileswithmapproxy\">Step 3: Caching the Tiles with MapProxy</h2>\n<p>So far you have set up Nginx and MapProxy with Docker and MapProxy will cache by default all served tiles with the default configuration.\nHowever there are some limitations to the MapProxy caching process because each time a tile gets requested from MapProxy, MapProxy will save the tile to it's cache. But it won't check by default if the tile is old and a newer tile could be served.</p>\n<p>E.g. I am serving tiles from MapProxy which visualize my locations where I have ever been to. So I don't want to cache the tiles infinite because they change probably every day</p>\n<p>But you can force MapProxy to refresh tiles from the source while serving if they are found to be expired.\nThe validity conditions are the same as for seeding:</p>\n<pre><code class=\"yaml language-yaml\">#Explanation\n  # absolute as ISO time\n  refresh_before:\n    time: 2010-10-21T12:35:00\n  # relative from the time of the tile request\n  refresh_before:\n    weeks: 1\n    days: 7\n    hours: 4\n    minutes: 15\n  # modification time of a given file\n  refresh_before:\n    mtime: path/to/file\n</code></pre>\n<p>So to stay at my example i added:</p>\n<pre><code class=\"yaml language-yaml\">refresh_before:\n      days 1\n</code></pre>\n<p>This way MapProxy will refresh tiles everyday. This of course only makes sense for data where you want always latest data</p>\n<p>So edit your <code>mapproxy.yaml</code> like this:</p>\n<pre><code class=\"yaml language-yaml\">services:\n  demo:\n  tms:\n    use_grid_names: true\n    # origin for /tiles service\n    origin: 'nw'\n  kml:\n      use_grid_names: true\n  wmts:\n  wms:\n    md:\n      title: MapProxy WMS Proxy\n      abstract: This is a minimal MapProxy example.\n\nlayers:\n  - name: osm\n    title: Omniscale OSM WMS - osm.omniscale.net\n    sources: [osm_cache]\n\ncaches:\n  osm_cache\n    grids: [webmercator]\n    sources: [osm_wms]\n    refresh_before:\n      days: 1\n\nsources:\n  osm_wms:\n    type: wms\n    req:\n      url: https://maps.omniscale.net/v2/demo/style.default/service?\n      layers: osm\n\ngrids:\n    webmercator:\n        base: GLOBAL_WEBMERCATOR\n\nglobals:\n</code></pre>\n<p>Save the file and restart your MapProxy Container.</p>\n<p>Now MapProxy will always refresh tiles everyday.</p>\n<h2 id=\"step4accessthemapproxytiles\">Step 4: Access the MapProxy Tiles</h2>\n<p>Visit <code>http://mapproxy.domain.com</code> in your browser, and you should see MapProxy serving tiles through Nginx. </p>\n<p>By following these steps, you've successfully set up MapProxy with Docker and configured Nginx to serve cached map tiles. This scalable solution allows for efficient geospatial data delivery with the added benefit of easy container management. Adjust the configurations based on your specific requirements and integrate this setup into your mapping projects.</p>\n<p>If you decide to to take use of <a href=\"https://mapproxy.org/docs/nightly/deployment.html\" title=\"MultiMapProxy\">MultiMapProxy</a>(scroll down to MultiMapProxy) you can just create more configuration files for MapProxy in <code>/data/containers/mapproxy/data/configurations</code> and  append the cache path and location blocks like in your existing Nginx configuration for MapProxy.</p>","date_published":"2024-01-28T19:30:03.661Z","date_modified":"2025-02-01T16:43:23.670Z","tags":["docker","web-mapping","selfhosted","d-1"],"image":"https://mxd.codes/content/posts/published/setting-up-map-proxy-with-docker-and-serving-cached-tiles-via-nginx/cover.png","banner_image":"https://mxd.codes/content/posts/published/setting-up-map-proxy-with-docker-and-serving-cached-tiles-via-nginx/cover.png","authors":[{"name":"Max Dietrich","url":"https://mxd.codes"}]},{"id":"https://mxd.codes/photos/gran-canaria-workation","url":"https://mxd.codes/photos/gran-canaria-workation","title":"Gran Canaria Workation","content_html":"<p>🏖️💻</p>","date_published":"2024-01-25T09:47:34.071Z","image":"https://mxd.codes/content/photos/gran-canaria-workation/photo-1.jpg","attachments":[{"url":"https://mxd.codes/content/photos/gran-canaria-workation/photo-1.jpg","mime_type":"image/jpeg","title":"cover_PXL_20231230_180051640_8d02a6095e.jpg"},{"url":"https://mxd.codes/content/photos/gran-canaria-workation/photo-2.jpg","mime_type":"image/jpeg","title":"cover_PXL_20240107_112559115_e2495a1030.jpg"},{"url":"https://mxd.codes/content/photos/gran-canaria-workation/photo-3.jpg","mime_type":"image/jpeg","title":"cover_PXL_20240107_113638116_43cd01625a.jpg"},{"url":"https://mxd.codes/content/photos/gran-canaria-workation/photo-4.jpg","mime_type":"image/jpeg","title":"cover_PXL_20240107_114045885_PORTRAIT_ec64fb3806.jpg"},{"url":"https://mxd.codes/content/photos/gran-canaria-workation/photo-5.jpg","mime_type":"image/jpeg","title":"cover_PXL_20240107_115500999_bebaf4443d.jpg"},{"url":"https://mxd.codes/content/photos/gran-canaria-workation/photo-6.jpg","mime_type":"image/jpeg","title":"cover_PXL_20240107_120149906_9dee5cf19c.jpg"},{"url":"https://mxd.codes/content/photos/gran-canaria-workation/photo-7.jpg","mime_type":"image/jpeg","title":"cover_PXL_20231230_181821247_423dcc90a2.jpg"},{"url":"https://mxd.codes/content/photos/gran-canaria-workation/photo-8.jpg","mime_type":"image/jpeg","title":"cover_PXL_20240103_171155620_1bbf70aa8a.jpg"},{"url":"https://mxd.codes/content/photos/gran-canaria-workation/photo-9.jpg","mime_type":"image/jpeg","title":"cover_PXL_20231229_181431459_f69af010ab.jpg"}],"authors":[{"name":"Max Dietrich","url":"https://mxd.codes"}]},{"id":"https://mxd.codes/articles/optimizing-images-for-next-js-sites-with-imgproxy-and-docker","url":"https://mxd.codes/articles/optimizing-images-for-next-js-sites-with-imgproxy-and-docker","title":"Optimizing images for Next.js sites with imgproxy and docker","summary":"How to transform and optimize images with imgproxy hosted with docker for your Next.js application.","content_html":"<p><a href=\"https://nextjs.org/\" title=\"Next.js\">Next.js</a> Image Component <a href=\"https://nextjs.org/docs/pages/api-reference/components/image\" title=\"next-image\">next-image</a> is a feature introduced in Next.js version 10.0.0 to optimize images and improve the performance of your web-application.</p>\n<p>When you use the Next.js Image Component, it automatically optimizes and serves images in modern image formats that improves the performance of your web application. It supports various image sources, such as local images, images from the web, and third-party sources.</p>\n<p>However you cannot transform image, e.g. crop images, which is the reason I was looking for a solution which enables my personal website <a href=\"https://mxd.codes\" title=\"mxd.codes\">mxd.codes</a> to resize images to my needs.</p>\n<h2 id=\"imgproxy\">imgproxy</h2>\n<p><a href=\"https://imgproxy.net/\" title=\"imgproxy\">imgproxy</a> is an open-source image processing server designed to simplify the resizing, cropping, and manipulation of images on the fly. It is often used as part of a web application's infrastructure to ensure efficient delivery of images with optimized sizes and quality. </p>\n<p>Key features of imgproxy include:</p>\n<ol>\n<li><p><strong>On-the-Fly Image Processing:</strong> Imgproxy allows you to resize, crop, rotate, and perform other image manipulations on the fly, based on the URL parameters. This enables efficient delivery of images in various sizes and formats without having to store multiple versions of the same image.</p></li>\n<li><p><strong>Security:</strong> Imgproxy provides security features such as URL signature generation. This helps prevent unauthorized access and abuse of the image manipulation service.</p></li>\n<li><p><strong>Performance:</strong> Imgproxy is designed to be performant and can efficiently handle high loads of image processing requests.</p></li>\n<li><p><strong>Integration with Existing Storage:</strong> Imgproxy can be integrated with various storage solutions, including Amazon S3, Google Cloud Storage, and more.</p></li>\n</ol>\n<h2 id=\"deployimgproxywithdockercompose\">Deploy imgproxy with Docker Compose</h2>\n<p>While searching for a way to deploy imgproxy with docker I found a <a href=\"https://github.com/shinsenter/docker-imgproxy/blob/main/docker-compose.yml\" title=\"imgproxy docker compose\">imgproxy Docker Compose Project on GitHub</a> where I changed minor things like the volumes and the web-server configuration.</p>\n<p>You can copy this <code>docker-compose.yml</code>file and paste it into Portainer or save it manually in a folder on your server.</p>\n<pre><code class=\"docker language-docker\">version: '3'\n\n################################################################################\n# Ultra Image Server\n# A production grade image processing server setup powered by imgproxy and nginx\n#\n# Author: Mai Nhut Tan &lt;shin@shin.company&gt;\n# Copyright: 2021-2023 SHIN Company https://code.shin.company/\n# URL: https://shinsenter.github.io/docker-imgproxy/\n################################################################################\n\nnetworks:\n################################################################################\n  default:\n    driver: bridge\n\n\nservices:\n################################################################################\n  web:\n    image: nginx:alpine\n    container_name: imgproxy-nginx\n    restart: always\n    volumes:\n      - /data/containers/imgproxy:/var/www/html:ro\n      - /etc/imgproxy/imgproxy-nginx.conf:/etc/nginx/conf.d/default.conf:ro\n    ports:\n      - 8080:80\n    links:\n      - imgproxy:imgproxy\n    environment:\n      NGINX_ENTRYPOINT_QUIET_LOGS: 1\n\n################################################################################\n  imgproxy:\n    restart: unless-stopped\n    image: darthsim/imgproxy:${IMGPROXY_TAG:-latest}\n    container_name: imgproxy_app\n    security_opt:\n      - no-new-privileges:true\n    volumes:\n      - /data/containers/imgproxy:/var/www/html:ro\n    expose:\n      - 8080\n    healthcheck:\n      test: [\"CMD\", \"imgproxy\", \"health\"]\n    environment:\n      ### See:\n      ### https://docs.imgproxy.net/configuration/options\n\n      ### log and debug\n      IMGPROXY_LOG_LEVEL: \"warn\"\n      IMGPROXY_ENABLE_DEBUG_HEADERS: \"false\"\n      IMGPROXY_DEVELOPMENT_ERRORS_MODE: \"false\"\n      IMGPROXY_REPORT_DOWNLOADING_ERRORS: \"false\"\n\n      ### timeouts\n      IMGPROXY_READ_TIMEOUT: 10\n      IMGPROXY_WRITE_TIMEOUT: 10\n      IMGPROXY_DOWNLOAD_TIMEOUT: 10\n      IMGPROXY_KEEP_ALIVE_TIMEOUT: 300\n      IMGPROXY_MAX_SRC_FILE_SIZE: 33554432 # 32MB\n      IMGPROXY_MAX_SRC_RESOLUTION: 48\n\n      ### image source\n      IMGPROXY_TTL: 2592000 # client-side cache time is 30 days\n      IMGPROXY_USE_ETAG: \"false\"\n      IMGPROXY_SO_REUSEPORT: \"true\"\n      IMGPROXY_IGNORE_SSL_VERIFICATION: \"true\"\n      IMGPROXY_LOCAL_FILESYSTEM_ROOT: /home\n      IMGPROXY_SKIP_PROCESSING_FORMATS: \"svg,webp,avif\"\n\n      ### presets\n      IMGPROXY_AUTO_ROTATE: \"true\"\n      #IMGPROXY_WATERMARK_PATH: /home/noimage_thumb.jpg\n      IMGPROXY_PRESETS: default=resizing_type:fit/gravity:sm,logo=watermark:0.5:soea:10:10:0.15,center_logo=watermark:0.3:ce:0:0:0.3\n\n      ### compression\n      IMGPROXY_STRIP_METADATA: \"true\"\n      IMGPROXY_STRIP_COLOR_PROFILE: \"true\"\n      IMGPROXY_FORMAT_QUALITY: jpeg=80,webp=70,avif=50\n      IMGPROXY_JPEG_PROGRESSIVE: \"false\"\n      IMGPROXY_PNG_INTERLACED: \"false\"\n      IMGPROXY_PNG_QUANTIZATION_COLORS: 128\n      IMGPROXY_PNG_QUANTIZE: \"false\"\n      IMGPROXY_MAX_ANIMATION_FRAMES: 64\n      IMGPROXY_GZIP_COMPRESSION: 0\n      IMGPROXY_AVIF_SPEED: 8\n\n      ### For URL signature\n      IMGPROXY_KEY: IMGPROXY_KEY_KEY\n      IMGPROXY_SALT: IMGPROXY_KEY_SALT\n      IMGPROXY_SIGNATURE_SIZE: 32\n    network_mode: \"host\"  \n</code></pre>\n<p>You will also need a nginx-configuration file for imgproxy which should be saved to <code>/etc/imgproxy/imgproxy-nginx.conf</code>. Of course you can also store the file anywhere else but be sure to change the volume in the docker-compose.yml.</p>\n<pre><code class=\"nginx language-nginx\">upstream upstream_imgproxy  {\n    server    imgproxy:8080;\n    keepalive 16;\n}\n\nserver {\n        server_name _;\n\n        location / {\n                proxy_pass http://upstream_imgproxy;\n                proxy_http_version 1.1;\n                proxy_set_header Upgrade $http_upgrade;\n                proxy_set_header Connection 'upgrade';\n                proxy_set_header Host $host;\n        }\n\n}\n</code></pre>\n<p>Now you can  deploy the stack with</p>\n<pre><code class=\"bash language-bash\">docker-compose up -d --build --remove-orphans --force-recreate\n</code></pre>\n<p>or on Portainer. </p>\n<p>Your imgproxy instance should be now running on http://localhost:8080 which you already can use.</p>\n<p><img src=\"/uploads/Screenshot_2024_01_12_113947_ed6e757944.png\" alt=\"Screenshot 2024-01-12 113947.png\" /></p>\n<p>But I wanted to integrate it within my personal site built with Next.js so I also had to modify the nginx-configuration for my personal site.\nSo i used the existing configuration <a href=\"https://gist.github.com/hlubek/02955a3f28db168417884b5397ce07c0\">Nginx reverse proxy with caching for Next.js with imgproxy</a> and copied it to /etc/nginx/sites-available/default.</p>\n<pre><code class=\"nginx language-nginx\"># Based on https://steveholgado.com/nginx-for-nextjs/\n\n# - /var/cache/nginx sets a directory to store the cached assets\n# - levels=1:2 sets up a two‑level directory hierarchy as file access speed can be reduced when too many files are in a single directory\n# - keys_zone=STATIC:10m defines a shared memory zone for cache keys named “STATIC” and with a size limit of 10MB (which should be more than enough unless you have thousands of files)\n# - inactive=7d is the time that items will remain cached without being accessed (7 days), after which they will be removed\n# - use_temp_path=off tells NGINX to write files directly to the cache directory and avoid unnecessary copying of data to a temporary storage area first\nproxy_cache_path /var/cache/nginx levels=1:2 keys_zone=STATIC:10m inactive=7d use_temp_path=off;\n\nupstream nextjs_upstream {\n  server localhost:3000;\n}\n\nupstream imgproxy_upstream {\n  server localhost:8080;\n}\n\nserver {\n  listen 80 default_server;\n\n  server_name _;\n\n  server_tokens off;\n\n  gzip on;\n  gzip_proxied any;\n  gzip_comp_level 4;\n  gzip_types text/css application/javascript image/svg+xml;\n\n  proxy_http_version 1.1;\n  proxy_set_header Upgrade $http_upgrade;\n  proxy_set_header Connection 'upgrade';\n  proxy_set_header Host $host;\n  proxy_cache_bypass $http_upgrade;\n\n  # Imgproxy paths can contain multiple slashes (e.g. local:///image/file.jpg)\n  merge_slashes off;\n\n  location /img/ {\n\n    proxy_cache STATIC;\n\n    proxy_pass http://imgproxy_upstream/;\n\n    # For testing cache - remove before deploying to production\n    add_header X-Cache-Status $upstream_cache_status;\n  }\n\n  location /_next/static {\n    proxy_cache STATIC;\n    proxy_pass http://nextjs_upstream;\n\n    # For testing cache - remove before deploying to production\n    add_header X-Cache-Status $upstream_cache_status;\n  }\n\n  location /static {\n    proxy_cache STATIC;\n\n    # Ignore cache control for Next.js assets from /static, re-validate after 60m\n    proxy_ignore_headers Cache-Control;\n    proxy_cache_valid 60m;\n\n    proxy_pass http://nextjs_upstream;\n\n    # For testing cache - remove before deploying to production\n    add_header X-Cache-Status $upstream_cache_status;\n  }\n\n  location / {\n    proxy_pass http://nextjs_upstream;\n  }\n}\n</code></pre>\n<p>With this configuration all requests with the path <code>/img/</code> will be redirected to the imgproxy instance and all other paths to my personal-website.</p>\n<p>You can test the configuration with <code>sudo nginx -t</code> and restart nginx when the test is successfull with <code>sudo systemctl restart nginx</code>.</p>\n<p>Now when you access <a href=\"https://mxd.codes/img/\" title=\"imgproxy instance link\">https://mxd.codes/img/</a> you will be redirected to the imgroxy instance and when you access <a href=\"https://mxd.codes\" title=\"personal website link\">https://mxd.codes</a> you will be redirected to my personal website.</p>\n<p>The last missing piece is a custom image loader for the Next.js site.</p>\n<h2 id=\"customimageloaderforimgproxy\">Custom image loader for imgproxy</h2>\n<p>You can configure a custom <code>loaderFile</code> in your <code>next.config.js</code> like the following:</p>\n<pre><code class=\"javascript language-javascript\">images: {\n        loader: \"custom\",\n        loaderFile: \"./src/utils/loader.js\",\n}\n</code></pre>\n<p>This must point to a file relative to the root of your Next.js application. The file must export a default function that returns a string:</p>\n<pre><code class=\"javascript language-javascript\">export default function imgproxyLoader({ src, width, height, quality }) {\n\n  const path =\n    `/size:${width ? width : 0}:${height ? height : 0}` +\n    `/resizing_type:fill` +\n    (quality ? `/quality:${quality}` : \"\") +\n    `/sharpen:0.5` +\n    `/plain/${src}` +\n    `@webp`\n\n  const host = process.env.NEXT_PUBLIC_IMGPROXY_URL\n\n  const imgUrl = `${host}/insecure${path}`\n\n  return imgUrl\n}\n</code></pre>\n<p>Now all images you serve with <code>next/image</code> will use your custom loader which will be using imgproxy to transform and optimize your images for your Next.js site.</p>\n<p>Recently I also started to deploy my personal site with docker so the whole docke-compose.yml now looks like the following, while the nginx configuration file remains the same:</p>\n<pre><code class=\"yaml language-yaml\">version: \"3\"\n\nservices:\n  nextjs:\n    image: mxdcodes/personal-website:latest\n    container_name: personal-website\n    restart: always\n    ports:\n      - \"3000:3000\"\n    environment:\n      NODE_ENV: production\n    network_mode: \"host\"  \n\n  imgproxy:\n    restart: unless-stopped\n    image: darthsim/imgproxy:${IMGPROXY_TAG:-latest}\n    container_name: imgproxy_app\n    security_opt:\n      - no-new-privileges:true\n    volumes:\n      - /data/containers/imgproxy/www:/home:cached\n    ports:\n      - \"8080:8080\"\n    healthcheck:\n      test: [\"CMD\", \"imgproxy\", \"health\"]\n    environment:\n      ### See:\n      ### https://docs.imgproxy.net/configuration/options\n\n      ### options\n      IMGPROXY_ALLOWED_SOURCES: https://mxd.codes/\n\n      ### log and debug\n      IMGPROXY_LOG_LEVEL: \"warn\"\n      IMGPROXY_ENABLE_DEBUG_HEADERS: \"false\"\n      IMGPROXY_DEVELOPMENT_ERRORS_MODE: \"false\"\n      IMGPROXY_REPORT_DOWNLOADING_ERRORS: \"false\"\n\n      ### timeouts\n      IMGPROXY_READ_TIMEOUT: 10\n      IMGPROXY_WRITE_TIMEOUT: 10\n      IMGPROXY_DOWNLOAD_TIMEOUT: 10\n      IMGPROXY_KEEP_ALIVE_TIMEOUT: 300\n      IMGPROXY_MAX_SRC_FILE_SIZE: 33554432 # 32MB\n      IMGPROXY_MAX_SRC_RESOLUTION: 48\n\n      ### image source\n      IMGPROXY_TTL: 2592000 # client-side cache time is 30 days\n      IMGPROXY_USE_ETAG: \"false\"\n      IMGPROXY_SO_REUSEPORT: \"true\"\n      IMGPROXY_IGNORE_SSL_VERIFICATION: \"false\"\n      IMGPROXY_LOCAL_FILESYSTEM_ROOT: /home\n      IMGPROXY_SKIP_PROCESSING_FORMATS: \"svg,webp,avif\"\n\n      ### presets\n      IMGPROXY_AUTO_ROTATE: \"true\"\n      #IMGPROXY_WATERMARK_PATH: /home/noimage_thumb.jpg\n      IMGPROXY_PRESETS: default=resizing_type:fit/gravity:sm,logo=watermark:0.5:soea:10:10:0.15,center_logo=watermark:0.3:ce:0:0:0.3\n\n      ### compression\n      IMGPROXY_STRIP_METADATA: \"true\"\n      IMGPROXY_STRIP_COLOR_PROFILE: \"true\"\n      IMGPROXY_FORMAT_QUALITY: jpeg=80,webp=70,avif=50\n      IMGPROXY_JPEG_PROGRESSIVE: \"false\"\n      IMGPROXY_PNG_INTERLACED: \"false\"\n      IMGPROXY_PNG_QUANTIZATION_COLORS: 128\n      IMGPROXY_PNG_QUANTIZE: \"false\"\n      IMGPROXY_MAX_ANIMATION_FRAMES: 64\n      IMGPROXY_GZIP_COMPRESSION: 0\n      IMGPROXY_AVIF_SPEED: 8\n\n      ### For URL signature\n      IMGPROXY_KEY: KEY\n      IMGPROXY_SALT: SALT\n      IMGPROXY_SIGNATURE_SIZE: 32\n    network_mode: \"host\"  \n</code></pre>","date_published":"2024-01-12T12:14:29.108Z","date_modified":"2025-02-01T16:43:43.228Z","tags":["docker","next-js","cloud","selfhosted","react"],"image":"https://mxd.codes/content/posts/published/optimizing-images-for-next-js-sites-with-imgproxy-and-docker/cover.png","banner_image":"https://mxd.codes/content/posts/published/optimizing-images-for-next-js-sites-with-imgproxy-and-docker/cover.png","authors":[{"name":"Max Dietrich","url":"https://mxd.codes"}]},{"id":"https://mxd.codes/photos/usa-roadtrip","url":"https://mxd.codes/photos/usa-roadtrip","title":"USA Roadtrip","content_html":"","date_published":"2023-07-23T11:12:31.971Z","image":"https://mxd.codes/content/photos/usa-roadtrip/photo-1.jpg","attachments":[{"url":"https://mxd.codes/content/photos/usa-roadtrip/photo-1.jpg","mime_type":"image/jpeg","title":"cover_PXL_20230701_031551845_b167e3d5e0.jpg"},{"url":"https://mxd.codes/content/photos/usa-roadtrip/photo-2.jpg","mime_type":"image/jpeg","title":"cover_PXL_20230623_122024152_23e98fa803.jpg"},{"url":"https://mxd.codes/content/photos/usa-roadtrip/photo-3.jpg","mime_type":"image/jpeg","title":"cover_PXL_20230705_204610196_09aeb4abac.jpg"},{"url":"https://mxd.codes/content/photos/usa-roadtrip/photo-4.jpg","mime_type":"image/jpeg","title":"cover_PXL_20230626_222900844_6324406675.jpg"},{"url":"https://mxd.codes/content/photos/usa-roadtrip/photo-5.jpg","mime_type":"image/jpeg","title":"cover_PXL_20230625_164112783_abc47ccdf8.jpg"},{"url":"https://mxd.codes/content/photos/usa-roadtrip/photo-6.jpg","mime_type":"image/jpeg","title":"cover_PXL_20230627_185234307_bb6e85914f.jpg"},{"url":"https://mxd.codes/content/photos/usa-roadtrip/photo-7.jpg","mime_type":"image/jpeg","title":"cover_PXL_20230629_040505247_227be9aa9d.jpg"},{"url":"https://mxd.codes/content/photos/usa-roadtrip/photo-8.jpg","mime_type":"image/jpeg","title":"cover_PXL_20230701_011804772_cb6ff5bd09.jpg"},{"url":"https://mxd.codes/content/photos/usa-roadtrip/photo-9.jpg","mime_type":"image/jpeg","title":"cover_PXL_20230629_231727178_565d95855b.jpg"},{"url":"https://mxd.codes/content/photos/usa-roadtrip/photo-10.jpg","mime_type":"image/jpeg","title":"cover_PXL_20230702_004836254_13d2b71c79.jpg"},{"url":"https://mxd.codes/content/photos/usa-roadtrip/photo-11.jpg","mime_type":"image/jpeg","title":"cover_PXL_20230702_183556611_acbd3882af.jpg"},{"url":"https://mxd.codes/content/photos/usa-roadtrip/photo-12.jpg","mime_type":"image/jpeg","title":"cover_PXL_20230619_140058494_b8fbb695cc.jpg"},{"url":"https://mxd.codes/content/photos/usa-roadtrip/photo-13.jpg","mime_type":"image/jpeg","title":"cover_PXL_20230619_002545764_82f034c7cb.jpg"},{"url":"https://mxd.codes/content/photos/usa-roadtrip/photo-14.jpg","mime_type":"image/jpeg","title":"cover_PXL_20230625_151604653_502f42decb.jpg"},{"url":"https://mxd.codes/content/photos/usa-roadtrip/photo-15.jpg","mime_type":"image/jpeg","title":"cover_PXL_20230625_151646409_25b9aebec4.jpg"},{"url":"https://mxd.codes/content/photos/usa-roadtrip/photo-16.jpg","mime_type":"image/jpeg","title":"cover_PXL_20230621_010200163_88c3eeb801.jpg"},{"url":"https://mxd.codes/content/photos/usa-roadtrip/photo-17.jpg","mime_type":"image/jpeg","title":"cover_PXL_20230702_200434150_89f0ce71cc.jpg"},{"url":"https://mxd.codes/content/photos/usa-roadtrip/photo-18.jpg","mime_type":"image/jpeg","title":"cover_PXL_20230705_182544393_8159193908.jpg"},{"url":"https://mxd.codes/content/photos/usa-roadtrip/photo-19.jpg","mime_type":"image/jpeg","title":"cover_PXL_20230704_174757943_dca62dc665.jpg"}],"authors":[{"name":"Max Dietrich","url":"https://mxd.codes"}]},{"id":"https://mxd.codes/articles/building-a-table-of-contents-toc-from-markdown-for-your-react-blog","url":"https://mxd.codes/articles/building-a-table-of-contents-toc-from-markdown-for-your-react-blog","title":"Building a Table of Contents (TOC) from markdown for your React blog","summary":"How to create a Table of Contents (TOC) from markdown for your React blog with Javascript without any third party dependencies.","content_html":"<p>Since I store blog posts in a self-hosted version of <a href=\"https://strapi.io/\" title=\"strapi\">strapi</a>, I've been looking for a way to automatically generate a table of contents from Markdown for all posts in my Next.js site.</p>\n<p>The idea is that during the build process all captions are extracted from the article content (I use <a href=\"https://nextjs.org/docs/basic-features/data-fetching/get-static-props\">getStaticProps</a> for all articles) and then display them fixed next to the content using a separate component.</p>\n<h2 id=\"extractingheaderswithregexfrommarkdown\">Extracting headers with regex from markdown</h2>\n<p>After some research and trial and error I decided to use regex to extract the headers from the markdown text using the hash symbol.</p>\n<p>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.</p>\n<pre><code class=\"javascript language-javascript\">  const regexReplaceCode = /(```.+?```)/gms\n  const regexRemoveLinks = /\\[(.*?)\\]\\(.*?\\)/g\n\n  const markdownWithoutLinks = markdown.replace(regexRemoveLinks, \"\")\n  const markdownWithoutCodeBlocks =  markdownWithoutLinks.replace(regexReplaceCode, \"\")\n</code></pre>\n<p>Then, using the hash symbol, the headings <code>h1</code> to <code>h6</code> are filtered from the text and added to an array named titles.</p>\n<pre><code class=\"javascript language-javascript\">  const regXHeader = /#{1,6}.+/g\n  const titles = markdownWithoutCodeBlocks.match(regXHeader)\n</code></pre>\n<p>Next, using the headings, levels of headings, titles, and anchor links are created and added to an array <code>toc</code> 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.</p>\n<pre><code class=\"javascript language-javascript\">let globalID = 0\ntitles.map((tempTitle, i) =&gt; {\n      const level = tempTitle.match(/#/g).length - 1\n      const title = tempTitle.replace(/#/g, \"\").trim(\"\")\n      const anchor = `#${title.replace(/ /g, \"-\").toLowerCase()}`\n      level === 1 ? (globalID += 1) : globalID\n\n      toc.push({\n        level: level,\n        id: globalID,\n        title: title,\n        anchor: anchor,\n      })\n    })\n</code></pre>\n<p>The array toc is returned and I pass this for example as <code>post.toc</code> to the respective post, where <code>post.toc</code> in turn is passed as props to the ToC component.</p>\n<pre><code class=\"javascript language-javascript\">export async function getStaticProps({ params }) {\n  const content = (await data?.posts[0]?.content) || \"\"\n  const toc = getToc(content)\n\n  return {\n    props: {\n      post: {\n        content,\n        toc\n      },\n    },\n  }\n}\n</code></pre>\n<h2 id=\"renderingthetableofcontents\">Rendering the table of contents</h2>\n<p>Each element from the <code>toc</code> 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.</p>\n<pre><code class=\"javascript language-javascript\">import styled from \"styled-components\"\n\nconst ToCListItem = styled.li`\n  list-style-type: none;\n  margin-bottom: 1rem;\n  padding-left: calc(var(--space-sm) * 0.5);\n  border-left: 3px solid var(--secondary-color);\n  margin-left: ${(props) =&gt; (props.level &gt; 1 ? `${props.level * 10}px` : \"0\")};\n`\n\nexport default function TableOfContents({ toc }) {\n  function TOC() {\n    return (\n      &lt;ol className=\"table-of-contents\"&gt;\n        {toc.map(({ level, id, title, anchor }) =&gt; (\n          &lt;ToCListItem key={id} level={level}&gt;\n            &lt;a href={anchor}&gt;{title}&lt;/a&gt;\n          &lt;/ToCListItem&gt;\n        ))}\n      &lt;/ol&gt;\n    )\n  }\n\n  return (\n    &lt;&gt;\n      &lt;p&gt;Table of contents&lt;/p&gt;\n      &lt;divr&gt;\n        &lt;TOC /&gt;\n      &lt;/div&gt;\n    &lt;/&gt;\n  )\n}\n</code></pre>\n<p>However, the anchor links do not work yet, since the corresponding section IDs still have to be added to the titles in Markdown content. </p>\n<p>For rendering the actual post content I use <a href=\"https://github.com/remarkjs/react-markdown\" title=\"react-markdown\">react-markdown</a>. 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 <code>h1</code> to <code>h6</code>.</p>\n<pre><code class=\"javascript language-javascript\">const renderers = {\n  h2: { children }) =&gt; {\n    const anchor = `${children[0].replace(/ /g, \"-\").toLowerCase()}`\n    return &lt;h2 id={anchor}&gt;{children}&lt;/h2&gt;\n  },\n  h3: ({children }) =&gt; {.\n    const anchor = `${children[0].replace(/ /g, \"-\").toLowerCase()}`\n    return &lt;h3 id={anchor}&gt;{children}&lt;/h2&gt;\n  },\n  h4: ({children }) =&gt; {.\n    const anchor = `${children[0].replace(/ /g, \"-\").toLowerCase()}`\n    return &lt;h4 id={anchor}&gt;{children}&lt;/h2&gt;\n  },\n  h5: ({children }) =&gt; {.\n    const anchor = `${children[0].replace(/ /g, \"-\").toLowerCase()}`\n    return &lt;h5 id={anchor}&gt;{children}&lt;/h2&gt;\n  },\n  h6: ({children }) =&gt; {.\n    const anchor = `${children[0].replace(/ /g, \"-\").toLowerCase()}`\n    return &lt;h6 id={anchor}&gt;{children}&lt;/h2&gt;\n  },\n</code></pre>\n<p>Lastly, I added a little scroll effect with the following css-property <code>scroll-behavior: smooth</code>;</p>","date_published":"2023-02-27T23:53:50.233Z","date_modified":"2025-01-20T18:48:11.273Z","tags":["react","next-js","gatsby","markdown-mdx"],"image":"https://mxd.codes/content/posts/published/building-a-table-of-contents-toc-from-markdown-for-your-react-blog/cover.png","banner_image":"https://mxd.codes/content/posts/published/building-a-table-of-contents-toc-from-markdown-for-your-react-blog/cover.png","authors":[{"name":"Max Dietrich","url":"https://mxd.codes"}]},{"id":"https://mxd.codes/photos/cyprus-coffee-ride","url":"https://mxd.codes/photos/cyprus-coffee-ride","title":"Cyprus Coffee Ride","content_html":"","date_published":"2023-01-23T16:52:50.689Z","image":"https://mxd.codes/content/photos/cyprus-coffee-ride/photo-1.jpg","attachments":[{"url":"https://mxd.codes/content/photos/cyprus-coffee-ride/photo-1.jpg","mime_type":"image/jpeg","title":"cover_IMG_20221027_120244_cfdadb10b4.jpg"},{"url":"https://mxd.codes/content/photos/cyprus-coffee-ride/photo-2.jpg","mime_type":"image/jpeg","title":"cover_IMG_20221028_102122_f9fa28fe09.jpg"},{"url":"https://mxd.codes/content/photos/cyprus-coffee-ride/photo-3.jpg","mime_type":"image/jpeg","title":"cover_IMG_20221028_115259_4b21e4c76c.jpg"},{"url":"https://mxd.codes/content/photos/cyprus-coffee-ride/photo-4.jpg","mime_type":"image/jpeg","title":"cover_IMG_20221027_124214_9a9f4b34e4.jpg"}],"authors":[{"name":"Max Dietrich","url":"https://mxd.codes"}]},{"id":"https://mxd.codes/articles/synchronizing-your-proxmox-backups-with-az-copy-to-azure-storage-containers","url":"https://mxd.codes/articles/synchronizing-your-proxmox-backups-with-az-copy-to-azure-storage-containers","title":"How to copy your Proxmox backups with AzCopy to Azure Storage Containers","summary":"This article will explain to you how you can create an Azure Storage Account, prepare AzCopy locally and how to create a bash script which will be used to copy your local Proxmox Backups via AzCopy to an Azure Storage Account by a cost effective way.","content_html":"<p>Recently I went out of storage for my homelab so I bought an used NAS (Synology DS214 play) to have some more capacities for <a href=\"https://www.proxmox.com/de/\" title=\"Proxmox\">Proxmox</a> Backups and OpenStreetMap. I still had a 1TB hdd lying around at home, which I now use for proxmox backups. </p>\n<p>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 <a href=\"https://learn.microsoft.com/en-us/azure/storage/common/storage-use-azcopy-v10\">AzCopy</a> and in the following I will describe with more details how I was able to do it.</p>\n<p>Overall this article will cover the following informations:</p>\n<ul>\n<li>Creating an Azure Storage Account</li>\n<li>Getting started with AzCopy</li>\n<li>Creating a bash-script to copy the Proxmox backups to an Azure Storage Container</li>\n</ul>\n<h2 id=\"creatinganazurestorageaccount\">Creating an Azure Storage Account</h2>\n<p>First off all you need an active Azure subscription and an storage account to be able to store your backups. In the <a href=\"https://portal.azure.com\" title=\"Azure Portal\">Azure Portal</a> you can search for the service \"Storage Accounts\" which you will need.</p>\n<p><img src=\"azure_storage_account_e81efc2682_260acf4298.png\" alt=\"azure_storage_account_e81efc2682.png\" /></p>\n<p>In the service \"Storage Accounts\" you can create a new storage account. For the storage account you will need </p>\n<ul>\n<li>an active azure subscription,</li>\n<li>a ressource group (create one if you don't have one it, e.g. RG-HOMELAB),</li>\n<li>a storage account name,</li>\n<li>selecting a region and </li>\n<li>selecting redundancy (e.g. LRS;)</li>\n<li>Access tier \"cold\" (See Advanced)</li>\n</ul>\n<p><img src=\"storage_account_basics_e82f1d8a4d_6f72c73f59.png\" alt=\"storage_account_basics_e82f1d8a4d.png\" />\n<img src=\"storage_account_advanced_02f6609c40_50a3cf6f7c.png\" alt=\"storage_account_advanced_02f6609c40.png\" /></p>\n<p>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. </p>\n<p><img src=\"storage_lifecycle_management_e113a6efb8_d83047917d.png\" alt=\"storage_lifecycle_management_e113a6efb8.png\" /></p>\n<p>For example I created a rule which moves all new files after one day to the archive storage tier.</p>\n<p><img src=\"storage_lifecycle_lifecycle_rule_85a074cae0_1542a982cc.png\" alt=\"storage_lifecycle_lifecycle_rule_85a074cae0.png\" /></p>\n<p><img src=\"storage_lifecycle_lifecycle_rule_2_5486e872ee_fbf78cef24.png\" alt=\"storage_lifecycle_lifecycle_rule_2_5486e872ee.png\" /></p>\n<p>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.</p>\n<p>Also you could create another rule which will for example will delete all all blobs which were created 365 days ago.</p>\n<p><img src=\"storage_pricing_8998b65a68_9635c1cb24.png\" alt=\"storage_pricing_8998b65a68.png\" /></p>\n<p>Please have a look at <a href=\"https://azure.microsoft.com/en-us/pricing/details/storage/blobs/\" title=\"Azure Storage Pricing\">https://azure.microsoft.com/en-us/pricing/details/storage/blobs/</a> for uptodate Azure Storage pricing.</p>\n<p>After the storage account has been configured you will need to create a Container where the actual files will be stored.\nGo to  \"Data storage\" -&gt; \"Containers\" and create a Container.\n<img src=\"/uploads/create_storage_container_8ee34fe39e.png\" alt=\"create storage container.png\" />\nAgain name it however you want.</p>\n<p>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\".</p>\n<p><img src=\"storage_shared_access_token_1646ebf346_8b4b61c9f6.png\" alt=\"storage_shared_access_token_1646ebf346.png\" /></p>\n<p>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 <strong>Blob SAS URL</strong> because you will need it for the upload script.</p>\n<h2 id=\"gettingstartedwithazcopy\">Getting started with AzCopy</h2>\n<blockquote>\n  <p>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)</p>\n</blockquote>\n<p>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.</p>\n<pre><code class=\"bash language-bash\">#Download AzCopy\ncd ~\nwget https://aka.ms/downloadazcopy-v10-linux\n&amp;nbsp;\n#Expand Archive\ntar -xvf downloadazcopy-v10-linux\n&amp;nbsp;\n#(Optional) Remove existing AzCopy version\nrm /usr/bin/azcopy\n&amp;nbsp;\n#Move AzCopy to the destination you want to store it\ncp ./azcopy_linux_amd64_*/azcopy /usr/bin/\n\n# Remove Azcopy from home\nrm -r downloadazcopy-v10-linux\nrm -r azcopy_linux_amd64_10.16.2/\n</code></pre>\n<p>By adding the azcopy file location as system path you can just type azcopy from any directory on your system.\nYou can add it to your system path with:</p>\n<pre><code class=\"bash language-bash\">nano ~/.profile\n</code></pre>\n<p>and then adding these lines:</p>\n<pre><code class=\"bash language-bash\">export PATH=/usr/bin/azcopy:$PATH\n</code></pre>\n<p>Lastly, update your system variables:</p>\n<pre><code class=\"bash language-bash\">source ~/.profile\n</code></pre>\n<h2 id=\"creatingabashscripttosynchronizetheproxmoxbackupdirectorytoanazurestoragecontainer\">Creating a bash-script to synchronize the Proxmox backup directory to an Azure Storage Container</h2>\n<p>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. \nFor copying the backups to Azure we will use azcopy <strong>copy</strong> 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 <strong>sync</strong>.\nAzcopy 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.</p>\n<p>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.</p>\n<pre><code class=\"bash language-bash\">script: /home/youruser/scripts/upload-backups-to-azure.sh\n</code></pre>\n<p>Afterwards you can create the script which will upload the files with:</p>\n<pre><code class=\"bash language-bash\">cd ~\nmkdir scripts\ncd scripts\nnano upload-backups-to-azure.sh\n</code></pre>\n<p>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 <strong>Blob SAS URL</strong>.</p>\n<pre><code class=\"bash language-bash\">#!/bin/bash\n# Script to upload Proxmox backups to Azure Storage\n\nsrc=\"/mnt/pve/xyz/dump/*\"\ntoken=\"Blob SAS URL\"\n\ndobackup(){\n  echo \"Uploading Proxmox backups from $src to Azure...\"\n  azcopy copy \"$src\" \"$token\" --overwrite=false\n  echo \"Finished Uploading!\"\n}\n\nif [ \"$1\" == \"job-end\" ]; then\n  dobackup\nfi\n\nexit 0\n</code></pre>\n<p>Close the file and make it executable for the user with:</p>\n<pre><code class=\"bash language-bash\">chmod +x ~/scripts/upload-backups-to-azure.sh\n</code></pre>\n<p>Now the next time your backup task has finished the files will be automatically uploaded to your Azure storage container.\nDue to the  hook script you can check the status of the copy process in the proxmox ui.</p>","date_published":"2023-01-01T15:17:30.963Z","date_modified":"2024-12-27T13:02:25.307Z","tags":["selfhosted","cloud","power-shell"],"image":"https://mxd.codes/content/posts/published/synchronizing-your-proxmox-backups-with-az-copy-to-azure-storage-containers/cover.png","banner_image":"https://mxd.codes/content/posts/published/synchronizing-your-proxmox-backups-with-az-copy-to-azure-storage-containers/cover.png","authors":[{"name":"Max Dietrich","url":"https://mxd.codes"}]},{"id":"https://mxd.codes/links/doing-more-with-docker","url":"https://mxd.codes/links/doing-more-with-docker","title":"Doing More with Docker","external_url":"https://blog.gurucomputing.com.au/doing-more-with-docker/","content_html":"<p>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.</p>","date_published":"2022-10-09T09:04:28.580Z","authors":[{"name":"Max Dietrich","url":"https://mxd.codes"}]},{"id":"https://mxd.codes/photos/trans-dolomiti-mtb-tour","url":"https://mxd.codes/photos/trans-dolomiti-mtb-tour","title":"Trans Dolomiti MTB Tour","content_html":"","date_published":"2022-10-08T14:43:02.201Z","image":"https://mxd.codes/content/photos/trans-dolomiti-mtb-tour/photo-1.webp","attachments":[{"url":"https://mxd.codes/content/photos/trans-dolomiti-mtb-tour/photo-1.webp","mime_type":"image/jpeg","title":"IMG_20220714_214010_081_e67e420473.webp"},{"url":"https://mxd.codes/content/photos/trans-dolomiti-mtb-tour/photo-2.webp","mime_type":"image/jpeg","title":"IMG_20220714_214009_999_9cbf2d8159.webp"},{"url":"https://mxd.codes/content/photos/trans-dolomiti-mtb-tour/photo-3.webp","mime_type":"image/jpeg","title":"IMG_20220714_214009_965_1aa4ba0927.webp"},{"url":"https://mxd.codes/content/photos/trans-dolomiti-mtb-tour/photo-4.webp","mime_type":"image/jpeg","title":"IMG_20220714_214010_020_d29e370477.webp"}],"authors":[{"name":"Max Dietrich","url":"https://mxd.codes"}]},{"id":"https://mxd.codes/articles/how-to-create-web-maps-with-leaflet-react-and-functional-components","url":"https://mxd.codes/articles/how-to-create-web-maps-with-leaflet-react-and-functional-components","title":"Understanding Leaflet and React: A Guide to Web GIS Applications","summary":"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.","content_html":"<p>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 <a href=\"https://leafletjs.com/reference.html\">Leaflet API reference</a>.</p>\n<h2 id=\"whatisleaflet\">What is Leaflet?</h2>\n<p><a href=\"https://leafletjs.com/\" title=\"Leaflet\">Leaflet</a> stands out as a versatile and free JavaScript library, empowering developers to craft seamless Web <a href=\"/articles/what-is-gis-geographic-information-system\" title=\"GIS\">GIS</a> applications. Leveraging HTML5 and CSS3, Leaflet is compatible with all major web browsers, providing a user-friendly platform for integrating raster and vector data from diverse sources.</p>\n<h2 id=\"exploringreactandleafletintegration\">Exploring React and Leaflet Integration</h2>\n<p>Diving deeper into the integration of React and Leaflet components, this article explains the process of creating a web map with fundamental features:</p>\n<ul>\n<li>Basic map using OpenStreetMap.</li>\n<li>Visualizing data in GeoJSON format.</li>\n</ul>\n<h2 id=\"gettingstarted\">Getting Started</h2>\n<p>First of all you need a react app which you can create with:</p>\n<pre><code class=\"javascript language-javascript\">npx create-react-app leaflet-react\ncd leaflet-react\n</code></pre>\n<p>and you will need to install Leaflet in your project with:</p>\n<pre><code class=\"bash language-bash\">npm install leaflet\n</code></pre>\n<p>After you have installed the package you can import it with <code>import L from \"leaflet\"</code> into your App.js. The import of the leaflet.css is also important because without it the map-tiles will be misplaced.</p>\n<pre><code class=\"javascript language-javascript\">//App.js\nimport React, { useEffect } from \"react\"\nimport L from \"leaflet\"\nimport \"leaflet/dist/leaflet.css\"\n\nconst App = () =&gt; {\n  const mapStyles = {\n    width: \"100%\",\n    height: \"300px\",\n  }\n  const layer = L.tileLayer(\n    `https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png`,\n    {\n      attribution:\n        '&amp;copy; &lt;a href=\"https://www.openstreetmap.org/copyright\"&gt;OpenStreetMap&lt;/a&gt; contributors',\n    }\n  )\n\n  const mapParams = {\n    center: [52, 4],\n    zoom: 4,\n    layers: [layer],\n  }\n\n  // This useEffect hook runs when the component is first mounted,\n  // similar to componentDidMount() lifecycle method of class-based\n  // components:\n  useEffect(() =&gt; {\n    const map = L.map(\"map\", mapParams)\n  }, [])\n\n  return (\n    &lt;div&gt;\n      &lt;div id=\"map\" style={mapStyles} /&gt;\n    &lt;/div&gt;\n  )\n}\n\nexport default App\n</code></pre>\n<p>Since Leaflet doesn't support server-side rendering, the <code>useEffect</code> hook ensures the map rendering post-component mounting.</p>\n<pre><code class=\"javascript language-javascript\">useEffect(() =&gt; {\n  L.map(\"map\", mapParams);\n}, []);\n</code></pre>\n<p>The \"map\" parameter is the id of the html-element in which the map will be rendered. With mapParams you can pass some basic parameters as props for the Leaflet map. These parameters can just be created in a object <a href=\"https://leafletjs.com/reference.html#map-factory\">Leaflet API: Map Creation</a>:</p>\n<pre><code class=\"javascript language-javascript\">const mapParams = {\n  center: [0, 0],\n  zoom: 0,\n  layers: [layer]\n};\n</code></pre>\n<p>TileLayers with OpenStreetMap Data are created with <code>L.tileLayer(url, options)</code> <a href=\"https://leafletjs.com/reference.html#tilelayer\">(Leaflet API: TileLayer)</a>.</p>\n<pre><code class=\"javascript language-javascript\">  const layer = L.tileLayer(`https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png`, {\n        attribution: '&amp;copy; &lt;a href=\"https://www.openstreetmap.org/copyright\"&gt;OpenStreetMap&lt;/a&gt; contributors'\n  });\n</code></pre>\n<p>Also some basic css in js is created for the map container which makes the map fullscreen and will be passed as style props:</p>\n<pre><code class=\"javascript language-javascript\">const mapStyles = {\n  width: \"100%\",\n  height: \"100vh\"\n };\n</code></pre>\n<p>In the end you just need html element in which the map will be rendered:</p>\n<pre><code class=\"javascript language-javascript\"> return (\n      &lt;div&gt;\n        &lt;div id=\"map\" style={mapStyles} /&gt;\n      &lt;/div&gt;\n    )\n</code></pre>\n<p><SimpleLeafletDemo/></p>\n<p>In case something didn't work out as expected you can just clone the following repositiory:</p>\n<p>Github Repositiory: <a href=\"https://github.com/dietrichmax/leaflet-react-functional-component\">https://github.com/dietrichmax/leaflet-react-functional-component</a>\nLive Demo: <a href=\"https://dietrichmax.github.io/leaflet-react-functional-component/\">https://dietrichmax.github.io/leaflet-react-functional-component/</a></p>\n<h2 id=\"addinggeojsondata\">Adding GeoJSON Data</h2>\n<p>To add GeoJSON the the map first of all you will need to create a GeoJSON object:</p>\n<pre><code class=\"javascript language-javascript\">function getGeoJson() {\n  return {\n    type: \"GeometryCollection\",\n    geometries: [\n      {\n        type: \"Polygon\",\n        coordinates: [\n          [\n            [6.000000248663241, 56.000000155530984],\n            [7.000000192318055, 56.000000155530984],\n            [8.000000135973096, 56.000000155530984],\n            [9.000000247266257, 56.000000155530984],\n            [10.000000190921071, 56.000000155530984],\n            [11.000000134576112, 56.000000155530984],\n            [12.000000245869273, 56.000000155530984],\n            [12.000000245869273, 55.000000211876],\n            [12.000000245869273, 54.00000010058284],\n            [12.000000245869273, 53.00000015692797],\n            [12.000000245869273, 52.00000021327298],\n            [12.000000245869273, 51.00000010197982],\n            [12.000000245869273, 50.00000015832478],\n            [12.000000245869273, 49.00000004703179],\n            [12.000000245869273, 48.000000103376806],\n            [11.000000134576112, 48.000000103376806],\n            [10.000000190921071, 48.000000103376806],\n            [9.000000247266257, 48.000000103376806],\n            [8.000000135973096, 48.000000103376806],\n            [7.000000192318055, 48.000000103376806],\n            [6.000000248663241, 48.000000103376806],\n            [6.000000248663241, 49.00000004703179],\n            [6.000000248663241, 50.00000015832478],\n            [6.000000248663241, 51.00000010197982],\n            [6.000000248663241, 52.00000021327298],\n            [6.000000248663241, 53.00000015692797],\n            [6.000000248663241, 54.00000010058284],\n            [6.000000248663241, 55.000000211876],\n            [6.000000248663241, 56.000000155530984],\n          ],\n        ],\n      },\n    ],\n  }\n}\n</code></pre>\n<p>The object is wrapped in a function which will return the GeoJSON. You could also fetch a GeoJSON object from somewhere else here.</p>\n<p>Then you will need to add the GeoJSON object to the map with:</p>\n<pre><code class=\"javascript language-javascript\">  useEffect(() =&gt; {\n    const map = L.map(\"map\", mapParams)\n    L.geoJSON(getGeoJson()).addTo(map)\n  }, [])\n</code></pre>\n<p>And thats it! You map should look now like this:</p>\n<p><LeafletGeojsonDemo/></p>\n<p>The code for this component looks like this:</p>\n<pre><code class=\"javascript language-javascript\">import React, { useEffect } from \"react\"\nimport L from \"leaflet\"\nimport \"leaflet/dist/leaflet.css\"\n\nconst Map = () =&gt; {\n  const mapStyles = {\n    width: \"100%\",\n    height: \"300px\",\n  }\n  const layer = L.tileLayer(\n    `https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png`,\n    {\n      attribution:\n        '&amp;copy; &lt;a href=\"https://www.openstreetmap.org/copyright\"&gt;OpenStreetMap&lt;/a&gt; contributors',\n    }\n  )\n\n  // This useEffect hook runs when the component is first mounted,\n  // similar to componentDidMount() lifecycle method of class-based\n  // components:\n  useEffect(() =&gt; {\n    const map = L.map(\"map\", mapParams)\n    L.geoJSON(getGeoJson()).addTo(map)\n  }, [])\n\n  return (\n    &lt;div&gt;\n      &lt;div id=\"map\" style={mapStyles} /&gt;\n    &lt;/div&gt;\n  )\n}\n\nexport default Map\n\nfunction getGeoJson() {\n  return {\n    type: \"GeometryCollection\",\n    geometries: [\n      {\n        type: \"Polygon\",\n        coordinates: [\n          [\n            [6.000000248663241, 56.000000155530984],\n            [7.000000192318055, 56.000000155530984],\n            [8.000000135973096, 56.000000155530984],\n            [9.000000247266257, 56.000000155530984],\n            [10.000000190921071, 56.000000155530984],\n            [11.000000134576112, 56.000000155530984],\n            [12.000000245869273, 56.000000155530984],\n            [12.000000245869273, 55.000000211876],\n            [12.000000245869273, 54.00000010058284],\n            [12.000000245869273, 53.00000015692797],\n            [12.000000245869273, 52.00000021327298],\n            [12.000000245869273, 51.00000010197982],\n            [12.000000245869273, 50.00000015832478],\n            [12.000000245869273, 49.00000004703179],\n            [12.000000245869273, 48.000000103376806],\n            [11.000000134576112, 48.000000103376806],\n            [10.000000190921071, 48.000000103376806],\n            [9.000000247266257, 48.000000103376806],\n            [8.000000135973096, 48.000000103376806],\n            [7.000000192318055, 48.000000103376806],\n            [6.000000248663241, 48.000000103376806],\n            [6.000000248663241, 49.00000004703179],\n            [6.000000248663241, 50.00000015832478],\n            [6.000000248663241, 51.00000010197982],\n            [6.000000248663241, 52.00000021327298],\n            [6.000000248663241, 53.00000015692797],\n            [6.000000248663241, 54.00000010058284],\n            [6.000000248663241, 55.000000211876],\n            [6.000000248663241, 56.000000155530984],\n          ],\n        ],\n      },\n    ],\n  }\n}\n</code></pre>\n<p>If you are curious how to add some more features like vector layers, some controls or markers have a look at the <a href=\"https://leafletjs.com/reference.html\">Leaflet API Reference</a> and much fun playing around with your Leaflet web map created with React and functional components</p>","date_published":"2022-09-23T16:38:42.053Z","date_modified":"2025-01-22T15:53:27.116Z","tags":["gis","web-mapping","react","leaflet"],"image":"https://mxd.codes/content/posts/published/how-to-create-web-maps-with-leaflet-react-and-functional-components/cover.webp","banner_image":"https://mxd.codes/content/posts/published/how-to-create-web-maps-with-leaflet-react-and-functional-components/cover.webp","authors":[{"name":"Max Dietrich","url":"https://mxd.codes"}]},{"id":"https://mxd.codes/articles/how-to-create-a-custom-cookie-banner-for-your-react-application","url":"https://mxd.codes/articles/how-to-create-a-custom-cookie-banner-for-your-react-application","title":"Implementing a Custom Cookie Banner in Next.js","summary":"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.","content_html":"<p>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.</p>\n<p><img src=\"Screenshot_2025_02_03_220702_ab0e32d08c.png\" alt=\"Screenshot 2025-02-03 220702.png\" title=\"screenshot of the cookie banner for mxd.codes\" /></p>\n<p>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.</p>\n<h2 id=\"conditionalrendering\">Conditional Rendering</h2>\n<p>The first step involves declaring a <code>visible</code> state variable, which is initially set to <code>false</code>:</p>\n<pre><code class=\"javascript language-javascript\">const CookieBanner = ({ debug }) =&gt; {\n  const [visible, setVisible] = useState(false);\n</code></pre>\n<p>Using <code>useEffect()</code>, the component checks if the cookie consent is <code>undefined</code> or if <code>debug</code> mode is enabled. If so, the cookie banner becomes visible, and scrolling is disabled to ensure the user interacts with the banner first.</p>\n<pre><code class=\"javascript language-javascript\">  useEffect(() =&gt; {\n    // If cookie is undefined or debug is true, show the banner\n    if (Cookie.get(\"consent\") === undefined || debug) {\n      document.body.style.overflow = \"hidden\";\n      setVisible(true);\n    }\n  }, []);\n</code></pre>\n<p>However, when users navigate to pages like <a href=\"/privacy-policy\">/privacy-policy</a> or <a href=\"/site-notice\">/site-notice</a> 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:</p>\n<pre><code class=\"javascript language-javascript\">  // Don't render if the banner should not be visible\n  if (\n    !visible ||\n    window.location.href.includes(\"privacy-policy\") ||\n    window.location.href.includes(\"site-notice\") ||\n    window.location.href.includes(\"sitemap\")\n  ) {\n    return null;\n  }\n</code></pre>\n<p>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:</p>\n<pre><code class=\"javascript language-javascript\">  useEffect(() =&gt; {\n    // Handle page load and visibility\n    if (\n      window.location.href.includes(\"privacy-policy\") ||\n      window.location.href.includes(\"site-notice\")\n    ) {\n      document.body.style.overflow = \"scroll\";\n    } else if (Cookie.get(\"consent\") === undefined || debug) {\n      document.body.style.overflow = \"hidden\";\n    }\n  }, []);\n</code></pre>\n<p>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'.</p>\n<p><img src=\"2022_05_01_15_40_35_How_to_create_a_custom_cookie_banner_for_your_Next_js_application_Max_Dietrich_c85e1c6f80_958fcd82b5.png\" alt=\"2022_05_01_15_40_35_How_to_create_a_custom_cookie_banner_for_your_Next_js_application_Max_Dietrich_c85e1c6f80.png\" title=\"screenshot showing the accept cookies button on the cookie banner\" /></p>\n<h2 id=\"settingcookies\">Setting Cookies</h2>\n<p>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.</p>\n<pre><code class=\"javascript language-javascript\">&lt;Button onClick={() =&gt; handleConsent(true)}&gt;Accept required and optional cookies&lt;/Button&gt;\n</code></pre>\n<p>Clicking an option triggers the <code>handleConsent()</code> function, which:</p>\n<ul>\n<li>set the consent cookie with the value true or false depending of the users choice,</li>\n<li>enable Analytics (optional),</li>\n<li>enable Adsense (optional),</li>\n<li>set the <code>visible</code> variable to false and finally</li>\n<li>allow scrolling again.</li>\n</ul>\n<pre><code class=\"javascript language-javascript\">  const handleConsent = (accepted) =&gt; {\n    Cookie.set(\"consent\", accepted, { sameSite: \"strict\", expires: 365 });\n    setVisible(false);\n    document.body.style.overflow = \"scroll\";\n    if (accepted) {\n      // enableGoogleAnalytics();\n      // enableGoogleAdsense();\n    }\n  };\n</code></pre>\n<p>Cookies are created with help of the <a href=\"https://github.com/js-cookie/js-cookie\">js-cookie</a>. If you are using <a href=\"https://nextjs.org/docs/app/building-your-application/rendering/server-components\">Server Component</a> you can also use the <a href=\"https://nextjs.org/docs/app/api-reference/functions/cookies\">cookies</a> function from Nextjs.</p>\n<p>The <code>enableGoogleAnalytics()</code> and <code>enableGoogleAdsense()</code> functions are stored separately because they will also be needed in the <code>_app.js</code> file, whichs wrapps the whole application.</p>\n<p>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.</p>\n<p>To ensure scripts persist across page changes, the <code>_app.js</code> file rechecks the consent state and reinjects scripts as needed:</p>\n<pre><code class=\"javascript language-javascript\">const MyApp = ({ Component, pageProps }) =&gt; {\n  useEffect(() =&gt; {\n    if (window.location.href.includes(config.domain)) {\n      if (Cookie.get(\"consent\") === \"true\") {\n        enableGoogleAnalytics();\n        enableGoogleAdsense();\n      }\n    }\n  }, []); // Runs once on mount\n\n  return &lt;Component {...pageProps} /&gt;;\n};\n</code></pre>\n<p>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 <code>CookieBanner</code> component looks like the following:</p>\n<pre><code class=\"jsx language-jsx\">import styled from \"styled-components\"\nimport Link from \"next/link\"\nimport media from \"styled-media-query\"\nimport Image from \"next/legacy/image\"\nimport Logo from \"@/components/logo/logo\"\nimport { Button } from \"@/styles/templates/button\"\nimport { FaLinkedin } from \"@react-icons/all-files/fa/FaLinkedin\"\nimport { FaInstagram } from \"@react-icons/all-files/fa/FaInstagram\"\nimport { FaGithub } from \"@react-icons/all-files/fa/FaGithub\"\nimport { FaBluesky } from \"@react-icons/all-files/fa6/FaBluesky\"\nimport { FaXing } from \"@react-icons/all-files/fa/FaXing\"\nimport { SiStrava } from \"@react-icons/all-files/si/SiStrava\"\n//import { enableGoogleAnalytics } from \"@/components/google-analytics/google-analytics\"\n//import { enableGoogleAdsense } from \"@/components/google-adsense/google-adsense\"\nimport config from \"@/src/data/internal/SiteConfig\"\n//import { push } from \"@socialgouv/matomo-next\"\nimport { useState, useEffect } from 'react';\nimport Cookie from 'js-cookie'; \n\nconst Background = styled.div`\n  position: fixed;\n  z-index: 9997;\n  right: 0;\n  bottom: -200px;\n  top: 0;  \n  left: 0;\n  background-color: rgba(0, 0, 0, 0.5);\n`\n\nconst CookieContainer = styled.div`\n  position: fixed;\n  right: 0;\n  bottom: 0;\n  top: 0;\n  left: 0;\n  z-index: 9998;\n  vertical-align: middle;\n  white-space: nowrap;\n  max-height: 100%;\n  max-width: 100%;\n  overflow-x: auto;\n  overflow-y: auto;\n  text-align: center;\n  -webkit-tap-highlight-color: transparent;\n  font-size: 14px;\n  overflow-y: scroll;\n`\n\nconst CookieInnerContainer = styled.div`\n  width: var(--content-width);\n  height: auto;\n  max-width: none;\n  border-radius: var(--border-radius);\n  display: inline-block;\n  z-index: 9999;\n  background-color: var(--body-bg);\n  white-space: normal;\n  box-shadow: 0 2px 10px 0 rgb(0 0 0 / 20%);\n  position: relative;\n  line-height: 1.65;\n  border: 1px solid var(--body-bg);\n  vertical-align: middle;\n  top: 20%;\n  ${media.lessThan(\"medium\")`\n    width: 90%;\n  `}\n`\n\nconst Wrapper = styled.div`\n  max-height: 100%;\n  height: auto;\n  max-width: none;\n  text-align: left;\n  border-radius: 16px;\n  display: inline-block;\n  white-space: normal;\n`\n\nconst CookieHeader = styled.div`\n  padding: var(--space);\n  display: flex;\n  justify-content: space-between;\n`\n\n\nconst CookieContentBlock = styled.div`\n  margin-top: var(--space);\n  margin-bottom: var(--space-sm)\n`\n\nconst CookieTextList = styled.ul`\n  margin: 0;\n  padding: 0;\n  padding-inline-start: 1rem;\n`\n\nconst CookieTextItem = styled.li`\n  margin: var(--space-sm) 0;\n`\n\nconst CookieBannerText = styled.div`\n  padding: 0 var(--space);\n`\n\nconst CookieHeadline = styled.h1`\n  font-size: 24px;\n  font-weight: 400;\n  margin-bottom: var(--space);\n`\n\nconst Text = styled.div`\n  margin-bottom: var(--space-sm);\n`\n\nconst CookieLink = styled.a`\n  border-bottom: 1px solid var(--text-color);\n  &amp;:hover {\n    border-bottom: none;\n  }\n  cursor: pointer;\n  margin-right: var(--space-sm);\n`\n\nconst TextLink = styled.a`\n  border-bottom: 1px solid var(--text-color);\n  &amp;:hover {\n    text-decoration: none;\n    border-bottom: none;\n  }\n`\n\nconst List = styled.ol`\n  list-style: none;\n  padding-inline-start: 0;\n  display: flex;\n`\n\nconst SocialItem = styled.li`\n  margin: var(--space-sm) var(--space-sm) var(--space-sm) 0;\n  transition: 0.2s;\n  background-color: var(--content-bg);\n  padding: 8px 10px 4px 10px;\n  &amp;:hover {\n    color: var(--secondary-color);\n    cursor: pointer;\n  }\n`\n\nconst ButtonContainer = styled.div`\n  margin: var(--space);\n  display: flex;\n  justify-content: space-between;\n  ${media.lessThan(\"medium\")`\n    flex-direction: column;\n    gap: var(--space-sm);\n  `}\n`\n\n\nconst CookieBanner = ({ debug }) =&gt; {\n  const [visible, setVisible] = useState(false);\n\n  useEffect(() =&gt; {\n    const consent = Cookie.get(\"consent\");\n    if (!consent || debug) {\n      document.body.style.overflow = \"hidden\";\n      setVisible(true);\n    } else {\n      document.body.style.overflow = \"scroll\";\n    }\n  }, [debug]);\n\n  const handleConsent = (accepted) =&gt; {\n    Cookie.set(\"consent\", accepted, { sameSite: \"strict\", expires: 365 });\n    setVisible(false);\n    document.body.style.overflow = \"scroll\";\n  };\n\n  if (!visible || [\"privacy-policy\", \"site-notice\", \"sitemap\"].some((page) =&gt; window.location.href.includes(page))) {\n    return null;\n  }\n\n  const socialLinks = [\n    { href: config.socials.bluesky, title: \"@mmxdcodes on Bluesky\", icon: &lt;FaBluesky /&gt; },\n    { href: config.socials.github, title: \"mxdietrich on GitHub\", icon: &lt;FaGithub /&gt; },\n    { href: config.socials.strava, title: \"Max Dietrich on Strava\", icon: &lt;SiStrava /&gt; },\n    { href: config.socials.xing, title: \"Max Dietrich on Xing\", icon: &lt;FaXing /&gt; },\n    { href: config.socials.linkedin, title: \"Max Dietrich on Linkedin\", icon: &lt;FaLinkedin /&gt; }\n  ];\n\n  return (\n    &lt;&gt;\n      &lt;Background /&gt;\n      &lt;CookieContainer&gt;\n        &lt;CookieInnerContainer&gt;\n          &lt;Wrapper&gt;\n            &lt;CookieHeader&gt;\n              &lt;Logo /&gt;\n              &lt;Image\n                src=\"/logos/android/android-launchericon-48-48.png\"\n                width=\"48\"\n                height=\"48\"\n                title=\"Max Dietrich\"\n                alt=\"Photo of Max Dietrich\"\n                className=\"profile u-photo\"\n              /&gt;\n            &lt;/CookieHeader&gt;\n\n            &lt;CookieBannerText&gt;\n              &lt;CookieHeadline&gt;Hi, welcome on mxd.codes 👋&lt;/CookieHeadline&gt;\n              &lt;CookieContentBlock&gt;\n                &lt;p&gt;You can easily support me by accepting optional (third-party)\n                cookies. These cookies will help with the following:&lt;/p&gt;\n                &lt;CookieTextList&gt;\n                  &lt;CookieTextItem&gt;\n                  &lt;b&gt;Collect audience interaction data and site statistics&lt;/b&gt;\n                  &lt;/CookieTextItem&gt;\n                  &lt;CookieTextItem&gt;\n                    &lt;b&gt;Deliver advertisements and measure the effectiveness of\n                    advertisements&lt;/b&gt;\n                  &lt;/CookieTextItem&gt;\n                  &lt;CookieTextItem&gt;\n                  &lt;b&gt;Show personalized content (depending on your settings)&lt;/b&gt;\n                  &lt;/CookieTextItem&gt;\n                &lt;/CookieTextList&gt;\n              &lt;/CookieContentBlock&gt;\n              &lt;Text&gt;\n                         &lt;p&gt;\n            If you prefer not to share data but still want to support, visit &lt;TextLink href=\"/support\"&gt;mxd.codes/support&lt;/TextLink&gt; or connect via socials:\n            &lt;List&gt;\n              {socialLinks.map(({ href, title, icon }) =&gt; (\n                &lt;SocialItem key={href} title={title}&gt;\n                  &lt;a href={href} title={title}&gt;{icon}&lt;/a&gt;\n                &lt;/SocialItem&gt;\n              ))}\n            &lt;/List&gt;\n          &lt;/p&gt;\n                &lt;p&gt;\n                  For more information about cookies and how they are used\n                  please have a look at the Privacy Policy.\n                &lt;/p&gt;\n              &lt;/Text&gt;\n\n              &lt;Link href=\"/privacy-policy\" legacyBehavior&gt;\n                &lt;CookieLink&gt;Privacy Policy&lt;/CookieLink&gt;\n              &lt;/Link&gt;\n              &lt;Link href=\"/site-notice\" legacyBehavior&gt;\n                &lt;CookieLink&gt;Site Notice&lt;/CookieLink&gt;\n              &lt;/Link&gt;\n            &lt;/CookieBannerText&gt;\n\n            &lt;ButtonContainer&gt;\n            &lt;Button onClick={() =&gt; handleConsent(false)} backgroundColor=\"var(--content-bg)\" color=\"#70757a\"&gt;\n              Accept required cookies\n            &lt;/Button&gt;\n            &lt;Button onClick={() =&gt; handleConsent(true)}&gt;Accept required and optional cookies&lt;/Button&gt;\n          &lt;/ButtonContainer&gt;\n          &lt;/Wrapper&gt;\n        &lt;/CookieInnerContainer&gt;\n      &lt;/CookieContainer&gt;\n    &lt;/&gt;\n  );\n};\n\nexport default CookieBanner;\n</code></pre>\n<p>If you also want to know how the previously mentioned <code>enableGoogleAnalytics</code> and <code>enableGoogleAdsense()</code> functions work keep reading.</p>\n<h2 id=\"googleanalyticsinnextjsapplications\">Google Analytics in Next.js applications</h2>\n<p>To enable Google Analytics, three functions are used:</p>\n<ul>\n<li><code>addGoogleAnalytics()</code> - Injects the analytics script into the document head.</li>\n<li><code>initializeGoogleAnalytics()</code> - Configures and initializes Google Analytics.</li>\n<li><code>trackGoogleAnalytics()</code> - Tracks page views when users navigate.</li>\n</ul>\n<pre><code class=\"javascript language-javascript\">export function enableGoogleAnalytics () {\n    addGoogleAnalytics().then((status) =&gt; {\n      if (status) {\n        initializeGoogleAnalytics()\n        trackGoogleAnalytics()\n      }\n    })\n}\n</code></pre>\n<p>First of all the Analytics script will be created and appended with the individual <code>GA_TRACKING_ID</code> to the head-element.</p>\n<pre><code class=\"javascript language-javascript\">export function addGoogleAnalytics () {\n    return new Promise((resolve, reject) =&gt; {\n      const head = document.getElementsByTagName('head')[0]\n      const scriptElement = document.createElement(`script`)\n      scriptElement.type = `text/javascript`\n      scriptElement.async\n      scriptElement.defer\n      scriptElement.src = `https://www.googletagmanager.com/gtag/js?id=${process.env.NEXT_PUBLIC_GA_TRACKING_ID}`\n      scriptElement.onload = () =&gt; {\n        resolve(true)\n      }\n      head.appendChild(scriptElement);\n    });\n}\n</code></pre>\n<p>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.</p>\n<pre><code class=\"javascript language-javascript\">export function initializeGoogleAnalytics () {\n    window.dataLayer = window.dataLayer || [];\n    window.gtag = function(){window.dataLayer.push(arguments);}\n    window.gtag('js', new Date())\n    window.gtag('config', process.env.NEXT_PUBLIC_GA_TRACKING_ID, {\n      'anonymize_ip': true,\n      'allow_google_signals': true\n    })\n    const pagePath = location ? location.pathname + location.search + location.hash : undefined\n    window.gtag(`event`, `page_view`, { page_path: pagePath })\n}\n</code></pre>\n<p>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).</p>\n<pre><code class=\"javascript language-javascript\">export function trackGoogleAnalytics () {\n    Router.events.on('routeChangeComplete', (url) =&gt; {\n      window.gtag(`event`, `page_view`, { page_path: url })\n    });\n}\n</code></pre>\n<p>So by calling the function <code>enableGoogleAnalytics()</code> 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.</p>\n<p>You also can have a look at <a href=\"https://github.com/dietrichmax/google-analytics-next\">https://github.com/dietrichmax/google-analytics-next</a> which shows you how you can integrate Google Analytics in Nextjs.</p>\n<h2 id=\"googleadsenseinnextjsapplications\">Google Adsense in Next.js applications</h2>\n<p>The <code>enableGoogleAdsense()</code> function is similiar to the <code>enableGoogleAnalytics()</code> function. It will also create the default Google Adsense script and place it into the head of your react application.</p>\n<pre><code class=\"javascript language-javascript\">export function enableGoogleAdsense () {\n    const head = document.getElementsByTagName('head')[0]\n    const scriptElement = document.createElement(`script`)\n    scriptElement.type = `text/javascript`\n    scriptElement.async\n    scriptElement.src = `https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=${process.env.NEXT_PUBLIC_ADSENSE_ID}`\n    scriptElement.crossOrigin = \"anonymous\"\n    head.appendChild(scriptElement);\n}\n</code></pre>\n<p>Afterwards you just need to place ad containers with the according client and slot id.</p>\n<pre><code class=\"javascript language-javascript\">import styled from 'styled-components';\nimport { useEffect, useState } from 'react';\n\nexport function GoogleAdsenseContainer ( { client, slot }) {\n\n  useEffect(() =&gt; {\n    (window.adsbygoogle = window.adsbygoogle || []).push({});\n  }, []);\n\n  const AdLabel = styled.span`\n    font-size: 12px;\n  `\n\n  return (\n    &lt;div \n      style={{textAlign: 'left',overflow: 'hidden'}}\n    &gt;\n    &lt;AdLabel&gt;Advertisment&lt;/AdLabel&gt;\n      &lt;ins\n        className=\"adsbygoogle\"\n        style={{ display: \"block\" }}\n        data-ad-client={client}\n        data-ad-slot={slot}\n        data-ad-format=\"auto\"\n        data-full-width-responsive=\"true\"\n      &gt;&lt;/ins&gt;\n\n    &lt;/div&gt;\n  );     \n}\n</code></pre>\n<p>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.</p>","date_published":"2022-09-23T16:33:29.179Z","date_modified":"2025-06-09T18:19:02.377Z","tags":["react","next-js","gatsby","data-privacy"],"image":"https://mxd.codes/content/posts/published/how-to-create-a-custom-cookie-banner-for-your-react-application/cover.webp","banner_image":"https://mxd.codes/content/posts/published/how-to-create-a-custom-cookie-banner-for-your-react-application/cover.webp","authors":[{"name":"Max Dietrich","url":"https://mxd.codes"}]},{"id":"https://mxd.codes/articles/how-to-build-a-related-posts-component-for-your-react-blog","url":"https://mxd.codes/articles/how-to-build-a-related-posts-component-for-your-react-blog","title":"How to build a related posts component for your Next.js blog","summary":"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.","content_html":"<p>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 Nextjs and in this article I want to show you how you also can do it for your own Next.js site or any other react application.</p>\n<h2 id=\"relatedpostscomponent\">Related Posts Component</h2>\n<p>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</p>\n<ul>\n<li>a title,</li>\n<li>a description</li>\n<li>a date,</li>\n<li>tags and</li>\n<li>an image.</li>\n</ul>\n<pre><code class=\"markdown language-markdown\">---\ntitle: \"Post about Web-Development with React\"\ndescription: \"This is a sample description for the post.\"\ndate: \"2022-05-02\"\ntags: [\"React\", \"Web-Development\"]\nimage: \"../image.jpg\"\n---\n</code></pre>\n<p>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.</p>\n<pre><code class=\"javascript language-javascript\">export async function getAllPosts() {\n  const data = await fetchStrapiAPI(\n    `\n    {\n      posts(sort: \"published_at:desc\") {\n        id\n        published_at\n        title\n        slug\n        content\n        excerpt\n        tags {\n          name\n        }\n        coverImage {\n          url\n        }\n      }\n    }\n  `\n  )\n  return data?.posts\n}\n</code></pre>\n<p>The only relevant information here is the slug and the tags with their names.</p>\n<p>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.</p>\n<pre><code class=\"javascript language-javascript\">// filter out current post\nlet posts = allPosts.filter((aPost) =&gt; aPost.slug !==post.slug);\n\n// define maxPosts to display\nconst maxPosts = 3\n</code></pre>\n<p>For better readability I assigned the tasks of the current posts to a variable called currentTags</p>\n<pre><code class=\"javascript language-javascript\">// get tags of current posts\nconst currentTags = post.tags.map((tag) =&gt; {\n  return tag.name\n})\n</code></pre>\n<p>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.</p>\n<pre><code class=\"javascript language-javascript\">    // rate posts depending on tags\n    posts.forEach((post) =&gt; {\n        post.relevance = 0\n        post.tags.forEach((tag) =&gt; {\n            if (currentTags.includes(tag.name)) {\n                post.relevance ++\n            }\n        })\n    })\n</code></pre>\n<p>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.</p>\n<p>Then you can sort the array of all posts descending by relevance.</p>\n<pre><code class=\"javascript language-javascript\">    // sort posts by relevance\n    const sortedPosts = posts.sort(function(a, b) {\n        return b.relevance - a.relevance;\n    });\n</code></pre>\n<p>In the end you can slice them with maxPosts and finally render them.</p>\n<pre><code class=\"javascript language-javascript\">import PostPreview from 'src/components/article/article-preview/article-preview'\n\nexport default function RecommendedPosts({ post, allPosts }) {\n\n    // filter out current post\n    let posts = allPosts.filter((aPost) =&gt; aPost.slug !==post.slug);\n\n    // define maxPosts to display\n    const maxPosts = 3\n\n    // get tags of current posts\n    const tags = post.tags.map((tag) =&gt; {\n        return tag.name\n    })\n\n    // rate posts depending on tags\n    posts.forEach((post) =&gt; {\n        post.relevance = 0\n        post.tags.forEach((tag) =&gt; {\n            if (tags.includes(tag.name)) {\n                post.relevance ++\n            }\n        })\n    })\n\n    // sort posts by relevance\n    const sortedPosts = posts.sort(function(a, b) {\n        return b.relevance - a.relevance;\n    });\n\n    return (\n        &lt;&gt;\n          {sortedPosts.slice(0,maxPosts).map((post, i) =&gt; (\n            &lt;PostPreview\n              key={i} \n              postData={post}\n            /&gt;\n          ))}\n        &lt;/&gt;\n    )\n  }\n</code></pre>","date_published":"2022-09-23T16:25:27.329Z","date_modified":"2025-02-01T16:49:08.742Z","tags":["react","next-js","gatsby"],"image":"https://mxd.codes/content/posts/published/how-to-build-a-related-posts-component-for-your-react-blog/cover.png","banner_image":"https://mxd.codes/content/posts/published/how-to-build-a-related-posts-component-for-your-react-blog/cover.png","authors":[{"name":"Max Dietrich","url":"https://mxd.codes"}]},{"id":"https://mxd.codes/articles/how-to-add-google-adsense-to-next-js-applications","url":"https://mxd.codes/articles/how-to-add-google-adsense-to-next-js-applications","title":"How to add Google Adsense to Next.js applications","summary":"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.","content_html":"<p>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.</p>\n<p>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.</p>\n<h2 id=\"addgoogleadsensescript\">Add Google Adsense script</h2>\n<p>The first part will load the actual Adsense script. This script is typically placed between the <code>&lt;head&gt;&lt;/head&gt;</code> or <code>&lt;body&gt;&lt;/body&gt;</code> section.</p>\n<p>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.</p>\n<pre><code class=\"javascript language-javascript\">export function enableGoogleAdsense () {\n    const head = document.getElementsByTagName('head')[0]\n    const scriptElement = document.createElement(`script`)\n    scriptElement.type = `text/javascript`\n    scriptElement.async\n    scriptElement.src = `https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=${process.env.NEXT_PUBLIC_ADSENSE_ID}`\n    scriptElement.crossOrigin = \"anonymous\"\n    head.appendChild(scriptElement);\n}\n</code></pre>\n<p>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 <code>&lt;head&gt;&lt;/head&gt;</code> section.</p>\n<p>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.</p>\n<p>Otherwise, if you want to place ad units individually you can do this now like the following.</p>\n<h2 id=\"addadunits\">Add ad units</h2>\n<p>I would recommend to create a separate component for ad units. This could look like the following:</p>\n<pre><code class=\"javascript language-javascript\">import styled from 'styled-components';\nimport { useEffect } from 'react';\n\nexport function GoogleAdsenseContainer ( { client, slot }) {\n\n  useEffect(() =&gt; {\n    (window.adsbygoogle = window.adsbygoogle || []).push({});\n  }, []);\n\n  const AdLabel = styled.span`\n    font-size: 12px;\n  `\n\n  return (\n    &lt;div \n      style={{textAlign: 'left',overflow: 'hidden'}}\n    &gt;\n    &lt;AdLabel&gt;Advertisment&lt;/AdLabel&gt;\n      &lt;ins\n        className=\"adsbygoogle\"\n        style={{ display: \"block\" }}\n        data-ad-client={client}\n        data-ad-slot={slot}\n        data-ad-format=\"auto\"\n        data-full-width-responsive=\"true\"\n      &gt;&lt;/ins&gt;\n\n    &lt;/div&gt;\n  );     \n}\n</code></pre>\n<p>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 <code>window.adsbygoogle</code> in the useEffect hook will fill this ad unit with the actual advertisement graphics.</p>\n<p>With the useEffect hook ads will also be requested/refreshed when a user navigates to any other page without refreshing the page.</p>","date_published":"2022-09-23T16:20:33.302Z","date_modified":"2025-01-20T18:45:53.013Z","tags":["react","next-js","a-1"],"image":"https://mxd.codes/content/posts/published/how-to-add-google-adsense-to-next-js-applications/cover.png","banner_image":"https://mxd.codes/content/posts/published/how-to-add-google-adsense-to-next-js-applications/cover.png","authors":[{"name":"Max Dietrich","url":"https://mxd.codes"}]},{"id":"https://mxd.codes/articles/how-to-deploy-your-gatsby-site-on-your-own-server","url":"https://mxd.codes/articles/how-to-deploy-your-gatsby-site-on-your-own-server","title":"How to deploy your GatsbyJS site on your own server","summary":"With 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.","content_html":"<p>With <a href=\"https://www.gatsbyjs.com/gatsby-4/\">Gatsby 4</a> 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.</p>\n<p>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.</p>\n<p>Therefore i will be using</p>\n<ul>\n<li>Gatsby 4,Nginx,</li>\n<li>Nginx</li>\n<li>PM2 and</li>\n<li>Github webhooks.</li>\n</ul>\n<h2 id=\"setupyourserver\">Setup your server</h2>\n<p>First of all you need an server with root access. I strongly recommend to have a look at the guide <a href=\"https://www.digitalocean.com/community/tutorials/initial-server-setup-with-ubuntu-18-04\">\"Initial Server Setup with Ubuntu 18.04\"</a> from the DigitalOcean community which will lead you through the process of:</p>\n<ul>\n<li>Logging in and set up root user access to your server with SSH</li>\n<li>Creating a new user</li>\n<li>Granting Administrative Privileges to the new user</li>\n<li>Setting up a basic firewall</li>\n<li>Giving your regular user access to the server with SSH key authentication.</li>\n</ul>\n<p>After you have done that you can continue by installing all necessary dependencies on your server.\nInstall Node.js</p>\n<p>Again there is an guide by DigitalOcean which will help you <a href=\"https://www.digitalocean.com/community/tutorials/how-to-install-node-js-on-ubuntu-18-04#installing-using-a-ppa\">installing Node.js using PPA</a>.</p>\n<p>After completing</p>\n<ul>\n<li>install Node.js, NPM and</li>\n<li>the \"build-essential package\"</li>\n</ul>\n<p>you will have to change npm's default directory.</p>\n<p>Create a <code>.npm-global</code> directory and set the path to this directory for <code>node_modules</code>:</p>\n<pre><code class=\"bash language-bash\">cd ~\nmkdir ~/.npm-global\nnpm config set prefix '~/.npm-global'\n</code></pre>\n<p>Create (or modify) a <code>~/.profile</code> and add the following line:</p>\n<pre><code class=\"bash language-bash\">sudo nano ~/.profile\n\n# set PATH so global node modules install without permission issues\nexport PATH=~/.npm-global/bin:$PATH\n</code></pre>\n<p>Now you have to update your system variables:</p>\n<pre><code class=\"bash language-bash\">source ~/.profile\n</code></pre>\n<p>Now you should be able to check your installed Node.js version with:</p>\n<pre><code class=\"bash language-bash\">node -v\n</code></pre>\n<h2 id=\"installgit\">Install git</h2>\n<p>Check if git is already installed with:</p>\n<pre><code class=\"bash language-bash\">git --version\n</code></pre>\n<p>If it isn't installed yet you can install it with</p>\n<pre><code class=\"bash language-bash\">sudo apt install git\n</code></pre>\n<p>and configure Git with</p>\n<pre><code class=\"bash language-bash\">git config --global user.name \"Your Name\"\ngit config --global user.email \"youremail@domain.com\"\n</code></pre>\n<p>After git is installed and configured you can deploy your Gatsby site by cloning it from Github.</p>\n<h2 id=\"deployfromgithub\">Deploy from Github</h2>\n<p>It is important that you are loggin in as <strong>non-root</strong> user for the following steps.</p>\n<pre><code class=\"bash language-bash\">cd ~\ngit clone https://github.com/your-githubuser/your-gatsby-repo.git path your-gatsby-site\n</code></pre>\n<p>After you have deployed your project (optionally with environment variables) you can install all dependencies and build your Gatsby site with:</p>\n<pre><code class=\"bash language-bash\">cd ./your-gatsby-site/\nnpm install\nnpm run build\n</code></pre>\n<p>Now you should have a copy of your local project/Gatsby site on your remote server.</p>\n<p>Next you are going to setup PM2 which will be used to keep your site alive and restart it with every reboot.</p>\n<h2 id=\"setuppm2\">Setup PM2</h2>\n<p>You can install PM2 with:</p>\n<pre><code class=\"bash language-bash\">npm install pm2@latest -g\n</code></pre>\n<p>You will need to create/configure an <code>ecosystem.config.js</code> file which will restart the default Gatsby server.</p>\n<pre><code class=\"bash language-bash\">cd ~\npm2 init\nsudo nano ecosystem.config.js\n</code></pre>\n<p>Copy/paste the template and replace the content.</p>\n<pre><code class=\"javascript language-javascript\">module.exports = {\n  apps: [\n    {\n      name: 'gatsby-site',\n      cwd: ' /home/your-name/my-gatsby-site',\n      script: 'npm',\n      args: 'serve',\n      env: {\n        //NODE_ENV: 'production',\n      },\n    },\n    // optionally a second project\n],};\n</code></pre>\n<p>With</p>\n<pre><code class=\"bash language-bash\">cd ~\npm2 start ecosystem.config.js\n</code></pre>\n<p>you can start your server which will run on the Port 9000.</p>\n<p>You can always check the status with:</p>\n<pre><code class=\"bash language-bash\">pm2 status\n</code></pre>\n<p>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.\nGenerate and configure a startup script to launch PM2:</p>\n<pre><code class=\"bash language-bash\">cd ~\npm2 startup systemd\n\n[PM2] Init System found: systemd\n[PM2] To setup the Startup Script, copy/paste the following command:\n**sudo env PATH=$PATH:/usr/bin /usr/lib/node_modules/pm2/bin/pm2 startup systemd -u your-name --hp /home/your-name**\n</code></pre>\n<ul>\n<li>Copy/paste the generated command:</li>\n</ul>\n<pre><code class=\"bash language-bash\">**sudo env PATH=$PATH:/usr/bin /usr/lib/node_modules/pm2/bin/pm2 startup systemd -u your-name --hp /home/your-name**\n\n[PM2] Init System found: systemd\nPlatform systemd\n\n. . .\n\n\n[PM2] [v] Command successfully executed.\n+---------------------------------------+\n[PM2] Freeze a process list on reboot via:\n   $ pm2 save\n\n[PM2] Remove init script via:\n   $ pm2 unstartup systemd\n</code></pre>\n<ul>\n<li>And save the new PM2 process list and environments. Then Start the service with systemctl.</li>\n</ul>\n<pre><code class=\"bash language-bash\">pm2 save\n\n[PM2] Saving current process list...\n[PM2] Successfully saved in /home/your-name/.pm2/dump.pm2\n</code></pre>\n<p>If you reboot your server now with <code>sudo reboot</code> the script should be automatically restart your Gatsby site. Give it a try!</p>\n<h2 id=\"setupgithubwebhook\">Setup Github Webhook</h2>\n<p>One thing missing now is an continuos integration and continuos delivery (CI/CD) pipeline which you will setup using Github webhooks.</p>\n<p>Therefore you need to create a new Webhook in your repository.</p>\n<p>The following articles provide additional information to the steps below:</p>\n<ul>\n<li><a href=\"https://docs.github.com/en/developers/webhooks-and-events/webhooks/creating-webhooks#setting-up-a-webhook\">GitHub Creating Webhooks Guide</a> and</li>\n<li><a href=\"https://www.digitalocean.com/community/tutorials/how-to-use-node-js-and-github-webhooks-to-keep-remote-projects-in-sync\">DigitalOcean Guide to GitHub WebHooks</a>.</li>\n</ul>\n<p>You need to create a server script which will do something if it is triggered by the Github webhook.</p>\n<pre><code class=\"bash language-bash\">cd ~\nmkdir NodeWebHooks\ncd NodeWebHooks\nsudo nano webhook.js\n</code></pre>\n<p>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.)</p>\n<p>If it gets triggered by a webhook it will</p>\n<ul>\n<li>go into your repo <code>~/my-gatsby-site/</code>,</li>\n<li>pull the latest commits,</li>\n<li>install all dependencies,</li>\n<li>build a new version of the site and</li>\n<li>restart the server via the PM2 script.</li>\n</ul>\n<pre><code class=\"javascript language-javascript\">const secret = \"your-secret-key\";\nconst repo = \"~/my-gatsby-site/\";\n\nconst http = require('http');\nconst crypto = require('crypto');\nconst exec = require('child_process').exec;\n\nconst BUILD_CMD = 'npm run build';\nconst PM2_CMD = 'pm2 restart gatsby-site';\n\nhttp.createServer(function (req, res) {\n    req.on('data', function(chunk) {\n        let sig = \"sha1=\" + crypto.createHmac('sha1', secret).update(chunk.toString()).digest('hex');\n\n        if (req.headers['x-hub-signature'] == sig) {\n            exec('cd ' + repo + ` &amp;&amp; git pull &amp;&amp; npm install &amp;&amp; ${BUILD_CMD} &amp;&amp; ${PM2_CMD}`);\n        }\n    });\n\n    res.end();\n}).listen(8100);\n</code></pre>\n<p>You will need to allow communication on Port 8100 with:</p>\n<pre><code class=\"bash language-bash\">sudo ufw allow 8100/tcp\nsudo ufw enable\n</code></pre>\n<p>Command may disrupt existing ssh connections. Proceed with operation (y|n)? y\nFirewall is active and enabled on system startup</p>\n<p>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.</p>\n<p>Run echo $PATH and copy the output for use in the next step.</p>\n<pre><code class=\"bash language-bash\">echo $PATH\n\n/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\n</code></pre>\n<p>Create a webhook.service file:</p>\n<pre><code class=\"bash language-bash\">cd ~\nsudo nano /etc/systemd/system/webhook.service\n</code></pre>\n<p>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 <code>$PATH</code>, copy this to the Environment=PATH= variable, then save and exit:</p>\n<pre><code class=\"bash language-bash\">[Unit]\nDescription=Github webhook\nAfter=network.target\n\n[Service]\nEnvironment=PATH=your_path\nType=simple\nUser=your-name\nExecStart=/usr/bin/nodejs /home/your-name/NodeWebHooks/webhook.js\nRestart=on-failure\n\n[Install]\nWantedBy=multi-user.target\n</code></pre>\n<p>Enable and start the new service so it starts when the system boots:</p>\n<pre><code class=\"bash language-bash\">sudo systemctl enable webhook.service\nsudo systemctl start webhook\n</code></pre>\n<p>Check the status of the webhook:</p>\n<pre><code class=\"bash language-bash\">sudo systemctl status webhook\n</code></pre>\n<p>You can test your webhook with these <a href=\"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\" title=\"Test Webhook\">instructions</a>.</p>\n<p>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.</p>\n<h2 id=\"configurenginx\">Configure Nginx</h2>\n<p>I am using Cloudflare to manage DNS for my domains but you can do this with every other provider also.</p>\n<p>Create two A Records which will point <code>your-domain.com</code> and <code>www.your-domain.com</code> to the IP-adress of your server.</p>\n<p>After that you will need to configure Nginx.</p>\n<p>The following instructions are based on <a href=\"https://www.digitalocean.com/community/tutorials/how-to-install-nginx-on-ubuntu-18-04-quickstart\">How To Install Nginx on Ubuntu 18.04 [Quickstart]</a>.</p>\n<ul>\n<li>Update your local package index:</li>\n</ul>\n<pre><code class=\"bash language-bash\">sudo apt update\n</code></pre>\n<ul>\n<li>install Nginx:</li>\n</ul>\n<pre><code class=\"bash language-bash\">sudo apt install nginx\n</code></pre>\n<p>and adjust the Firewall:</p>\n<pre><code class=\"bash language-bash\">sudo ufw allow 'Nginx Full'\nsudo ufw delete allow 'Nginx HTTP'\n</code></pre>\n<p>You should now be able to see the Nginx landing page on <code>http://your_server_ip</code>.</p>\n<h2 id=\"settingupserverblocks\">Setting up Server Blocks</h2>\n<p>Create the directory for your-domain.com, using the -p flag to create any necessary parent directories:</p>\n<pre><code class=\"bash language-bash\">sudo mkdir -p /var/www/your-domain.com/html\n</code></pre>\n<p>Assign ownership of the directory:</p>\n<pre><code class=\"bash language-bash\">sudo chown -R $USER:$USER /var/www/your-domain.com/html\n</code></pre>\n<p>The permissions of your web roots should be correct if you haven’t modified your umask value, but you can make sure by typing:</p>\n<pre><code class=\"bash language-bash\">sudo chmod -R 755 /var/www/example.com\n</code></pre>\n<p>Make a new server block at /etc/nginx/sites-available/your-domain.com:</p>\n<pre><code class=\"bash language-bash\">sudo nano /etc/nginx/sites-available/example.com\n</code></pre>\n<p>Copy/Paste the following Gatsby-nginx configuration and update the server_name sections:</p>\n<pre><code class=\"nginx language-nginx\">server {\n    # Listen HTTP\n    listen 80;\n    listen [::]:80;\n\n    server_name your-domain.com www.your-domain.com;\n\n    # Redirect HTTP to HTTPS\n    return 301 https://$host$request_uri;\n}\n\nserver {\n    # Listen HTTP\n    listen 443 ssl;\n    listen [::]:443 ssl;\n\n    server_name your-domain.com www.your-domain.com;\n\n    # SSL config\n    include snippets/self-signed.conf;\n    include snippets/ssl-params.conf;\n\n    # Proxy Config\n    location / {\n        proxy_pass http://localhost:9000\n        proxy_http_version 1.1;\n        proxy_set_header X-Forwarded-Host $host;\n        proxy_set_header X-Forwarded-Server $host;\n        proxy_set_header X-Real-IP $remote_addr;\n        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;\n        proxy_set_header X-Forwarded-Proto $scheme;\n        proxy_set_header Host $http_host;\n        proxy_set_header Upgrade $http_upgrade;\n        proxy_set_header Connection \"Upgrade\";\n        proxy_pass_request_headers on;\n    }\n    location ~ /.well-known {\n       allow all;\n    }\n}\n</code></pre>\n<p>Save the file and close it when you are finished.</p>\n<p>Enable the file by creating a link from it to the sites-enabled directory:</p>\n<pre><code class=\"bash language-bash\">sudo ln -s /etc/nginx/sites-available/your-domain.com /etc/nginx/sites-enabled/\n</code></pre>\n<p>Test for syntax errors:</p>\n<pre><code class=\"bash language-bash\">sudo nginx -t\n</code></pre>\n<p>and finally enable the changes:</p>\n<pre><code class=\"bash language-bash\">sudo systemctl restart nginx\n</code></pre>\n<p>Nginx should now be serving your gatsby site on your domain name. That means if you have a look at <code>http://your-domain.com</code> you should see your Gatsby site.</p>\n<p>In the end should deny traffic to Port 9000 because Nginx is handling the requests with:</p>\n<pre><code class=\"bash language-bash\">cd ~\nsudo ufw deny 9000\n</code></pre>\n<p>To install SSL, you will need to <a href=\"https://www.digitalocean.com/community/tutorials/how-to-secure-nginx-with-let-s-encrypt-on-ubuntu-18-04\">install and run Certbot by Let's Encrypt</a>.</p>","date_published":"2022-09-23T16:16:38.402Z","date_modified":"2025-02-01T16:45:09.771Z","tags":["react","gatsby","selfhosted","ci-cd","cloud"],"image":"https://mxd.codes/content/posts/published/how-to-deploy-your-gatsby-site-on-your-own-server/cover.png","banner_image":"https://mxd.codes/content/posts/published/how-to-deploy-your-gatsby-site-on-your-own-server/cover.png","authors":[{"name":"Max Dietrich","url":"https://mxd.codes"}]},{"id":"https://mxd.codes/photos/cap-formentor-mallorca","url":"https://mxd.codes/photos/cap-formentor-mallorca","title":"Cap Formentor, Mallorca","content_html":"","date_published":"2022-09-23T14:42:31.292Z","image":"https://mxd.codes/content/photos/cap-formentor-mallorca/photo-1.webp","attachments":[{"url":"https://mxd.codes/content/photos/cap-formentor-mallorca/photo-1.webp","mime_type":"image/jpeg","title":"content_IMG_20220321_114604_268e9efe5e_156a44cc2a.webp"}],"authors":[{"name":"Max Dietrich","url":"https://mxd.codes"}]},{"id":"https://mxd.codes/photos/alcudia-illes-balears-mallorca-spanien","url":"https://mxd.codes/photos/alcudia-illes-balears-mallorca-spanien","title":"Alcúdia, Illes Balears, Mallorca, Spanien","content_html":"","date_published":"2022-09-23T14:41:00.148Z","image":"https://mxd.codes/content/photos/alcudia-illes-balears-mallorca-spanien/photo-1.jpg","attachments":[{"url":"https://mxd.codes/content/photos/alcudia-illes-balears-mallorca-spanien/photo-1.jpg","mime_type":"image/jpeg","title":"cover_IMG_20220321_133245_1_626060b19d.jpg"},{"url":"https://mxd.codes/content/photos/alcudia-illes-balears-mallorca-spanien/photo-2.webp","mime_type":"image/jpeg","title":"content_IMG_20220321_114604_268e9efe5e_156a44cc2a.webp"},{"url":"https://mxd.codes/content/photos/alcudia-illes-balears-mallorca-spanien/photo-3.jpg","mime_type":"image/jpeg","title":"IMG_20220321_114725_1_4276068e14.jpg"},{"url":"https://mxd.codes/content/photos/alcudia-illes-balears-mallorca-spanien/photo-4.jpg","mime_type":"image/jpeg","title":"cover_IMG_20220322_124235_1_695b74a3aa.jpg"}],"authors":[{"name":"Max Dietrich","url":"https://mxd.codes"}]},{"id":"https://mxd.codes/articles/how-to-create-a-mapnik-stylesheet-for-displaying-any-data-from-postgre-sql-post-gis","url":"https://mxd.codes/articles/how-to-create-a-mapnik-stylesheet-for-displaying-any-data-from-postgre-sql-post-gis","title":"How to create a Mapnik stylesheet for displaying any data from PostgreSQL/PostGIS","summary":"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 can be used for a tile-server with your custom style.","content_html":"<p>2021-03-02 i started tracking my current location with <a href=\"https://owntracks.org/\" title=\"OwnTracks\">OwnTracks</a> and <a href=\"https://strapi.io/\" title=\"Strapi\">Strapi</a> (<a href=\"/articles/constant-location-tracking-with-owntracks-strapi-and-visualizing-data-with-deckgl\" title=\"How i constantly track my location and display a web-map with all the locations\">How i constantly track my location and display a web-map with all the locations</a>) and created a <a href=\"/map\" title=\"map with locations\">/map</a> which shows all the locations i have ever been to. </p>\n<p>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. \nSo 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. \nIn the end i built a tile-server following <a href=\"https://switch2osm.org/serving-tiles/manually-building-a-tile-server-20-04-lts/\" title=\"Manually building a tile server (20.04 LTS)\">Manually building a tile server (20.04 LTS)</a> with a custom Mapnik stylesheet.</p>\n<p>In this article i want to show you how you can build your own Mapnik stylesheet for displaying any data from PostgreSQL/PostGIS.</p>\n<p>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 <a href=\"https://tilemill-project.github.io/tilemill/\" title=\"TileMill\">TileMill</a> 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.</p>\n<p>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 <a href=\"https://tilemill-project.github.io/tilemill/docs/win-install/\">https://tilemill-project.github.io/tilemill/docs/win-install/</a> you can download and install TileMill.</p>\n<p>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.</p>\n<p><img src=\"content_tilemill_create_project_028d3d068a_f5f46bcd61.png\" alt=\"content_tilemill_create_project_028d3d068a.png\" /></p>\n<p>Now you will have to add some data to the project. Therefore you click on the layer button and add a new layer.</p>\n<p><img src=\"cover_tilemill_add_layer_9bfeb33806_fcce2db562.png\" alt=\"cover_tilemill_add_layer_9bfeb33806.png\" /></p>\n<p>Switch to the <strong>PostGIS</strong> tab and fill out ID, Connection, Unique key field, Geometry field and SRS. It's actually pretty straight forward. \nKeep in mind that TileMill doesn't like large datasets so i would recommend you to set some extent.</p>\n<p>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. </p>\n<p><img src=\"proj4_2c3dab1b78_f6547d0070.png\" alt=\"proj4_2c3dab1b78.png\" /></p>\n<p>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.</p>\n<pre><code class=\"config language-config\">#locations {\n   [vel &gt;= 0] { marker-width:6; marker-fill: #f45; marker-line-color: #813; marker-allow-overlap: true; }\n   [vel &gt;= 50] { marker-width:6; marker-fill: #f45; marker-line-color: #813; marker-allow-overlap: true; }\n   [vel &gt;= 100] { marker-width:6; marker-fill: #f45; marker-line-color: #813; marker-allow-overlap: true; }\n}\n</code></pre>\n<p>With CartoCSS you can also dynamically style your features depending on some attribute values. For more information about CartoCSS have a look at <a href=\"https://tilemill-project.github.io/tilemill/docs/crashcourse/styling/\" title=\"Styling data\">Styling data from TileMill</a>.</p>\n<p>When you are happy with your style you can export if as Mapnik-XML and use if for example for your tile-server.</p>\n<p><img src=\"tilemill_export_mapnik_xml_2d50702c3b_8820136598.png\" alt=\"tilemill_export_mapnik_xml_2d50702c3b.png\" /></p>\n<p>At <a href=\"/map\">/map</a> you can see my current stylesheet in 'action'.</p>","date_published":"2022-01-25T23:29:14.045Z","date_modified":"2025-02-01T16:42:47.864Z","tags":["gis","web-mapping","d-1"],"image":"https://mxd.codes/content/posts/published/how-to-create-a-mapnik-stylesheet-for-displaying-any-data-from-postgre-sql-post-gis/cover.png","banner_image":"https://mxd.codes/content/posts/published/how-to-create-a-mapnik-stylesheet-for-displaying-any-data-from-postgre-sql-post-gis/cover.png","authors":[{"name":"Max Dietrich","url":"https://mxd.codes"}]},{"id":"https://mxd.codes/links/tutorials-for-making-3-d-looking-maps-with-blender-and-qgis","url":"https://mxd.codes/links/tutorials-for-making-3-d-looking-maps-with-blender-and-qgis","title":"Tutorials for making 3D-looking maps with Blender and QGIS","external_url":"https://github.com/joewdavies/geoblender","content_html":"<p>This guide will help you prepare DEM data using QGIS in order to render 3D looking shaded-relief maps in Blender.</p>","date_published":"2021-10-04T23:04:11.679Z","authors":[{"name":"Max Dietrich","url":"https://mxd.codes"}]},{"id":"https://mxd.codes/articles/location-tracking-with-colota-postgresql-martin-and-maplibre","url":"https://mxd.codes/articles/location-tracking-with-colota-postgresql-martin-and-maplibre","title":"Location Tracking and Visualization with Colota, PostgreSQL, Martin Tile Server and MapLibre","summary":"How I track my location continuously with Colota, my self-developed Android app, store it in PostgreSQL with PostGIS, serve vector tiles via Martin and render an interactive map with MapLibre GL JS.","content_html":"<p>Inspired by Aaron Parecki who has been <a href=\"https://aaronparecki.com/gps/\" title=\"location tracking\">tracking his location since 2008</a> with an iPhone app and a server-side tracking API, I decided to build a similar system, but entirely with tools I control.</p>\n<p>My goal: continuously track my location using my Android phone, store the data in a PostgreSQL database, and visualize all historical locations on a web map. Over time the stack evolved significantly. The original setup relied on OwnTracks, a Node.js webhook, GeoServer, MapProxy and OpenLayers. Today I use:</p>\n<ol>\n<li><a href=\"https://github.com/dietrichmax/colota\">Colota</a>: my self-developed Android tracking app</li>\n<li><a href=\"https://www.postgresql.org/\">PostgreSQL</a> + <a href=\"https://postgis.net/\">PostGIS</a>: for geospatial data storage</li>\n<li><a href=\"https://martin.maplibre.org/\">Martin</a>: a lightweight vector tile server backed by PostGIS</li>\n<li><a href=\"https://maplibre.org/\">MapLibre GL JS</a>: for rendering the interactive web map</li>\n</ol>\n<h2 id=\"setuppostgresql\">Set up PostgreSQL</h2>\n<p>To install PostgreSQL with PostGIS support, first add the repository and install the packages:</p>\n<pre><code class=\"bash language-bash\">sudo apt update\nsudo apt install gnupg2 wget vim\nsudo sh -c 'echo \"deb https://apt.postgresql.org/pub/repos/apt $(lsb_release -cs)-pgdg main\" &gt; /etc/apt/sources.list.d/pgdg.list'\ncurl -fsSL https://www.postgresql.org/media/keys/ACCC4CF8.asc | sudo gpg --dearmor -o /etc/apt/trusted.gpg.d/postgresql.gpg\nsudo apt update\nsudo apt-get -y install postgresql postgresql-contrib postgis\n</code></pre>\n<p>Start and enable the service:</p>\n<pre><code class=\"bash language-bash\">sudo systemctl start postgresql\nsudo systemctl enable postgresql\n</code></pre>\n<p>Connect and create a database and user:</p>\n<pre><code class=\"bash language-bash\">sudo su postgres\npsql\n</code></pre>\n<pre><code class=\"sql language-sql\">CREATE DATABASE locations;\nCREATE USER &lt;username&gt; WITH ENCRYPTED PASSWORD '&lt;password&gt;';\nGRANT ALL PRIVILEGES ON DATABASE locations TO &lt;username&gt;;\n</code></pre>\n<p>Create the locations table:</p>\n<pre><code class=\"sql language-sql\">CREATE TABLE public.locations (\n  id bigserial NOT NULL,\n  created_at timestamptz NULL DEFAULT CURRENT_TIMESTAMP,\n  lat float8 NULL,\n  lon float8 NULL,\n  acc int4 NULL,\n  alt int4 NULL,\n  batt int4 NULL,\n  bs int4 NULL,\n  cog numeric(10, 2) NULL,\n  rad int4 NULL,\n  t varchar(255) NULL,\n  tid varchar(255) NULL,\n  tst int4 NULL,\n  vac int4 NULL,\n  vel int4 NULL,\n  p numeric(10, 2) NULL,\n  conn varchar(255) NULL,\n  topic varchar(255) NULL,\n  inregions jsonb NULL,\n  ssid varchar(255) NULL,\n  bssid varchar(255) NULL\n);\n</code></pre>\n<p>The key columns are <code>lat</code>, <code>lon</code> and <code>alt</code>. The others (velocity, battery level, connection type) are used on my <a href=\"/now\">/now</a> page to show what I am currently up to.</p>\n<h2 id=\"creatingapostgisgeometryview\">Creating a PostGIS geometry view</h2>\n<p>Enable the PostGIS extension and create a view that exposes a proper geometry column:</p>\n<pre><code class=\"sql language-sql\">\\c locations\nCREATE EXTENSION postgis;\n</code></pre>\n<pre><code class=\"sql language-sql\">CREATE OR REPLACE VIEW public.locations_geom AS\nSELECT\n  id,\n  lat,\n  lon,\n  alt,\n  vel,\n  ST_SetSRID(ST_MakePoint(lon, lat, alt::double precision), 4326) AS geom\nFROM locations;\n</code></pre>\n<p>This view is what Martin will query to generate vector tiles.</p>\n<h2 id=\"settingupcolota\">Setting up Colota</h2>\n<p><a href=\"https://github.com/dietrichmax/colota\">Colota</a> is the Android app I built to replace OwnTracks. It is written in React Native (TypeScript + Kotlin) and sends location payloads in the OwnTracks HTTP format, which makes it compatible with the webhook described below. It supports tracking profiles, geofencing and multiple backends including custom endpoints.</p>\n<h2 id=\"settingupthelocationswebhook\">Setting up the locations webhook</h2>\n<p>To receive location payloads from Colota and write them to PostgreSQL, I run a small Node.js HTTP server. Colota sends a JSON POST request for each location update in the OwnTracks format. The server parses the body and inserts the relevant fields into the <code>locations</code> table.</p>\n<pre><code class=\"javascript language-javascript\">const http = require(\"http\");\nconst { Pool } = require(\"pg\");\n\nconst pool = new Pool({\n  user: \"username\",\n  database: \"locations\",\n  password: \"password\",\n  port: 5432,\n  host: \"localhost\",\n});\n\nasync function insertData(body) {\n  try {\n    await pool.query(\n      \"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)\",\n      [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]\n    );\n  } catch (error) {\n    console.error(error);\n  }\n}\n\nconst server = http.createServer((request, response) =&gt; {\n  let body = [];\n  if (request.method === \"POST\") {\n    request.on(\"data\", (chunk) =&gt; body.push(chunk)).on(\"end\", () =&gt; {\n      insertData(JSON.parse(Buffer.concat(body).toString()));\n    });\n  }\n  response.end();\n});\n\nserver.listen(9001);\n</code></pre>\n<p>The server listens on port 9001. Point Colota at <code>http://yourserverip:9001</code> and location data will start flowing into the database. In production, add an API key check in the request handler to restrict access to authorized clients only.</p>\n<h2 id=\"servingvectortileswithmartin\">Serving vector tiles with Martin</h2>\n<p><a href=\"https://martin.maplibre.org/\">Martin</a> is a Rust-based tile server that reads directly from PostGIS and serves vector tiles (MVT) with no heavy backend required.</p>\n<p>Run Martin with Docker Compose:</p>\n<pre><code class=\"yaml language-yaml\">services:\n  martin:\n    image: ghcr.io/maplibre/martin:latest\n    container_name: martin\n    restart: always\n    ports:\n      - \"3000:3000\"\n    environment:\n      DATABASE_URL: postgresql://&lt;username&gt;:&lt;password&gt;@&lt;host&gt;/locations\n    command:\n      - --listen-addresses=0.0.0.0:3000\n</code></pre>\n<p>Martin will automatically detect all tables and views with a geometry column and expose them as tile endpoints. The <code>locations_geom</code> view created earlier becomes available at:</p>\n<pre><code>https://your-server/martin/locations_geom/{z}/{x}/{y}\n</code></pre>\n<p>You can verify it is working by opening the tilejson endpoint:</p>\n<pre><code>https://your-server/martin/locations_geom\n</code></pre>\n<h2 id=\"renderingthemapwithmaplibre\">Rendering the map with MapLibre</h2>\n<p><a href=\"https://maplibre.org/\">MapLibre GL JS</a> is an open-source fork of Mapbox GL JS that renders vector tiles using WebGL. I use <a href=\"https://openfreemap.org/\">OpenFreeMap</a> as the basemap, which provides free hosted vector tiles based on OpenStreetMap.</p>\n<p>The map component for my website reads the current theme (<code>data-theme</code> attribute on <code>&lt;html&gt;</code>) and switches between light and dark basemap styles accordingly:</p>\n<pre><code class=\"tsx language-tsx\">import { useEffect, useRef } from \"react\";\nimport maplibregl from \"maplibre-gl\";\nimport \"maplibre-gl/dist/maplibre-gl.css\";\n\nconst STYLE_LIGHT = \"https://tiles.openfreemap.org/styles/bright\";\nconst STYLE_DARK = \"https://tiles.openfreemap.org/styles/dark\";\n\nfunction getStyle(): string {\n  const attr = document.documentElement.getAttribute(\"data-theme\");\n  const prefersDark = window.matchMedia(\"(prefers-color-scheme: dark)\").matches;\n  return attr === \"dark\" || (!attr &amp;&amp; prefersDark) ? STYLE_DARK : STYLE_LIGHT;\n}\n\nconst LiveMap = ({ coords }: { coords?: { lat: number; lon: number } }) =&gt; {\n  const mapElement = useRef&lt;HTMLDivElement&gt;(null);\n\n  useEffect(() =&gt; {\n    if (!mapElement.current) return;\n\n    const getPrimaryColor = () =&gt;\n      getComputedStyle(document.documentElement)\n        .getPropertyValue(\"--primary-color\")\n        .trim() || \"#39b5e0\";\n\n    const addLocationsLayer = (map: maplibregl.Map) =&gt; {\n      map.addSource(\"locations\", {\n        type: \"vector\",\n        tiles: [\"https://your-martin-server/locations_geom/{z}/{x}/{y}\"],\n        minzoom: 0,\n        maxzoom: 16,\n      });\n      map.addLayer({\n        id: \"locations\",\n        type: \"circle\",\n        source: \"locations\",\n        \"source-layer\": \"locations_geom\",\n        paint: {\n          \"circle-radius\": 3,\n          \"circle-color\": getPrimaryColor(),\n          \"circle-opacity\": 0.7,\n        },\n      });\n    };\n\n    const map = new maplibregl.Map({\n      container: mapElement.current,\n      style: getStyle(),\n      center: [coords?.lon ?? -15.439457, coords?.lat ?? 28.128124],\n      zoom: 10,\n    });\n\n    map.on(\"load\", () =&gt; addLocationsLayer(map));\n\n    // Switch style when theme changes\n    const observer = new MutationObserver(() =&gt; {\n      map.setStyle(getStyle());\n      map.once(\"styledata\", () =&gt; {\n        if (!map.getSource(\"locations\")) addLocationsLayer(map);\n        map.setPaintProperty(\"locations\", \"circle-color\", getPrimaryColor());\n      });\n    });\n\n    observer.observe(document.documentElement, {\n      attributes: true,\n      attributeFilter: [\"data-theme\"],\n    });\n\n    return () =&gt; {\n      observer.disconnect();\n      map.remove();\n    };\n  }, []);\n\n  return &lt;div style={{ height: \"100%\", width: \"100%\" }} ref={mapElement} /&gt;;\n};\n\nexport default LiveMap;\n</code></pre>\n<p>The <code>MutationObserver</code> watches for <code>data-theme</code> changes and swaps the basemap style on the fly, then re-adds the locations layer once the new style has loaded.</p>\n<p><ThemeDemo /></p>\n<p>The result is the interactive map on <a href=\"/map\">/map</a>. It is limited to Gran Canaria for privacy reasons.</p>\n<p><LiveMap /></p>","date_published":"2021-09-27T22:24:27.746Z","date_modified":"2026-03-19T00:00:00.000Z","tags":["gis","web-mapping","react","indie-web","selfhosted","data-privacy"],"authors":[{"name":"Max Dietrich","url":"https://mxd.codes"}]},{"id":"https://mxd.codes/links/simple-image-placeholders-with-svg","url":"https://mxd.codes/links/simple-image-placeholders-with-svg","title":"Simple Image Placeholders with SVG ","external_url":"https://cloudfour.com/thinks/simple-svg-placeholder/","content_html":"<p>Tyler Sticka published an article on cloudflour where he presents an awsome library he made which allows you to create svg placeholders for img-elements.</p>","date_published":"2021-07-30T20:54:53.706Z","authors":[{"name":"Max Dietrich","url":"https://mxd.codes"}]},{"id":"https://mxd.codes/photos/bruennstein-1","url":"https://mxd.codes/photos/bruennstein-1","title":"Brünnstein","content_html":"<p>Went on top of the Brünnstein via the Dr.-Julius-Mayr-Weg and took a rest at the Brünnsteinhaus 🍰. </p>","date_published":"2021-07-21T18:31:27.825Z","image":"https://mxd.codes/content/photos/bruennstein-1/photo-1.jpg","attachments":[{"url":"https://mxd.codes/content/photos/bruennstein-1/photo-1.jpg","mime_type":"image/jpeg","title":"cover_IMG_20210721_120725_76dd2f7513.jpg"},{"url":"https://mxd.codes/content/photos/bruennstein-1/photo-2.jpg","mime_type":"image/jpeg","title":"cover_IMG_20210721_101803_07142b724d.jpg"},{"url":"https://mxd.codes/content/photos/bruennstein-1/photo-3.jpg","mime_type":"image/jpeg","title":"cover_IMG_20210721_113524_eaff00f9e9.jpg"},{"url":"https://mxd.codes/content/photos/bruennstein-1/photo-4.jpg","mime_type":"image/jpeg","title":"cover_IMG_20210721_114207_17e0a4e1da.jpg"},{"url":"https://mxd.codes/content/photos/bruennstein-1/photo-5.jpg","mime_type":"image/jpeg","title":"cover_IMG_20210721_103939_21012d7c1e.jpg"},{"url":"https://mxd.codes/content/photos/bruennstein-1/photo-6.jpg","mime_type":"image/jpeg","title":"cover_IMG_20210721_114159_85779758d6.jpg"},{"url":"https://mxd.codes/content/photos/bruennstein-1/photo-7.jpg","mime_type":"image/jpeg","title":"cover_IMG_20210721_125420_e03ab1f8a0.jpg"}],"authors":[{"name":"Max Dietrich","url":"https://mxd.codes"}]},{"id":"https://mxd.codes/photos/hiking-up-the-bruennstein","url":"https://mxd.codes/photos/hiking-up-the-bruennstein","title":"Hiking up the Brünnstein","content_html":"","date_published":"2021-07-20T12:14:59.306Z","image":"https://mxd.codes/content/photos/hiking-up-the-bruennstein/photo-1.jpg","attachments":[{"url":"https://mxd.codes/content/photos/hiking-up-the-bruennstein/photo-1.jpg","mime_type":"image/jpeg","title":"35618167_943146972529735_8494513286404898816_n_23cc6300b7.jpg"}],"authors":[{"name":"Max Dietrich","url":"https://mxd.codes"}]},{"id":"https://mxd.codes/links/checklist-the-a11-y-project","url":"https://mxd.codes/links/checklist-the-a11-y-project","title":"Checklist - The A11Y Project","external_url":"https://www.a11yproject.com/checklist/","content_html":"<p>The creator/s of a11yproject.com have created a checklist for reviewing a website in terms of accessibility.</p>","date_published":"2021-07-17T09:31:51.230Z","authors":[{"name":"Max Dietrich","url":"https://mxd.codes"}]},{"id":"https://mxd.codes/photos/kranzhorn-05-21","url":"https://mxd.codes/photos/kranzhorn-05-21","title":"Kranzhorn 05/21","content_html":"<p>Pretty easy climb with phenomenal view. ⛰️</p>","date_published":"2021-05-28T08:34:27.743Z","image":"https://mxd.codes/content/photos/kranzhorn-05-21/photo-1.jpg","attachments":[{"url":"https://mxd.codes/content/photos/kranzhorn-05-21/photo-1.jpg","mime_type":"image/jpeg","title":"cover_IMG_20210530_100622_66c9699a84.jpg"},{"url":"https://mxd.codes/content/photos/kranzhorn-05-21/photo-2.jpg","mime_type":"image/jpeg","title":"cover_IMG_20210530_092227_59e6de9300.jpg"},{"url":"https://mxd.codes/content/photos/kranzhorn-05-21/photo-3.jpg","mime_type":"image/jpeg","title":"cover_IMG_20210530_085208_2f701b9c36.jpg"},{"url":"https://mxd.codes/content/photos/kranzhorn-05-21/photo-4.jpg","mime_type":"image/jpeg","title":"cover_IMG_20210530_100628_ccc50fa4bf.jpg"}],"authors":[{"name":"Max Dietrich","url":"https://mxd.codes"}]},{"id":"https://mxd.codes/photos/bike-trip-in-the-chiemgau-alps","url":"https://mxd.codes/photos/bike-trip-in-the-chiemgau-alps","title":"Bike trip in the Chiemgau Alps","content_html":"<p>Bike trip in the Chiemgau Alps.\nHad to carry our bikes for a bit because of too much snow.</p>","date_published":"2021-05-18T08:37:52.975Z","image":"https://mxd.codes/content/photos/bike-trip-in-the-chiemgau-alps/photo-1.jpg","attachments":[{"url":"https://mxd.codes/content/photos/bike-trip-in-the-chiemgau-alps/photo-1.jpg","mime_type":"image/jpeg","title":"cover_IMG_20210404_130242_3dd824b3af.jpg"},{"url":"https://mxd.codes/content/photos/bike-trip-in-the-chiemgau-alps/photo-2.jpg","mime_type":"image/jpeg","title":"cover_IMG_20210404_140535_6709e5924c.jpg"}],"authors":[{"name":"Max Dietrich","url":"https://mxd.codes"}]},{"id":"https://mxd.codes/photos/after-work-session-with-my-new-scott-spark","url":"https://mxd.codes/photos/after-work-session-with-my-new-scott-spark","title":"After work session with my new Scott Spark","content_html":"<p>After work session with my new Scott Spark 😎</p>\n<h1 id=\"happyplacemountainbikescottsparkchasingsunsets\">happyplace #mountainbike #scottspark #chasingsunsets</h1>","date_published":"2021-04-18T08:38:56.078Z","image":"https://mxd.codes/content/photos/after-work-session-with-my-new-scott-spark/photo-1.jpg","attachments":[{"url":"https://mxd.codes/content/photos/after-work-session-with-my-new-scott-spark/photo-1.jpg","mime_type":"image/jpeg","title":"cover_IMG_20210329_193127_271_46dc738984.jpg"}],"authors":[{"name":"Max Dietrich","url":"https://mxd.codes"}]},{"id":"https://mxd.codes/photos/first-ride-with-my-new-spark","url":"https://mxd.codes/photos/first-ride-with-my-new-spark","title":"First ride with my new spark","content_html":"<p>First ride with my new spark 🌄 #ridemore #scottspark #scottbikes #thatshowweroll</p>","date_published":"2021-04-16T08:36:28.141Z","image":"https://mxd.codes/content/photos/first-ride-with-my-new-spark/photo-1.jpg","attachments":[{"url":"https://mxd.codes/content/photos/first-ride-with-my-new-spark/photo-1.jpg","mime_type":"image/jpeg","title":"cover_IMG_20210324_170922_5f046148ed.jpg"},{"url":"https://mxd.codes/content/photos/first-ride-with-my-new-spark/photo-2.jpg","mime_type":"image/jpeg","title":"cover_IMG_20210324_165804_585304ff9e.jpg"}],"authors":[{"name":"Max Dietrich","url":"https://mxd.codes"}]},{"id":"https://mxd.codes/articles/fetching-and-storing-activities-from-garmin-connect-with-strapi-and-visualizing-them-with-next-js","url":"https://mxd.codes/articles/fetching-and-storing-activities-from-garmin-connect-with-strapi-and-visualizing-them-with-next-js","title":"Fetching and storing activities from Garmin Connect with Strapi and visualizing them with NextJS","summary":"Step-by-step guide explaining how to fetch data from Garmin Connect, store it in Strapi and visualize it with NextJS and React-Leaflet.","content_html":"<p>With getting into the <a href=\"https://indieweb.org/\" title=\"IndieWeb\">IndieWeb</a> i started to reflect about myself and how i can actually own my data instead of giving them to so called <a href=\"https://indieweb.org/silo\" title=\"silos\">silos</a>.</p>\n<p>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.\nConsidering 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.</p>\n<p>Unfortunately the <a href=\"https://developer.garmin.com/gc-developer-program/activity-api/\" title=\"Garmin Activity API\">official Garmin Activity API</a> is only available for approved business developer.</p>\n<p>But after some searching i found the npm-package <a href=\"https://github.com/Pythe1337N/garmin-connect\" title=\"garmin-connect\">garmin-connect</a> which allows you to connect to Garmin Connect for sending and receiving activity data.</p>\n<h2 id=\"fetchingandstoringactivitiesfromgarminconnectwithstrapi\">Fetching and storing activities from Garmin Connect with Strapi</h2>\n<p>You can install the package with</p>\n<pre><code class=\"bash language-bash\">npm install garmin-connect\n</code></pre>\n<p>or</p>\n<pre><code class=\"bash language-bash\">yarn add garmin-connect\n</code></pre>\n<p>and use it like</p>\n<pre><code class=\"javascript language-javascript\">const { GarminConnect } = require('garmin-connect');\n// Create a new Garmin Connect Client\nconst GCClient = new GarminConnect();\n// Uses credentials from garmin.config.json or uses supplied params\nawait GCClient.login('my.email@example.com', 'MySecretPassword');\nconst userInfo = await GCClient.getActivities());\n</code></pre>\n<p>I stored the email and the password for the login in environment variables and used them with </p>\n<pre><code class=\"javascript language-javascript\">const { GarminConnect } = require('garmin-connect');\nconst GCClient = new GarminConnect();\nawait GCClient.login(process.env.GARMIN_EMAIL ,process.env.GARMIN_PWD);\nconst userInfo = await GCClient.getActivities());\n</code></pre>\n<p>Afterwards experimented a bit with the Garmin Connect and found out there are some very low limits. \nApproximately 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.</p>\n<p>In general you can probably do way more with Garmin Connect as you will need, like for example:</p>\n<ul>\n<li>Get user info</li>\n<li>Get social user info</li>\n<li>Get heart rate</li>\n<li>Set body weight</li>\n<li>Get list of workouts</li>\n<li>Add new workouts</li>\n<li>Add workouts to you calendar</li>\n<li>Remove previously added workouts</li>\n<li>Get list of activities</li>\n<li>Get details about one specific activity</li>\n<li>Get the step count</li>\n</ul>\n<p>I used only <code>GCClient.getActivities();</code> to get all activities and and  <code>GCClient.getActivity({ activityId: id });</code> to get the details of the activity (like spatial data representing the route, start-point and end-point).</p>\n<p>To be able to store the data in Strapi i created a new content type collection  <strong>activities</strong> with the following fields/attributes:</p>\n<p><img src=\"content_type_activity_3b64fb0368_65ef0f7674.png\" alt=\"content_type_activity_3b64fb0368.png\" /></p>\n<p>Afterwards new entrys for activities can be created.</p>\n<blockquote>\n  <p>Strapi has a documention which explains how to fetch external data and create entries with it: <a href=\"https://strapi.io/documentation/developer-docs/latest/guides/external-data.html#call-the-function\" title=\"Fetching external data\">Fetching external data</a>.</p>\n</blockquote>\n<p>To get the data from Garmin Connect into Strapi i created a function <code>getGarminConnectActivities.js</code>  for Strapi (<a href=\"https://gist.github.com/dietrichmax/306b36abd5a9d1ac0c938adcd15f2f69\" title=\"getGarminConnectActivities.js\">https://gist.github.com/dietrichmax/306b36abd5a9d1ac0c938adcd15f2f69</a>)</p>\n<p>The function will take care of:</p>\n<ul>\n<li>getting existing activities in Strapi,</li>\n<li>get recent activites from Garmin Connect,</li>\n<li>checking if an activity already exists in Strapi,</li>\n<li>creating the activity in Strapi if it doesn't exist yet and also get the details for it.</li>\n</ul>\n<p>and basically looks like this:</p>\n<pre><code class=\"javascript language-javascript\">module.exports = async () =&gt; {\n  await GCClient.login(process.env.GARMIN_USERNAME, process.env.GARMIN_PWD)\n  const activities = await GCClient.getActivities()\n  const exisitingActivities = await getExistingActivities()\n  activities ? activities.map((activity) =&gt; {\n    const isExisting = exisitingActivities.includes(activity.activityId)\n    isExisting ? console.log(activity.activityId + \" already exists\") : createEntry(activity)\n  })\n  : console.log(\"no activities found\")\n}\n</code></pre>\n<p>After all activities from Garmin are fetched, i am mapping through them to</p>\n<ul>\n<li>check if they already exist in my cms</li>\n<li>and create them if needed</li>\n</ul>\n<p>The exisiting activities in my CMS  are fetched with</p>\n<pre><code class=\"javascript language-javascript\">const getExistingActivities = async () =&gt; {\n  const existingActivityIds = []\n  const activities = await axios.get(`https://strapi.url/activities`)\n\n  activities.data.map((activity) =&gt; {\n    existingActivityIds.push(activity.activityID)\n  })\n  return existingActivityIds\n}\n</code></pre>\n<p>and the activityIds (originally from Garmin Connect) are returned to be able to check if an entry already exists.\nIf the entry doesn't exist, details for the missing activity are fetched and a new entry is created with:</p>\n<pre><code class=\"javascript language-javascript\">const createEntry = async (activity) =&gt; {\n  const details = await GCClient.getActivity({ activityId: activity.activityId });\n  await strapi.query('activity').create({\n    activityID: activity.activityId,\n    activityName: activity.activityName,\n    beginTimestamp: activity.beginTimestamp,\n    activityType: activity.activityType,\n    distance: activity.distance,\n    duration: activity.duration,\n    elapsedDuration:  activity.elapsedDuration,\n    movingDuration: activity.movingDuration,\n    elevationGain: activity.elevationGain,\n    elevationLoss: activity.elevationLoss,\n    minElevation: activity.minElevation,\n    maxElevation: activity.minElevation,\n    sportTypeId: activity.sportTypeId,\n    averageSpeed: activity.averageSpeed * 3.6 //(m/s -&gt; km/h),\n    maxSpeed: activity.maxSpeed * 3.6 //(m/s -&gt; km/h),,\n    startLatitude: activity.startLatitude,\n    startLongitude: activity.startLongitude,\n    endLatitude: activity.endLatitude,\n    endLongitude: activity.endLongitude,\n    details: details\n  })\n}\n</code></pre>\n<p>You can save way more but i tried to cut it down to the ones i really need or eventually will need.</p>\n<p>Only thing missing is some automatic triggering. For this you can use cron jobs in Strapi (<a href=\"https://strapi.io/documentation/developer-docs/latest/guides/external-data.html#call-the-function\" title=\"cron.js\">/config/functions/cron.js</a>).</p>\n<pre><code class=\"javascript language-javascript\">module.exports = {\n// Add your own logic here (e.g. send a queue of email, create a database backup, etc.).\n\n    '0 0 18 * * *': () =&gt; {\n      strapi.config.functions.getGarminConnectActivities();\n    },\n};\n</code></pre>\n<p>I decied to trigger the function everyday at 6 pm so i can have a look at my activites in the evening. 😎</p>\n<p>Thats the fun from the 'backend part'.</p>\n<p>Next step is to visualize the data in NextJS.</p>\n<h2 id=\"visualizingthedatawithnextjs\">Visualizing the data with NextJS</h2>\n<p>I am really liking the embeddable tours of <a href=\"https://www.komoot.de/b2b/embed\" title=\"komoot embed\">komoot</a> optic-wise, so i decided to create a similiar looking option for the preview of my activities in the <a href=\"/\" title=\"all posts\">posts-feed</a> and <a href=\"/activities\">activites-feed</a>.</p>\n<p>So the preview should consist of</p>\n<ul>\n<li>an title of the activitie (+datetime),</li>\n<li>an symbol displaying the activity type (cycling, running, etc.)</li>\n<li>some basic metrics like distance, duration and average speed,</li>\n<li>a map displaying the line of the route with osm-data and and aerial-view,</li>\n<li>and optionally a graph displaying the elevation along the track (still in work).</li>\n</ul>\n<p>The component looks like this at the moment:</p>\n<p><img src=\"activity_post_preview_eeca5a51b1_05959d7192.png\" alt=\"activity_post_preview_eeca5a51b1.png\" /></p>\n<h3 id=\"showingsomemetrics\">Showing some Metrics</h3>\n<p>In the <strong>activityType</strong> object you can find <code>typeId</code> which correlates to the type of the activity, e.g. cycling, running etc.\nI created a small function which will return a icon from <a href=\"https://github.com/react-icons/react-icons\" title=\"react-icons\">react-icons</a> visualizing the activity type.</p>\n<pre><code class=\"javascript language-javascript\">import { FaRunning, FaBiking } from 'react-icons/fa';\n\nconst getTypeIcon = activity =&gt; {\n    if (activity.activityType.typeId == 5) {\n        return &lt;FaBiking/&gt;\n    } else if (activity.activityType.typeId == 15) {\n      return &lt;FaRunning/&gt;\n }\n\ngetTypeIcon(activity)\n</code></pre>\n<p>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:</p>\n<pre><code class=\"javascript language-javascript\">const secondsToHms = (s) =&gt; {\n    const hours = (((s - s % 3600) / 3600) % 60)\n    const minutes = (((s - s % 60) / 60) % 60)  \n    const seconds = (s % 60)  \n    return (`${hours}h ${minutes}min ${seconds}s`)\n }\nsecondsToHms(activity.duration)\n</code></pre>\n<h3 id=\"displayingamapwithreactleaflet\">Displaying  a Map with \"react-leaflet\"</h3>\n<p>Then i created a small map with <a href=\"https://react-leaflet.js.org/\" title=\"react-leaflet\">react-leaflet</a> displaying </p>\n<ul>\n<li>the track as polyline,</li>\n<li>the start point and</li>\n<li>the end point.</li>\n</ul>\n<p>Therefore i created a new map-component:</p>\n<pre><code class=\"javascript language-javascript\">import React, { useEffect, useState } from \"react\"\nimport { Marker, MapContainer, TileLayer, LayersControl, Polyline } from \"react-leaflet\";\n\nconst Map = (data) =&gt; {\n  const geo = data.data\n  const style= { \n    color: '#11a9ed',\n    weight: \"5\"\n  }\n\n  const bounds = [[geo.maxLat, geo.maxLon], [geo.minLat, geo.minLon]]\n  return (\n    &lt;MapContainer\n      style={{ height: \"500px\", width: \"100%\" }}\n      bounds={bounds}       \n      scrollWheelZoom={false}\n    &gt;\n    &lt;LayersControl position=\"topright\"&gt;\n      &lt;LayersControl.BaseLayer checked name=\"OpenStreetMap.Mapnik\"&gt;\n        &lt;TileLayer \n          url='https://{s}.basemaps.cartocdn.com/rastertiles/voyager/{z}/{x}/{y}{r}.png'\n          attribution ='&amp;copy; &lt;a href=\"https://www.openstreetmap.org/copyright\"&gt;OpenStreetMap&lt;/a&gt; contributors &amp;copy; &lt;a href=\"https://carto.com/attributions\"&gt;CARTO&lt;/a&gt;'\n\n        /&gt;\n        &lt;/LayersControl.BaseLayer&gt;\n        &lt;LayersControl.BaseLayer name=\"Esri World Imagery\"&gt;\n          &lt;TileLayer\n            attribution='Tiles &amp;copy; Esri &amp;mdash; Source: Esri, i-cubed, USDA, USGS, AEX, GeoEye, Getmapping, Aerogrid, IGN, IGP, UPR-EGP'\n            url=\"https://server.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}\"\n          /&gt;\n        &lt;/LayersControl.BaseLayer&gt;\n\n        &lt;Marker id=\"start\" position={geo.startPoint}/&gt;\n        &lt;Polyline pathOptions={style} positions={geo.polyline} /&gt;\n        &lt;Marker id=\"end\" position={geo.endPoint}/&gt;\n\n      &lt;/LayersControl&gt;\n    &lt;/MapContainer&gt;\n  );\n};\n\nexport default Map;\n</code></pre>\n<p>\nLuckily 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.</p>\n<p>The coordinates can be found in <strong>geoPolylineDTO</strong> in the activitydetails </p>\n<p><img src=\"activity_details_a6d325373e_6bb242aae0.png\" alt=\"activity_details_a6d325373e.png\" /></p>\n<p>With maxLat, maxLon, minLat and minLon i created the bounds which will set the default view for the map when passed to the MapContainer.</p>\n<pre><code class=\"javascript language-javascript\">const bounds = [[geo.maxLat, geo.maxLon], [geo.minLat, geo.minLon]]\n\n&lt;MapContainer\n      style={{ height: \"200px\", width: \"100%\" }}\n      bounds={bounds}       \n      scrollWheelZoom={false}\n &gt;\n.\n.\n</code></pre>\n<p>Then i added the LayerControl to be able to toggle between the two Tilelayers</p>\n<ul>\n<li>OSM (Carto) and</li>\n<li>Aerial Image (Esri)</li>\n</ul>\n<p>After that i just created two markers and a polyline with the exisiting objects <code>startPoint</code>, <code>endPoint</code> and <code>polyline</code>.</p>\n<pre><code class=\"javascript language-javascript\">.\n.\n        &lt;Marker id=\"start\" position={geo.startPoint}/&gt;\n        &lt;Polyline pathOptions={style} positions={geo.polyline} /&gt;\n        &lt;Marker id=\"end\" position={geo.endPoint}/&gt;\n.\n.\n</code></pre>\n<p>You can find several other tilelayers in <a href=\"/leaflet-extras-github/leaflet-providers/preview/\" title=\"leaflet-providers-preview\">leaflet-providers-preview</a>.</p>\n<p>For an example of the preview head over to <a href=\"/activities\" title=\"activitites\">/activities</a>.\nYou can find the code for the <a href=\"https://github.com/DaTurboD/mxd-codes-frontend/blob/v2/components/activity/activity-preview/activity-preview.js\" title=\"activity-preview\">activity-preview</a> in my github-repositiory.</p>\n<p>For the actual post of the activity i made the map a bit larger and added some more metrics for now.</p>\n<p>(osm)\n<img src=\"activity_post_bd91b407f4_a951c65969.png\" alt=\"activity_post_bd91b407f4.png\" /></p>\n<p>(Aerial view)\n<img src=\"activity_post_aerial_11e09d89bf_4424be4cd9.png\" alt=\"activity_post_aerial_11e09d89bf.png\" /></p>","date_published":"2021-03-21T17:18:37.986Z","date_modified":"2025-01-22T15:45:30.403Z","tags":["next-js","react","indie-web","data-privacy","d-1"],"image":"https://mxd.codes/content/posts/published/fetching-and-storing-activities-from-garmin-connect-with-strapi-and-visualizing-them-with-next-js/cover.png","banner_image":"https://mxd.codes/content/posts/published/fetching-and-storing-activities-from-garmin-connect-with-strapi-and-visualizing-them-with-next-js/cover.png","authors":[{"name":"Max Dietrich","url":"https://mxd.codes"}]},{"id":"https://mxd.codes/links/running-on-my-own","url":"https://mxd.codes/links/running-on-my-own","title":"Running on my own","external_url":"https://francescoschwarz.com/articles/running-on-my-own/","content_html":"<p>In this article Francesco Schwarz is explaining how he fetches data from Garmin Connect and uses it to display runs on his website.</p>","date_published":"2021-03-21T09:47:22.428Z","authors":[{"name":"Max Dietrich","url":"https://mxd.codes"}]},{"id":"https://mxd.codes/links/creating-accessible-forms","url":"https://mxd.codes/links/creating-accessible-forms","title":"Creating Accessible Forms","external_url":"https://webaim.org/techniques/forms/controls","content_html":"<p>WebAIM provides some very interesting documentation on how to create a web with web accessiblity in mind.</p>","date_published":"2021-03-01T07:14:35.402Z","authors":[{"name":"Max Dietrich","url":"https://mxd.codes"}]},{"id":"https://mxd.codes/links/using-webmentions-in-eleventy","url":"https://mxd.codes/links/using-webmentions-in-eleventy","title":"Using Webmentions in Eleventy","external_url":"https://mxb.dev/blog/using-webmentions-on-static-sites/","content_html":"<p>A brilliant post by Max Böck on how to get incoming and outgoing Webmentions for example via Bridgy and webmention.io and how to handle and filter the data to be able to finally implement webmentions on your website.</p>","date_published":"2021-02-14T21:36:46.226Z","authors":[{"name":"Max Dietrich","url":"https://mxd.codes"}]},{"id":"https://mxd.codes/articles/syntax-highlighting-with-prism-and-next-js","url":"https://mxd.codes/articles/syntax-highlighting-with-prism-and-next-js","title":"Syntax Highlighting with Prism.js and Next.js","summary":"Prism.js is a compact, expandable syntax highlighter that was developed with modern web standards in mind.","content_html":"<p>Integrating syntax highlighting into a Next.js project has evolved with the latest Next.js versions (12–14) and React Server Components. This guide shows a <strong>modern, performant approach</strong> to syntax highlighting using <a href=\"https://prismjs.com/\">Prism.js</a>, including <strong>lazy highlighting</strong>, a <strong>copy-to-clipboard button</strong>, and <strong>MDX integration</strong>.</p>\n<h2 id=\"1installdependencies\">1. Install Dependencies</h2>\n<p>Install Prism.js and a tree-shakable icon library for copy buttons:</p>\n<pre><code class=\"bash language-bash\">npm install prismjs\nnpm install https://github.com/react-icons/react-icons/releases/download/v5.4.0/react-icons-all-files-5.4.0.tgz\n</code></pre>\n<p>The <code>@react-icons/all-files</code> package allows importing only the icons you need, keeping bundle size small.</p>\n<h2 id=\"2importprismstyles\">2. Import Prism Styles</h2>\n<p>In your <code>app/layout.tsx</code> (or <code>_app.tsx</code> if using the Pages Router), import your Prism CSS:</p>\n<pre><code class=\"ts language-ts\">import \"@/styles/prism.css\";\n</code></pre>\n<p>Download a custom Prism CSS theme here: <a href=\"https://prismjs.com/download#themes=prism&languages=markup+css+clike+javascript\">Prism Download</a>. Save it under <code>styles/prism.css</code>.</p>\n<h2 id=\"3createasyntaxhighlightercomponent\">3. Create a Syntax Highlighter Component</h2>\n<p>Highlight code <strong>only when visible</strong> using <code>IntersectionObserver</code>:</p>\n<pre><code class=\"tsx language-tsx\">// SyntaxHighlighter.tsx\n\"use client\";\n\nimport Prism from \"prismjs\";\nimport { useEffect, useRef } from \"react\";\n\n// Import only needed Prism languages\nimport \"prismjs/components/prism-bash\";\nimport \"prismjs/components/prism-jsx\";\nimport \"prismjs/components/prism-tsx\";\nimport \"prismjs/components/prism-python\";\nimport \"prismjs/components/prism-sql\";\nimport \"prismjs/components/prism-yaml\";\nimport \"prismjs/components/prism-nginx\";\nimport \"prismjs/components/prism-git\";\nimport \"prismjs/components/prism-json\";\nimport \"prismjs/components/prism-docker\";\nimport \"prismjs/components/prism-powershell\";\n\ninterface SyntaxHighlighterProps {\n  language?: string;\n  code?: string;\n}\n\nconst SyntaxHighlighter = ({ language, code }: SyntaxHighlighterProps) =&gt; {\n  const ref = useRef&lt;HTMLDivElement&gt;(null);\n\n  useEffect(() =&gt; {\n    const observer = new IntersectionObserver(\n      (entries) =&gt; {\n        entries.forEach((entry) =&gt; {\n          if (entry.isIntersecting) {\n            Prism.highlightAllUnder(entry.target);\n          }\n        });\n      },\n      { rootMargin: \"100%\" }\n    );\n\n    if (ref.current) observer.observe(ref.current);\n    return () =&gt; {\n      if (ref.current) observer.unobserve(ref.current);\n    };\n  }, []);\n\n  return (\n    &lt;div ref={ref}&gt;\n      &lt;pre className={`language-${language}`} tabIndex={0}&gt;\n        &lt;code className={`language-${language}`}&gt;{code?.trim() ?? \"\"}&lt;/code&gt;\n      &lt;/pre&gt;\n    &lt;/div&gt;\n  );\n};\n\nexport default SyntaxHighlighter;\n</code></pre>\n<h2 id=\"4addacopytoclipboardbutton\">4. Add a Copy-to-Clipboard Button</h2>\n<p>Provide instant copy feedback with icons:</p>\n<pre><code class=\"tsx language-tsx\">// CopyCodeButton.tsx\n\"use client\";\n\nimport { FaCopy } from \"@react-icons/all-files/fa/FaCopy\";\nimport { FaCheck } from \"@react-icons/all-files/fa/FaCheck\";\nimport { useState } from \"react\";\nimport styles from \"./CopyCodeButton.module.css\";\n\nexport default function CopyCodeButton({ children }) {\n  const [copied, setCopied] = useState(false);\n\n  const handleClick = () =&gt; {\n    navigator.clipboard.writeText(children.props.children);\n    setCopied(true);\n    setTimeout(() =&gt; setCopied(false), 2000);\n  };\n\n  return (\n    &lt;div className={styles.copyButton} onClick={handleClick} title=\"Copy code\"&gt;\n      &lt;div className={styles.copyWrapper}&gt;\n        {copied ? (\n          &lt;&gt;\n            &lt;FaCheck className={`${styles.icon} ${styles.iconCopied}`} /&gt; Copied!\n          &lt;/&gt;\n        ) : (\n          &lt;&gt;\n            &lt;FaCopy className={`${styles.icon} ${styles.iconCopy}`} /&gt; Copy code\n          &lt;/&gt;\n        )}\n      &lt;/div&gt;\n    &lt;/div&gt;\n  );\n}\n</code></pre>\n<h2 id=\"5integratewithmdxmarkdown\">5. Integrate with MDX / Markdown</h2>\n<p>Override the <code>code</code> component in your MDX renderer:</p>\n<pre><code class=\"tsx language-tsx\">// renderers.tsx\nimport SyntaxHighlighter from \"./SyntaxHighlighter\";\nimport CopyCodeButton from \"./CopyCodeButton\";\nimport styles from \"./Markdown.module.css\";\n\nexport const markdownComponents = {\n  code: ({ inline, className, children, ...props }) =&gt; {\n    const match = /language-(\\w+)/.exec(className || \"\");\n    if (!inline &amp;&amp; match) {\n      return (\n        &lt;div className={styles.codeBlock}&gt;\n          &lt;SyntaxHighlighter language={match[1]} code={children} /&gt;\n          &lt;CopyCodeButton&gt;{children}&lt;/CopyCodeButton&gt;\n        &lt;/div&gt;\n      );\n    }\n    return (\n      &lt;code className={styles.defaultCode} {...props}&gt;\n        {children}\n      &lt;/code&gt;\n    );\n  },\n};\n</code></pre>\n<h2 id=\"6wrapmdxcontentinaclientcomponent\">6. Wrap MDX Content in a Client Component</h2>\n<p>Here’s how to <strong>pass your custom renderers</strong> to MDX using <code>next-mdx-remote</code>:</p>\n<pre><code class=\"tsx language-tsx\">// mdxWrapper.tsx\n\"use client\";\n\nimport { MDXRemote, MDXRemoteProps } from \"next-mdx-remote\";\nimport { markdownComponents as renderers } from \"../renderers/renderers\";\nimport styles from \"./mdxWrapper.module.css\";\n\nconst MDXWrapper: React.FC&lt;{ content: MDXRemoteProps }&gt; = ({ content }) =&gt; {\n  return (\n    &lt;div className={`${styles.contentWrapper} markdown`}&gt;\n      &lt;MDXRemote {...content} components={renderers} /&gt;\n    &lt;/div&gt;\n  );\n};\n\nexport default MDXWrapper;\n</code></pre>\n<p>This ensures:</p>\n<ul>\n<li>Syntax highlighting is client-side only (avoiding SSR hydration issues).</li>\n<li>Custom MDX renderers (e.g., <code>SyntaxHighlighter</code>, <code>CopyCodeButton</code>) are applied.</li>\n<li>Styles and copy functionality work seamlessly for all code blocks.</li>\n</ul>\n<h2 id=\"7benefits\">7. Benefits</h2>\n<ul>\n<li><strong>Lazy highlighting</strong> improves performance.</li>\n<li>Only required Prism languages are loaded.</li>\n<li>Users can copy code with a single click.</li>\n<li>Fully compatible with Next.js App Router + MDX.</li>\n<li>Can still switch to <strong>pre-rendered highlighting</strong> (<code>rehype-prism-plus</code> or <code>rehype-pretty-code</code>) for build-time performance if desired.</li>\n</ul>\n<p>This approach is fully <strong>Next.js 14 / React 18 ready</strong>, client-friendly, and keeps bundle size minimal.</p>","date_published":"2020-09-22T20:48:44.913Z","date_modified":"2025-09-24T17:01:07.834Z","tags":["react","next-js"],"image":"https://mxd.codes/content/posts/published/syntax-highlighting-with-prism-and-next-js/cover.png","banner_image":"https://mxd.codes/content/posts/published/syntax-highlighting-with-prism-and-next-js/cover.png","authors":[{"name":"Max Dietrich","url":"https://mxd.codes"}]},{"id":"https://mxd.codes/articles/hosting-next-js-private-server-pm2-github-webhooks-ci-cd","url":"https://mxd.codes/articles/hosting-next-js-private-server-pm2-github-webhooks-ci-cd","title":"Hosting NextJS on a private server using PM2 and Github webhooks as CI/CD","summary":"This article shows you how can host your Next.js site on a (virtual private) server with Nginx, a CI/CD pipeline via PM2 and Github Webhooks.","content_html":"<p>This article shows you how can host your Next.js site on a (virtual private) server with Nginx and a CI/CD pipeline via PM2 and Github Webhooks.</p>\n<h2 id=\"setupyourserver\">Setup your server</h2>\n<p>First of all you need an server with root access.\nI strongly recommend to have a look at the guide <a href=\"https://www.digitalocean.com/community/tutorials/initial-server-setup-with-ubuntu-18-04\" title=\"Initial Server Setup with Ubuntu 18.04\">\"Initial Server Setup with Ubuntu 18.04\"</a> from the DigitalOcean community which will lead you through the process of:</p>\n<ol>\n<li>Logging in and set up root user access to your server with SSH</li>\n<li>Creating a new user</li>\n<li>Granting Administrative Privileges to the new user</li>\n<li>Setting up a basic firewall</li>\n<li>Giving your regular user access to the server with SSH key authentication.</li>\n</ol>\n<p>After you have done that you can continue by installing all necessary dependencies on your server.</p>\n<h3 id=\"installnodejs\">Install Node.js</h3>\n<p>Again there is an guide by DigitalOcean which will help you <a href=\"https://www.digitalocean.com/community/tutorials/how-to-install-node-js-on-ubuntu-18-04#installing-using-a-ppa\" title=\"Installing Node.jsUsing a PPA\">installing Node.js using PPA</a>. </p>\n<p>After completing </p>\n<ul>\n<li><strong>install Node.js, NPM and</strong></li>\n<li><strong>the \"build-essential package\"</strong></li>\n</ul>\n<p>you will have to change npm's default directory.</p>\n<ul>\n<li>Create a <code>.npm-global</code> directory and set the path to this directory for <code>node_modules</code>:</li>\n</ul>\n<pre><code class=\"bash language-bash\">cd ~\nmkdir ~/.npm-global\nnpm config set prefix '~/.npm-global'\n</code></pre>\n<ul>\n<li>Create (or modify) a <code>~/.profile</code> and add the following line:</li>\n</ul>\n<pre><code class=\"bash language-bash\">sudo nano ~/.profile\n</code></pre>\n<pre><code class=\"bash language-bash\"># set PATH so global node modules install without permission issues\nexport PATH=~/.npm-global/bin:$PATH\n</code></pre>\n<p>Now you have to update your system variables:</p>\n<pre><code class=\"bash language-bash\">source ~/.profile\n</code></pre>\n<p>Now you should be able to check your installed Node.js version with:</p>\n<pre><code class=\"bash language-bash\">node -v\n</code></pre>\n<h3 id=\"installgit\">Install git</h3>\n<p>Check if git is already installed with:</p>\n<pre><code class=\"bash language-bash\">git --version\n</code></pre>\n<p>If it isn't installed yet you can install it with</p>\n<pre><code class=\"bash language-bash\">sudo apt install git\n</code></pre>\n<p>and configure Git with </p>\n<pre><code class=\"bash language-bash\">git config --global user.name \"Your Name\"\ngit config --global user.email \"youremail@domain.com\"\n</code></pre>\n<p>After git is installed and configured you can deploy your project by cloning it from Github.</p>\n<h2 id=\"deployfromgithub\">Deploy from Github</h2>\n<p>It is important that you are loggin in as <strong>non-root</strong> user for the following steps.</p>\n<pre><code class=\"bash language-bash\">cd ~\ngit clone https://github.com/your-name/your-project-repo.git path\n</code></pre>\n<p>Create a <code>.env</code>  on the server if you are using one locally and copy/paste your content.</p>\n<p>After you have deployed your project (optionally with environment variables) you can install all dependencies and build your Next.js site with:</p>\n<pre><code class=\"bash language-bash\">cd ./my-project/\nnpm install\nNODE_ENV=production npm run build\n</code></pre>\n<p>Now you should have a copy of your local project/Next.js site on your remote server.</p>\n<p>Next you are going to setup PM2 which will be used to keep your site alive and restart it after every reboot.</p>\n<h2 id=\"setuppm2\">Setup PM2</h2>\n<p>You can install PM2 with:</p>\n<pre><code class=\"bash language-bash\">npm install pm2@latest -g\n</code></pre>\n<p>You will need to create/configure an <code>ecosystem.config.js</code> file which will restart the default Next.js server.</p>\n<pre><code class=\"bash language-bash\">cd ~\npm2 init\nsudo nano ecosystem.config.js\n</code></pre>\n<p>Copy/paste the template and replace the content.</p>\n<pre><code class=\"javascript language-javascript\">module.exports = {\n  apps: [\n    {\n      name: 'next-site',\n      cwd: ' /home/your-name/my-nextjs-project',\n      script: 'npm',\n      args: 'start',\n      env: {\n        NEXT_PUBLIC_...: 'NEXT_PUBLIC_...',\n      },\n    },\n    // optionally a second project\n],};\n</code></pre>\n<p>With </p>\n<pre><code class=\"bash language-bash\">cd ~\npm2 start ecosystem.config.js\n</code></pre>\n<p>you can start your server which will run on the <code>Port 1337</code>.</p>\n<p>You can always check the status with:</p>\n<pre><code class=\"bash language-bash\">pm2 status next-site\n</code></pre>\n<p>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.</p>\n<ul>\n<li>Generate and configure a startup script to launch PM2:</li>\n</ul>\n<pre><code class=\"bash language-bash\">cd ~\npm2 startup systemd\n\n[PM2] Init System found: systemd\n[PM2] To setup the Startup Script, copy/paste the following command:\n**sudo env PATH=$PATH:/usr/bin /usr/lib/node_modules/pm2/bin/pm2 startup systemd -u your-name --hp /home/your-name**\n</code></pre>\n<ul>\n<li>Copy/paste the generated command:</li>\n</ul>\n<pre><code class=\"bash language-bash\">**sudo env PATH=$PATH:/usr/bin /usr/lib/node_modules/pm2/bin/pm2 startup systemd -u your-name --hp /home/your-name**\n\n[PM2] Init System found: systemd\nPlatform systemd\n\n. . .\n\n\n[PM2] [v] Command successfully executed.\n+---------------------------------------+\n[PM2] Freeze a process list on reboot via:\n   $ pm2 save\n\n[PM2] Remove init script via:\n   $ pm2 unstartup systemd\n</code></pre>\n<ul>\n<li>And save the new PM2 process list and environments. Then Start the service with <code>systemctl</code>.</li>\n</ul>\n<pre><code class=\"bash language-bash\">pm2 save\n\n[PM2] Saving current process list...\n[PM2] Successfully saved in /home/your-name/.pm2/dump.pm2\n</code></pre>\n<p>If you reboot your server now with <code>sudo reboot</code> the script should be automatically restart your Next.js site. Give it a try!</p>\n<h2 id=\"setupgithubwebhook\">Setup Github Webhook</h2>\n<p>One thing missing now is an continuos integration and continuos delivery (CI/CD) pipeline which you will setup using Github webhooks. </p>\n<p>Therefore you need to create a new Webhook in your repository.</p>\n<p>The following articles provide additional information to the steps below: </p>\n<ul>\n<li><a href=\"https://docs.github.com/en/developers/webhooks-and-events/webhooks/creating-webhooks#setting-up-a-webhook\" title=\"GitHub Creating Webhooks Guide\">GitHub Creating Webhooks Guide</a> and </li>\n<li><a href=\"https://www.digitalocean.com/community/tutorials/how-to-use-node-js-and-github-webhooks-to-keep-remote-projects-in-sync\" title=\"DigitalOcean Guide to GitHub WebHooks\">DigitalOcean Guide to GitHub WebHooks</a>. </li>\n</ul>\n<p>You need to create a server script which will do something if it is triggered by the Github webhook.</p>\n<pre><code class=\"bash language-bash\">cd ~\nmkdir NodeWebHooks\ncd NodeWebHooks\nsudo nano webhook.js\n</code></pre>\n<p>The script is going to create a server running on <code>Port 8100</code>. \n(Your Github webhook should be of course sending the webhook to something like <code>http://server-ip:8100</code>.)</p>\n<p>If it gets triggered by a webhook it will </p>\n<ul>\n<li>go into your repo <code>~/my-nextjs-project/</code>, </li>\n<li>pull the latest commits, </li>\n<li>install all dependencies, </li>\n<li>build a new version of the site and </li>\n<li>restart the server via the PM2 script.</li>\n</ul>\n<pre><code class=\"javascript language-javascript\">const secret = \"your-secret-key\";\nconst repo = \"~/my-nextjs-project/\";\n\nconst http = require('http');\nconst crypto = require('crypto');\nconst exec = require('child_process').exec;\n\nconst BUILD_CMD = 'npm install &amp;&amp; NODE_ENV=production npm run build';\nconst PM2_CMD = 'pm2 restart next-site';\n\nhttp.createServer(function (req, res) {\n    req.on('data', function(chunk) {\n        let sig = \"sha1=\" + crypto.createHmac('sha1', secret).update(chunk.toString()).digest('hex');\n\n        if (req.headers['x-hub-signature'] == sig) {\n            exec('cd ' + repo + ` &amp;&amp; git pull &amp;&amp; npm install &amp;&amp; ${BUILD_CMD} &amp;&amp; ${PM2_CMD}`);\n        }\n    });\n\n    res.end();\n}).listen(8100);\n</code></pre>\n<p>You will need to allow communication on <code>Port 8100</code> with:</p>\n<pre><code class=\"bash language-bash\">sudo ufw allow 8100/tcp\nsudo ufw enable\n\nCommand may disrupt existing ssh connections. Proceed with operation (y|n)? y\nFirewall is active and enabled on system startup\n</code></pre>\n<p>Earlier you setup PM2 to restart the services (your Next.js site) whenever the server reboots or is started. You will now do the same for the webhook script.</p>\n<ul>\n<li>Run echo $PATH and copy the output for use in the next step.</li>\n</ul>\n<pre><code class=\"bash language-bash\">echo $PATH\n\n/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\n</code></pre>\n<ul>\n<li>Create a webhook.service file:</li>\n</ul>\n<pre><code class=\"bash language-bash\">cd ~\nsudo nano /etc/systemd/system/webhook.service\n</code></pre>\n<ul>\n<li>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:</li>\n</ul>\n<pre><code class=\"bash language-bash\">[Unit]\nDescription=Github webhook\nAfter=network.target\n\n[Service]\nEnvironment=PATH=your_path\nType=simple\nUser=your-name\nExecStart=/usr/bin/nodejs /home/your-name/NodeWebHooks/webhook.js\nRestart=on-failure\n\n[Install]\nWantedBy=multi-user.target\n</code></pre>\n<ul>\n<li>Enable and start the new service so it starts when the system boots:</li>\n</ul>\n<pre><code class=\"bash language-bash\">sudo systemctl enable webhook.service\nsudo systemctl start webhook\n</code></pre>\n<ul>\n<li>Check the status of the webhook:</li>\n</ul>\n<pre><code class=\"bash language-bash\">sudo systemctl status webhook\n</code></pre>\n<p>You can test your webhook with these <a href=\"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\" title=\"Test Webhook\">instructions</a>.</p>\n<p>The Next.js server is now running on <em>your-ip:3000</em> 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.</p>\n<h2 id=\"configurenginx\">Configure Nginx</h2>\n<p>I am using Cloudflare to manage DNS for my domains but you can do this with every other provider also.</p>\n<ul>\n<li>Create two <code>A</code> Records which will point <code>your-domain.com</code> and <code>www.your-domain.com</code> to the IP-adress of your server.</li>\n</ul>\n<p>After that you will need to configure Nginx. </p>\n<p><em>The following instructions are based on <a href=\"https://www.digitalocean.com/community/tutorials/how-to-install-nginx-on-ubuntu-18-04-quickstart\" title=\"How To Install Nginx on Ubuntu 18.04 [Quickstart]\">How To Install Nginx on Ubuntu 18.04 [Quickstart]</a>.</em></p>\n<ul>\n<li>Update your local package index:</li>\n</ul>\n<pre><code class=\"bash language-bash\">sudo apt update\n</code></pre>\n<ul>\n<li>install Nginx:</li>\n</ul>\n<pre><code class=\"bash language-bash\">sudo apt install nginx\n</code></pre>\n<ul>\n<li>and adjust the Firewall:</li>\n</ul>\n<pre><code class=\"bash language-bash\">sudo ufw allow 'Nginx Full'\nsudo ufw delete allow 'Nginx HTTP'\n</code></pre>\n<p>You should now be able to see the Nginx landing page on <code>http://your_server_ip</code>.</p>\n<h3 id=\"settingupserverblocks\">Setting up Server Blocks</h3>\n<ul>\n<li>Create the directory for <code>your-domain.com</code>, using the -p flag to create any necessary parent directories:</li>\n</ul>\n<pre><code class=\"bash language-bash\">sudo mkdir -p /var/www/your-domain.com/html\n</code></pre>\n<ul>\n<li>Assign ownership of the directory:</li>\n</ul>\n<pre><code class=\"bash language-bash\">sudo chown -R $USER:$USER /var/www/your-domain.com/html\n</code></pre>\n<ul>\n<li>The permissions of your web roots should be correct if you haven’t modified your <code>umask</code> value, but you can make sure by typing:</li>\n</ul>\n<pre><code class=\"bash language-bash\">sudo chmod -R 755 /var/www/example.com\n</code></pre>\n<ul>\n<li>Make a new server block at <code>/etc/nginx/sites-available/your-domain.com</code>: </li>\n</ul>\n<pre><code class=\"bash language-bash\">sudo nano /etc/nginx/sites-available/example.com\n</code></pre>\n<ul>\n<li>Copy/Paste the following nextjs-nginx configuration and update the server_name sections:</li>\n</ul>\n<pre><code class=\"nginx language-nginx\">server {\n    # Listen HTTP\n    listen 80;\n    listen [::]:80;\n\n    server_name your-domain.com www.your-domain.com;\n\n    # Redirect HTTP to HTTPS\n    return 301 https://$host$request_uri;\n}\n\nserver {\n    # Listen HTTP\n    listen 443 ssl;\n    listen [::]:443 ssl;\n\n    server_name your-domain.com www.your-domain.com;\n\n    # SSL config\n    include snippets/self-signed.conf;\n    include snippets/ssl-params.conf;\n\n    # Proxy Config\n    location / {\n        proxy_pass http://localhost:3000\n        proxy_http_version 1.1;\n        proxy_set_header X-Forwarded-Host $host;\n        proxy_set_header X-Forwarded-Server $host;\n        proxy_set_header X-Real-IP $remote_addr;\n        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;\n        proxy_set_header X-Forwarded-Proto $scheme;\n        proxy_set_header Host $http_host;\n        proxy_set_header Upgrade $http_upgrade;\n        proxy_set_header Connection \"Upgrade\";\n        proxy_pass_request_headers on;\n    }\n    location ~ /.well-known {\n       allow all;\n    }\n}\n</code></pre>\n<p>Save the file and close it when you are finished.</p>\n<ul>\n<li>Enable the file by creating a link from it to the sites-enabled directory:</li>\n</ul>\n<pre><code class=\"bash language-bash\">sudo ln -s /etc/nginx/sites-available/your-domain.com /etc/nginx/sites-enabled/\n</code></pre>\n<ul>\n<li>Test for syntax errors:</li>\n</ul>\n<pre><code class=\"bash language-bash\">sudo nginx -t\n</code></pre>\n<ul>\n<li>and finally enable the changes:</li>\n</ul>\n<pre><code class=\"bash language-bash\">sudo systemctl restart nginx\n</code></pre>\n<p>Nginx should now be serving content on your domain name. That means if you have a look at <code>http://your-domain.com</code> you should see your Next.js site.</p>\n<p>In the end should deny traffic to <code>Port 3000</code> with: </p>\n<pre><code class=\"bash language-bash\">cd ~\nsudo ufw deny 3000\n</code></pre>\n<ul>\n<li>To install SSL, you will need to <a href=\"https://www.digitalocean.com/community/tutorials/how-to-secure-nginx-with-let-s-encrypt-on-ubuntu-18-04\" title=\"install and run Certbot by Let's Encrypt\">install and run Certbot by Let's Encrypt</a> .</li>\n</ul>\n<p><em>This guide is also using parts of <a href=\"https://strapi.gitee.io/documentation/3.0.0-beta.x/deployment/digitalocean.html\" title=\"Strapi Deployment on DigitalOcean\">Strapi Deployment on DigitalOcean</a> which helped me a lot setting up Strapi and Next.js on a server in a proper way.</em> </p>","date_published":"2020-09-13T23:00:55.440Z","date_modified":"2025-01-22T15:42:39.278Z","tags":["next-js","ci-cd","selfhosted","cloud"],"image":"https://mxd.codes/content/posts/published/hosting-next-js-private-server-pm2-github-webhooks-ci-cd/cover.png","banner_image":"https://mxd.codes/content/posts/published/hosting-next-js-private-server-pm2-github-webhooks-ci-cd/cover.png","authors":[{"name":"Max Dietrich","url":"https://mxd.codes"}]},{"id":"https://mxd.codes/articles/build-and-deploy-your-gatsby-site-with-google-cloud-build-to-firebase","url":"https://mxd.codes/articles/build-and-deploy-your-gatsby-site-with-google-cloud-build-to-firebase","title":"Build and deploy your Gatsby site with Google Cloud Build to Firebase","summary":"Ultimate guide to automate your Gatsby builds with Google Cloud Build, deploying to Firebase and optional Cloud Scheduler.","content_html":"<p>With Google Cloud (Build) you can automate your whole workflow from building your Gatsby site up to deploying your site to Firebase hosting.</p>\n<p><strong>What will you need?</strong></p>\n<ul>\n<li><a href=\"https://firebase.google.com/products/hosting\" title=\"Firebase Hosting\">Firebase Hosting</a></li>\n<li><a href=\"/cloud-google/cloud-build\" title=\"Cloud Build\">Cloud Build</a></li>\n<li><a href=\"/cloud-google/scheduler\" title=\"Cloud Scheduler\">Cloud Scheduler</a> (optional)</li>\n</ul>\n<h2 id=\"firebasehosting\">Firebase Hosting</h2>\n<p>To set up Firebase you will need an Google Cloud Account which has billing enabled and at least one project.\nYou can add the Firebase SDK with:</p>\n<pre><code class=\"bash language-bash\">npm install --save firebase\n</code></pre>\n<p>and configure it with</p>\n<pre><code class=\"bash language-bash\">firebase init\n</code></pre>\n<p>In the process you can setup a new project which will create a new <code>.firebaserc</code> file if it doesn't exist yet and enable <strong>Hosting</strong>.</p>\n<p><img src=\"Firebase_init_1_c3dd56b33d_c68c4c50c3.png\" alt=\"Firebase_init_1_c3dd56b33d.png\" /></p>\n<p>As public directory you have to set your <strong>public</strong> folder. After you have set your public folder you can reject all oncoming messages.</p>\n<blockquote>\n  <p>You can also have a look at the <a href=\"https://firebase.google.com/docs/cli#install-cli-windows\" title=\"Google Firebase Docs\">Google Firebase Docs</a> for setting up Firebase.</p>\n</blockquote>\n<p>In the end it will also create a <strong>firebase.json</strong> where you can copy/paste the following to optimize your hosting for a Gatsby site.</p>\n<pre><code class=\"json language-json\">{\n  \"hosting\": {\n    \"public\": \"public\",\n    \"ignore\": [\n      \"firebase.json\", \n      \"**/.*\", \n      \"**/node_modules/**\"],\n    \"headers\": [\n      {\n        \"source\": \"**/*\",\n        \"headers\": [\n          {\n            \"key\": \"cache-control\",\n            \"value\": \"cache-control: public, max-age=0, must-revalidate\"\n          }\n        ]\n      },\n      {\n        \"source\": \"static/**\",\n        \"headers\": [\n          {\n            \"key\": \"cache-control\",\n            \"value\": \"public, max-age=31536000, immutable\"\n          }\n        ]\n      },\n      {\n        \"source\": \"**/*.@(css|js)\",\n        \"headers\": [\n          {\n            \"key\": \"cache-control\",\n            \"value\": \"public, max-age=31536000, immutable\"\n          }\n        ]\n      },\n      {\n        \"source\": \"sw.js\",\n        \"headers\": [\n          {\n            \"key\": \"cache-control\",\n            \"value\": \"cache-control: public, max-age=0, must-revalidate\"\n          }\n        ]\n      },\n      {\n        \"source\": \"page-data/**\",\n        \"headers\": [\n          {\n            \"key\": \"cache-control\",\n            \"value\": \"cache-control: public, max-age=0, must-revalidate\"\n          }\n        ]\n      }\n    ],\n  }\n}\n</code></pre>\n<p>When you have build your Gatsy site and <strong>public</strong> folder is present you can upload it to your Firebase Hosting with:</p>\n<pre><code class=\"bash language-bash\">firebase deploy\n</code></pre>\n<p>If you want to use your custom domain (for example mxd.codes) you have to go to Hosting in the Firebase console where you will find DNS-records to point your domain to your Firebase Hosting.\nYou can also create a second domain (for example www.gis-netzwerk.com) to redirect automatically to your root domain.</p>\n<p>In your project settings you can find your Firebase configurations which look like:</p>\n<pre><code class=\"javascript language-javascript\">const firebaseConfig = {\n  apiKey: \"apiKey\",\n  authDomain: \"{.firebaseapp.com\",\n  databaseURL: \"https:// projectId.firebaseio.com\",\n  projectId: \" projectId\",\n  storageBucket: \" projectId.appspot.com\",\n  messagingSenderId: \"1\",\n  appId: \"2\",\n  measurementId: \"G-123\"\n};\n</code></pre>\n<p>You probably want to save these as environment variables.</p>\n<h2 id=\"cloudbuild\">Cloud Build</h2>\n<p>To create a CI-/CD-Pipeline you have to activate Cloud Build for your account. The console itself is quite clear in comparison to AWS CodeBuild.\nYou will see Dashboard which is displaying some basic informations, the history of your Cloud Builds, Triggers and Options.</p>\n<p>You just will have to create a new trigger which will trigger a new build everytime new content is pushed to your linked GitHub repository..</p>\n<p>First of all you have to connect your repository. After that you can create the trigger.</p>\n<p><img src=\"Cloud_Build_Trigger_settings_c6be399330_9340cf2334.png\" alt=\"Cloud_Build_Trigger_settings_c6be399330.png\" /></p>\n<p>Important options are:</p>\n<ul>\n<li>Event: <strong>Push to branch</strong></li>\n<li>Branch: <strong>^master$</strong> (or whatever branch you want to build)</li>\n<li>Cloud Build Configuration file: <strong>cloudbuild.yaml</strong></li>\n</ul>\n<p>After that you can create all environment variables as <strong>Substitution variables</strong>.\nYou will notice that all variables have to start with an underscore.\nBecause of that we will need a small workaround in the cloudbuild.yaml configuration file.</p>\n<p>For now you can just create your substitions variables and add the underscore to your default variable names.</p>\n<p>To be able to deploy via firebase you will need to authorize Firebase with a '$_TOKEN'.\nYou can retrive this token on your local machine with:</p>\n<pre><code class=\"bash language-bash\">firebase login:ci\n</code></pre>\n<p>A new page will be opened in your prefered browser where you will have to login with your Google account to get the token.\nOnce you have the token you can also add it as substition variable.</p>\n<pre><code class=\"bash language-bash\">_TOKEN : {TOKEN VALUE}\n</code></pre>\n<p>If you have created all substitution variables you can check again if they are inserted correct and create the new trigger.</p>\n<h3 id=\"cloudbuildyaml\">Cloudbuild.yaml</h3>\n<p>Cloud build needs the cloudbuild.yaml to know what it should do.\nIf you have inserted the path like above mentioned you will need a cloudbuild.yaml in your root directory.</p>\n<p>You can copy the following into it:</p>\n<pre><code class=\"yaml language-yaml\">steps: \n# Install dependencies\n  - name: node:10.16.0\n    id: Installing dependencies...\n    entrypoint: npm\n    args: [\"install\"] \n    waitFor: [\"-\"] # Begin immediately\n\n# Install Firebase   \n  - name: node:10.16.0 \n    id: Installing Firebase...\n    entrypoint: npm \n    args: [\"install\", \"firebase-tools\"]\n    waitFor:\n      - Install dependencies...\n\n# Create file with env-variables\n  - name: node:10.16.0\n    id: Creating Envirnonment variables...\n    entrypoint: npm\n    args: [\"run\", \"create-env\"]\n    env:\n    - \"CLIENT_EMAIL=${_CLIENT_EMAIL}\"\n    - \"PRIVATE_KEY=${_PRIVATE_KEY}\"\n    - \"MAIL_CHIMP=${_MAIL_CHIMP}\"\n    - \"GA_ID=${_GA_ID}\"\n    - \"GA_VIEW_ID=${_GA_VIEW_ID}\"\n    - \"IG_TOKEN=${_IG_TOKEN}\"\n    - \"FIREBASE_API_KEY=${_FIREBASE_API_KEY}\"\n    - \"FIREBASE_APP_ID=${_FIREBASE_APP_ID}\"\n    - \"FIREBASE_AUTH_DOMAIN=${_FIREBASE_AUTH_DOMAIN}\"\n    - \"FIREBASE_DB_URL=${_FIREBASE_DB_URL}\"\n    - \"FIREBASE_MEASUREMENT_ID=${_FIREBASE_MEASUREMENT_ID}\"\n    - \"FIREBASE_MESSAGE_SENDER_ID=${_FIREBASE_MESSAGE_SENDER_ID}\"\n    - \"FIREBASE_PROJECT_ID=${_FIREBASE_PROJECT_ID}\"\n    - \"FIREBASE_STORAGE_BUCKET=${_FIREBASE_STORAGE_BUCKET}\"\n    - \"GATSBY_EXPERIMENTAL_PAGE_BUILD_ON_DATA_CHANGES=true\"\n    waitFor: [\"-\"] # Begin immediately\n\n# Gatsby build\n  - name: node:10.16.0\n    id: Building Gatsby site...\n    entrypoint: npm\n    args: [\"run\", \"build\"]\n    waitFor:\n      - Installing dependencies...\n      - Creating Envirnonment variables...\n\n# Deploy\n  - name: node:10.16.0 \n    id: Deploying to Firebase...\n    entrypoint: \"./node_modules/.bin/firebase\" \n    args: [\"deploy\", \"--project\", \"$PROJECT_ID\", \"--token\", \"$_TOKEN\"]\n    waitFor:\n      - Installing Firebase...\n      - Building Gatsby site...\n\ntimeout: 30m0s\n</code></pre>\n<p>The cloudbuild.yaml is basically divided into six parts which will</p>\n<ul>\n<li>Install dependencies,</li>\n<li>Install Firebase,</li>\n<li>Create file with env-variables,</li>\n<li>Build the Gatsby site and</li>\n<li>Deploy it to Firebase</li>\n</ul>\n<p>As you can see you will create a file with the environment variables which will map the substitutions variables with your \"default\" variables.\nEverything else should be pretty self-explanatory.</p>\n<blockquote>\n  <p>Cloud Build will timeout the build by default after 10 minutes. So if your build is gonna take longer you will have to set up a custom timeout like in the cloudbuild.yaml above. You can also set a timeout for each step.</p>\n</blockquote>\n<p>Another import point is that you will have to add the Plugin for Google Analytics Reporting Api as dynamic plugin like for example the following because otherwise you will get errors during your build.</p>\n<pre><code class=\"javascript language-javascript\">if (\n  process.env.CLIENT_EMAIL &amp;&amp;\n  process.env.PRIVATE_KEY &amp;&amp;\n  process.env.GA_VIEW_ID\n) {\n  const startDate = new Date()\n  startDate.setMonth(startDate.getMonth() - 3)\n  dynamicPlugins.push(\n    /*{\n      resolve: `gatsby-plugin-guess-js`,\n      options: {\n        GAViewID: process.env.GA_VIEW_ID,\n        jwt: {\n          client_email: process.env.CLIENT_EMAIL,\n          private_key: process.env.PRIVATE_KEY.replace(/\\\\n/g, \"\\n\"),\n        },\n        period: {\n          startDate,\n          endDate: new Date(),\n        },\n      }\n    },*/\n    {\n      resolve: `gatsby-source-google-analytics-reporting-api`,\n      options: {\n        email: process.env.CLIENT_EMAIL,\n        key: process.env.PRIVATE_KEY.replace(/\\\\n/g, \"\\n\"),\n        viewId: process.env.GA_VIEW_ID,\n        startDate: `2009-01-01`,\n      }\n    }\n  )\n}\n\nmodule.exports = {\n  plugins: [\n    plugins...\n  ].concat(dynamicPlugins),\n};\n\nDue to the fact that Code Build uses Linux machines small and capital letters are important (Windows doesnt care).\nThat means if you import a component like\n</code></pre>\n<p>javascript\nimport MyComponent from \"../Mycomponent\"</p>\n<pre><code>and the actual folder name is ```MyComponent``` your build will fail.\n\n## Speeding up your builds\n\n+ **Image optimization**\n\nIf you aren't using preoptimized images yet you should consider to crop, resize images etc. **before** you will build the site because it can basically save a lot of time (depending on the amount of images).\n\nBefore i optimized my images a build on Google Cloud took about ~ 1800 sec.\nAfter i optimized all my images for posts with Python ([Image optimization with Python](/articles/scaling-and-cropping-images-using-python \"Image optimization with Python\")) the build time went down to ~ 620 sec. So actually just a third.\n\n## Set Cloud Scheduler (optional)\n\nWith Cloud Scheduler you can trigger a build automatically after a specific time.\nThe first 3 jobs a month a free and after that you have to pay $0.10 for every job after that.\n\n(You can also use Cloud Scheduler with your default trigger (Push to branch) or without).\n\nThe trigger you created before has an ID and with a POST request you can start the trigger anytime you want.\nTo get the ID of the trigger you have to open the Cloud Shell, type ```gcloud beta builds triggers list``` and search for **id**. Copy that.\n\nThe URL for the POST request looks like (without []):\n`https://cloudbuild.googleapis.com/v1/projects/[PROJECT_ID]/triggers/[TRIGGER_ID]:run`\nNow you have to create a new job in Cloud Schedule.\n\n![Cloud_Scheduler_Settings_1d117b6db6.png](Cloud_Scheduler_Settings_1d117b6db6_28caea6e1d.png)\n</code></pre>\n<p>cron\n0 3 * * *</p>\n<pre><code>will trigger a build every day at 3 am MESZ. \n\nThe URL for the POST request looks like (without []):\n`https://cloudbuild.googleapis.com/v1/projects/[PROJECT_ID]/triggers/[TRIGGER_ID]:run\n`\n\nIn Text you will need\n</code></pre>\n<p>json\n{\n  \"branchName\": \"master\"\n}\n```</p>\n<p>and you will authorize the job with your service account.</p>","date_published":"2020-08-31T21:07:00.598Z","date_modified":"2025-02-01T16:20:54.658Z","tags":["gatsby","react","cloud","ci-cd"],"image":"https://mxd.codes/content/posts/published/build-and-deploy-your-gatsby-site-with-google-cloud-build-to-firebase/cover.png","banner_image":"https://mxd.codes/content/posts/published/build-and-deploy-your-gatsby-site-with-google-cloud-build-to-firebase/cover.png","authors":[{"name":"Max Dietrich","url":"https://mxd.codes"}]},{"id":"https://mxd.codes/articles/scaling-and-cropping-images-using-python","url":"https://mxd.codes/articles/scaling-and-cropping-images-using-python","title":"Scaling and Cropping images using Python","summary":"This articles shows you how to edit, crop and resize your pictures with a little Python script.","content_html":"<p>Since I used a lot of pictures (and also very large ones in the beginning), this had a huge impact on the speed of the page.\nSince PageSpeed ​​is a not unimportant ranking factor for search engines like Google and Co, you should of course make a page as fast as possible.</p>\n<p>The images used here are mainly satellite images from <a href=\"https://www.esa.int\" title=\"ESA\">ESA</a>, which are licensed under the <a href=\"https:/https://creativecommons.org.org/licenses/by-sa/3.0/igo/\">CC BY-SA 3.0 IGO</a> IGO) and may therefore also be used for your own purposes under certain conditions.</p>\n<p>These pictures are often ~ 30MB, which is a bit too big for a website.\nSince I didn't want to crop all pictures manually, I decided to solve this problem with Python or Pillow.</p>\n<h2 id=\"pillowlibrary\">Pillow library</h2>\n<p><a href=\"/pillow/en/stable/\">Pillow</a> is a Python library for image processing that can be installed on with (assuming you have Python already installed)</p>\n<pre><code class=\"python language-python\">pip install Pillow\n</code></pre>\n<p>Finally you can import the library with</p>\n<pre><code class=\"python language-python\">from PIL import Image\n</code></pre>\n<p>into your Python script.</p>\n<p>All images for posts are in a separate \"images /\" folder in the root directory of the project.</p>\n<p>First, all \".jpg\" files in a certain directory are opened with Pillow and all file names are saved in an array. In addition, a variable is required and can later access any name in the array.</p>\n<pre><code class=\"python language-python\">count = 0\nimage_list = []\n\nfor file in glob.iglob('path/to/images/*.jpg'):\n    im=Image.open(file)\n    image_list.append(os.path.basename(file))\n</code></pre>\n<h2 id=\"definesizesandcalculateaspectratio\">Define sizes and calculate aspect ratio</h2>\n<p>Now you should know to which sizes the pictures should be cut and whether, for example, the proportions should be retained.\nFor all \"PostCover\" (pictures in posts) the aspect ratio is ignored and the picture is simply cut to a certain size, which is declared in a global variable.</p>\n<pre><code class=\"python language-python\">size = (1903,453) #(width,height)\n</code></pre>\n<p>With all \"PostThumbnails\" (picture preview) the aspect ratio should be retained and only scaled smaller. A global standard width is defined for this.</p>\n<pre><code class=\"python language-python\">basewidth = 500\n</code></pre>\n<p>Then the original width and height of the images are determined, as we need them to be able to calculate and maintain the aspect ratio.\nOnly the new height is needed here, as the standard width has already been predefined.</p>\n<pre><code class=\"python language-python\">    width, height = im.size\n    wpercent = (basewidth / float(im.size[0]))\n    hsize = int((float(im.size[1]) * float(wpercent)))\n</code></pre>\n<h2 id=\"croppingandrescaling\">Cropping and Rescaling</h2>\n<p>Now you can cut the images with <code>Image.crop</code> or scale them with <code>Image.resize</code>. The new width \"basewidth\" and the calculated height \"hsize\" are now used as parameters for scaling.</p>\n<pre><code class=\"python language-python\">    imThumbnail = im.resize((basewidth, hsize), Image.LANCZOS)\n    imCover = im.crop(((width-size[0])//2, (height-size[1])//2, (width+size[0])//2, (height+size[1])//2))\n</code></pre>\n<p>Then I renamed the thumbnail and saved both new files under <code>static/assets</code> with a quality of \"85\" . \nWith the additional parameter \"optimize = True\" a few KB can be saved.</p>\n<pre><code class=\"python language-python\">    newCover = 'static/assets/{}'.format(image_list[count])\n    newThumbnail = 'static/assets/{}_thumbnail.jpg'.format(image_list[count].replace(\".jpg\", \"\"))\n    imCover.save(newCover,optimize=True,quality=85)\n    imThumbnail.save(newThumbnail,optimize=True,quality=90)\n    count +=1 \n</code></pre>\n<p>Complete script:</p>\n<pre><code class=\"python language-python\">from PIL import Image\nimport glob, os\n\ncount = 0\nimage_list = []\nbasewidth = 500\nsize = (1903,453)\n\n\nfor file in glob.iglob('path/to/images/*.jpg'):\n    im=Image.open(file)\n    image_list.append(os.path.basename(file))\n    width, height = im.size\n    wpercent = (basewidth / float(im.size[0]))\n    hsize = int((float(im.size[1]) * float(wpercent)))\n    imThumbnail = im.resize((basewidth, hsize), Image.LANCZOS)\n    imCover = im.crop(((width-size[0])//2, (height-size[1])//2, (width+size[0])//2, (height+size[1])//2))\n    newCover = 'static/assets/{}'.format(image_list[count])\n    newThumbnail = 'static/assets/{}_thumbnail.jpg'.format(image_list[count].replace(\".jpg\", \"\"))\n    imCover.save(newCover,optimize=True,quality=85)\n    imThumbnail.save(newThumbnail,optimize=True,quality=90)\n    count +=1 \n</code></pre>\n<h2 id=\"runscriptautomatically\">Run script automatically</h2>\n<p>In order not to have to run the script manually every time, you can add the following to \"package.json\".</p>\n<pre><code class=\"json language-json\">    \"img-optimize\": \"py ./src/utils/resize_images.py\"\n</code></pre>\n<p>So you can optimize all images automatically with <code>npm run img-optimize</code>.</p>","date_published":"2020-08-31T20:54:33.058Z","date_modified":"2025-01-22T15:38:47.540Z","tags":["python"],"image":"https://mxd.codes/content/posts/published/scaling-and-cropping-images-using-python/cover.png","banner_image":"https://mxd.codes/content/posts/published/scaling-and-cropping-images-using-python/cover.png","authors":[{"name":"Max Dietrich","url":"https://mxd.codes"}]},{"id":"https://mxd.codes/articles/remote-sensing-and-image-classification","url":"https://mxd.codes/articles/remote-sensing-and-image-classification","title":"Remote Sensing and Image Classification","summary":"Navigation devices, smartphones and weather forecasts are dependent on satellites and without these we have to rely on some services that make our everyday life easier.","content_html":"<h2 id=\"remotesensing\">Remote Sensing</h2>\n<p>Navigation devices, smartphones and weather forecasts are dependent on satellites and without these we have to rely on some services that make our everyday life easier.</p>\n<p>Images of the Earth from satellites or aircraft are constantly being recorded. These remote sensing data often have a resolution of up to 30cm, are recorded in a range from 450nm to 2273nm and are mostly referenced by the operators of the satellites.</p>\n<p>These pictures are then sold or even provided by many providers free of charge.</p>\n<h2 id=\"copernicusopenaccesshub\">Copernicus Open Access Hub</h2>\n<p>On <a href=\"https://scihub.copernicus.eu/dhus/#/home\">Sentinel Open Access Hub</a> you can find free products from the <a href=\"/d-copernicus\">Copernicus Program</a>, those from the <a href=\"https://europa.eu/european-union/index_de\">European Union</a> and others operated by the <a href=\"https://www.esa.int/ESA\">European Space Agency</a> (ESA).</p>\n<p><em>The Copernicus program basically comprises six satellites (<a href=\"/wikipeadi/wiki/Sentinel-1\">Sentinel-1</a>, <a href=\"https://www.wikipedia.com/wiki/Sentinel-2\">Sentinel-2</a>, <a href=\"https://www.wikipedia.com/wiki/Sentinel-3\">Sentinel-3</a>, <a href=\"https://de.wikipedia.org/wiki/Sentinel-4\">Sentinel-4</a> (planned start in 2021), <a href=\"https://www.wikipedia.com/wiki/Sentinel-5\">Sentinel-5</a> and Sentinel-6 (planned start in late 2020) .</em></p>\n<p><em>All of these satellites perform different tasks and help to observe land, sea and the atmosphere.</em></p>\n<p>In the Copernicus Open Access Hub, you can now download all the data provided after registering free of charge. All available data is displayed for download via search criteria and a desired image section, which you can simply draw with a rectangle</p>\n<p><strong>ArcGIS currently supports level 1C products.</strong></p>\n<p>These image files are relatively large and it may take a while (depending on the internet bandwidth) before the ZIP file is downloaded.</p>\n<h2 id=\"imageclassification\">Image classification</h2>\n<p>These multispectral bands can then be integrated in Arc-GIS or QGIS.</p>\n<p>A classification now consists of two main components.</p>\n<ol>\n<li>Generate <a href=\"https://pro.arcgis.com/de/pro-app/help/analysis/image-analyst/training-samples-manager.htm\">Training Samples</a> and</li>\n<li><a href=\"https://data-science-blog.com/blog/2017/12/20/maschine-earning-classification-vs-regression/\">Classification</a> based on the training samples and <a href=\"https://towardsdatascience.com/supervised-machine-learning-model-validation-a-step-by-step-approach-771109ae0253\">validation</a></li>\n</ol>\n<h3 id=\"generate_trainingsamples\">Generate_Training samples</h3>\n<p>First, a classification method must be selected (e.g. supervised and pixel-based). This classification method divides individual pixels of the satellite image into thematic classes, e.g.</p>\n<ul>\n<li>Settlement</li>\n<li>Forest</li>\n<li>Water</li>\n<li>Meadow etc.</li>\n</ul>\n<p>Here the system is taught (<a href=\"https://www.wikipedia.com/wiki/Maschinelles_Learning\">Machine Learning</a>) that, for example, a green pixel stands for the forest class, blue for water, light green for meadow and gray for settlement ,</p>\n<p>In order to get the most realistic result possible, one should choose areas / pixels that are as clear as possible for these samples. That For example, there shouldn't be a gray pixel in the class.</p>\n<p>When the assignment of samples for each class is done, the actual classification now begins.</p>\n<h3 id=\"classificationbasedontrainingsamplesandvalidation\">Classification based on training Samples and validation</h3>\n<p>There are various classification methods that can be used e.g. <a href=\"https://www.wikipedia.com/wiki/Maximum-Likelihood-Methode\">Maximum likelihood</a>. The classification method now only has to be selected and the classification can then be started.</p>\n<p>In order to check the quality of the classification, the results are usually validated with e.g. the <a href=\"https://www.wikipedia.comg/wiki/Ground_Truth\"><em>ground truthing.</em></a> method.</p>\n<p>Then it is checked how many points were classified in the correct class (for example, a settlement was recognized as a settlement). Here one should not be too stingy with the <em>Validierungssamples</em> to achieve a meaningful validation of the image classification.</p>\n<p>This can be noted in an Excel list and the overall accuracy of the classification can be easily calculated. Of course you have to write down the wrong and correct classification.</p>\n<p>And that's it.</p>\n<p>In short, remote sensing is the extraction of geodata or satellite images by satellites and the subsequent methodology (image classification) for evaluating this remote sensing data about the nature of the earth's surfac</p>","date_published":"2020-08-31T20:53:39.052Z","date_modified":"2024-02-22T18:28:40.371Z","tags":["gis"],"image":"https://mxd.codes/content/posts/published/remote-sensing-and-image-classification/cover.png","banner_image":"https://mxd.codes/content/posts/published/remote-sensing-and-image-classification/cover.png","authors":[{"name":"Max Dietrich","url":"https://mxd.codes"}]},{"id":"https://mxd.codes/articles/free-fme-licence-for-private-use","url":"https://mxd.codes/articles/free-fme-licence-for-private-use","title":"Free FME-licence for private use","summary":"FME (Feature Manipulation Engine) is a powerful and the most used spatial ETL tool for the migration and processing of spatial data and non-spatial data.","content_html":"<h2 id=\"fmehomelicense\">FME Home license</h2>\n<blockquote>\n  <p>Safe is at the moment not offering Free FME licences for private use anymore!</p>\n</blockquote>\n<p>FME (Feature Manipulation Engine) is a powerful and the most used spatial ETL tool for the migration and processing of <a href=\"/articles/what-are-geodata\" title=\"What is geodata?\">spatial data</a> and non-spatial data. The software is very flexible and powerful. It can also handle very large amounts of data without problems.</p>\n<p>Feature Manipulation Engine supports over 300 different data sources such as <a href=\"/articles/what-is-gis-geographic-information-system\" title=\"What is GIS?\">GIS</a> - databases] (PostGIS, MySQL, Oracle, of course also most non-spatial databases), CAD files ( DWG, DXF), raster data, web services, coordinate lists, XML, KML, GML, GeoJSON and much more.</p>\n<p>The software is very easy to use and it comes with a nice graphical user interface, in which the source and target data model or format is specified. This also makes complex processing processes very clear.</p>\n<p>In between the readers and writers, countless so-called <a href=\"https://cdn.safe.com/resources/fme/FME-Transformer-Reference-Guide.pdf\" title=\"FME Transformers\">transformers</a> can be used, with which the data can be processed before being imported into a new data source. This workflow can also be supplemented with Python or SQL scripts.</p>\n<p>Safe Software offers FME in three versions:</p>\n<ul>\n<li>FME Desktop</li>\n<li>FME Server</li>\n<li>FME Cloud</li>\n</ul>\n<p>That sounds great, but you still have no idea?</p>\n<p>You can apply for a free (home) license for FME Desktop at <a href=\"https://www.safe.com/free-fme-licenses/home-use/\" title=\"Free Licenses for Home Use\">Free Licenses for Home Use</a>. If you are a student you can apply for a separate license <a href=\"https://www.safe.com/free-fme-licenses/students/\">here</a>.</p>\n<p><strong>This license is of course only for personal and not commercial projects.</strong></p>\n<p>Submitting the application is very easy. All you have to do is enter your name, your email address, your company if applicable, and how you will use the license. Here it is enough to simply write that you want to get to know the program and of course want to learn it.</p>\n<p>As soon as the application has been accepted, you will receive an email with the license key.</p>\n<p>On the page <a href=\"https://www.safe.com/support/support-resources/fme-downloads/\" title=\"Downloads\">Downloads</a> you can then download the desktop version and enter the license key you received after the installation process. The license is valid for one year (four months for students) and can be expanded as required.</p>\n<p>There is a <a href=\"https://community.safe.com/page/knowledge-base\">Knowledge Base</a> where you can find thousands of tutorials.</p>\n<p>For more complex problems, it is also advisable to take a look at <a href=\"https://gis.stackexchange.com/\">gis-stackexchange.com</a>.</p>","date_published":"2020-08-31T20:49:43.880Z","date_modified":"2025-01-22T19:20:42.734Z","tags":["gis"],"image":"https://mxd.codes/content/posts/published/free-fme-licence-for-private-use/cover.webp","banner_image":"https://mxd.codes/content/posts/published/free-fme-licence-for-private-use/cover.webp","authors":[{"name":"Max Dietrich","url":"https://mxd.codes"}]},{"id":"https://mxd.codes/articles/gatsbyjs-codebuild-ci-cd-pipeline","url":"https://mxd.codes/articles/gatsbyjs-codebuild-ci-cd-pipeline","title":"GatsbyJS with CI/CD Pipeline via Codebuild ","summary":"With the free tier for AWS you always get one active AWS code pipeline per month and 100 minutes of AWS code build per month with which you can create a CI / CD pipeline for a GatsbyJS site.","content_html":"<p>With the free <a href=\"https://aws.amazon.com/en/free/free-tier/\" title=\"contingent for AWS\">contingent for AWS</a> you always get an active <a href=\"https://aws.amazon.com/codepipeline/?did=ft_card&trk=ft_card\" title=\"AWS Codepipeline\">AWS code pipeline</a> per month and <a href=\"https://aws.amazon.com/codebuild/?did=ft_card&trk=ft_card\" title=\"100 minutes AWS codebuild\">100 minutes AWS codebuild</a> per month.</p>\n<p>So you can set up a continuous integration and continuous delivery pipeline for free or with more than 100 build minutes a month for relatively little money, which triggers a build with every push to a GitHub repository whoch will be automatically deployed to S3 and optionally also invalidate CloudFront Cache.</p>\n<h2 id=\"codebuild\">CodeBuild</h2>\n<p>First of all you need a new build project in CodeBuild.\nIn the project configuration you can assign a name for it and select GitHub as the source provider under <strong>Source</strong>.</p>\n<p>Depending on whether the repository is public or not, you then select \"Public Repository\" and enter the repository URL or you link your GitHub account and give CodeBuild the necessary rights to access the repository.</p>\n<p>An environment image must now be selected under <strong>Environment</strong>. For GatsbyJS this would be a \"managed image\" and the operating system \"Amazon Linux 2\". \"Standard\" is selected as the runtime (s) and \"aws / codebuild / amazonlinux2-x86_64-standard: 2.0\" as the image.</p>\n<p><img src=\"codebuild_umgebung_e32ebcd3d2_34c630be29.png\" alt=\"codebuild_umgebung_e32ebcd3d2.png\" /></p>\n<p>Now a new service role can be created automatically (which is required) so that CodeBuild has the necessary rights for the AWS account.</p>\n<blockquote>\n  <p>This service role can also be assigned rights for CodePipeline, so that this service role can be used for CodeBuild and CodePipeline.\n  If environment variables are used, these can be specified under \"Additional configuration\" in the environment. You can also make sure that \"3GB RAM, 2vCPUs\" is really selected, since only this option is included in the free contingent.</p>\n</blockquote>\n<p><strong>Buildspec</strong> now uses a buildspec file in YAML format. For a Gatsby site this should somehow look like the following:</p>\n<pre><code class=\"yaml language-yaml\">version: 0.2\nphases:\n    install:\n        runtime-versions:\n            nodejs: 12\n        commands:\n            - 'touch .npmignore'\n            - 'npm install -g gatsby'\n    pre_build:\n        commands:\n            - 'npm install'\n    build:\n        commands:\n            - 'npm run build'\n    post_build:\n        commands:       \n            - 'find public -type f -regex \".*\\.\\(htm\\|html\\|txt\\|text\\|js\\|css\\|json\\)$\" -exec gzip -f -k {} \\' ## sofern cloudfront nicht automatisch die dateien komprimiert\nartifacts:\n    base-directory: public\n    files:\n        - '**/*'\n    discard-paths: no\ncache:\n    paths:\n        - '.cache/*'\n        - 'public/*'\n</code></pre>\n<p>The buildspec.yml file only needs to be placed in the root directory so that CodeBuild can find it.\nIn addition, the build script must of course still be available in \"package.json\".</p>\n<pre><code class=\"json language-json\">\"build\": \"gatsby build\",\n</code></pre>\n<p>The default settings can be retained under <strong>Artifacts</strong>.\nWith CloudWatch you have the possibility to save logs for CodeBuild in an S3 bucket.</p>\n<blockquote>\n  <p>There may be additional costs!</p>\n</blockquote>\n<p>If all settings have now been entered correctly, the build project can be created.\nThe only thing missing now is the code pipeline that triggers a build and deployed it in the S3 bucket.</p>\n<h2 id=\"codepipeline\">CodePipeline</h2>\n<p>For this you switch to CodePipeline and create a new pipeline in which a name and a service role are selected first.</p>\n<p>At Source you can now log in with a GitHub account and link the respective repository with a branch.\nYou now have two options to trigger a build.</p>\n<ul>\n<li>GitHub-Webhooks and</li>\n<li>AWS CodePipeline</li>\n</ul>\n<p>Then you choose the build provider \"AWS CodeBuild\" and the previously created project or (if you have not already done this) create a new project.</p>\n<p>After a build, the public/ folder can also be automatically deployed to an S3 bucket with AWS CodeDeploy.\n<em>Alternatively</em> you can also skip this step and <a href=\"https://github.com/jarizhttps://www.gatsbyjs.com-plugin-s3\" title=\"gatsby-plugin-s3\">gatsby-plugin-s3</a>, which also optimizes caching.</p>\n<pre><code class=\"bash language-bash\">npm i gatsby-plugin-s3\n</code></pre>\n<p>bzw.</p>\n<pre><code class=\"bash language-bash\">yarn add gatsby-plugin-s3\n</code></pre>\n<p>Now the configuration in gatsby-config.js and the deployment script are missing</p>\n<pre><code class=\"javascript language-javascript\">plugins: [\n  {\n      resolve: `gatsby-plugin-s3`,\n      options: {\n          bucketName: 'my-website-bucket'\n      },\n  },\n]\n</code></pre>\n<pre><code class=\"javascript language-javascript\">\"scripts\": {\n    ...\n    \"deploy\": \"gatsby-plugin-s3 deploy --yes\"\n}\n</code></pre>\n<p>The deployment script \"npm run deploy\" must then of course be added to the buildspec file under post-build commands.\nThe CodePipeline should now look something like this:</p>\n<p><img src=\"Code_Pipeline_b8acf52436_43c7fc9910.png\" alt=\"Code_Pipeline_b8acf52436.png\" /></p>\n<p>Experience shows that a build for around 100 pages takes around 10 minutes if you have some pictures per page.</p>\n<p>Every time CodePipeline detects a push to the GitHub repository, a build is automatically triggered and made available on an S3 bucket.</p>\n<p>With <code>aws cloudfront create-invalidation --distribution-id DISTRIBUTION_ID --paths / *</code> the CloudFront cache can also be invalidated.</p>","date_published":"2020-08-31T20:46:00.881Z","date_modified":"2025-01-22T15:37:13.660Z","tags":["ci-cd","gatsby","cloud"],"image":"https://mxd.codes/content/posts/published/gatsbyjs-codebuild-ci-cd-pipeline/cover.png","banner_image":"https://mxd.codes/content/posts/published/gatsbyjs-codebuild-ci-cd-pipeline/cover.png","authors":[{"name":"Max Dietrich","url":"https://mxd.codes"}]},{"id":"https://mxd.codes/articles/gis-and-geo-database-management-system-options","url":"https://mxd.codes/articles/gis-and-geo-database-management-system-options","title":"GIS- and Geo-Database Management System options","summary":"With the ever increasing amount of data, the question arises at some point how it can be managed effectively. GIS databases are used here.","content_html":"<p>As the volume of data continues to surge, effective management becomes paramount. <a href=\"/articles/what-is-gis-geographic-information-system\" title=\"geographic information system\">Geographic Information System (GIS)</a> databases emerge as powerful solutions, facilitating the storage, management, and querying of <a href=\"/articles/what-are-geodata\" title=\"geodata\">geodata</a>. Here, we delve into both free and open-source as well as proprietary GIS databases to aid in your data management endeavors.</p>\n<h2 id=\"freeandopensourcegisdatabases\">Free and Open-Source GIS Databases</h2>\n<p><strong>ArangoDB Community Edition</strong></p>\n<ul>\n<li>A user-friendly, potent open-source NoSQL database with a unique feature set.</li>\n<li>Website: <a href=\"https://www.arangodb.com\">https://www.arangodb.com</a></li>\n</ul>\n<p><strong>PostGIS / PostgreSQL</strong></p>\n<ul>\n<li>PostGIS provides spatial objects for the PostgreSQL database, enabling storage and retrieval of location information.</li>\n<li>Website: <a href=\"https://postgis.net\">https://postgis.net</a> / <a href=\"https://www.postgresql.org\">https://www.postgresql.org</a></li>\n</ul>\n<p><strong>MariaDB</strong></p>\n<ul>\n<li>A leading database server developed by the original creators of MySQL.</li>\n<li>Website: <a href=\"https://mariadb.org/\">https://mariadb.org/</a></li>\n</ul>\n<p><strong>MySQL</strong></p>\n<ul>\n<li>Widely used relational database management system, available as open-source or commercial enterprise versions.</li>\n<li>Website: <a href=\"https://www.mysql.com/\">https://www.mysql.com/</a></li>\n</ul>\n<p><strong>OrientDB</strong></p>\n<ul>\n<li><p>An open-source NoSQL database written in Java, combining features of document-oriented and graph databases.</p></li>\n<li><p>Website: <a href=\"https://www.orientdb.com\">https://www.orientdb.com</a></p>\n<p><strong>SQLite / SpatialLite</strong></p></li>\n<li><p>SpatialLite is an open-source library extending SQLite with comprehensive spatial SQL functions.</p></li>\n<li><p>Website: <a href=\"/sqlite/index.html\">https://www.sqlite.org</a> / <a href=\"https://www.gaia-gis.it/fossil/libspatialite/index\">https://www.gaia-gis.it/fossil/libspatialite</a></p></li>\n</ul>\n<h2 id=\"proprietarygisdatabases\">Proprietary GIS Databases</h2>\n<p><strong>Oracle Spatial</strong></p>\n<ul>\n<li>Oracle Spatial and Graph, a separately licensed component of the Oracle database, is utilized for storing and managing geographic information.</li>\n<li>Website: <a href=\"/oracle/technetwork/database/options/spatialandgraph/downloads/index.html\">https://www.oracle.com</a></li>\n</ul>\n<p>Whether you opt for the flexibility of open-source GIS databases or the robust features of proprietary solutions like Oracle Spatial, the choice depends on your project's specific needs.</p>","date_published":"2020-08-31T20:37:34.710Z","date_modified":"2024-02-19T19:23:18.965Z","tags":["gis","d-1"],"image":"https://mxd.codes/content/posts/published/gis-and-geo-database-management-system-options/cover.png","banner_image":"https://mxd.codes/content/posts/published/gis-and-geo-database-management-system-options/cover.png","authors":[{"name":"Max Dietrich","url":"https://mxd.codes"}]},{"id":"https://mxd.codes/articles/gis-applications-which-gis-applications-are-there","url":"https://mxd.codes/articles/gis-applications-which-gis-applications-are-there","title":"GIS Applications - Which GIS Applications are there?","summary":"In order to be able to work with digital maps or information geodata, a geographic information system is used. With GIS, geodata can be recorded, edited, analyzed and displayed appropriately.","content_html":"<p>In order to be able to work with digital maps or information (<a href=\"/articles/what-are-geodata\" title=\"geodata\">geodata</a>), a <a href=\"/articles/what-is-gis-geographic-information-system\" title=\"What is GIS?\">geographic information system (GIS)</a> is used. With  GIS, geodata can be recorded, edited, analyzed and displayed appropriately. There are now many good providers of geographic information systems, the two best known of which are probably QGIS (Open Source) and ArcGIS from Esri.</p>\n<p>Now you have decided on a GIS, but the question still arises which additional GIS applications (also called industry models) are required or which are available at all. I would like to go into this further in this article.</p>\n<p>Basically there are GIS applications for the following industries:</p>\n<ul>\n<li>Banks</li>\n<li>Education</li>\n<li>Infrastructure development</li>\n<li>Disaster management</li>\n<li>Agriculture</li>\n<li>Logistics</li>\n<li>Marketing</li>\n<li>Medicine</li>\n<li>Telecommunications</li>\n<li>Tourism</li>\n<li>Crime mapping</li>\n<li>Traffic</li>\n<li>Insurance</li>\n<li>Economic development</li>\n</ul>\n<p>For each of these industries, GIS service providers offer different GIS applications and also adapt them individually to the needs of the customers.</p>\n<p>In the following, I would like to go into more detail about a few applications, especially for municipalities (GIS).</p>\n<h2 id=\"treecadastre\">Tree cadastre</h2>\n<p>A tree cadastre supports municipalities and tree care companies in the collection, control and management of tree stands. Trees can be divided into groups of trees and various material data or media can also be added to the trees:</p>\n<ul>\n<li>Number, type, height, crown diameter, degree of sealing, type of soil, damage, maintenance measures carried out or checks and pictures, to name just a few.</li>\n</ul>\n<p>The trend here is towards mobile solutions. This means apps that allow you to enter data into the GIS directly on a tablet using controls or maintenance measures. This data is stored online and can then be corrected or revised later in the office.</p>\n<p>Development plans / land use plans</p>\n<p>Development and land use plans can be easily managed and evaluated in a GIS.</p>\n<p>Depending on the legal validity, areas of validity can be displayed in different colors, changes can be linked to the main plan, and text files, such as additions to the articles of association, can be added.</p>\n<p>In addition, analog development plans can be prepared (scanned, georeferenced) and displayed in the GIS. This can be done with PDF or CAD files, for example.</p>\n<p>As a result, you get a data record for each development plan, to which all associated files and changes are linked, and can present them in an appealing or clear manner.</p>\n<p>Real estate cadastre</p>\n<p>For example, in the case of a construction project in a certain area, all affected citizens can be identified and written to very easily by automatically creating reports using templates for writing and selecting all citizens in this area (in this area in the GIS).</p>\n<h2 id=\"sealingcadastresplitsewagefees\">Sealing cadastre (split sewage fees)</h2>\n<p>All sealed areas of a property are determined in a sealing register. This takes place via a previously carried out aerial survey, in which high-resolution images are taken, or via digitization of satellite images.</p>\n<p>All parcels are combined into one plot and the sealed areas of these parcels are linked to the plot. This enables municipalities to determine the split rainwater fee.</p>\n<h2 id=\"supplynetworks\">Supply networks</h2>\n<h3 id=\"water\">Water</h3>\n<p>Water supply networks can be managed digitally in a GIS. Hydrant plans can be created automatically, which can be very helpful, for example, for the local fire brigade in an emergency.</p>\n<p>Repairs carried out on pipes can be stored digitally, so that you always have an overview of which pipes have already been renovated and which should be renovated in the near future.</p>\n<h3 id=\"sewage\">Sewage</h3>\n<p>Many commissions are legally obliged to keep a channel register.</p>\n<p>A channel register is created either from analog data such as plans, which are digitized, or from a measurement that has been carried out beforehand.</p>\n<p>In a channel cadastre, data such as posture length, depth, cable diameter material, etc. can be saved, managed and analyzed.</p>\n<p>Large corporations now also have wastewater registers for their company premises.</p>\n<h3 id=\"electricitygasbroadbandstreetlighting\">Electricity / gas / broadband / street lighting</h3>\n<p>Enables the acquisition, management and analysis of all supply networks.</p>\n<h3 id=\"treeandgreenareas\">Tree and green areas</h3>\n<p>Allows the construction of a tree and green area register for further planning and maintenance of the inventory.</p>\n<h2 id=\"conclusion\">Conclusion</h2>\n<p>Especially in municipalities, the importance of a geographic information system is beyond question. A lot of time is saved due to less administrative work.</p>\n<p>The various industry models can be easily combined with each other, making work processes much more efficient.</p>\n<p>But also in the private sector, e.g. In the real estate market, in agriculture or in archeology, the advantages of a geographic information system (GIS) are increasingly recognized and used. Mobile apps that are combined with a GIS are particularly popular.</p>\n<p>If you want to see more applications, check out GIS-Geography. There you will find <a href=\"https://gisgeography.com/gis-applications-uses/\" title=\"1000 GIS Applications & Uses - How GIS Is Changing the World\">1000 GIS Applications & Uses - How GIS Is Changing the World</a>.</p>","date_published":"2020-08-31T20:29:09.791Z","date_modified":"2024-02-19T19:23:06.498Z","tags":["gis","open-source","web-mapping"],"image":"https://mxd.codes/content/posts/published/gis-applications-which-gis-applications-are-there/cover.png","banner_image":"https://mxd.codes/content/posts/published/gis-applications-which-gis-applications-are-there/cover.png","authors":[{"name":"Max Dietrich","url":"https://mxd.codes"}]},{"id":"https://mxd.codes/articles/gis-volunteering-make-the-world-a-better-place-with-gis","url":"https://mxd.codes/articles/gis-volunteering-make-the-world-a-better-place-with-gis","title":"GIS volunteering - Make the world a better place with GIS","summary":"Volunteering offers a good opportunity to develop personally and professionally. You can also get involved in a good cause. You can later pack the projects into a pretty portfolio and thus stand out from the competition with extra points when applying.","content_html":"<p><a href=\"/articles/what-is-gis-geographic-information-system\" title=\"What is GIS?\">GIS</a> Volunteering offers a good opportunity to develop personally and professionally.</p>\n<p>You can also get involved in a good cause. You can later pack the projects into a pretty portfolio and thus stand out from the competition with extra points when applying.</p>\n<p>What's even better is that you can join these organizations with a PC at home and don't have to travel the world.</p>\n<h2 id=\"openstreetmap\">OpenStreetMap</h2>\n<p><img src=\"https://upload.wikimedia.org/wikipedia/commons/thumb/b/b0/Openstreetmap_logo.svg/256px-Openstreetmap_logo.svg.png\" alt=\"OpenStreetMap\" title=\"OpenStreetMap\" /></p>\n<p><a href=\"https://www.openstreetmap.org/\">https://www.openstreetmap.org/</a></p>\n<p>OpenStreetMap is an international project that was founded in 2004.</p>\n<p>The aim of OSM is to create a free world map and make it available to everyone free of charge. The data is collected by volunteers (also known as ** mappers **). Data on roads, railways, rivers, forests, houses, etc. are collected.</p>\n<h3 id=\"howtojoin\">How to join</h3>\n<p>There are many different ways to contribute to OpenStreetMap, from reporting small errors on the map, completing existing data, drawing new buildings from aerial photographs and recording routes and points of interest with the GPS device. Our instructions will help you use the right programs and enter data. (OpenStreetMap).</p>\n<p><a href=\"https://www.openstreetmap.org/user/new?cookie_test=true\">Join…</a></p>\n<h2 id=\"humanitarianopenstreetmapteam\">Humanitarian OpenStreetMap Team</h2>\n<p><img src=\"https://www.hotosm.org/images/hot-logo-icon-nav.svg\" alt=\"Humanitarian OpenStreetMap Team\" title=\"Humanitarian OpenStreetMap Team\" /></p>\n<p><a href=\"https://www.hotosm.org/\">https://www.hotosm.org/</a></p>\n<p>The Humanitarian OpenStreetMap Team (HOT) is an international team dedicated to the mapping and mapping of humanitarian actions and the development of communities. The data are used to reduce risks in the and to work on sustainable development.</p>\n<h3 id=\"gisfreiwilligenarbeitmithot\">GIS Freiwilligenarbeit mit HOT</h3>\n<p>As a <strong>mapping volunteer</strong> you can collect data for maps as with OpenStreetMap. ** Humanitarian and GIS Professionals ** also help in additional areas, such as data processing, validation of maps or create completely new maps and visualizations.</p>\n<p><a href=\"https://www.hotosm.org/volunteer#humanitarian-and-gis-professionals\">Join…</a></p>\n<h2 id=\"standbytaskforce\">Standby Task Force</h2>\n<p><img src=\"https://www.standbytaskforce.org/wp-content/uploads/2016/02/cropped-Logo_SBTF_RED-03-450x203.png\" alt=\"Standby Task Force\" title=\"Standby Task Force\" /></p>\n<p><a href=\"https://www.standbytaskforce.org/\">https://www.standbytaskforce.org/</a></p>\n<p>Standby Task Force is a global network of trained and experienced volunteers who work together online.</p>\n<p>The Standby Task Force is a non-profit organization founded in 2010.</p>\n<p>The Standby Task Force has been involved in many natural disasters since then, and the volunteers have assisted many humanitarian organizations in election observation and other projects.</p>\n<h3 id=\"voluntarywiththestandbytaskforce\">Voluntary with the Standby Task Force</h3>\n<p>You should already have professional experience in the areas of GIS management, disaster management and other technical areas.</p>\n<p><a href=\"https://www.standbytaskforce.org/help-us/volunteer-with-us/\">Join…</a></p>\n<h2 id=\"giscorps\">GISCorps</h2>\n<p><img src=\"https://www.urisa.org/clientuploads/directory/graphics/gc_logo.jpg\" alt=\"GISCorp\" title=\"GISCorp\" /></p>\n<p><a href=\"https://www.giscorps.org/\">https://www.giscorps.org/</a>\nGISCorps coordinates short-term, voluntary GIS services for disadvantaged communities.</p>\n<p>The projects vary according to the needs of the partner agency and can include all aspects of GIS, including analysis, cartography, app development, needs analysis, technical workshops etc.</p>\n<p>The service areas include humanitarian aid, disaster protection, environmental protection, health and health personnel services, GIS training and crowdsourcing of experts. GISCorps is supported by individual donations, companies and other non-profit groups with similar goals.</p>\n<h3 id=\"engage\">Engage</h3>\n<p>At GISCorps there are several ways to get involved. You can apply as a volunteer and actively support GIS projects. You can get a one-year ArcGIS license for free here, provided you are accepted.</p>\n<p>You can of course also support the project with donations.</p>\n<p><a href=\"https://www.giscorps.org/become-a-volunteer/\">Join…</a></p>","date_published":"2020-08-31T20:24:44.651Z","date_modified":"2024-02-19T19:22:34.511Z","tags":["gis"],"image":"https://mxd.codes/content/posts/published/gis-volunteering-make-the-world-a-better-place-with-gis/cover.png","banner_image":"https://mxd.codes/content/posts/published/gis-volunteering-make-the-world-a-better-place-with-gis/cover.png","authors":[{"name":"Max Dietrich","url":"https://mxd.codes"}]},{"id":"https://mxd.codes/articles/geo-and-gis-podcasts-to-stay-up-to-date","url":"https://mxd.codes/articles/geo-and-gis-podcasts-to-stay-up-to-date","title":"Geo and GIS Podcasts to stay up to date","summary":"Podcasts are a great way to keep up to date with current developments. Best of all, you can listen to podcasts practically anywhere.","content_html":"<p>Podcasts are a great way to keep up to date with current developments. Best of all, you can listen to podcasts practically anywhere.</p>\n<h2 id=\"veryspatial\">VerySpatial</h2>\n<p>The podcast is hosted by Jesse Rouse, Sue Bergeron and Frank Lafone. An established podcast that discusses geography, geographic information technologies and the impact of <a href=\"/en/gis/geographic-information-system-what-is-gis\" title=\"What is GIS\">GIS</a> on everyday digital life.</p>\n<p><a href=\"http://veryspatial.com/\">http://veryspatial.com/</a></p>\n<p><img src=\"VSLogo_Small_400x400.jpg\" alt=\"VerySpatial Podcast\" title=\"VerySpatial\" /></p>\n<h2 id=\"mapscaping\">Mapscaping</h2>\n<p>New podcast. Mainly interviews with people from the GIS and geo industry.</p>\n<p><a href=\"https://mapscaping.com/blogs/the-mapscaping-podcast\">https://mapscaping.com/blogs/the-mapscaping-podcast</a></p>\n<p><img src=\"/gedY7m5O_400x400.jpg\" alt=\"Mapscaping Podcast\" title=\"Mapscaping\" /></p>\n<h2 id=\"radioosm\">Radio OSM</h2>\n<p>Reports and news about OpenStreetMap, the free wiki world map.</p>\n<p><a href=\"https://podcast.openstreetmap.de/\">https://podcast.openstreetmap.de/</a></p>\n<p><img src=\"podcast-e1557674429764-150x150.png\" alt=\"Radio OSM\" /></p>\n<h2 id=\"geodorable\">Geodorable</h2>\n<p>A podcast that can contain everything and everyone about the <a href=\"/geodata-what-is-geodata\">geodata</a> world.</p>\n<p><a href=\"https://geodorable.com/\">https://geodorable.com/</a></p>\n<p><img src=\"index.jpg\" alt=\"Geodorable Podcast\" title=\"Geodorable\" /></p>\n<h2 id=\"themappyisthour\">The Mappyist Hour</h2>\n<p>Geographers and geo-types who talk about how incredible their job is after work.</p>\n<p><a href=\"http://www.themappyisthour.com/\">http://www.themappyisthour.com/</a></p>\n<p><img src=\"F_739vLb_400x400.jpg\" alt=\"The Mappyist Hour Podcast\" title=\"The Mappyist Hour\" /></p>\n<h2 id=\"speakingofgis\">Speaking of GIS</h2>\n<p>A podcast by Kurt Towler. The podcast includes interviews with other geospatialists and reviews of conferences.</p>\n<p><a href=\"https://speakingofgis.com/\">https://speakingofgis.com/</a></p>\n<p><img src=\"ltcN4uOG_400x400.jpg\" alt=\"Speaking of GIS Podcast\" title=\"Speaking of GIS\" /></p>\n<h2 id=\"scenefromabove\">Scene from Above</h2>\n<p>A podcast with a view of the world of modern <a href=\"/en/tags/remote-sensing\">remote sensing</a> and earth observation. Driven by their passion for all grid and geodata, they strive for a mix of news, opinions, discussions and interviews.</p>\n<p><a href=\"http://scenefromabove.org/\">http://scenefromabove.org/</a></p>\n<p><img src=\"XIxrl16S_400x400.jpg\" alt=\"Scene from Above Podcast\" title=\"Scene from Above\" /></p>\n<h2 id=\"directionsmagazine\">Directions Magazine</h2>\n<p>Every six weeks, new location-based podcasts are released by another geographic information branch.</p>\n<p><a href=\"https://player.fm/series/directions-magazine-podcasts\">https://player.fm/series/directions-magazine-podcasts</a></p>\n<p><img src=\"VrHWMDgk_400x400.jpg\" alt=\"Directions Magazine Podcast\" title=\"Directions Magazine \" /></p>\n<h2 id=\"cageyjamesgeobabbler\">Cageyjames &amp; Geobabbler</h2>\n<p>This monthly podcast by James Fee and Bill Dollins is about how you can use spatial technologies in your workflow.</p>\n<p><a href=\"https://cng.fireside.fm/\">https://cng.fireside.fm/</a></p>\n<p><img src=\"cagey.png\" alt=\"Cageyjames & Geobabbler Podcast\" title=\"Cageyjames & Geobabbler\" /></p>\n<h2 id=\"geographicalimaginations\">Geographical Imaginations</h2>\n<p>Geographical Imaginations Expedition &amp; Institute is a growing public geography initiative for multimedia media that aims to bring together academic and everyday geographic or spatial thinking.</p>\n<p><a href=\"https://podcasts.apple.com/us/podcast/geographical-imaginations/id1386704057?mt=2\">https://podcasts.apple.com/us/podcast/geographical-imaginations/id1386704057?mt=2</a></p>\n<p><img src=\"170x170bb.jpg\" alt=\"Geographical Imaginations\" /></p>\n<h2 id=\"womenanddrones\">Women and Drones</h2>\n<p>A podcast that serves to make women in the UAS industry better known around the world.</p>\n<p><a href=\"http://womenanddrones.libsyn.com/\">http://womenanddrones.libsyn.com/</a></p>\n<p><img src=\"nCObdGxO_400x400.jpg\" alt=\"Women and Drones Podcast\" title=\"Women and Drones\" /></p>","date_published":"2020-08-31T20:17:05.539Z","date_modified":"2024-02-19T19:22:23.116Z","tags":["gis"],"image":"https://mxd.codes/content/posts/published/geo-and-gis-podcasts-to-stay-up-to-date/cover.png","banner_image":"https://mxd.codes/content/posts/published/geo-and-gis-podcasts-to-stay-up-to-date/cover.png","authors":[{"name":"Max Dietrich","url":"https://mxd.codes"}]},{"id":"https://mxd.codes/articles/gis-software-options-free-open-source-and-proprietary","url":"https://mxd.codes/articles/gis-software-options-free-open-source-and-proprietary","title":"Free, Open-Source and proprietary GIS software options","summary":"In this post you will find a list of free and/or open-source and proprietary GIS-software options which are commonly used","content_html":"<p>In this post you will find a list of free and/or open-source and proprietary <a href=\"/articles/what-is-gis-geographic-information-system\">GIS</a>-software options.</p>\n<h2 id=\"freeandopensourcedesktopgissoftware\">Free and open-source desktop-GIS software</h2>\n<p><strong>1. <a href=\"https://www.qgis.org\" title=\"QGIS\">QGIS</a></strong></p>\n<p>QGIS is a free and open-source geographic information system.\nWith QGIS you can create, modify, visualize and analyze spatial data on Windows, Mac, Linux, BSD and Android.</p>\n<p><strong>2. <a href=\"https://grass.osgeo.org/\" title=\"GRASS GIS\">GRASS GIS</a></strong></p>\n<p>GRASS GIS is a hybrid, modular geographic information system software with grid and vector-oriented functions.</p>\n<p><strong>3. <a href=\"http://www.saga-gis.org/\" title=\"SAGA GIS\">SAGA GIS</a></strong></p>\n<p>Software for automated geoscientific analysis. The SAGA project is mainly developed at the Department of Geography at the University of Hamburg.</p>\n<p><strong>4. <a href=\"http://www.openjump.org/\" title=\"JUMP GIS/OpenJUMP\">JUMP GIS/OpenJUMP</a></strong></p>\n<p>Java based open-source GIS.</p>\n<p><strong>5. <a href=\"https://geodacenter.github.io/\" title=\"GeoDa\">GeoDa</a></strong></p>\n<p>GeoDa is a free and open-source GIS-software and serves as an introduction to geodata analysis.</p>\n<p><strong>6. <a href=\"http://www.gvsig.com/en\" title=\"gvSIG\">gvSIG</a></strong></p>\n<p>Open-Source Desktop, Online und Mobile GIS.</p>\n<p><strong>7. <a href=\"http://www.mapmaker.com/v4/Map%20maker%204.Pro.htm\" title=\"MapmakerPro\">MapmakerPro</a></strong></p>\n<p>MapMaker is aimed at specialists who need to create maps. For example foresters, archaeologists, emergency services, etc..</p>\n<p><strong>8. <a href=\"http://www.diva-gis.org/\" title=\"DIVA GIS\">DIVA GIS</a></strong></p>\n<p>DIVA-GIS is a free GIS for mapping and analyzing geographic data.</p>\n<p><strong>9. <a href=\"http://www.dpi.inpe.br/terralib_previous/index.php\" title=\"TerraLib\">TerraLib</a></strong></p>\n<p>TerraLib is an open source GIS software library that supports the development of custom geographic applications.</p>\n<p><strong>10. <a href=\"https://sourceforge.net/projects/kalypso/\" title=\"Kalypso\">Kalypso</a></strong></p>\n<p>Kalypso is an open source modeling program. The focus is on numerical simulations in water management and ecology.</p>\n<p><strong>11. <a href=\"http://orbisgis.org/\" title=\"OrbisGIS\">OrbisGIS</a></strong></p>\n<p>OrbisGIS is a cross-platform open source GIS developed by and for research.</p>\n<p><strong>12. <a href=\"https://sourceforge.net/projects/ozgis/\" title=\"OzGIS\">OzGIS</a></strong></p>\n<p>OzGIS is a GIS for analyzing and displaying spatial statistics.</p>\n<p><strong>13. FalconView</strong></p>\n<p>FalconView is a GIS developed by the Georgia Tech Research Institute.</p>\n<p><strong>14. <a href=\"https://www.itc.nl/ilwis/\" title=\"ILWIS\">ILWIS</a></strong></p>\n<p>The Integrated Land and Water Information System (ILWIS) is a desktop-based GIS and remote sensing software that was developed by ITC up to Release 3.3 in 2005.</p>\n<p><strong>15. <a href=\"https://www.mapwindow.org/\" title=\"MapWindow GIS\">MapWindow GIS</a></strong></p>\n<p>MapWindow GIS is an open source GIS desktop application that is used by a large number of users and organizations around the world.</p>\n<p><strong>16. <a href=\"https://www.uoguelph.ca/~hydrogeo/Whitebox/\" title=\"Whitebox GAT\">Whitebox GAT</a></strong></p>\n<p>Whitebox Geospatial Analysis Tools is an open source, cross-platform geospatial information system and remote sensing software package.</p>\n<p><strong>17. <a href=\"http://www.capaware.org/\" title=\"Capaware\">Capaware</a></strong></p>\n<p>3D-world-viewer.</p>\n<p><strong>18. <a href=\"http://gmt.soest.hawaii.edu/\" title=\"Generic Mapping Tools\">Generic Mapping Tools</a></strong></p>\n<p>The Generic Mapping Tools are a collection of free software for creating geological or geographical maps and diagrams.</p>\n<h2 id=\"proprietarygissoftware\">Proprietary GIS Software</h2>\n<p><strong>19. ArcGIS, ArcView</strong></p>\n<p>ArcGIS is the generic term for various GIS software products from Esri.</p>\n<p><strong>20. AutoCAD Map3D</strong></p>\n<p>AutoCAD Map3D from Autodesk is a GIS software solution and offers extensive access to all CAD and GIS data and enables its creation and editing.</p>\n<p><strong>21. Aquaevo GIS</strong></p>\n<p>Aquaveo is a GIS software for modeling environmental and water resources.</p>\n<p><strong>22. Bentley Map</strong></p>\n<p><strong>23. Cadcorp</strong></p>\n<p>Cadcorp's GIS and Web Mapping Software are GIS software products for the creation, analysis and data management of geodata.</p>\n<p><strong>24. Conform</strong></p>\n<p>Conform is a GIS software for merging, visualizing, editing and exporting 3D environments for urban planning, games and simulations.</p>\n<p><strong>25. Dragon / ips</strong></p>\n<p>Dragon / ips is a remote sensing image processing software.</p>\n<p><strong>26. ENVI</strong></p>\n<p>The ENVI image analysis software is used by GIS experts, remote sensing scientists and image analysts to extract meaningful information from images to help them make better decisions.</p>\n<p><strong>27. ERDAS IMAGINE</strong></p>\n<p>ERDAS IMAGINE is software for evaluating remote sensing data, especially graphics and photos.</p>\n<p><strong>28. Field-Map</strong></p>\n<p>Field-Map is a proprietary integrated tool for programmatic field data acquisition by IFER - Monitoring and Mapping Solutions, Ltd. It is mainly used for mapping forest ecosystems and for data collection during field analysis.</p>\n<p><strong>29. Geosoft</strong></p>\n<p>GEOSOFT is one of Germany's leading developers of geodetic computing and organizational software for private and public surveying agencies.</p>\n<p><strong>30. GeoTime</strong></p>\n<p>GeoTime is a geodata analysis software that enables the visual analysis of events over time. The third dimension adds time to a two-dimensional map so that users can see changes in time series data.</p>\n<p><strong>31. Global Mapper</strong></p>\n<p>Geographic information system with distance and area calculation; offers an integrated scripting language, 3D display and GPS tracks.</p>\n<p><strong>32. Golden Software</strong></p>\n<p>Surfer and Mapviewer are two software solutions with a variety of mapping and adaptation options and support any geodata format (including LiDAR data), 3D visualization, as well as volume / distance / area calculations.</p>\n<p><strong>33. Intergraph</strong></p>\n<p>GeoMedia is a GIS software from Intergraph. GeoMedia is a software product family with desktop GIS, web GIS and is mainly aimed at municipalities.</p>\n<p><strong>34. Manifold System</strong></p>\n<p>Manifold System is software for the management of digital maps. Digital maps and remote sensing data can be easily edited.</p>\n<p><strong>35. MapInfo</strong></p>\n<p>MapInfo Professional is a geographic information system software from the US company MapInfo Corporation.</p>\n<p><strong>36. Maptitude</strong></p>\n<p>Maptitude is a mapping software program created by Caliper Corporation that allows users to view, edit, and integrate maps. The software and technology are designed to facilitate the geographic visualization and analysis of contained data or user-defined external data.</p>\n<p><strong>37. Netcad</strong></p>\n<p>NETCAD GIS is a CAD and GIS software that supports international standards and was designed for users of engineering and geographic information systems.</p>\n<p><strong>38. RegioGraph</strong></p>\n<p>RegioGraph is a geomarketing software specializing in questions in the areas of marketing, sales, controlling, logistics and corporate strategy.</p>\n<p><strong>39. RIWA GIS Zentrum</strong></p>\n<p>The RIWA GIS Zentrum is a powerful, web-based geographic information system that has been used in numerous municipal administrations and industrial companies for many years.</p>\n<p><strong>40. Smallworld</strong></p>\n<p>Smallworld GIS is the professional geographic information system for network operators in the energy and water industries.</p>\n<p><strong>41. TNTmips</strong></p>\n<p>TNTmips is a geospatial data analysis system that offers a fully featured GIS, RDBMS and automated image processing system with CAD, TIN, surface modeling, map layout and innovative data publishing tools.</p>\n<p><strong>42. TerrSet ( IDRISI )</strong></p>\n<p>TerrSet is an integrated geographic information system and remote sensing software for monitoring and modeling the Earth system.</p>\n<p><strong>43. <a href=\"https://www.google.de/earth/download/gep/agree.html\" title=\"Google Earth Pro\">Google Earth Pro</a></strong></p>\n<p>Google Earth Pro Desktop is free and intended for users who need advanced features. You can import and export GIS data and go on a journey through time with the help of historical images. </p>\n<h2 id=\"onlinegis\">Online GIS</h2>\n<p><strong>44. <a href=\"http://www.bing.com/maps/\" title=\"Bing Maps\">Bing Maps</a></strong></p>\n<p>Bing Maps is an online map service from Microsoft, through which various spatial data can be viewed and spatial services can be used. It is a further development of the MSN Virtual Earth and is part of the Bing search engine.</p>\n<p><strong>45. <a href=\"http://maps.google.de/\" title=\"Google Maps\">Google Maps</a></strong></p>\n<p>Google Maps is an online map service from the US company Google LLC. The surface of the earth can be viewed as a road map or as an aerial or satellite image, with locations of institutions or known objects also being displayed. The service started on February 8, 2005.</p>\n<p><strong>46. <a href=\"http://worldwind.arc.nasa.gov/java/\" title=\"NASA World Wind\">NASA World Wind</a></strong></p>\n<p>NASA World Wind is an open source software that enables satellite and aerial images to be displayed on a virtual globe combined with elevation data and to be zoomed in anywhere in the world in 3D graphics and viewed freely from all sides.</p>\n<p><strong>47. <a href=\"http://www.openstreetmap.org/\" title=\"OpenStreetMap\">OpenStreetMap</a></strong></p>\n<p>OpenStreetMap is a free project, which collects freely usable geodata, structures it and keeps it in a database for everyone to use. This data is under a free license, the Open Database License.</p>\n<p><strong>48. <a href=\"http://www.wikimapia.org/\" title=\"Wikimapia\">Wikimapia</a></strong></p>\n<p>Wikimapia is a web interface that combines maps with a restricted wiki system without hypertext functions. It allows the user to add information in the form of a note to any position on the earth.</p>\n<h2 id=\"othergistoolsandsoftwareusedwithgis\">Other GIS-Tools and Software used with GIS</h2>\n<p><strong>49. <a href=\"https://live.osgeo.org/de/overview/gdal_overview.html\" title=\"GDAL/OGR\">GDAL/OGR</a></strong></p>\n<p>The Geospatial Data Abstraction Library (GDAL / OGR) provides command line-based auxiliary programs. A large number of raster and vector geodata formats can be converted and processed using these.</p>\n<p><strong>50. <a href=\"https://leafletjs.com/\" title=\"Leaflet\">Leaflet</a></strong></p>\n<p>Leaflet is the leading open-source JavaScript library for mobile-friendly interactive maps.</p>\n<p><strong>51. <a href=\"https://openlayers.org/\" title=\"OpenLayers\">OpenLayers</a></strong></p>\n<p>OpenLayers makes it easy to put a dynamic map in any web page. It can display map tiles, vector data and markers loaded from any source.</p>\n<p><strong>52. <a href=\"https://www.r-project.org/\" title=\"R\">R</a></strong></p>\n<p>R is a free programming language for statistical calculations and graphics.</p>\n<p><strong>53. <a href=\"https://www.blender.org/\" title=\"Blender\">Blender</a></strong></p>\n<p>Blender is a free, GPL-licensed 3D graphics suite with which bodies can be modeled, textured and animated.</p>","date_published":"2020-08-31T20:14:09.355Z","date_modified":"2024-02-19T19:22:12.103Z","tags":["gis"],"image":"https://mxd.codes/content/posts/published/gis-software-options-free-open-source-and-proprietary/cover.png","banner_image":"https://mxd.codes/content/posts/published/gis-software-options-free-open-source-and-proprietary/cover.png","authors":[{"name":"Max Dietrich","url":"https://mxd.codes"}]},{"id":"https://mxd.codes/articles/how-to-create-a-mailchimp-newsletter-sign-up-form-for-your-gatsby-site","url":"https://mxd.codes/articles/how-to-create-a-mailchimp-newsletter-sign-up-form-for-your-gatsby-site","title":"How to create a Mailchimp newsletter sign-up-form for your Gatsby Site","summary":"Managing your own newsletter is crucial for creating a sustainable online-business. With E-Mails you can build a relationsship with your audience and engage with them so they will drive some nice traffic to your new post or whatever you just have published and want to promote.","content_html":"<p>Managing your own newsletter is crucial for creating a sustainable online-business. With E-Mails you can build a relationsship with your audience and engage with them so they will drive some nice traffic to your new post or whatever you just have published and want to promote.</p>\n<p>If you are using Mailchimp you can use the plugin <a href=\"https://github.com/benjaminhoffmanhttps://www.gatsbyjs.com-plugin-mailchimp\" title=\"gatsby-plugin-mailchimp\">gatsby-plugin-mailchimp</a> to manage your e-mail list.</p>\n<h2 id=\"gettingstarted\">Getting started</h2>\n<p>Simply add the plugin to your package.json with</p>\n<pre><code class=\"bash language-bash\">npm install gatsby-plugin-mailchimp\n</code></pre>\n<p>or</p>\n<pre><code class=\"bash language-bash\">yarn add gatsby-plugin-mailchimp\n</code></pre>\n<p>and implement it in your <strong>gatsby.config.js</strong> like</p>\n<pre><code class=\"javascript language-javascript\">{\n        resolve: 'gatsby-plugin-mailchimp',\n        options: {\n            endpoint: '', // string; add your MC list endpoint here; see instructions below\n            timeout: 3500, // number; the amount of time, in milliseconds, that you want to allow mailchimp to respond to your request before timing out. defaults to 3500\n        },\n    },\n</code></pre>\n<p>If you don't have your Mailchimp endpoint yet i would suggest to have a README of gatsby-plugin-mailchimp. They described every step with images so it's really easy to get your endpoint url.</p>\n<blockquote>\n  <p>Once you have your Mailchimp endpoint you should save it as environment variable in your project.</p>\n</blockquote>\n<h2 id=\"creatingasignupform\">Creating a sign-up form</h2>\n<p>Only thing you will need is to import the <strong>addToMailChimp</strong> method to your newsletter sign-up component which will work like this:</p>\n<pre><code class=\"javascript language-javascript\">import addToMailchimp from 'gatsby-plugin-mailchimp'\n</code></pre>\n<p>(I am actually working with styled components which are stored in a separate file in the same folder. This file is imported with</p>\n<pre><code class=\"javascript language-javascript\">import * as S from './styled'\n</code></pre>\n<p>and the components then are used like <strong>S.NewsletterWrapper</strong>. But to make it a bit more clear i declared everything in the same file for this post.)</p>\n<p>So now you need some styled (and responsive) components which will create your actual form like:</p>\n<pre><code class=\"javascript language-javascript\">&lt;NewsletterWrapper&gt;\n  &lt;DescriptionWrapper&gt;\n    &lt;p&gt;\n      Do you want to know when I post something new? &lt;br/&gt; \n      Then subscribe to my newsletter.\n      🚀\n    &lt;/p&gt;\n  &lt;/DescriptionWrapper&gt;\n  &lt;InputWrapper&gt;\n    &lt;Input\n      type=\"email\"\n      name=\"email\"\n      id=\"mail\"\n      label=\"email-input\"\n      placeholder=\"Your e-mail address\"\n      onChange={(e) =&gt; setEmail(e.target.value)}\n    /&gt;\n  &lt;/InputWrapper&gt;\n  &lt;ButtonWrapper&gt;\n    &lt;Button\n      type=\"button\"\n      aria-label=\"Subscribe\"\n      onClick={() =&gt; handleSubmit()}\n    &gt;\n    Subscribe\n    &lt;/Button&gt;\n  &lt;/ButtonWrapper&gt;\n&lt;/NewsletterWrapper&gt;\n</code></pre>\n<p>In this component you will show a different message from the default one after a user has successfully subscribed to your newsletter.\nTo do so you need a variable which will store the current state (submitted = true or submitted = false). \nThis variable will have the default value <strong>false</strong>, which will be set to <strong>true</strong> after a user has subscribed successfully.</p>\n<p>So if a user clicks on the \"Subscribe-Button\" the function <strong>handleSubmit</strong> will be executed which does the following:</p>\n<ul>\n<li>input data will be send to the Mailchimp endpoint with <code>addToMailchimp(email)</code>,</li>\n<li>if the returned property from the Mailchim API has the value \"error\" your error handling function will handle the event,</li>\n<li>otherwise the subscribe is being tracking with a custom Google Analytics event and submitted will be set to true.</li>\n</ul>\n<blockquote>\n  <p>The Mailchimp API will always return a object with the properties <strong>result</strong> and <strong>msg</strong>.</p>\n</blockquote>\n<pre><code class=\"javascript language-javascript\">{\n    result: string; // either `success` or `error` (helpful to use this key to update your state)\n    msg: string; // a user-friendly message indicating details of your submissions (usually something like \"thanks for subscribing!\" or \"this email has already been added\")\n}\n</code></pre>\n<p>Finally you just have to check the value of <strong>submitted</strong> and render the relevant content like the following:</p>\n<pre><code class=\"javascript language-javascript\">  return (\n    &lt;&gt;\n      {submitted ? (\n        &lt;NewsletterWrapper&gt;\n          &lt;DescriptionWrapper&gt;\n            &lt;h2&gt;\n              🎉 Successfully subscribed! 🎉\n            &lt;/h2&gt;\n            &lt;p&gt;\n            Thank your for your interest in my content.\n            &lt;/p&gt;\n          &lt;/DescriptionWrapper&gt;\n        &lt;/NewsletterWrapper&gt;\n      ) : (\n        &lt;NewsletterWrapper&gt;\n            &lt;DescriptionWrapper&gt;\n              &lt;p&gt;\n                Do you want to know when I post something new? &lt;br/&gt; \n                Then subscribe to my newsletter.\n                🚀\n              &lt;/p&gt;\n            &lt;/DescriptionWrapper&gt;\n          &lt;InputWrapper&gt;\n            &lt;Input\n              type=\"email\"\n              name=\"email\"\n              id=\"mail\"\n              label=\"email-input\"\n              placeholder=\"Your e-mail address\"\n              onChange={(e) =&gt; setEmail(e.target.value)}\n            /&gt;\n          &lt;/InputWrapper&gt;\n          &lt;ButtonWrapper&gt;\n            &lt;Button\n              type=\"button\"\n              aria-label=\"Subscribe\"\n              onClick={() =&gt; handleSubmit()}\n            &gt;\n              \"Subscribe\"\n            &lt;/Button&gt;\n          &lt;/ButtonWrapper&gt;\n        &lt;/NewsletterWrapper&gt;\n      )}\n    &lt;/&gt;\n  )\n}\n</code></pre>\n<p>If you want to learn more about sign-up forms i suggest to have a look at <a href=\"https://sld.codes/articles/Non-Invasive-Sign-Up-Forms\" title=\"Non-Invasive Sign Up Forms\">Non-Invasive Sign Up Forms</a> from Slarsen Disney. He is creating super UX-friendly websites and is sharing the code for it.</p>\n<pre><code class=\"javascript language-javascript\">import addToMailchimp from \"gatsby-plugin-mailchimp\"\nimport React, { useState } from \"react\"\nimport ConfettiAnimation from \"../Animations/ConfettiAnimation\"\nimport { trackCustomEvent } from \"gatsby-plugin-google-analytics\"\nimport styled from 'styled-components';\n\nexport const NewsletterWrapper = styled.form`\n    display: flex;\n    flex: 0 1 auto;\n    flex-direction: row;\n    flex-wrap: wrap;\n    box-sizing: border-box;\n    max-width: 750px;\n    justify-content: center;\n`\nexport const DescriptionWrapper = styled.div`\n    text-align: center;\n    flex-grow: 0;    \n    flex-shrink: 0;\n    flex-basis: 100%;    \n    max-width: 100%;\n`\n\nexport const InputWrapper = styled.div`\n    flex-direction: column;\n    justify-content: center;\n    display: flex;\n    flex-grow: 0;\n    flex-shrink: 0;\n    flex-basis: 50%;\n    max-width: 66.66667%;\n`\n\nexport const Input = styled.input`\n    padding-top: 15px!important;\n    padding-bottom: 15px!important;\n    padding: 12px 20px;\n    margin: 8px 0;\n    box-sizing: border-box;\n    border: 2px solid hsla(0,0%,90.2%,.95);\n    :invalid {\n        border: 1px solid red;\n    }\n`\n\nexport const ButtonWrapper = styled.div`\n    flex-direction: column;\n    justify-content: center;\n    display: flex;\n    flex-grow: 0;\n    flex-shrink: 0;\n    flex-basis: 50%;\n    max-width: 33.33333%;\n`\n\nexport const Button = styled.button`\n    box-sizing: border-box;\n    border: 2px solid ${props =&gt;\n        props.background ? props.background : 'white'};\n    color: white;\n    text-transform: uppercase;\n    position: relative;\n    padding-top: 15px!important;\n    padding-bottom: 15px!important;\n    outline: none;\n    overflow: hidden;\n    width: 100%;\n    transition: all .2s ease-in-out;\n    text-align: center;\n    background: ${props =&gt;\n        props.background ? props.background : 'hsla(0,0%,90.2%,.95)'};\n    :hover {\n        box-shadow: rgba(0, 0, 0, 0.5) 0px 8px 16px 0px;\n        transform: translateY(0) scale(1);\n`\n\nexport default ({ }) =&gt; {\n  const [email, setEmail] = useState(\"\")\n  const [submitted, setSubmitted] = useState(false)   \n\n\n  function errorHandling(data) {\n    // your error handling\n  }\n\n  const handleSubmit = () =&gt; {\n    addToMailchimp(email).then((data) =&gt; {\n\n      if (data.result == \"error\") {\n        errorHandling(data)\n      } else {\n        trackCustomEvent({\n          category: \"Newsletter\",\n          action: \"Click\",\n          label: `Newsletter Click`,\n        })\n        setSubmitted(true)\n      }\n    })\n  }\n\n  return (\n    &lt;&gt;\n      {submitted ? (\n        &lt;NewsletterWrapper&gt;\n          &lt;DescriptionWrapper&gt;\n            &lt;h2&gt;\n              🎉 Successfully subscribed! 🎉\n            &lt;/h2&gt;\n            &lt;p&gt;\n            Thank your for your interest in my content.\n            &lt;/p&gt;\n          &lt;/DescriptionWrapper&gt;\n        &lt;/NewsletterWrapper&gt;\n      ) : (\n        &lt;NewsletterWrapper&gt;\n            &lt;DescriptionWrapper&gt;\n              &lt;p&gt;\n                Do you want to know when I post something new? &lt;br/&gt; \n                Then subscribe to my newsletter.\n                🚀\n              &lt;/p&gt;\n            &lt;/DescriptionWrapper&gt;\n          &lt;InputWrapper&gt;\n            &lt;Input\n              type=\"email\"\n              name=\"email\"\n              id=\"mail\"\n              label=\"email-input\"\n              placeholder=\"Your e-mail address\"\n              onChange={(e) =&gt; setEmail(e.target.value)}\n            /&gt;\n          &lt;/InputWrapper&gt;\n          &lt;ButtonWrapper&gt;\n            &lt;Button\n              type=\"button\"\n              aria-label=\"Subscribe\"\n              onClick={() =&gt; handleSubmit()}\n            &gt;\n              \"Subscribe\"\n            &lt;/Button&gt;\n          &lt;/ButtonWrapper&gt;\n        &lt;/NewsletterWrapper&gt;\n      )}\n    &lt;/&gt;\n  )\n}\n</code></pre>","date_published":"2020-08-31T20:11:17.540Z","date_modified":"2025-01-22T15:35:50.897Z","tags":["gatsby","react"],"image":"https://mxd.codes/content/posts/published/how-to-create-a-mailchimp-newsletter-sign-up-form-for-your-gatsby-site/cover.png","banner_image":"https://mxd.codes/content/posts/published/how-to-create-a-mailchimp-newsletter-sign-up-form-for-your-gatsby-site/cover.png","authors":[{"name":"Max Dietrich","url":"https://mxd.codes"}]},{"id":"https://mxd.codes/articles/how-to-create-a-web-map-with-open-layers","url":"https://mxd.codes/articles/how-to-create-a-web-map-with-open-layers","title":"How to create a web-map with OpenLayers","summary":"OpenLayers is a JavaScript library which allows you to visualize easily geodata in web applications (Web GIS).","content_html":"<h2 id=\"whatisopenlayers\">What is OpenLayers?</h2>\n<p><a href=\"https://openlayers.org/\">OpenLayers</a> is a JavaScript library that makes it relatively easy to visualize geodata in web applications (Web-GIS).</p>\n<p>OpenLayers is a programming interface that allows client-side development independent of the server. Map tiles, vector data and markers from various data sources can be displayed.</p>\n<p>Open Layers was developed to promote the use of <a href=\"/en/gis/geodata-what-are-geodata\" title=\"What are geodata?\">geodata</a> Of all kinds. OpenLayers is also free, open-source and is published under \"2-clause BSD License\".</p>\n<p>To be able to create a map with OpenLayers, all you need is a basic general knowledge of programming languages. The missing pieces of the puzzle can be found very easily using the detailed documentation on OpenLayers.</p>\n<h2 id=\"createhtmlfile\">Create HTML file</h2>\n<p>First of all, an HTML file is required as the basic framework. The basic structure usually looks like this:</p>\n<pre><code class=\"html language-html\">    &lt;html&gt;\n      &lt;head&gt;\n        &lt;title&gt;OpenLayers Demo&lt;/title&gt;\n      &lt;/head&gt;\n      &lt;body&gt;\n      &lt;/body&gt;\n    &lt;/html&gt;\n</code></pre>\n<p>You can now copy this code and paste it into a file that you name, for example, \"jsmap.html\".</p>\n<p><em>If you want to learn more about HTML, you can find a few useful tutorials on <a href=\"https://www.w3schools.com/html/\">w3schools</a>.</em></p>\n<h2 id=\"insertopenlayersjavascriptlibrary\">Insert OpenLayers Javascript library</h2>\n<p>Now the OpenLayers Javascript is integrated into the HTML. You copy for that</p>\n<pre><code class=\"html language-html\">    &lt;script src=\"http://www.openlayers.org/api/OpenLayers.js\"&gt;&lt;/script&gt;\n</code></pre>\n<p>between <code>&lt;title&gt;</code> and <code>&lt;head&gt;</code>. You can do that right away</p>\n<pre><code class=\"javascript language-javascript\">function init() {\n  map = new OpenLayers.Map(\"basicMap\"); //create a new map\n  var mapnik = new OpenLayers.Layer.OSM(); //add an OpenStreetMap layer to have some data in the mapview\n  map.addLayer(mapnik); //add the OSM layer to the map\n\n  var markers = new OpenLayers.Layer.Markers( \"Markers\" ); //add a layer where markers can be put\n  map.addLayer(markers); //add the markers layer to the current map\n\n  var lonLat = new OpenLayers.LonLat( 13.0 ,47.8 ) //define a new location with these coordinates in WGS84\n    .transform(  //transform the location to the coordinate system of our OpenLayers map\n      new OpenLayers.Projection(\"EPSG:4326\"), // transform from WGS 1984\n      map.getProjectionObject() // to Spherical Mercator Projection\n    );\n  markers.addMarker(new OpenLayers.Marker(lonLat)); //add the newly created marker to the markers layer\n\n  map.setCenter(lonLat, 15); // Use maker to center the map above and set zoom level to 15\n}\n</code></pre>\n<p>also included in script tags. Here a function with the name init is created, the</p>\n<ul>\n<li>which creates the map and inserts it in the element \"basicMap\"</li>\n<li>created a layer with <a href=\"https://www.openstreetmap.org/#map=6/51.330/10.453\">OpenStreetMap</a> data and added it to the map</li>\n<li>creates a layer for markers and also adds this to the map</li>\n<li>Defined a marker in WGS84 and then transformed it from WGS1984 to Spherical Mercator Projection</li>\n<li>add this marker to the map</li>\n<li>and finally centered the map on this marker and set a zoom level.</li>\n</ul>\n<p>Now this function must also be loaded and the card placed. For that you are replacing now</p>\n<pre><code class=\"html language-html\">  &lt;body&gt;\n  &lt;/body&gt;\n</code></pre>\n<p>with</p>\n<pre><code class=\"html language-html\">    &lt;body onload=\"init();\"&gt;\n        &lt;div style=\"width: 100%; height: 60%;\" id=\"basicMap\"&gt;&lt;/div&gt;\n    &lt;/body&gt;\n</code></pre>\n<p>With <code>javascript onload =\" init ();</code>the function is executed when loading the HTML file and inserted via the id<code>id = \"basicMap\"</code>.</p>\n<p>Your complete file should now look like this:</p>\n<pre><code class=\"html language-html\">    &lt;html&gt;\n      &lt;head&gt;\n        &lt;title&gt;OpenLayers Demo&lt;/title&gt;\n        &lt;script src=\"http://www.openlayers.org/api/OpenLayers.js\"&gt;&lt;/script&gt;\n        &lt;script&gt;\n          function init() {\n            map = new OpenLayers.Map(\"basicMap\"); //create a new map\n            var mapnik = new OpenLayers.Layer.OSM(); //add an OpenStreetMap layer to have some data in the mapview\n            map.addLayer(mapnik); //add the OSM layer to the map\n\n            var markers = new OpenLayers.Layer.Markers( \"Markers\" ); //add a layer where markers can be put\n            map.addLayer(markers); //add the markers layer to the current map\n\n            var lonLat = new OpenLayers.LonLat( 13.0 ,47.8 ) //define a new location with these coordinates in WGS84\n              .transform(  //transform the location to the coordinate system of our OpenLayers map\n                new OpenLayers.Projection(\"EPSG:4326\"), // transform from WGS 1984\n                map.getProjectionObject() // to Spherical Mercator Projection\n              );\n            markers.addMarker(new OpenLayers.Marker(lonLat)); //add the newly created marker to the markers layer\n\n            map.setCenter(lonLat, 15); // Use maker to center the map above and set zoom level to 15\n          }\n        &lt;/script&gt;\n      &lt;/head&gt;\n      &lt;body onload=\"init();\"&gt;\n        &lt;div style=\"width: 100%; height: 60%;\" id=\"basicMap\"&gt;&lt;/div&gt;\n      &lt;/body&gt;\n    &lt;/html&gt;\n</code></pre>\n<p>If you save the file and open it, you will end up in the browser of your choice and your Javascript web map will be displayed with OpenLayers.</p>\n<p>If you now want to change the position of the marker, all you have to do is change the coordinates.</p>\n<h2 id=\"createmarkerswithaforofloop\">Create markers with a 'for .. of ..' loop</h2>\n<p>Normally, you often want to display several points and not just one on the map.\nIn theory you could</p>\n<pre><code class=\"javascript language-javascript\">  var lonLat = new OpenLayers.LonLat( 13.0 ,47.8 ) //define a new location with these coordinates in WGS84\n    .transform(  //transform the location to the coordinate system of our OpenLayers map\n      new OpenLayers.Projection(\"EPSG:4326\"), // transform from WGS 1984\n      map.getProjectionObject() // to Spherical Mercator Projection\n    );\n    markers.addMarker(new OpenLayers.Marker(lonLat)); //add the newly created marker to the markers layer\n</code></pre>\n<p>now copy for each additional marker you want to create and simply change the coordinates. But since the whole thing becomes relatively confusing, we will solve it differently.</p>\n<p>First, we create an array of arrays.</p>\n<pre><code class=\"javascript language-javascript\">  var poi = [ // create array with point of interests\n    [ 11.557617 ,48.092757 ],\n    [ 8.558350, 50.028917 ],\n    [ 6.701660, 51.289406 ],\n    [ 13.337402, 52.496160 ]\n  ];\n</code></pre>\n<p>All coordinates for the markers to be displayed are now stored in this array. Now we create a function that can be called to create markers and add them to the map.</p>\n<pre><code class=\"javascript language-javascript\">function createmarker (lon,lat) {\n  var feature = new OpenLayers.LonLat( lon, lat ) // create features (locations) out of arrays in points\n    .transform(  //transform the location to the coordinate system of our OpenLayers map\n      new OpenLayers.Projection(\"EPSG:4326\"), // transform from WGS 1984\n      map.getProjectionObject() // to Spherical Mercator Projection\n    );\n    markers.addMarker(new OpenLayers.Marker(feature)); // Add new features to markers layer\n}    \n</code></pre>\n<p>This function should now be carried out for each pair of coordinates in the \"poi\" array. This can be solved with a \"for .. of\" loop.</p>\n<pre><code class=\"javascript language-javascript\">for (var x of poi) { // for each array(object) in array \n  createmarker (x[0],x[1]) // create markers\n}\n</code></pre>\n<p>In this loop, a marker is now created for each coordinate pair in the array, transformed and added to the map. The \"poi\" array can now be expanded as required and the additional markers are automatically added to the map.</p>\n<h2 id=\"addmarkersviaui\">Add markers via UI</h2>\n<p>In order to make the whole thing more user-friendly and not having to change the code manually every time, we are now creating a simple user interface to add additional markers.</p>\n<p>The new coordinates should be entered via two input fields and created with a confirmation on a button.</p>\n<p>The HTML framework can look like this and should be placed somewhere in the \"body\" area:</p>\n<pre><code class=\"html language-html\">    &lt;div class=\"add_markers\"&gt;\n        &lt;div class=\"input_markers\"&gt; \n          Add new markers with coordinates in WGS84!\n            &lt;div class=\"row\"&gt;\n                &lt;div class=\"col-25\"&gt;\n                    &lt;label for=\"lat\"&gt;Latitude:&lt;/label&gt;\n                &lt;/div&gt;\n                &lt;div class=\"col-75\"&gt;\n                    &lt;input type=\"text\" id=\"lat\" name=\"firstname\" placeholder=\"48.060614\"&gt;\n                &lt;/div&gt;\n            &lt;/div&gt;\n            &lt;div class=\"row\"&gt;\n                &lt;div class=\"col-25\"&gt;\n                    &lt;label for=\"lon\"&gt;Longitude:&lt;/label&gt;\n                &lt;/div&gt;\n                &lt;div class=\"col-75\"&gt;\n                    &lt;input type=\"text\" id=\"lon\" name=\"lastname\" placeholder=\"12.190876\"&gt;\n                &lt;/div&gt;\n            &lt;/div&gt;\n            &lt;button id=\"add_marker\" class=\"button\"&gt;Add marker!&lt;/button&gt;\n            &lt;div id=\"poi_added\" class=\"poi_added\"&gt;&lt;/div&gt;\n        &lt;/div&gt;\n    &lt;/div&gt;\n    &lt;/div&gt;\n</code></pre>\n<p>The most important here are the ids via which the values of the fields are later adopted.</p>\n<p>To create these markers we use a function that is called every time the button \"Add Marker!\" is clicked.</p>\n<p>The complete function looks like this:</p>\n<pre><code class=\"javascript language-javascript\">function addFeature() {\n  var lat = parseFloat(document.getElementById(\"lat\").value); // get value of input lat and parse to float\n  var lon = parseFloat(document.getElementById(\"lon\").value); // get value of input lon and parse to float\n\n  var newFeature = [ lon, lat ] // create array \"newFeature\" with lon , lat\n  poi.push(newFeature) // add NewFeature to array \"poi\"\n\n  createmarker (lon,lat) // create marker for input lat, lon  \n  document.getElementById('poi_added').innerHTML = \"Added marker for \" + \"latitude: \" + lat + \"; longitude: \" + lon; // visual feedback for added marker\n}\n</code></pre>\n<pre><code class=\"javascript language-javascript\">    var lat = parseFloat(document.getElementById(\"lat\").value); // get value of input lat and parse to float\n    var lon = parseFloat(document.getElementById(\"lon\").value);\n</code></pre>\n<p>Are references to the elements with the ID \"lat\" and \"lon\", ie the two input fields. Here the two variables \"lat\" and \"lon\" are created, to which the value from the input fields is assigned.</p>\n<p>Then they are merged into an array, since a marker always consists of two coordinates and is added to the \"poi\" array.</p>\n<pre><code class=\"javascript language-javascript\">    var newFeature = [ lon, lat ] // create array \"newFeature\" with lon , lat\n    poi.push(newFeature) // add NewFeature to array \"poi\"\n</code></pre>\n<p>Adding it to the \"poi\" array is not functionally necessary, but it can be useful if, for example, you want to create popovers that show the coordinates of each marker.</p>\n<p>The coordinates are now saved in \"lat\" and \"lon\" and they only have to be transferred to the previously created function \"createmarker\", which creates the markers and adds them to the map.</p>\n<pre><code class=\"javascript language-javascript\">    createmarker (lon,lat) // create marker for input lat, lon  \n</code></pre>\n<p>It would be nice if the user received feedback about what happened after clicking the button. This can be done with</p>\n<pre><code class=\"javascript language-javascript\">    document.getElementById('poi_added').innerHTML = \"Added marker for \" + \"latitude: \" + lat + \"; longitude: \" + lon; // visual feedback for added marker\n</code></pre>\n<p>The last thing that is missing is that the function is executed with a click on the button.</p>\n<pre><code class=\"javascript language-javascript\">    document.getElementById('add_marker').addEventListener('click', addFeature); // execute function \"addFeature\" when button with id \"add_marjer\" is clicked\n</code></pre>\n<p>As soon as the button with the id \"add_marker\" is clicked, the \"addFeature\" function is now executed.</p>\n<p>With</p>\n<pre><code class=\"javascript language-javascript\">    var extent = map.zoomToExtent(markers.getDataExtent()); // get extent of markers layer\n</code></pre>\n<p>the extent of the \"markers\" layer is determined, zoomed onto it and assigned to the variable extent.</p>\n<p>If you now save and open your file again, you should see your map with all markers and be able to add additional markers via a graphical user interface.</p>\n<pre><code class=\"html language-html\">    &lt;html&gt;\n      &lt;head&gt;\n        &lt;title&gt;OpenLayers Demo&lt;/title&gt;\n        &lt;script src=\"http://www.openlayers.org/api/OpenLayers.js\"&gt;&lt;/script&gt;\n        &lt;script&gt;\n            function init() {\n                map = new OpenLayers.Map(\"basicMap\"); //create a new map\n                var mapnik = new OpenLayers.Layer.OSM(); //add an OpenStreetMap layer to have some data in the mapview\n                map.addLayer(mapnik); //add the OSM layer to the map\n\n                var markers = new OpenLayers.Layer.Markers( \"Markers\" ); //add a layer where markers can be put\n                map.addLayer(markers); //add the markers layer to the current map\n\n                function createmarker (lon,lat) {\n                    var feature = new OpenLayers.LonLat( lon, lat ) // create features (locations) out of arrays in points\n                            .transform(  //transform the location to the coordinate system of our OpenLayers map\n                                new OpenLayers.Projection(\"EPSG:4326\"), // transform from WGS 1984\n                                map.getProjectionObject() // to Spherical Mercator Projection\n                            );\n                    markers.addMarker(new OpenLayers.Marker(feature)); // Add new features to markers layer\n                }   \n\n                var poi = [ // create array with point of interests\n                [ 11.557617 ,48.092757 ],\n                [ 8.558350, 50.028917 ],\n                [ 6.701660, 51.289406 ],\n                [ 13.337402, 52.496160 ]\n          ];\n\n                for (var x of poi) { // for each array(object) in array \n                    createmarker (x[0],x[1]) // create markers\n                }\n\n                var extent = map.zoomToExtent(markers.getDataExtent()); // get extent of markers layer\n\n                function addFeature() {\n                  var lat = parseFloat(document.getElementById(\"lat\").value); // get value of input lat and parse to float\n                  var lon = parseFloat(document.getElementById(\"lon\").value); // get value of input lon and parse to float\n\n                  var newFeature = [ lon, lat ] // create array \"newFeature\" with lon , lat\n                  poi.push(newFeature) // add NewFeature to array \"poi\"\n\n                  createmarker (lon,lat) // create marker for input lat, lon  \n                  document.getElementById('poi_added').innerHTML = \"Added marker for \" + \"latitude: \" + lat + \"; longitude: \" + lon; // visual feedback for added marker\n                }\n\n                document.getElementById('add_marker').addEventListener('click', addFeature); // execute function \"addFeature\" when button with id \"add_marjer\" is clicked\n            }\n\n            //  popover coordinates markers \n        &lt;/script&gt; \n        &lt;style&gt;\n      /*dein style*/\n        &lt;/style&gt;\n      &lt;/head&gt;\n      &lt;body onload=\"init();\"&gt;\n        &lt;div id=\"wrapper\"  &gt;\n            &lt;div style=\"width: 100%; height: 80%\" id=\"basicMap\"&gt;&lt;/div&gt;\n                &lt;div class=\"add_markers\"&gt;\n                    &lt;div class=\"input_markers\"&gt; \n                        Add new markers with coordinates in WGS84!\n                        &lt;div class=\"row\"&gt;\n                            &lt;div class=\"col-25\"&gt;\n                                &lt;label for=\"lat\"&gt;Latitude:&lt;/label&gt;\n                            &lt;/div&gt;\n                            &lt;div class=\"col-75\"&gt;\n                                &lt;input type=\"text\" id=\"lat\" name=\"firstname\" placeholder=\"48.060614\"&gt;\n                            &lt;/div&gt;\n                        &lt;/div&gt;\n                        &lt;div class=\"row\"&gt;\n                            &lt;div class=\"col-25\"&gt;\n                                &lt;label for=\"lon\"&gt;Longitude:&lt;/label&gt;\n                            &lt;/div&gt;\n                            &lt;div class=\"col-75\"&gt;\n                                &lt;input type=\"text\" id=\"lon\" name=\"lastname\" placeholder=\"12.190876\"&gt;\n                            &lt;/div&gt;\n                        &lt;/div&gt;\n                        &lt;button id=\"add_marker\" class=\"button\"&gt;Add marker!&lt;/button&gt;\n                        &lt;div id=\"poi_added\" class=\"poi_added\"&gt;&lt;/div&gt;\n                        &lt;/div&gt;\n                    &lt;/div&gt;\n                &lt;/div&gt;\n            &lt;/div&gt;\n        &lt;/div&gt;\n      &lt;/body&gt;\n    &lt;/html&gt;\n</code></pre>","date_published":"2020-08-31T19:50:29.045Z","date_modified":"2025-01-22T15:34:40.165Z","tags":["open-layers","web-mapping","javascript"],"image":"https://mxd.codes/content/posts/published/how-to-create-a-web-map-with-open-layers/cover.png","banner_image":"https://mxd.codes/content/posts/published/how-to-create-a-web-map-with-open-layers/cover.png","authors":[{"name":"Max Dietrich","url":"https://mxd.codes"}]},{"id":"https://mxd.codes/articles/open-source-web-gis-applications","url":"https://mxd.codes/articles/open-source-web-gis-applications","title":"Open-Source Web-GIS Applications","summary":"Would you like to know which open source web GIS applications are used to share geodata over the Internet? Then you can find out more here.","content_html":"<p>You want to know which Open-Source Web-<a href=\"/articles/what-is-gis-geographic-information-system\" title=\"GIS\">GIS</a> applications are used to share geospatial data over the Internet?</p>\n<h2 id=\"webgisapplications\">Web-GIS applications</h2>\n<h3 id=\"geoserver\">GeoServer</h3>\n<p>GeoServer is an open source server for sharing geospatial data.</p>\n<p><a href=\"http://geoserver.org/\">http://geoserver.org/</a></p>\n<h3 id=\"degree\">degree</h3>\n<p>deegree is an open source software for geodata infrastructures and the geospatial web.</p>\n<p><a href=\"https://www.deegree.org/\">https://www.deegree.org/</a></p>\n<h3 id=\"featureserver\">FeatureServer</h3>\n<p>FeatureServer is an implementation of a RESTful Geographic Feature Service.</p>\n<p><a href=\"http://featureserver.org/\">http://featureserver.org/</a></p>\n<h3 id=\"mapguideopensource\">MapGuide Open Source</h3>\n<p>MapGuide Open Source is a web-based platform that enables users to develop and deploy web mapping applications and geospatial services.</p>\n<p><a href=\"http://mapguide.osgeo.org/\">http://mapguide.osgeo.org/</a></p>\n<h3 id=\"mapserver\">MapServer</h3>\n<p>MapServer is an open-source platform for publishing geodata and interactive map applications on the web.</p>\n<p><a href=\"https://www.mapserver.org/\">https://www.mapserver.org/</a></p>\n<hr />\n<h2 id=\"javascriptlibraries\">Javascript libraries</h2>\n<h3 id=\"openlayers\">OpenLayers</h3>\n<p>OpenLayers is a JavaScript library that enables geospatial data to be displayed in the web browser. OpenLayers is a programming interface that allows client-side development independent of the server.</p>\n<p><a href=\"https://openlayers.org/\">https://openlayers.org/</a></p>\n<h3 id=\"leaflet\">Leaflet</h3>\n<p>Leaflet is a free JavaScript library that can be used to create Web-GIS applications. The library uses HTML5, CSS3 and therefore supports most browsers.</p>\n<p><a href=\"https://leafletjs.com/\">https://leafletjs.com/</a></p>","date_published":"2020-08-30T20:53:38.058Z","date_modified":"2024-02-19T19:45:54.118Z","tags":["gis"],"image":"https://mxd.codes/content/posts/published/open-source-web-gis-applications/cover.png","banner_image":"https://mxd.codes/content/posts/published/open-source-web-gis-applications/cover.png","authors":[{"name":"Max Dietrich","url":"https://mxd.codes"}]},{"id":"https://mxd.codes/articles/download-open-street-map-data-as-shapefiles","url":"https://mxd.codes/articles/download-open-street-map-data-as-shapefiles","title":"Download OpenStreetMap data as Shapefiles","summary":"OpenStreetMap is the largest international project that aims to create a free world map.","content_html":"<h2 id=\"whatisopenstreetmap\">What is OpenStreetMap?</h2>\n<p><a href=\"/osm/\" title=\"OpenStreetMap\">OpenStreetMap</a> is the largest international project that aims to create a free world map. Voluntary \"mappers\" collect data about roads, railways, rivers, forests and houses and make them available online.</p>\n<p>If you also want to get involved in the OpenStreetMap project, you can find further information here: <a href=\"https://www.openstreetmap.de/faq.html#wie_mitmachen\">https://www.openstreetmap.de/faq.html#wie_mitmachen.</a></p>\n<p>The data is freely available to all people. You can also use OpenStreetMap data commercially because it was published under the <a href=\"https://opendatacommons.org/licenses/odbl/\">Open Data Commons Open Database License</a></p>\n<h2 id=\"osmdataformats\">OSM Data Formats</h2>\n<p>The data is offered by OSM as XML or PBF, which is a \"compact\" data format for the raw data from OpenStreetMap. The file Planet.osm contains the entire planet that has been recorded so far and the full history planet version even contains all version histories of all objects. This file is usually updated once a week.</p>\n<p>With tools such as <a href=\"https://wiki.openstreetmap.org/wiki/Osmosis\">Osmosis</a> or <a href=\"https://wiki.openstreetmap.org/wiki/Osm2pgsql\">Osm2pgsql</a>, this geodata can then be imported into a Postgis database. However, since this file is very large (76GB), most of you will probably not be able to start with it.\nInstead of using the file of the entire planet it is more useful to extract the part of it that you will need. You can do this on your own or use services such as <a href=\"http://www.geofabrik.de/\" title=\"Geofabrik\">Geofabrik</a> offers them.</p>\n<h2 id=\"downloadviageofabrik\">Download via Geofabrik</h2>\n<p>Fortunately, there are <a href=\"https://www.geofabrik.de\">Geofabrik</a> that process OSM files and partially also make them available free of charge.</p>\n<p>At <a href=\"http://download.geofabrik.de/\">https://download.geofabrik.de/</a> you will find download links for specific regions, where you can finally download OpenStreetMap data as <a href=\"/articles/what-is-a-shapefile\" title=\"Shapefiles\">shapefiles</a>. There is also a small map at the top right of the website that shows the area of the selected data.</p>\n<p>The data can also be downloaded as .pbf or bz2 files.</p>\n<p>With a click on a region you land in the \"sub-region\", in which data of individual countries can then be downloaded. In Europe, shapefiles of the OSM data can be downloaded for almost all countries.</p>\n<p>For Germany there is unfortunately only the possibility to download shapefiles of the individual federal states.</p>\n<p>In addition, polygons of the dimensions of the individual federal states can be downloaded.</p>\n<h2 id=\"structureofrawosmdata\">Structure of raw OSM data</h2>\n<p>There is of course a unique ID for each object. When looking at street objects, there are so-called \"other_tags\" in addition to the name and type of street (residential, tertiary, secondary, unclassified, etc.).</p>\n<p>There you will find all additional attributes that describe the object in more detail. In the case of the street, the maximum permitted speed, the maximum allowed weight, the zip code of the municipality, the material of the street and even more properties are described.</p>\n<p>With special queries you can access these \"other_tags\" and, for example, only show all paved roads in QGIS.</p>\n<p>With the usual \"OSM Basemap\" all these objects are rendered and displayed in the usual OpenStreetMap design.</p>\n<p><a href=\"https://www.openstreetmap.org/\">OpenStreetMap</a></p>","date_published":"2020-08-30T20:51:51.650Z","date_modified":"2024-02-19T19:46:05.859Z","tags":["gis"],"image":"https://mxd.codes/content/posts/published/download-open-street-map-data-as-shapefiles/cover.png","banner_image":"https://mxd.codes/content/posts/published/download-open-street-map-data-as-shapefiles/cover.png","authors":[{"name":"Max Dietrich","url":"https://mxd.codes"}]},{"id":"https://mxd.codes/articles/export-qgis-layers-as-images-with-py-qgis","url":"https://mxd.codes/articles/export-qgis-layers-as-images-with-py-qgis","title":"Export QGIS layers as images with PyQGIS","summary":"With the help of PyQGIS processes such as the export of images for all layers from a map can be automated.","content_html":"<p><a href=\"https://docs.qgis.org/2.18/de/docs/pyqgis_developer_cookbook/index.html\" title=\"PyGIS\">PyQGIS</a> is a powerful tool that enables the automation of various processes, including the seamless export of images for all layers from a map.</p>\n<p>To start the automation, you'll need one or more layers containing raster and/or vector data.</p>\n<h2 id=\"addlayerswithpyqgis\">Add layers with PyQGIS</h2>\n<p>In the initial step, if all your files reside in the same folder, you can use a <a href=\"https://www.w3schools.com/python/python_for_loops.asp\" title=\"for .. in loop\">\"for .. in loop\"</a> to read them in. By adding <code>.endswith(\".gpkg\")</code>, for instance, you can specifically target files with the \".gpkg\" extension. The layer names are then stored in an array for future reference.</p>\n<pre><code class=\"python language-python\">    import os, sys\n    from PyQt5.QtCore import QTimer\n\n    # path to look for files\n    path = \"ordner/nocheinordner/\"\n    # set path\n    dirs = os.listdir( path )\n    # array for storing layer_names\n    layer_list = []\n    # variable for further processing\n    count = 0\n    #look for files inpath\n    for file in dirs:\n        # search for \".gpkg\" files \n        if file.endswith(\".gpkg\"):\n            #add vectorlayers\n            vlayer = iface.addVectorLayer(path + file, \"Layername\", \"ogr\")\n            layer_list.append(vlayer.name())\n</code></pre>\n<p>The newly added vector layers will then appear in the QGIS layer tree.</p>\n<h2 id=\"imageexportforeachlayer\">Image Export for Each Layer</h2>\n<p>Once you are satisfied with the display, you can use two functions to export a georeferenced image for each layer.</p>\n<pre><code class=\"python language-python\">    def prepareMap():\n        # make all layers invisible\n        iface.actionHideAllLayers().trigger()\n        # get layer by layer_name\n        layer_name = QgsProject.instance().mapLayersByName(layer_list[count])[0]\n        # select layer\n        iface.layerTreeView().setCurrentLayer(layer_name)\n        # set selected layer visible\n        iface.actionShowSelectedLayers().trigger()\n        # Wait a second and export the map\n        QTimer.singleShot(1000, exportMap) \n</code></pre>\n<p>The \"prepareMap ()\" function first deactivates all layers. A layer is then selected from the \"layer_list\" array using its layer name and then displayed again. The QTimer class is particularly important here. Before an image is created, there must always be a short wait before the selected layer is really visible. Without QTimer, the script would run so quickly that the result would be loud images with the same content. After waiting a second, the \"exportMap\" function is called.</p>\n<pre><code class=\"python language-python\">    def exportMap(): \n        global count\n        # save current view as image\n        iface.mapCanvas().saveAsImage( path + layer_list[count] + \".png\" )\n        # feedback for printed map\n        print('{}.png exported sucessfully'.format(layer_list[count]))\n        # get map for every layer in layer_list\n        if count &lt; len(layer_list)-1:\n            # Wait a second and prepare next map (timer is needed because otherwise all images have the samec content \n            # the script excecutes faster then the mapCanvas can be reloaded\n            QTimer.singleShot(1000, prepareMap) \n        count += 1\n</code></pre>\n<p>Now the current map, in which only one level is shown, is saved as a PNG image in the source directory. Ultimately, you \"land\" in a loop that goes through all the layers that are in the \"layer_list\" array and calls the \"prepareMap\" function for each layer again.</p>","date_published":"2020-08-30T20:46:25.818Z","date_modified":"2025-01-22T15:32:55.882Z","tags":["gis","python"],"image":"https://mxd.codes/content/posts/published/export-qgis-layers-as-images-with-py-qgis/cover.png","banner_image":"https://mxd.codes/content/posts/published/export-qgis-layers-as-images-with-py-qgis/cover.png","authors":[{"name":"Max Dietrich","url":"https://mxd.codes"}]},{"id":"https://mxd.codes/articles/satellite-imagery-download-high-resolution","url":"https://mxd.codes/articles/satellite-imagery-download-high-resolution","title":"Access High-Resolution Satellite Imagery with Ease - Satellite Imagery Download Options","summary":"For all those who do not yet know the relevant contact points for current satellite images, there are a few links here where you can download satellite images from around the world, mostly free of charge.","content_html":"<p>For individuals seeking access to high-resolution satellite imagery, numerous options are available for convenient and free downloads. Explore the following key sources to download global satellite images effortlessly:</p>\n<h2 id=\"copernicusopenaccesshub\">Copernicus Open Access Hub</h2>\n<p>The <a href=\"https://scihub.copernicus.eu/dhus\" title=\"Copernicus Open Access Hub\">Copernicus Open Access Hub</a> (Sentinels Scientific Data Hub) facilitates free and open access to Sentinel-1, Sentinel-2, and Sentinel-5P products. Sentinel data is accessible through Copernicus Data and Information Access Services (DIAS) on various platforms. Find more information on <a href=\"https://www.copernicus.eu/de/datenzugriff/dias\" title=\"Copernicus DIAS\">Copernicus DIAS</a>.</p>\n<h2 id=\"geossportal\">GEOSS Portal</h2>\n<p>The <a href=\"http://www.geoportal.org/\">GEOSS Portal</a>, operated by the European Space Agency (ESA), offers a map-based online interface for downloading earth observation data globally.</p>\n<h3 id=\"worldviewnasa\">Worldview - NASA</h3>\n<p><a href=\"https://worldview.earthdata.nasa.gov/\">NASA Worldview</a> provides an interactive user interface to search for high-resolution and global satellite images. Explore thematic images related to forest fires, air quality, flood monitoring, and more.</p>\n<h2 id=\"europeanspaceimaging\">European Space Imaging</h2>\n<p><a href=\"https://www.euspaceimaging.com/\">European Space Imaging</a> is a leading provider of Very High Resolution (VHR) satellite images for Europe, North Africa, and the CIS countries.</p>\n<h2 id=\"glovisusgsglobalvisualizationviewer\">GloVis - USGS Global Visualization Viewer</h2>\n<p>Access remote sensing data through the <a href=\"https://glovis.usgs.gov/\">USGS Global Visualization Viewer</a> (GloVis), available since 2001. The platform was redesigned in 2017 to adapt to changing Internet technologies, providing users with easy-to-use navigation tools for instant viewing and downloading of scenes.</p>\n<h2 id=\"geostoreairbusdefenceandspace\">GeoStore - Airbus Defence and Space</h2>\n<p>The <a href=\"https://www.intelligence-airbusds.com/geostore/\">GeoStore</a>, operated by AIRBUS, allows users to order high-resolution and current satellite images.</p>\n<h2 id=\"eowebgeoportaldlr\">EOWEB GeoPortal - DLR</h2>\n<p>The <a href=\"https://eoweb.dlr.de/egp/\">EOWEB GeoPortal</a> (EGP) by DLR is a multi-mission web portal providing interactive access to the DLR earth observation database.</p>","date_published":"2020-08-30T16:28:00.367Z","date_modified":"2025-05-17T07:54:26.740Z","tags":["gis"],"image":"https://mxd.codes/content/posts/published/satellite-imagery-download-high-resolution/cover.png","banner_image":"https://mxd.codes/content/posts/published/satellite-imagery-download-high-resolution/cover.png","authors":[{"name":"Max Dietrich","url":"https://mxd.codes"}]},{"id":"https://mxd.codes/articles/host-a-static-website-with-your-own-domain-aws-s3-and-cloud-front","url":"https://mxd.codes/articles/host-a-static-website-with-your-own-domain-aws-s3-and-cloud-front","title":"Host a static website with your own domain, AWS S3 and CloudFront","summary":"With AWS (and in particular the free AWS contingent) you have the option of a static website with a custom domain for a few Hosting cents a month including CDN via CloudFront and CI/CD integration.","content_html":"<p>With <a href=\"https://aws.amazon.com/\" title=\"AWS\">AWS</a> (and in particular the <a href=\"https://aws.amazon.com/en/free/\" title=\"free AWS account\">free AWS contingent</a>) you have the option of a static website with a custom domain for a few Hosting cents a month including CDN via CloudFront and CI / CD integration.</p>\n<p>Before I switched completely to AWS, I had a common shared hosting option that cost me around € 72 a year. With this option I had</p>\n<ul>\n<li>250 GB SSD storage space,</li>\n<li>free unlimited traffic,</li>\n<li>6 domains included,</li>\n<li>250 GB SSD mail storage space,</li>\n<li>25 MySQL databases,</li>\n<li>and, and, and.</li>\n</ul>\n<p>On the whole, much more than I need to run my static <a href=\"https://www.gatsbyjs.com/\">GatsbyJS</a> website.</p>\n<p>So why shouldn't I only use and pay for resources that I ultimately need and also get some cloud computing experience?</p>\n<h2 id=\"creatings3buckets\">Creating S3-Buckets</h2>\n<p>The basis for hosting on AWS is formed by <a href=\"https://s3.console.aws.amazon.com/s3/home\" title=\"S3 Buckets\">S3 Buckets</a>. \nBuckets are \"containers\" on the web where you can save files.\nIn order for redirects from subdomains such as <strong>www.mxd.codes</strong> to <strong>mxd.codes</strong> to work, you need a bucket for each domain.</p>\n<p>First of all, you create an S3 bucket for the root domain. In my case, the bucket name is the domain name mxd.codes and you select a region (for example EU (Frankfurt)).\nThe default settings can be kept under Options, unless you want to save different versions or access protocols.\nSo that everyone can access the website content later, remove the tick that is present by default at \"Block <em>any</em> public access\", check the bucket settings again and finally create it.</p>\n<p>In each bucket you can or should enter a bucket policy that further defines access.\nTo do this, click on the name of the bucket and go to \"Permissions\" -&gt; \"Bucket Policy\".</p>\n<p>The following guideline must then be saved for public access.</p>\n<pre><code class=\"json language-json\">{\n    \"Version\": \"2008-10-17\",\n    \"Statement\": [\n        {\n            \"Sid\": \"AllowPublicRead\",\n            \"Effect\": \"Allow\",\n            \"Principal\": {\n                \"AWS\": \"*\"\n            },\n            \"Action\": \"s3:GetObject\",\n            \"Resource\": \"arn:aws:s3:::mxd.codes/*\"\n        }\n    ]\n}\n</code></pre>\n<p><strong>\"mxd.codes\" has to be replace with your bucket name!</strong></p>\n<p>If everything was done correctly, the permissions should now look something like this:</p>\n<p><img src=\"bucket_richtline_d32ff17da6_173be5d676.png\" alt=\"bucket_richtline_d32ff17da6.png\" /></p>\n<p>In the bucket settings you have to activate the \"hosting a static website\" and specify an index document and an error document.\nFor GatsbyJS that would be <strong>index.html</strong> and <strong>404.html</strong>.</p>\n<p><img src=\"bucket_hosting_6f40697460_500bdd971a.png\" alt=\"bucket_hosting_6f40697460.png\" /></p>\n<p>Now the S3 bucket for the subdomain <strong>www.mxd.codes</strong> is still missing.\nSo create a new bucket with the name of the subdomain <strong>www.mxd.codes</strong> with public access and add the bucket policy.</p>\n<p>In the settings for \"hosting a static website\" you use \"redirect requests\" and enter the target bucket <strong>mxd.codes</strong> and you can enter <strong>https</strong> as a protocol, because later on the content of the static website is delivered via CloudFront, which can be encrypted with SSL certificates.</p>\n<p><img src=\"bucket_redirect_740544f6d5_5b708ee0ba.png\" alt=\"bucket_redirect_740544f6d5.png\" /></p>\n<p>The buckets are now created and correctly configured for the operation of a static website including redirect.</p>\n<h2 id=\"cloudfrontdistributions\">CloudFront Distributions</h2>\n<p>With the free AWS contingent, 50 GB of data transfer can be burned per month in Cloudflare.</p>\n<p>With a page size of generous 4 MB, this is enough for 12,500 page views per month and should therefore be more than sufficient for a website with average traffic. So why not take a free CDN with you?</p>\n<p>If the costs incurred after the free year should deter someone, you still have the option to switch to another CDN provider such as <a href=\"https://www.cloudflare.com\" title=\"CloudFlare\">CloudFlare</a>.</p>\n<p>At <a href=\"https://console.aws.amazon.com/cloudfront/\" title=\"CloudFront\">CloudFront</a> you have to create a web distribution for <strong>each</strong> bucket.\nAs the origin domain name, a bucket can <strong>not</strong> be selected from the dropdown list, but the end point of the bucket from S3 must be copied.</p>\n<p><img src=\"cloudfront_origin_f1e2731789_3f2eb47d64.png\" alt=\"cloudfront_origin_f1e2731789.png\" /></p>\n<p>In the distribution for the bucket <strong>mxd.codes</strong>, for example \"mxd.codes.s3-website.eu-central-1.amazonaws.com\" is specified as origin.\n\"Origin ID\" will then be filled in automatically. In \"Viewer Protocol Policy\" <strong>Redirect HTTP to HTTPS</strong> is selected because users should only be able to access the website via HTTPS.  \"Compress Objects Automatically\" <strong>Yes</strong> can be selected, so that CloudFront will zip all files automatically.\nUnder \"Alternate Domain Names (CNAMES)\" you have to specify the bucket for the root domain for the distribution for the root domain. For example mxd.codes</p>\n<p>At \"SSL-Certifacte\" you can now create for the two domains <strong>mxd.codes</strong> and <strong>www.mxd.codes</strong> two free Amazon SSL certificate via the <a href=\"https:/https://aws.amazon.com.amazon.com/en/certificate-manager/\" title=\"Certificate Manager (ACM)\">Certificate Manager (ACM )</a>. To do this, add your two domains in ACM.</p>\n<p><img src=\"acm_domain_ee3a548091_38bd644d47.png\" alt=\"acm_domain_ee3a548091.png\" /></p>\n<p>You can now have this validated using a DNS or email method. If you have included your domain in Route 53, you can do it more or less automatically by simply following the instructions.</p>\n<p>Back in the CloudFront Distribution Creation you only have to specify a \"Default Root Object\". -&gt; index.html\nIf you don't do this, CloudFront always shows an \"Access Denied\" message in XML format when you access your domain (atleast that was my case).</p>\n<p>Finally, the distribution must of course still be activated under \"Distribution State\".</p>\n<p>First distribution finished. The same procedure now for the subdomain <strong>www.mxd.codes</strong> with the corresponding \"Origin Domain Name\" (<strong>Bucket end point!</strong>)</p>\n<p><em>This can take up to 20 minutes</em>\n(If you want to clear your CloudFront cache and have already installed AWS CLI, you can do this with the following command:</p>\n<pre><code class=\"bash language-bash\">aws cloudfront create-invalidation --distribution-id DEINE_DISTRIBUTION ID --paths \"/*\"\n</code></pre>\n<p>In the meantime, you can create the redirects for Cloudfront in Route 53.</p>\n<h2 id=\"route53dnssettings\">Route 53 DNS settings</h2>\n<p>In [Route 53](\"Route 53\") you need a hosted zone (= 0.50€ per month). Then A (and provided that in the CLoudFrontDistribution IPv6 is\nactivated (which it is by default), as well as an AAAA) data record can be created.</p>\n<p>That means you basically need 4 \"alias\" data sets:</p>\n<ul>\n<li>mxd.codes A \"CloudFront URL for root domain\"</li>\n<li>mxd.codes AAAA \"CloudFront URL for root domain\"</li>\n<li>www.mxd.codes A \"CloudFront URL for subdomain\"</li>\n<li>www.mxd.codes AAAA \"CloudFront URL for subdomain\"</li>\n</ul>\n<p>Exceptionally, you can select the CDN url from the dropdown list.\nWith \"Routing Guideline\" and \"Assess the state of the target\" you can leave the default settings, unless you want to experiment.</p>\n<p>Now if you wait a little you should be redirect from</p>\n<ul>\n<li>http://wwww.mxd.codes,</li>\n<li>https://wwww.mxd.codes,</li>\n<li>wwww.mxd.codes,</li>\n<li>http://mxd.codes and</li>\n<li>mxd.codes\nto <strong>https://mxd.codes</strong> .</li>\n</ul>","date_published":"2020-08-30T16:23:25.740Z","date_modified":"2025-01-22T15:32:15.829Z","tags":["selfhosted","gatsby","cloud"],"image":"https://mxd.codes/content/posts/published/host-a-static-website-with-your-own-domain-aws-s3-and-cloud-front/cover.png","banner_image":"https://mxd.codes/content/posts/published/host-a-static-website-with-your-own-domain-aws-s3-and-cloud-front/cover.png","authors":[{"name":"Max Dietrich","url":"https://mxd.codes"}]},{"id":"https://mxd.codes/articles/gis-vs-cad-the-difference-between-gis-and-cad","url":"https://mxd.codes/articles/gis-vs-cad-the-difference-between-gis-and-cad","title":"GIS vs CAD - The difference between GIS and CAD","summary":"Difference between CAD and GIS data.","content_html":"<h2 id=\"thedifferencebetweengisandcad\">The difference between GIS and CAD</h2>\n<p>Understanding the fundamental disparities between <a href=\"/articles/what-is-gis-geographic-information-system\" title=\"What is GIS?\">Geographic information systems (GIS)</a>  and Computer-Aided Design (CAD) is crucial for anyone delving into spatial data and digital modeling. Let's explore the key differences that set these systems apart:</p>\n<h2 id=\"gisunveilingthepowerofgeospatialinformation\">GIS: Unveiling the Power of Geospatial Information</h2>\n<p><a href=\"/articles/what-is-gis-geographic-information-system\" title=\"What is GIS?\">Geographic information systems (GIS)</a> serves as a comprehensive system designed for the display and processing of <a href=\"/articles/what-are-geodata\" title=\"geodata\">geodata</a>. This includes data enriched with spatial positions, allowing for the structured presentation, representation, and analysis of complex issues. Key differentiators include:</p>\n<ul>\n<li><strong>Local Reference Requirement:</strong> GIS data or geodata relies on a local reference for accurate spatial positioning.</li>\n<li><strong>Focus on Visualization and Analysis:</strong> GIS places emphasis on the visualization, maintenance, and analysis of data, aiding in a holistic understanding of geographical information.</li>\n<li><strong>Diversity in Data Formats:</strong> GIS accommodates a wide range of data formats and sources, reflecting the varied nature of geospatial information.</li>\n<li><strong>Efficiency and Flexibility:</strong> GIS systems excel in efficient and flexible data management, adapting to diverse datasets seamlessly.</li>\n</ul>\n<h2 id=\"cadprecisionindigitalmodeling\">CAD: Precision in Digital Modeling</h2>\n<p>CAD systems, on the other hand, are geared towards the creation and graphical modeling of digital content. These systems commonly handle plans, drawings, and 3D models, prioritizing precision in representation. Key attributes of CAD systems include:</p>\n<ul>\n<li><strong>Emphasis on Precision:</strong> CAD systems prioritize highly precise representations, facilitating the creation of components with exact specifications.</li>\n<li><strong>Standard File Formats:</strong> CAD data is predominantly stored in DXF or DWG files, adhering to industry standards.</li>\n<li><strong>Focused on Digital Modeling:</strong> The primary role of CAD lies in the creation and manipulation of digital models, ensuring accuracy in design and manufacturing processes.</li>\n</ul>\n<h2 id=\"complementaryrolesandsynergy\">Complementary Roles and Synergy</h2>\n<p>While GIS and CAD serve distinct purposes, they can complement each other effectively. The synergy between these systems arises from their ability to address different aspects of spatial data management. GIS excels in handling diverse geospatial information, while CAD ensures meticulous precision in digital modeling. Together, they form a powerful combination, offering a comprehensive solution for diverse applications.</p>\n<p>In conclusion, the choice between GIS and CAD depends on the specific needs of a project. Understanding their unique features enables professionals to leverage the strengths of each system, ultimately enhancing the overall efficiency and effectiveness of spatial data utilization.</p>","date_published":"2020-08-30T13:50:00.708Z","date_modified":"2024-02-19T19:46:53.764Z","tags":["cad","gis"],"image":"https://mxd.codes/content/posts/published/gis-vs-cad-the-difference-between-gis-and-cad/cover.png","banner_image":"https://mxd.codes/content/posts/published/gis-vs-cad-the-difference-between-gis-and-cad/cover.png","authors":[{"name":"Max Dietrich","url":"https://mxd.codes"}]},{"id":"https://mxd.codes/articles/what-is-a-shapefile-shp-dbf-and-shx","url":"https://mxd.codes/articles/what-is-a-shapefile-shp-dbf-and-shx","title":"What is a shapefile? .shp, .dbf and .shx","summary":"The shapefile format is a general format for storing vector data.","content_html":"<p>The shapefile format is a widely used standard for storing vector <a href=\"/articles/what-is-gis-geographic-information-system\" title=\"GIS\">GIS</a> - <a href=\"/articles/geodata-what-are-geodata\" title=\"Geodata\">data</a>. Developed by Esri, it has become an open format and a preferred choice for data transfer, compatible with major GIS software programs such as ArcGIS and QGIS.</p>\n<p>Despite the singular name, a shapefile is a collection of three essential files: .shp, .shx, and .dbf. These files, residing in the same directory, collectively enable visualization. Additional files like .prj may contain projection information, and the entire package is often compressed in a ZIP file for easy transmission via email or download links on websites.</p>\n<h2 id=\"keyfileextensionsassociatedwithashapefile\">Key File Extensions Associated with a Shapefile</h2>\n<p>All files within a shapefile share the same name but have different formats. Three core files constitute a shapefile:</p>\n<ul>\n<li><strong>.shp:</strong> Contains the geometry of data records.. If you want to transform coordinates for example, you only have to transform this file.</li>\n<li><strong>.dbf:</strong> Stores attribute data in [dBASE](https://www.wikipedia.com/wiki/DBASE \"DBASE) format.</li>\n<li><strong>.shx:</strong> Links factual data (.dbf) with the geometry (.shp) through a common index.</li>\n</ul>\n<p>Optional files may include .atx, .sbx, .sbn, .qix, .aih, .ain, .shp.xml, .prj, and .cpg, each serving specific functions.</p>\n<ul>\n<li>.atx: attribute index</li>\n<li>.sbx: and .sbn Spatial index</li>\n<li>.qix: Alternative spatial index (used and created by <a href=\"https://www.gdal.org/\" title=\"Geospatial Data Abstraction Library\">GDAL</a></li>\n<li>.aih and .ain: index for table links</li>\n<li>.shp.xml: metadata about the shapefile</li>\n<li>.prj: projection of the data</li>\n<li>.cpg: to specify the character set used in the <a href=\"https://www.wikipedia.com/wiki/DBASE\" title=\"DBASE\">.dbf</a>.</li>\n</ul>\n<h2 id=\"understandinggeometriesinshapefiles\">Understanding Geometries in Shapefiles</h2>\n<p>Shapefiles store elements of a single geometry type, such as </p>\n<ul>\n<li><p>points,</p></li>\n<li><p>lines,</p></li>\n<li><p>surfaces,</p></li>\n<li><p>polygons or</p></li>\n<li><p>multi-points</p>\n<p>However, a data record doesn't necessitate an associated geometry; pure factual data can be stored as a shapefile.</p></li>\n</ul>\n<h2 id=\"limitationsofshapefiles\">Limitations of Shapefiles</h2>\n<ul>\n<li>Shape files are relatively sluggish</li>\n<li>Multiple files create complexity (everyone knows the problem if you only get the .shp sent)</li>\n<li>Attribute names are limited to 10 characters</li>\n<li>Topologies can't be saved</li>\n<li>File size is capped at 2GB</li>\n<li>Only one geometry type is allowed per file</li>\n<li>No genuine 3D support</li>\n</ul>\n<h2 id=\"exploringalternativestoshapefiles\">Exploring Alternatives to Shapefiles</h2>\n<p>For those seeking more robust options, <a href=\"/articles/gis-and-geo-database-management-system-options\" title=\"GIS databases\">GIS databases</a>, like PostGIS (PostgreSQL) and <a href=\"https://www.wikipedia.com/wiki/GeoPackage\" title=\"GeoPackages\">GeoPackages</a>, emerge as superior alternatives. Databases offer limitless file sizes, support various geometry types, and allow topological creations. Data can be effortlessly shared as geopackages, streamlining the transfer process into a single, convenient file. Shapefiles remain a staple, but exploring these alternatives ensures flexibility and enhanced capabilities in GIS data management.</p>","date_published":"2020-08-30T13:47:06.733Z","date_modified":"2025-02-01T18:13:45.722Z","tags":["gis"],"image":"https://mxd.codes/content/posts/published/what-is-a-shapefile-shp-dbf-and-shx/cover.png","banner_image":"https://mxd.codes/content/posts/published/what-is-a-shapefile-shp-dbf-and-shx/cover.png","authors":[{"name":"Max Dietrich","url":"https://mxd.codes"}]},{"id":"https://mxd.codes/articles/what-are-geodata","url":"https://mxd.codes/articles/what-are-geodata","title":"Understanding Geodata","summary":"Geodata is information with a spatial reference that can be used in a GIS, among other things.","content_html":"<p>Geodata, also known as  <a href=\"/articles/what-is-gis-geographic-information-system\" title=\"What is GIS?\">GIS</a> data, is information with a spatial reference utilized in Geographic Information Systems (GIS). These data play a crucial role in various applications, providing valuable insights into geographical elements.</p>\n<h2 id=\"primaryandsecondarygeodata\">Primary and Secondary Geodata</h2>\n<ul>\n<li><strong>Primary data:</strong> This is raw information directly acquired through measurements, such as property measurements, in its unprocessed form</li>\n<li><strong>Secondary data:</strong> These are refined versions of primary data, processed through calculations, modeling, or other methods to enhance their usability.</li>\n</ul>\n<h2 id=\"componentsofgeodataobjectattributesandgeometries\">Components of Geodata: Object Attributes and Geometries</h2>\n<p>All geodata comprise two fundamental components: object attributes and object geometries.</p>\n<ul>\n<li><strong>Object attributes:</strong> These describe the characteristics of an object, such as a restaurants's brand, address, and reviews.</li>\n<li><strong>Object geometries:</strong> These determine the object's position and shape, represented as points, lines, surfaces, or bodies. For instance, when using Google Maps to find restaurants, the object geometry is a point with specific coordinates.</li>\n</ul>\n<h2 id=\"categoriesofgeodata\">Categories of Geodata</h2>\n<p>Geodata is further categorized based on its nature.</p>\n<ul>\n<li><strong>Geospatial base data:</strong> Official and fundamental data used as a foundation for specialized and thematic maps, including topography, property data, and information from surveying administrations.</li>\n<li><strong>Geo-technical data</strong>: Data from various specialties, crucial in urban planning, environmental protection, demography, and more.</li>\n</ul>\n<h2 id=\"storageformatsforgeographicinformation\">Storage Formats for Geographic Information</h2>\n<ul>\n<li><em>in a <a href=\"/articles/gis-and-geo-database-management-system-options\" title=\"GIS- and Geo-Database Management System options\">database</a>  e.g. PostgreSQL</em></li>\n<li><em>as <a href=\"/articles/what-is-a-shapefile\" title=\"Shapefile\">shapefile</a></em></li>\n<li><em>in a geodatabase</em></li>\n<li><em>as a raster image</em></li>\n<li><em>as table data</em></li>\n</ul>\n<p>Geographic information can be stored in various formats:</p>\n<ul>\n<li><strong><a href=\"/articles/gis-and-geo-database-management-system-options\" title=\"GIS- and Geo-Database Management System options\">Geodatabase</a>:</strong> E.g. PostgreSQL.</li>\n<li><strong>Shapefile:</strong> A common format for storing vector-based geospatial information.</li>\n<li><strong>Raster image:</strong> A format using grids of cells to represent information.</li>\n<li><strong>Table data:</strong> Tabular data storing information in rows and columns.</li>\n</ul>\n<h2 id=\"acquiringgeodatapublicandprivatesources\">Acquiring Geodata: Public and Private Sources</h2>\n<p>Geodata can be obtained from both public and private providers. Public entities, like the State Office for Digitization, Broadband, and Surveying, may offer aerial photos and topographic maps with legal restrictions and varying costs.</p>\n<h2 id=\"qualityconsiderationsensuringfitnessforpurpose\">Quality Considerations: Ensuring Fitness for Purpose</h2>\n<p>The quality of geodata is critical, depending on its application:</p>\n<ul>\n<li><strong>Accuracy</strong>: Varies according to the object's dimensions; precision proportional to the object's size is essential.</li>\n<li><strong>Logical consistency:</strong> Ensuring data consistency, for instance, avoiding negative values in population mapping.</li>\n<li><strong>Temporal dimension:</strong> Acknowledging time as a critical factor, especially in historical data or analyzing population structures over time.</li>\n</ul>\n<p>Conclusion: Geodata as a Decision-Making Medium</p>\n<p>In conclusion, geodata represents real-world objects with attributes and geometries. Its primary and secondary forms are stored in various formats, serving as the backbone for GIS analysis. Understanding the quality considerations is paramount for effective decision-making in diverse fields. Geodata is not just information; it is a powerful tool for spatial analysis and decision support.</p>","date_published":"2020-08-30T13:45:32.795Z","date_modified":"2024-02-19T19:47:14.733Z","tags":["gis"],"image":"https://mxd.codes/content/posts/published/what-are-geodata/cover.png","banner_image":"https://mxd.codes/content/posts/published/what-are-geodata/cover.png","authors":[{"name":"Max Dietrich","url":"https://mxd.codes"}]},{"id":"https://mxd.codes/photos/motorbike-tour-through-south-tyrol","url":"https://mxd.codes/photos/motorbike-tour-through-south-tyrol","title":"Motorbike tour through South Tyrol","content_html":"","date_published":"2020-08-18T08:33:19.058Z","image":"https://mxd.codes/content/photos/motorbike-tour-through-south-tyrol/photo-1.jpg","attachments":[{"url":"https://mxd.codes/content/photos/motorbike-tour-through-south-tyrol/photo-1.jpg","mime_type":"image/jpeg","title":"cover_IMG_20200825_134355_3bd4309570.jpg"},{"url":"https://mxd.codes/content/photos/motorbike-tour-through-south-tyrol/photo-2.jpg","mime_type":"image/jpeg","title":"cover_IMG_20200825_133745_1_826b2d5171.jpg"},{"url":"https://mxd.codes/content/photos/motorbike-tour-through-south-tyrol/photo-3.jpg","mime_type":"image/jpeg","title":"cover_IMG_20200826_125748_1_92b7f34304.jpg"},{"url":"https://mxd.codes/content/photos/motorbike-tour-through-south-tyrol/photo-4.jpg","mime_type":"image/jpeg","title":"cover_IMG_20200827_160308_72330be24a.jpg"},{"url":"https://mxd.codes/content/photos/motorbike-tour-through-south-tyrol/photo-5.jpg","mime_type":"image/jpeg","title":"cover_IMG_20200826_153522_1_7075d3b9b9.jpg"},{"url":"https://mxd.codes/content/photos/motorbike-tour-through-south-tyrol/photo-6.jpg","mime_type":"image/jpeg","title":"cover_IMG_20200827_160221_02c5ad81f2.jpg"}],"authors":[{"name":"Max Dietrich","url":"https://mxd.codes"}]},{"id":"https://mxd.codes/photos/ski-touring-in-inntal","url":"https://mxd.codes/photos/ski-touring-in-inntal","title":"Ski touring","content_html":"","date_published":"2019-02-18T08:31:08.050Z","image":"https://mxd.codes/content/photos/ski-touring-in-inntal/photo-1.jpg","attachments":[{"url":"https://mxd.codes/content/photos/ski-touring-in-inntal/photo-1.jpg","mime_type":"image/jpeg","title":"49335092_1413215778813731_4012934939283981891_n_784f4d9dd8.jpg"}],"authors":[{"name":"Max Dietrich","url":"https://mxd.codes"}]},{"id":"https://mxd.codes/photos/motorcycle-tour-to-walchensee","url":"https://mxd.codes/photos/motorcycle-tour-to-walchensee","title":"Motorcycle tour to walchensee","content_html":"","date_published":"2017-07-18T08:32:28.590Z","image":"https://mxd.codes/content/photos/motorcycle-tour-to-walchensee/photo-1.jpg","attachments":[{"url":"https://mxd.codes/content/photos/motorcycle-tour-to-walchensee/photo-1.jpg","mime_type":"image/jpeg","title":"11910185_1649480532000854_210557428_n_7a928a6eb1.jpg"}],"authors":[{"name":"Max Dietrich","url":"https://mxd.codes"}]},{"id":"https://mxd.codes/photos/road-cycling","url":"https://mxd.codes/photos/road-cycling","title":"Road Cycling","content_html":"","date_published":"2017-03-18T08:31:46.422Z","image":"https://mxd.codes/content/photos/road-cycling/photo-1.jpg","attachments":[{"url":"https://mxd.codes/content/photos/road-cycling/photo-1.jpg","mime_type":"image/jpeg","title":"13696541_149612202133462_1520651288_n_6466a6c40e.jpg"}],"authors":[{"name":"Max Dietrich","url":"https://mxd.codes"}]},{"id":"https://mxd.codes/photos/highfield-festival-2016","url":"https://mxd.codes/photos/highfield-festival-2016","title":"Highfield Festival 2016","content_html":"","date_published":"2016-07-18T08:35:00.038Z","image":"https://mxd.codes/content/photos/highfield-festival-2016/photo-1.jpg","attachments":[{"url":"https://mxd.codes/content/photos/highfield-festival-2016/photo-1.jpg","mime_type":"image/jpeg","title":"14063491_1637639389882292_91922205_n_b95d5bd633.jpg"}],"authors":[{"name":"Max Dietrich","url":"https://mxd.codes"}]},{"id":"https://mxd.codes/photos/summer-sunset","url":"https://mxd.codes/photos/summer-sunset","title":"Summer sunset","content_html":"","date_published":"2014-07-18T08:30:22.014Z","image":"https://mxd.codes/content/photos/summer-sunset/photo-1.jpg","attachments":[{"url":"https://mxd.codes/content/photos/summer-sunset/photo-1.jpg","mime_type":"image/jpeg","title":"11918004_1601369753456626_80774012_n_e98e9fdd6c_d9d566254b.jpg"}],"authors":[{"name":"Max Dietrich","url":"https://mxd.codes"}]}]}