Update: Maps

2026-02-24 19:10:47 +01:00
parent 75c2b3dfcd
commit 22aa67d406
12 changed files with 208 additions and 76 deletions
--- a/layouts/index.html
+++ b/layouts/index.html
@@ -3,8 +3,8 @@
    {{ partial "usps.html" . }}

    {{ if .Params.info_section }}
-    <section class="info-section py-5 my-lg-5 mx-lg-5">
-        <div class="container px-lg-5">
+    <section class="info-section py-5 my-lg-5">
+        <div class="container">
            <div class="row align-items-center g-5">
                
                <div class="col-lg-5 pe-lg-5">
@@ -12,7 +12,7 @@
                        {{ with .Params.info_section.image }}
                        <img src="{{ . | relURL }}" 
                             alt="{{ $.Params.info_section.image_alt | default "Van Emous Mantelzorgwoningen" }}" 
-                             class="img-fluid hero-rounded-img shadow-sm">
+                             class="img-fluid rounded-img shadow fade-left">
                        {{ end }}
                    </div>
                </div>
@@ -43,7 +43,7 @@
    {{ end }}

    {{ if .Content }}
-    <div class="container my-5 px-lg-10">
+    <div class="container my-5">
        {{ .Content }}
    </div>
    {{ end }}
--- a/layouts/partials/head.html
+++ b/layouts/partials/head.html
@@ -1,23 +1,43 @@
-<link rel="icon" href="/img/favicon.ico" sizes="any">
-<link rel="apple-touch-icon" href="/img/apple-touch-icon.png">
-<link rel="manifest" href="/site.webmanifest">
-
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
-<title>{{ block "title" . }}{{ .Title }} | {{ .Site.Title }}{{ end }}</title>
-{{ $opts := dict "transpiler" "libsass" "targetPath" "css/main.css" "enableSourceMap" true }}
-{{ $style := resources.Get "scss/main.scss" | css.Sass $opts | resources.Minify | resources.Fingerprint }}
-<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.0/font/bootstrap-icons.css">
-<link rel="stylesheet" href="{{ $style.RelPermalink }}" integrity="{{ $style.Data.Integrity }}">

-<meta property="og:type" content="website">
+<link rel="icon" href="{{ "img/favicon.ico" | relURL }}" sizes="any">
+<link rel="apple-touch-icon" href="{{ "img/apple-touch-icon.png" | relURL }}">
+<link rel="manifest" href="{{ "site.webmanifest" | relURL }}">
+
+<title>
+    {{- if .IsHome -}}
+        {{ .Site.Title }} | {{ .Site.Params.description }}
+    {{- else -}}
+        {{ .Title }} | {{ .Site.Title }}
+    {{- end -}}
+</title>
+
+{{- $description := .Description | default .Summary | default .Site.Params.description -}}
+<meta name="description" content="{{ $description }}">
+<link rel="canonical" href="{{ .Permalink }}">
+
+{{ $opts := dict "transpiler" "libsass" "targetPath" "css/main.css" "enableSourceMap" true }}
+{{ with resources.Get "scss/main.scss" | css.Sass $opts | resources.Minify | resources.Fingerprint }}
+    <link rel="stylesheet" href="{{ .RelPermalink }}" integrity="{{ .Data.Integrity }}">
+{{ end }}
+<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.0/font/bootstrap-icons.css">
+<link href="https://unpkg.com/aos@2.3.1/dist/aos.css" rel="stylesheet">
+
+{{ with resources.Get "js/main.js" | resources.Minify | resources.Fingerprint }}
+    <script src="{{ .RelPermalink }}" integrity="{{ .Data.Integrity }}" defer></script>
+{{ end }}
+<script src="https://unpkg.com/aos@2.3.1/dist/aos.js"></script>
+
+<meta property="og:type" content="{{ if .IsPage }}article{{ else }}website{{ end }}">
 <meta property="og:url" content="{{ .Permalink }}">
-<meta property="og:title" content="{{ if .IsHome }}{{ .Site.Title }}{{ else }}{{ .Title }} | {{ .Site.Title }}{{ end }}">
-<meta property="og:description" content="{{ with .Description }}{{ . }}{{ else }}{{ .Site.Params.description }}{{ end }}">
-<meta property="og:image" content="{{ .Site.Params.seo.og_image | absURL }}">
+<meta property="og:title" content="{{ if .IsHome }}{{ .Site.Title }}{{ else }}{{ .Title }}{{ end }}">
+<meta property="og:description" content="{{ $description }}">
+<meta property="og:image" content="{{ .Params.image | default .Site.Params.og_image | absURL }}">
+<meta property="og:site_name" content="{{ .Site.Title }}">

 <meta property="twitter:card" content="summary_large_image">
 <meta property="twitter:url" content="{{ .Permalink }}">
