Route tekent zich op de kaart Nieuw

Een bezorgroute tekent zich op een gestileerde kaart terwijl je door de stops scrolt; elke stop licht op zodra de lijn hem bereikt en de actieve stop in de lijst kleurt mee. SVG met stroke-dashoffset gekoppeld aan een CSS scroll-timeline en view() (Chrome, Edge, Safari 26), geen kaart-API. Zonder support of bij reduced motion staat de hele route er direct. Voor bezorggebied, werkgebied of "van offerte tot oplevering".

07.30Kwekerij NaaldwijkLaden: 140 bossen
08.10HonselersdijkBloemist Vreeken
08.45MonsterHotel Strand 21
09.20's-GravenzandeUitvaartcentrum
10.05Hoek van HollandTerminal, laatste stop

Zo gebruik je het

Plak de HTML op de plek waar het onderdeel moet komen.
Zet de CSS in je stylesheet. Alle klassen hebben een eigen voorvoegsel, dus niets botst met je eigen opmaak.
Geen JavaScript nodig.

<!-- Route tekent zich op de kaart · NedDev · eigen werk. -->
<div class="jouw-container">
<div class="rtk" tabindex="0" role="region" aria-label="Bezorgroute, scrollbaar">
  <div class="rtk__map" aria-hidden="true"><svg viewBox="0 0 200 200">
    <path class="rtk__sea" d="M0 0h70C52 60 40 120 6 200H0z"/>
    <path class="rtk__coast" d="M70 0C52 60 40 120 6 200"/>
    <g class="rtk__fields"><path d="M90 20h40v30H90zM140 30h40v40h-40zM110 140h50v40h-50zM160 100h30v35h-30zM80 160h25v30H80z"/></g>
    <path class="rtk__road" d="M128 128 L150 112 L170 84 L140 64 L96 44 L84 70 L62 104 L50 140 L30 172"/>
    <path class="rtk__route" pathLength="1" d="M128 128 L150 112 L170 84 L140 64 L96 44 L84 70 L62 104 L50 140 L30 172"/>
    <g class="rtk__stop rtk__s0"><circle cx="128" cy="128" r="6"/><text x="138" y="140">Naaldwijk</text></g>
    <g class="rtk__stop rtk__s1"><circle cx="170" cy="84" r="5"/><text x="128" y="98">Honselersdijk</text></g>
    <g class="rtk__stop rtk__s2"><circle cx="96" cy="44" r="5"/><text x="102" y="36">Monster</text></g>
    <g class="rtk__stop rtk__s3"><circle cx="62" cy="104" r="5"/><text x="72" y="108">'s-Gravenzande</text></g>
    <g class="rtk__stop rtk__s4"><circle cx="30" cy="172" r="6"/><text x="40" y="180">Hoek van Holland</text></g>
  </svg></div>
  <ol class="rtk__list">
    <li><span>07.30</span><b>Kwekerij Naaldwijk</b>Laden: 140 bossen</li>
    <li><span>08.10</span><b>Honselersdijk</b>Bloemist Vreeken</li>
    <li><span>08.45</span><b>Monster</b>Hotel Strand 21</li>
    <li><span>09.20</span><b>'s-Gravenzande</b>Uitvaartcentrum</li>
    <li><span>10.05</span><b>Hoek van Holland</b>Terminal, laatste stop</li>
  </ol>
</div>
</div>

/* Route tekent zich op de kaart · NedDev · eigen werk. */
.rtk{position:absolute;inset:0;overflow-y:auto;display:grid;grid-template-columns:56% 1fr;background:#f4f3f1;color:#0a0a0a;font-family:'Switzer',system-ui,sans-serif;container-type:size;scroll-timeline:--rtk y;scrollbar-width:thin}
.rtk:focus-visible{outline:2px solid #F5480F;outline-offset:-2px}
.rtk__map{position:sticky;top:0;height:100cqh;display:grid;place-items:center;padding:8px;box-sizing:border-box}
.rtk__map svg{width:100%;height:100%;max-height:100%}
.rtk__sea{fill:#d6e2e6}.rtk__coast{fill:none;stroke:#9fb8c1;stroke-width:1}
.rtk__fields path{fill:#e6e2da;stroke:#d6d0c6;stroke-width:.6}
.rtk__road{fill:none;stroke:#cfc9bf;stroke-width:3;stroke-linejoin:round;stroke-dasharray:2 3}
.rtk__route{fill:none;stroke:#F5480F;stroke-width:3.2;stroke-linejoin:round;stroke-linecap:round;stroke-dasharray:1;stroke-dashoffset:0}
.rtk__stop circle{fill:#fff;stroke:#0a0a0a;stroke-width:2}
.rtk__stop text{font:600 9.5px 'Switzer',sans-serif;fill:#0a0a0a;paint-order:stroke;stroke:#f4f3f1;stroke-width:3px}
.rtk__s0 circle,.rtk__s4 circle{fill:#0a0a0a}
.rtk__list{list-style:none;margin:0;padding:calc(50cqh - 26px) 12px calc(50cqh - 26px) 4px;counter-reset:rtk}
.rtk__list li{display:flex;flex-direction:column;gap:1px;min-height:52px;padding:6px 0 6px 12px;border-left:2px solid #d9d6d1;font-size:11.5px;color:#5f5a54;margin-bottom:34px}
.rtk__list b{font-size:13.5px;color:#0a0a0a;letter-spacing:-.01em}
.rtk__list span{font:500 10px 'JetBrains Mono',monospace;color:#5f5a54}
@supports (animation-timeline: scroll()){
@media (prefers-reduced-motion:no-preference){
  .rtk__route{animation:rtk-draw linear both;animation-timeline:--rtk}
  .rtk__stop{animation:rtk-pop linear both;animation-timeline:--rtk;transform-box:fill-box;transform-origin:center}
  .rtk__s0{animation:none}
  .rtk__s1{animation-range:19% 23%}.rtk__s2{animation-range:48% 52%}.rtk__s3{animation-range:72% 76%}.rtk__s4{animation-range:97% 100%}
  .rtk__list li{animation:rtk-li linear both;animation-timeline:view();animation-range:cover 35% cover 65%}
}}
@keyframes rtk-draw{from{stroke-dashoffset:1}to{stroke-dashoffset:0}}
@keyframes rtk-pop{from{opacity:.25;transform:scale(.6)}to{opacity:1;transform:scale(1)}}
@keyframes rtk-li{0%,100%{border-left-color:#d9d6d1}15%,85%{border-left-color:#F5480F}}
@container (max-width:380px){.rtk{grid-template-columns:52% 1fr}.rtk__list b{font-size:12px}.rtk__list li{font-size:10.5px}}

Meer uit scroll-effecten

Iets gezien dat je mooi vindt?

Zet het in je selectie en stuur hem op. Dan bouwen we je site eromheen, in jouw huisstijl.

Neem contact op →