-<meta property="twitter:title" content="{{ if .IsHome }}{{ .Site.Title }}{{ else }}{{ .Title }} | {{ .Site.Title }}{{ end }}">
-<meta property="twitter:description" content="{{ with .Description }}{{ . }}{{ else }}{{ .Site.Params.description }}{{ end }}">
-<meta property="twitter:image" content="{{ .Site.Params.seo.og_image | absURL }}">
+<meta property="twitter:title" content="{{ if .IsHome }}{{ .Site.Title }}{{ else }}{{ .Title }}{{ end }}">
+<meta property="twitter:description" content="{{ $description }}">
+<meta property="twitter:image" content="{{ .Params.image | default .Site.Params.og_image | absURL }}">
--- a/layouts/partials/header.html
+++ b/layouts/partials/header.html
@@ -1,6 +1,6 @@
 <header>
    <div class="top-bar py-2">
-        <div class="container d-flex justify-content-between align-items-center px-lg-5">
+        <div class="container d-flex justify-content-between align-items-center">
            <nav class="contact-info" aria-label="Contactinformatie">
                {{ if .Site.Params.telefoon }}
                    <a href="tel:{{ .Site.Params.telefoon | urlize }}" class="me-lg-5 text-white text-decoration-none" aria-label="Bel ons op {{ .Site.Params.telefoon }}">
--- a/layouts/partials/hero.html
+++ b/layouts/partials/hero.html
@@ -1,11 +1,11 @@
 <section class="hero-section py-5 my-lg-5">
    <div class="container">
-        <div class="row align-items-end mx-lg-5 px-lg-4">
+        <div class="row align-items-end">
            <div class="col-lg-7">
                <h1 class="display-3 mb-4 mb-lg-5">{{ .Params.hero.title | markdownify }}</h1>
                
                <div class="d-none d-lg-block">
-                    <a href="{{ .Params.hero.cta_link | relURL }}" class="btn btn-cta">
+                    <a href="{{ .Params.hero.cta_link | relURL }}" class="btn btn-cta" data-aos="fade-up" data-aos-delay="300">
                        {{ .Params.hero.cta_text }}
                    </a>
                </div>
@@ -17,7 +17,7 @@
                </p>

                <div class="d-lg-none mt-4">
-                    <a href="{{ .Params.hero.cta_link | relURL }}" class="btn btn-cta">
+                    <a href="{{ .Params.hero.cta_link | relURL }}" class="btn btn-cta fade-left">
                        {{ .Params.hero.cta_text }}
                    </a>
                </div>
@@ -27,7 +27,7 @@
        <div class="row mt-4 mt-lg-5">
            <div class="col-12">
                {{ with .Params.hero.image }}
-                <div class="hero-image-dynamic" 
+                <div class="hero-image-dynamic" data-aos="fade-in" data-aos-delay="100"
                    style="background-image: url('{{ . | relURL }}');">
                </div>
                {{ end }}
--- a/layouts/partials/map.html
+++ b/layouts/partials/map.html
@@ -1,17 +1,21 @@
 <section class="info-section py-5 my-lg-5">
  <div class="container overflow-hidden">
-    <div class="mb-5">
+    <div class="row">
+      <div class="mb-4 col-8">
        <h6 class="text-primary">Doe een vooronderzoek</h6>
        <h2 class="display-5 fw-bold">Toets uw kavel</h2>
+        <p>U kunt geheel vrijblijvend een vooronderzoek doen naar uw mogelijkheden. Voer uw (plaatsing-)adres in en krijg direct resultaat en een uitgebreid verslag ontvangt u binnen 5 minuten per email.</p>
+        <p>Liever <a href="/contact">persoonlijk advies?</a> Dat kunt uiteraard ook.</p>
+      </div>
    </div>
-    <div class="row flex-nowrap g-5" style="min-height: 650px;"> 
+    
+    <div class="row flex-nowrap g-5 h-100" style="min-height: 600px;" data-aos="fade-in" data-aos-delay="100"> 
      
-      <div id="col-map" class="col-12" style="transition: all 0.6s cubic-bezier(0.4, 0, 0.2, 1); flex-shrink: 0;">
-        <div class="panel overflow-hidden" style="height: 650px; position: relative;">
-          <div id="panel" class="bg-white p-4" style="position: absolute; left: 20px; top: 20px; z-index: 1000; width: 350px; border-radius: 20px; max-height: 90%;">
-            <div class="mb-3">
-              <p class="text-dark">Voer uw (plaatsing-)adres in.</p>
-              <input type="text" id="pc-input" class="form-control mb-2 rounded-pill" placeholder="Postcode (3771VH)">
+      <div id="col-map" class="col-12 mb-3" style="transition: all 0.6s cubic-bezier(0.4, 0, 0.2, 1); flex-shrink: 0;">
+        <div class="panel overflow-hidden shadow" style="height: 600px; position: relative;border:2px solid #fff;">
+          <div id="panel" class="bg-white p-4" style="position: absolute; left: 20px; top: 20px; z-index: 1000; width: 300px; border-radius: 20px; max-height: 90%;">
+            <div class="">
+              <input type="text" id="pc-input" class="form-control mb-2 rounded-pill" placeholder="Postcode">
              <input type="number" id="hn-input" class="form-control mb-2 rounded-pill" placeholder="Huisnummer">
              <button id="btnSearch" class="btn btn-cta">Analyseer Kavel</button>
            </div>
@@ -20,43 +24,47 @@
        </div>
      </div>

-      <div id="col-results" class="col-md-5 " style="display: none; opacity: 0; transform: translateX(50px); transition: all 0.6s ease-out; flex-shrink: 0;">
-        <div class="bg-light p-4 panel p-5">
-          <h3 class="fw-bold mb-4">Resultaten</h3>
+      <div id="col-results" class="col-md-5" style="display: none; opacity: 0; transform: translateX(50px); transition: all 0.6s ease-out; flex-shrink: 0;">
+        <div class="bg-light panel px-5 py-4 pt-5">
          <div class="d-flex justify-content-between mb-2"><span>Kavelnummer:</span><strong id="res-kavelnummer"></strong></div>
          <div class="d-flex justify-content-between mb-2"><span>Bouwjaar hoofdgebouw:</span><strong id="res-bouwjaar"></strong></div>
          <hr>
          <div class="d-flex justify-content-between mb-2"><span>Formaat kavel:</span><strong id="res-kavelformaat"></strong></div>
-          <div class="d-flex justify-content-between mb-2"><span>Formaat kavel:</span><strong id="res-kavelvrij"></strong></div>
+          <div class="d-flex justify-content-between mb-2"><span>Vrije meters:</span><strong id="res-kavelvrij"></strong></div>
          <div class="d-flex justify-content-between mb-2"><span class="text-primary h5">Max. Mantelzorgwoning</span><strong class="text-primary h5" style="filter: blur(7px);" id="res-max"></strong></div>
-          <hr>
+        </div>
+        <div class="p-4">
          <p>Ontvang een volledig rapport over alle  mogelijkheden binnen 5 minuten in uw email.</p>
          <form id="lead-form">
            
-            <div class="row">
+            <div class="row g-2">
              <div class="mb-2 col-md-4">
-              <select class="form-select form-select rounded-pill" id="f-aanhef" required>
-                <option value="" selected disabled>Aanhef</option>
-                <option value="Dhr.">Dhr.</option>
-                <option value="Mevr.">Mevr.</option>
-              </select>
-            </div>
+                <select class="form-select form-control form-select rounded-pill" id="f-aanhef" required>
+                  <option value="" selected disabled>Aanhef</option>
+                  <option value="Dhr.">Dhr.</option>
+                  <option value="Mevr.">Mevr.</option>
+                </select>
+              </div>
              <div class="mb-2 col-md-8">
-                <input type="text" id="f-achternaam" class="form-control form-control rounded-pill" placeholder="Achternaam" required>
+                <input type="text" id="f-achternaam" class="form-control rounded-pill" placeholder="Achternaam" required>
              </div>
              <div class="mb-2">
-                <input type="email" id="f-email" class="form-control form-control rounded-pill" placeholder="E-mailadres" required>
+                <input type="email" id="f-email" class="form-control rounded-pill" placeholder="E-mailadres" required>
              </div>
              <div class="mb-3">
-                <input type="tel" id="f-telefoon" class="form-control form-control rounded-pill" placeholder="Telefoonnummer" required>
+                <input type="tel" id="f-telefoon" class="form-control rounded-pill" placeholder="Telefoonnummer" required>
              </div>
-              <button type="submit" class="btn btn-cta">Rapport Aanvragen</button>
+              <div class="col-12">
+                <button type="submit" class="btn btn-cta">Rapport Aanvragen</button>
+              </div>
+              
            </div>
            
          </form>
          <div id="form-success" class="mt-3 text-center d-none">
              <p class="fw-bold mb-0">✓ Je rapport is onderweg!</p>
          </div>
+          
        </div>
      </div>
    </div>
@@ -68,14 +76,23 @@

 <script>
 document.addEventListener('DOMContentLoaded', function() {
-    // 1. Bronnen initialiseren
    const perceelSource = new ol.source.Vector();
    const gebouwSource = new ol.source.Vector();

    const map = new ol.Map({
        target: 'map',
+        controls: [
+            new ol.control.Zoom({
+                className: 'custom-zoom'
+            }),
+            new ol.control.Attribution({
+                collapsible: true
+            })
+        ],
        layers: [
-            new ol.layer.Tile({ source: new ol.source.OSM() }),
+            new ol.layer.Tile({ 
+                source: new ol.source.OSM() 
+            }),
            new ol.layer.Vector({
                source: perceelSource,
                style: new ol.style.Style({
@@ -91,10 +108,12 @@ document.addEventListener('DOMContentLoaded', function() {
                })
            })
        ],
-        view: new ol.View({ center: ol.proj.fromLonLat([5.594, 52.285]), zoom: 12 })
+        view: new ol.View({ 
+            center: ol.proj.fromLonLat([5.5846253, 52.2690304]), 
+            zoom: 11 
+        })
    });

-    // 2. Click Handler
    document.getElementById('btnSearch').addEventListener('click', async function() {
        const pc = document.getElementById('pc-input').value.replace(/\s+/g, "").toUpperCase();
        const hn = document.getElementById('hn-input').value;
@@ -108,7 +127,6 @@ document.addEventListener('DOMContentLoaded', function() {
            if (data.results && data.results.length > 0) {
                const r = data.results[0];

-                // A. Data invullen
                // document.getElementById('res-adres').innerText = r.adres || '—';
                document.getElementById('res-bouwjaar').innerText = r.hoofdgebouw_bouwjaar || '—';
                document.getElementById('res-max').innerText = (r.max_mantelzorgwoning_m2 || 0) + ' m²';
@@ -116,25 +134,20 @@ document.addEventListener('DOMContentLoaded', function() {
                document.getElementById("res-kavelformaat").innerText = (r.kavel_m2 || 0) + ' m²';
                document.getElementById("res-kavelvrij").innerText = (r.vrije_m2 || 0) + ' m²';

-                // B. Animatie Logica
                const colMap = document.getElementById('col-map');
                const colRes = document.getElementById('col-results');

-                // Stap 1: Krimp de kaart-kolom
                colMap.classList.remove('col-12');
                colMap.classList.add('col-md-7');

-                // Stap 2: Toon zijpaneel met fade-in
                setTimeout(() => {
                    colRes.style.display = "block";
-                    // Kleine delay voor de browser om display:block te verwerken voor de transitie
                    setTimeout(() => {
                        colRes.style.opacity = "1";
                        colRes.style.transform = "translateX(0)";
                    }, 50);
                }, 100);

-                // C. Kaart tekenen
                setTimeout(() => {
                    map.updateSize();
                    perceelSource.clear();
--- a/layouts/partials/usps.html
+++ b/layouts/partials/usps.html
@@ -2,7 +2,7 @@
    <div class="container px-lg-5">
        <div class="row g-3 g-lg-4 justify-content-center">
            {{ range .Params.usps }}
-            <div class="col-auto mx-auto">
+            <div class="col-auto mx-auto fade-up">
                <div class="usp-item d-flex align-items-center">
                    <svg class="me-2" width="26" height="22" viewBox="0 0 18 14" fill="none" xmlns="http://www.w3.org/2000/svg">
                        <path d="M1.5 7.5L6.5 12.5L16.5 1.5" stroke="#B95913" stroke-width="1" stroke-linecap="round" stroke-linejoin="round"/>