PageSourceSearch

https://fietsroutenetwerk.nl/routeplanner

html fietsroutenetwerk.nl collected 2026-10-01 13:12:12 UTC 103,822 bytes, 1,616 lines download raw bytes

1
2
3<!DOCTYPE html>
4<html id="htmlTag" xmlns="http://www.w3.org/1999/xhtml" style="--merkkleur:#008940" lang="nl">
5<head><link rel="stylesheet" href="/DXR.axd?r=23_81,23_88,0_2206,0_2313,1_66,1_67,1_207,0_2211,0_2318,1_204,1_72,1_71,1_205-Tkqku" /><link rel="icon" type="image/png" href="/favicon/favicon-96x96.png" sizes="96x96" /><link rel="icon" type="image/svg+xml" href="/favicon/favicon.svg" /><link rel="shortcut icon" href="/favicon.ico" /><link rel="apple-touch-icon" sizes="180x180" href="/favicon/apple-touch-icon.png" /><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1" /><link rel="preconnect" href="https://cdn.fietsroutenetwerk.nl" crossorigin="" />
6    
6<script>
7        // Zet --vh op basis van de echte viewport-hoogte (window.innerHeight), want 100vh telt op
8        // mobiel ook de (in/uitklappende) adresbalk mee. Wordt gebruikt door site.css voor de kaart
9        // en het routeoverzicht-paneel op mobiel. Zo vroeg mogelijk zetten, voor eventuele flash-of-
10        // wrong-height.
11        //
12        // 31-08-2026: visualViewport erbij. Op iOS Safari verandert bij het in- en uitklappen van de
13        // adresbalk vooral window.visualViewport en niet altijd window.innerHeight, dus zonder deze
14        // luisteraar bewoog --vh juist niet mee met het geval waarvoor hij bestaat.
15        //
16        // Nieuwe CSS gebruikt liever de eenheid dvh, die dit zelf al doet. Deze variabele blijft
17        // staan voor wat er al op leunt en als terugval voor oudere browsers.
18        (function () {
19            function setVh() {
20                var h = (window.visualViewport && window.visualViewport.height) || window.innerHeight;
21                document.documentElement.style.setProperty('--vh', (h * 0.01) + 'px');
22            }
23            setVh();
24            window.addEventListener('resize', setVh);
25            window.addEventListener('orientationchange', setVh);
26            if (window.visualViewport) {
27                window.visualViewport.addEventListener('resize', setVh);
28            }
29        })();
30    </script>
30
31    <link href="Content/bootstrap.min.css" rel="stylesheet" /><link href="Content/site.css?v=20260910" rel="stylesheet" /><link href="Content/all.css?v=20260202" rel="stylesheet" /><title>
32	Fietsroute plannen op knooppunten | Fietsroutenetwerk
33</title>
34    
35    
35<script type="text/javascript" src="/Scripts/frn-log.js?v=20260822"></script>
35
36    
37    
37<script type="text/javascript" src="/Scripts/cookiebalk.js?v=20260905c"></script>
37
38    
38<script type="text/javascript" src="/Scripts/jquery.min.js"></script>
38
39    
39<script type="text/javascript" src="/Scripts/popper.min.js"></script>
39
40    
40<script type="text/javascript" src="/Scripts/bootstrap.min.js"></script>
40
41    <meta id="PageKeywords" name="keywords" content="fietsroutenetwerk, fietsen, fietsnetwerk, fietsennetwerk, fietsroutes, knooppunten" /><meta id="PageDescription" name="description" content="Het fietsroutenetwerk maakt u wegwijs op de vele fietspaden in Nederland. Via knooppunten kunt u uw weg vinden" /><meta name="verification" content="494a5928b394a2882929f6b8f82b5fd4" />
42        <link rel="canonical" href="https://fietsroutenetwerk.nl/routeplanner" />
43    
44            <link rel="alternate" hreflang="nl" href="https://fietsroutenetwerk.nl/routeplanner" />
45        
46            <link rel="alternate" hreflang="en" href="https://fietsroutenetwerk.nl/en/route-planner" />
47        
48            <link rel="alternate" hreflang="de" href="https://fietsroutenetwerk.nl/de/routenplaner" />
49        
50        <link rel="alternate" hreflang="x-default" href="https://fietsroutenetwerk.nl/routeplanner" />
51      
52
53
54    
55    
55<script>
56        window.dataLayer = window.dataLayer || [];
57        function gtag() { dataLayer.push(arguments); }
58
59        // Wordt aangeroepen door cookiebalk.js, bij het accepteren en bij elke volgende
60        // paginaweergave zolang die keuze geldt.
61        window.laadAnalytics = function () {
62            if (window.analyticsGeladen) return;
63            window.analyticsGeladen = true;
64
65            var s = document.createElement('script');
66            s.async = true;
67            s.src = 'https://www.googletagmanager.com/gtag/js?id=G-4G7WYMM2VV';
68            document.head.appendChild(s);
69
70            gtag('js', new Date());
71            gtag('config', 'G-4G7WYMM2VV');
72        };
73    </script>
73
74
75    
76    <style>
77    .panel-loader {
78        position: absolute;
79        inset: 0;
80        z-index: 20;
81        display: flex;
82        align-items: center;
83        justify-content: center;
84        background: rgba(255, 255, 255, 0.08);
85        pointer-events: none;
86    }
87
88    .d-none {
89        display: none !important;
90    }
91    </style>
92</head>
93<body>
94    <form method="post" action="./routeplanner" id="ctl13" enctype="multipart/form-data">
95<div class="aspNetHidden">
96<input type="hidden" name="__EVENTTARGET" id="__EVENTTARGET" value="" />
97<input type="hidden" name="__EVENTARGUMENT" id="__EVENTARGUMENT" value="" />
98<input type="hidden" name="__VIEWSTATE" id="__VIEWSTATE" value="tA8TMHHUjWrSxW2x9WUWzRURcaKaPavFlw2vz3kFt+CzQxa/1GZg+ObBB4QYpoyUq/kK9ubI2J0LigxaPS8np4EEqMyI/kU0oMUgtT7tKtWNajm/TKASQlpU2ItIScRRlJiyYiHDtLXlernPjajHl86tsaYYd2WIXgfRDVd4XSB9SMQVtHSflrwuRCMJvmnrIjkkAYWRja/9P6fLfyXgfvkTaYDaTKvhfpibCWNEjS0rTcuuw0WywrRj+aqhjns22cZPKUoqh5s/sA31JVPiEqam77XUzeUtSk9tscovAbevzQB2kYsJWvc//L0537O8UOSnXwIscuSlo1PGSnS9WbMW9C+JUwCDxoKrK3TiBphZjTAO3dFe0Nb1lazxVTeyxnTk605Tljzcjhk3YfnGcnaIJpHK7EsMEkKIJ43d1pTLjRkdwvvdkMVpT6oyx+GKU3MajGkS3dTNY3G6tM34lzr1WeK3J+OibDvcqvSRmPdW7hI7s9kNOzQMk1cL+21tsUPVjRO4PEBzfIcu9DWCOK6WNh2N+N8Y8+1v66DJHzbOyaF4HmmiIB3RG99KhInbNOP95hvHV1WVv9dyHFF4Uj3tIyn5KZIHEgC7KXeZY7cHf2D2Gq9Fxo9GiGISy5uPnxC4j7xTqE9FWwotBbV5b9d80RARrw08MoaNe0zrM1lCmguiWAMvvjiUP2oMfEOfJRvDU+lleci+JgTY9ZKVlVaAqtPfVxh+pb92z2fp/SarJWxj4TpOezTHYSEcnh7SOuaQXcT+iC5H1Moz/lRM0FTWeTXPIgYM+z8VNULBmnHEjOrT9bSg3rNQwIcujxUgeaFR9ioerC6+KC4ZUThzkVctVWfFrAp7Cghs9RP7h5ITSqvo8c6TqwNs+ue7yLDjq1J+GddruD7dfndoFvY3Z+yzts14moCg+7XGo6xrgCLCf4sEGBWQgcdvriEKq8uAEjfLlc4fu3ofyda3xq+3VdDcEQNlGPKs57YXurJaUMBFUMZnnepp7hCwhURi4/lGU7ZTkqHzx8PEaUdAgq/8ohNdXCej9WLGBruwLhAcv/kqYtDcSVUUDM7s44ByenTEx/9XH9qRYHxJPGsCtULvnxRAngdInsLK4jfK0+JsG/8YtwRWKB8dyfVFIoQc9iZJ+Mj2eQnIRIu4p//aWIOmY04DtCnic1OdPjI4y/UF1Z0ecDpvWmSIAiiraZJ6/lQ6URAW79H/OrlqglzgRdmIXHdIgRGsQ6WaaHBKFAqQ78EH+c7Vt9ODn5MHOab4GJX3rVYr1VCTTHBV4oDNuvqlOje4x1Ae0iRLSNRmD1RPuizD/2s9J+Y1EXjDdUs0cE4bYXVAkZSEZIN14XzKc8jeqbnBF3N9TOwVa0mHP/feEvMSahMdEtwiwhz6YKaH/Md6iGhutagnjyjj6gu0P4WsU+D19B5QoocZc54AGnGkGQRbXz2D6f9g8LjthNkVXlSsEOUxxYnPseP0OikL2iEJ9jbJQrOTkITkMwQemy7uSzQS4Jc5yisaQ2JPRETZtK+7IBBLR9JS498IRhl++9eVdEZSbHV2Tb8Eyx22tkLfuw4SQBhfxmG1eDU137ZbYk8uhsqX3ciLGLMXFiVXB5ia3JSlXk6fac6nWVvcYYQ/u7BrOIRoOYFWXOajCYD7Dda8czjtu6EU8qa/mcRJj/zacSnhi2zBLXHdM3xE4CQpj7DcWQ09T5HezqwAuQevuGNJA9ytDsHyYBivIuN+ad4JLJ1ME/VSb96i9qC7jqa2liFp1IgfAFkEzOGbNiEumXYoZdBHHR31wvL1p7TtZTWTQgMfQ6+8EvZlqDoAjS81pfeUBcKjlOWkkk0TIFK31/H1RB9VMeb9GyFieQhOSobaFjY9GCEQ52rlwAsHjJAwKHtSafXgOWntDrpY8tjifui/yhcAVwI35j+QH8C4CjD0jm5peI5GJjx9u/vRR3Vx4yOm6PlMCcnDXxAAj8Y9iOsboOwMyr06tCHQiXcvYX5GQ1dkJl5lbpti5PpqR+cj4qks+iWn7hovN/i7JVAPhMX8E27mM22qRw466gHETy4Eu5X53kBX9k4NF8Z4CMBZ1jNqsVI17o0CupfJ9fQt4ReI5hcT/SAD6nos3ZRh99ZkCcNMLO3qwDy8HUX8Uf0ekrZfKRlwLOjQCD60huSVxZ5U72716LbBSpw1gW4BgVjdkXyf3s/LhXcyI6nyIRpJ4N9r+6ll6rf2aHtLQZHJuL/j7czpsUG/AFVtzbA98MjQnSXoIJvyHgf6+bKRrkpeLxWXHfsmzKftytyVdFph+PxOtP6rInCzHj4efqLzfuTwASQO1tzE0Iob1HoyuDAJ0XEV2kdNE7Xn6wE7e3uVhQAA8Da2l94CbyL0MfwnP30Jb3FDK6GQG7aBtqDPgRCCcJuvh/TNpYtuLOpZ/zC4UTyoEUnRjuNfrvfOyDy0v6so1UTUN7BamdSimCGHQud7eqxeDa8OSRWzJt0xX5tR9bkUczzDsDVNBASQRi9dMvDKf1QbnlWgb3XOLCc15ArmBfLn2Rv2vKyip2sTSmY0US9OeOMnik9RIDlY3jod4nqJ89vXhCTadMCfgtP1jPWzE6vfDZC3X+wkOj6Ur0ZzThAN9F0NC7F+EWNAZ1QBwkFcd+qFuV+iBYARirq8wzugq9tHouGaCi6Q6ZYVW9eVi7dO0MhFVSX1Agj+o3SDGgoLQwyaifwOdBNlEcOj3GjEbsrN8I80/NJ9Orsb4RfOCqu4uzxT85Cn+i1mvigf2dKbi3bvV7aICgNVBVEEo/M/jeuTfN/hh8ysSED3tRqywof248VZX+brzozU8x/8geY4hcbWsZ92t3prM70IR7TSv+agdsV6tm89oEGeVCkYTVU3C/Ju7HjZpiXCdn1ZHUt9qav9dVOwXkYyeX9KTkcLtm/SmNeRZcIKutiQjeAh9KADNm9uR5hJBwp8QYA6EH2ojGWVCrYAEHdk37/7jaDiu0E0L8nfuDcD8djhWye4w/qxHc1GHYT2vqMa8PgVF7SAtONxMPhGP2+0OfQp9oHlar+yGxaszK82jT9StXGzMQksJZ+V5iF47MvJUgBgepn+jN9xQVuvmriuZkgmUX+4sc402M8JxZjywnrzsAzJ7vbp5HKMZS0zx0XbaakisuHV6mj8ME2iROq5oaL7UJUg4K6U48qjOXmKih0DCKPHi8NorcOgHT0awWLGNpN8T1sD18y55KuSEa/3P5dhvzRMWQpz72Rr+3T6D8MuOHdz4QylITKev9fl69DiQB5Fif2xeIlH74EUB2zm9FkkWOukAtFc2LkricZlpesP+UiS7pGJvEF5jnmG7ZoC1w/opRW6KTIpqmswDbIxt9ic/ktWiFjox4EJ9RiKSx17OTqXaIXE0BEgWJ9tMCHZTNTaNA65D0z0S/LIJzZPpyT8jRYwVXyGnEK+unKBDNBpxSDG1ixSyJMt7JUXiDURIr8sGJU+zESd8HBOP6q4rza23ABUNM4GJQYbqPiHGtev8Cvt/fNWw81UtzvkCyj+fueu26MBuwu+EmwFCE5EfMi2fQVhrgysIzOrzi52fRutm1KPY1FIEQ5aj/f1G8+PA07vXE4nYLk8Gqk3yR6QuF3PxemsS8mDE2UhP5A+gOPAkqDkjTAHL2Gzsuz3rNCSBxPqxj4hO8pDbP9y9uCWThlzs+J+YC0+kbDOt9IFRv0HRGIfUZD1HjFpO80uvWt7o7ho4agH+Qz0wb6x+lgTQ7PlK1oFpi8lX7zM1AR1SxzsTTRpwtLQeqwVxgFDNQT1Of8uUogkYwSNNbk3wJJY6MxVyk6pr4HpOJSV3skrHbMtsjLvnqc9/8wLjhF2zzM4inhL621GuLBEoTNzciqppZ+aMMjilmzRn+ar8+KRse7ezFkhopm1gTHpgaXn/ZEhatPRaPU/l5QZ3u+fxHzqQEw0zjYKJSFzCCyybOL3X
98D5eu+jl9yTZbQS3wpcdcHQqrZPxdrCJR6Km1wEVlmigkAuTsXFzeDBFj1uXA59IXhRWAw0LaRFllzAD4RuOcbM7HPuWL5oXfo37BLSMYldtew4T3tenu1QaL/ADKN9p0cUxsAWpQ18xd57/ldswrz/HgWAZz3MtfbTqsrV0CaPRrr+hr+HNMlw=" />
99</div>
100
101<script type="text/javascript">
102//<![CDATA[
103var theForm = document.forms['ctl13'];
104if (!theForm) {
105    theForm = document.ctl13;
106}
107function __doPostBack(eventTarget, eventArgument) {
108    if (!theForm.onsubmit || (theForm.onsubmit() != false)) {
109        theForm.__EVENTTARGET.value = eventTarget;
110        theForm.__EVENTARGUMENT.value = eventArgument;
111        theForm.submit();
112    }
113}
114//]]>
115</script>
115
116
117
118<script src="/WebResource.axd?d=pynGkmcFUV13He1Qd6_TZCKNxemS4WqClAGqkdBmWV69xbMGt94hmdFo1nioi92x4ebO7pr2j-_slYdTa1iQBw2&amp;t=639040157733241510" type="text/javascript"></script>
118
119
120
121<script src="/ScriptResource.axd?d=NJmAwtEo3Ipnlaxl6CMhvvWEDGF9aQjerXDRgMwPITyiljABUZDf--PxAEBhmKyCqJzOE6buIEyR2AllEgs8Isp281-4AXtJggpyLFtGzekNH_gPpHp61v9AXfsHJMvRctvXpIOAgMCRMjWNJ-DJiikhMOKgf5PBY7-pXT5d7hU1&amp;t=74a40145" type="text/javascript"></script>
vendor: 2 bytes, line 121
121
122<script src="/ScriptResource.axd?d=dwY9oWetJoJoVpgL6Zq8OD_JYHSA9Jsoeb0lX7fSrk99wWDDeAUFNrOUqSXS69_evaaL6pyx3H0I456Rt4KiRi3dErJLIJkRVw_h0UiX7D3HEbeGqT64IvhNF3PNFoe6sNWQLz9Zj3XS91cP1jaLjjoYX5wI_-znlh9EIPIJEAM1&amp;t=74a40145" type="text/javascript"></script>
vendor: 2 bytes, line 122
122
123<script src="/WebServices/RouteFetch.asmx/js" type="text/javascript"></script>
123
124<div class="aspNetHidden">
125
126	<input type="hidden" name="__VIEWSTATEGENERATOR" id="__VIEWSTATEGENERATOR" value="18FB3328" />
127	<input type="hidden" name="__EVENTVALIDATION" id="__EVENTVALIDATION" value="4Y0j+eZxeSyoGupxnPFeS3PjpB7JJDrJ0gbR2ZaLNFaPAMoLxgvIE1voftVnA5gbHNMyt5QgnGkOdef82zUAZiPNzqv/0ZlqC5ytHrUTs/fP4ZD6PXgkzVsopp/kA+dWYn2KOLGdJN8jXpT7OcUhRcMVStSjsTZ6Bpaxc1gnms5dCcMUB1tdO/1CEX9BssImY+7foosaL1L1XkLtKvlvJAdsRtscROYHNBMeVrgpAlLkM+Ol/cBj927SpzfSLTCKDhUlNtQl3E4N/jr6cJMQ1A3XxckAReuMOUKVYRdG/bsYMvdLlaiPPuDqO8FL/sND6KEGNnT/1nXwnuEd+gMmbWvFJJG1Try9gDReaODkLSsvoRFiGnGb1819o1M9FkHLCUrZjQZQQ+eqwa45Tqql1NLLcVfbaVh64sch9+Ev+oCoJkrbb+ybeVe1AEAZtrjWM7kySoN5/GuEx5D75R2kPprYQNCx64/W4Xrn/XHNICw=" />
128</div>
129        
130        <a href="#hoofdinhoud" class="skiplink">Naar de inhoud</a>
131        <nav class="navbar navbar-expand-lg navbar-light fixed-top bg-light" id="mainNavbar">
132    <div class="container-fluid">
133
134        <!-- Brand -->
135    <a id="navbrand" class="navbar-brand d-flex align-items-center" href="/">
136            <!-- SVG inline logo -->
137            <svg id="Laag_1" data-name="Laag 1" xmlns="http://www.w3.org/2000/svg"
138                 viewBox="0 0 182.11 182.11" height="45">
139                <defs>
140                    <style>
141                        .cls-1 { fill: #fff; }
142                        .cls-2 { fill: #0b9a39; }
143                    </style>
144                </defs>
145                <circle class="cls-1" cx="91.02" cy="91.32" r="84.22" />
146                <g>
147                    <path class="cls-2" d="M91.06,11.37c43.94,0,79.68,35.75,79.68,79.68s-35.75,79.68-79.68,79.68S11.37,134.99,11.37,91.06,47.12,11.37,91.06,11.37M91.06,0C40.77,0,0,40.77,0,91.06s40.77,91.06,91.06,91.06,91.06-40.77,91.06-91.06S141.34,0,91.06,0h0Z" />
148                    <path class="cls-2" d="M129.72,77.29c-3.33-.13-6.52.4-9.45,1.48l-6.61-13.94,2.27-5.45c.07-.17.12-.34.16-.51h4.92c1.37,0,2.6-.97,2.8-2.33.25-1.7-1.06-3.16-2.72-3.16h-19.42c-1.29,0-2.47.86-2.75,2.11-.4,1.79.95,3.38,2.67,3.38h8.6l-1.61,3.85h-41.77l1.71-5.5h13.23c1.37,0,2.6-.97,2.8-2.33.25-1.7-1.06-3.16-2.72-3.16h-15.33c-1.2,0-2.26.78-2.62,1.93l-7.5,24.18c-2.6-.57-5.34-.73-8.17-.41-11.54,1.33-20.68,10.67-21.73,22.25-1.39,15.29,11.26,28.08,26.51,26.93,12.17-.92,21.92-10.75,22.74-22.93.71-10.59-5.28-19.89-14.15-24.07l1.46-4.69,27.74,30.55c.52.57,1.26.9,2.03.9h11.61c2.08,11.54,12.19,20.31,24.32,20.31,14.15,0,25.56-11.96,24.66-26.3-.79-12.58-11.08-22.61-23.68-23.1ZM70.3,101.98c0,11.13-9.51,20.08-20.84,19.15-9.29-.77-16.76-8.23-17.53-17.53-.93-11.32,8.02-20.84,19.15-20.84,1.25,0,2.47.12,3.66.35l-6.26,20.18c-.4,1.29.14,2.72,1.34,3.32.41.21.84.3,1.26.3,1.17,0,2.26-.76,2.62-1.93l6.22-20.06c6.15,3.21,10.37,9.64,10.37,17.05ZM65,68.92l.22-.7h41.08l-13.2,31.64-28.1-30.94ZM104.06,100.88h-5.43l12.2-29.23,4.54,9.57c-6.52,4.22-10.93,11.42-11.3,19.66ZM117.73,86.24l6.94,14.64h-15.12c.34-6.05,5.5-11.36,8.18-14.64ZM130.35,121.13c-9.79.8-18.21-5.77-20.32-14.76h18.92c.59,0,1.17-.16,1.64-.5,1.13-.82,1.44-2.26.89-3.42l-8.86-18.69c1.92-.64,3.97-1,6.1-1,11.13,0,20.08,9.52,19.15,20.84-.77,9.29-8.24,16.76-17.53,17.52Z" />
149                </g>
150            </svg>
151
152            <span class="ms-2 logo-text">
153                <span style="color:#0b9a39;">Fiets</span><span style="color:#0b9a39;">routenetwerk</span>
154            </span>
155            </a>
156         
157        <!-- Toggler -->
158        <button class="navbar-toggler" type="button"
159                data-bs-toggle="collapse" data-bs-target="#topMenu"
160                aria-controls="topMenu" aria-expanded="false" aria-label="Toggle navigation">
161            <span class="navbar-toggler-icon"></span>
162        </button>
163
164        <!-- Collapsible menu -->
165        <div class="collapse navbar-collapse" id="topMenu">
166            
166<script id="dxss_1594992262">
167<!--
168var ASPx,dx,DevExpress;!function n(t,o,e,r,i,a,c){var u=[],l=[],d=0,f=[],s=[],h=!1;function C(n,r,i){n[i]=function(){r(t,o,e)}}function v(){return r==d}function m(){return!0}function E(n){return function(){throw new Error(n)}}function x(n){n()}var S=-1;function b(n,t,o,e){var r=++S;return function(){i(function(){r==S&&o()&&(S--,function(n){for(var t=n.length,o=0,e=null;(e=n[o])&&o<t;o++)e&&e();n.length=0}(t),e())})}}var p=b(0,f,function(){return h&&v()},function(){t.attachToReady=x}),T=b(0,s,m,function(){t.attachToLoad=x,p()}),w=b(0,l,m,function(){t.SS=function(n){n(t,o,e)},T()}),A=b(0,u,v,function(){t.IS=E("Too late"),w()}),y=0;t.SS=function(n){var t=y++;i(function(){C(l,n,t)})};var P=0;t.IS=function(n,t){i(function(){for(C(u,n,t),d++;P<d&&u[P];)u[P]=u[P]()&&null,P++;A()})},t.attachToReady=f.push.bind(f),t.attachToLoad=s.push.bind(s),t.initResourceLoader=n,c.addEventListener("DOMContentLoaded",function(){r=c.querySelectorAll("script[id^=dxis_][defer]").length,A()}),a.addEventListener("load",function(){h=!0,p()});var L=["BeginCallback","BrowserWindowResized","CallbackError","ControlsInitialized","EndCallback","ValidationCompleted"],B=["ForEachControl","Get","GetByName","GetControlsByPredicate","GetControlsByType"],G=[];var g=L.reduce(function(n,t){return((n[t]={}).AddHandler=function(n){G.push({e:t,h:n})})&&n},{});g=B.reduce(function(n,t){return(n[t]=E("The environment has not been initialized. To access the "+t+" member, call the member from the ControlsInitialized event's handler."))&&n},g),t.loadControlCollectionPreloadHandlers=function(n){G.forEach(function(t){n[t.e].AddHandler(t.h)}),L.forEach(function(t){g[t]=n[t]}),B.forEach(function(t){g[t]=n[t].bind(n)}),t.loadControlCollectionPreloadHandlers=G=g=null},a.ASPxClientControl={GetControlCollection:function(){return g}}}(ASPx||(ASPx={}),dx||(dx={}),DevExpress||(DevExpress={}),-1,window.requestAnimationFrame||setTimeout,window,document);
169
170//-->
171</script>
171<script id="dxis_888217622" src="/DXR.axd?r=1_9-Rkqku"></script>
171<script id="dxis_677467434" src="/DXR.axd?r=1_10,1_253,1_21-Rkqku&amp;order=0" defer></script>
171<script id="dxis_2075204093" src="/DXR.axd?r=1_62-Rkqku"></script>
171<script id="dxis_289762516" src="/DXR.axd?r=1_11,1_12,1_13,1_15,1_22,1_31,23_0,23_1,23_3,1_6,1_40,23_53,1_181,1_186,1_187,1_46,1_7,1_45,1_203-Tkqku&amp;order=1" defer></script>
171<nav class="dxbs-menu clearfix top-menu" id="TopMenu">
172	<ul class="navbar-nav nav nav-pills">
173		<li class="nav-item"><a class="nav-link active"><span class="text">Routeplanner</span></a></li><li class="nav-item"><a class="nav-link" href="/fietsroutes"><span class="text">Fietsroutes</span></a></li><li class="nav-item separator"><a class="nav-link active">&nbsp;</a></li><li class="nav-item"><a class="nav-link"><span class="text">Afstappunten</span><span class="popout dropdown-toggle"></span></a><ul class="dxbs-dm dropdown-menu dx-dropdown-menu">
174			<li><a class="dropdown-item" href="/bezienswaardigheden"><span class="text">Bezienswaardigheden</span></a></li><li><a class="dropdown-item" href="/etenendrinken"><span class="text">Eten en drinken</span></a></li><li><a class="dropdown-item" href="/overnachten"><span class="text">Overnachten</span></a></li><li><a class="dropdown-item" href="/fietsverhuur"><span class="text">Fietsverhuur</span></a></li><li><a class="dropdown-item" href="/musea"><span class="text">Musea</span></a></li><li><a class="dropdown-item" href="/winkels"><span class="text">Winkels</span></a></li><li><a class="dropdown-item" href="/informatiepunten"><span class="text">Informatiepunten</span></a></li>
175		</ul></li><li class="nav-item"><a class="nav-link" href="/app"><span class="text">App</span></a></li><li class="nav-item"><a class="nav-link" href="/contact"><span class="text">Contact</span></a></li><li class="nav-item"><a class="nav-link" href="/help"><span class="text">Help</span></a></li><li class="nav-item separator"><a class="nav-link active">&nbsp;</a></li><li class="nav-item"><a class="nav-link"><span class="text">Andere netwerken</span><span class="popout dropdown-toggle"></span></a><ul class="dxbs-dm dropdown-menu dx-dropdown-menu">
176			<li><a class="dropdown-item" href="https://www.wandelroutenetwerk.nl/"><span class="text">Wandelroutenetwerk</span></a></li><li><a class="dropdown-item" href="https://www.vaarroutenetwerk.nl/"><span class="text">Vaarroutenetwerk</span></a></li><li><a class="dropdown-item" href="https://www.sloepennetwerk.nl/"><span class="text">Sloepennetwerk</span></a></li>
177		</ul></li><li class="nav-item menu-cta"><a class="nav-link" href="/informatieaanvragen"><span class="text">Uw bedrijf aanmelden</span></a></li>
178	</ul>
179</nav>
180
181            
182            <ul class="navbar-nav ms-auto lang-switch">
183
184                
185                <li class="nav-item">
186                    <a href="/inloggen" id="LinkAccount" class="nav-link">Inloggen</a>
187                </li>
188
189                
190                        <li class="nav-item">
191                            <a class='nav-link active'
192                               href="/routeplanner" hreflang="nl" lang="nl">NL</a>
193                        </li>
194                    
195                        <li class="nav-item">
196                            <a class='nav-link'
197                               href="/en/route-planner" hreflang="en" lang="en">EN</a>
198                        </li>
199                    
200                        <li class="nav-item">
201                            <a class='nav-link'
202                               href="/de/routenplaner" hreflang="de" lang="de">DE</a>
203                        </li>
204                    
205            </ul>
206        </div>
207
208    </div>
209</nav>
210
211
212        <main id="hoofdinhoud" tabindex="-1">
213        
214    
214<script type="text/javascript">
215        // Delen op Facebook zonder de SDK van Facebook. Die bibliotheek deed hier
216        // één ding -- een deelvenster openen -- en kostte 84 kB over de lijn plus
217        // een extra verbinding, op de twee zwaarste pagina's van de site. Bovendien
218        // is het een derde partij die cookies zet, dus hij zou straks achter de
219        // cookiebanner moeten. De sharer-URL doet hetzelfde met een gewone link.
220        function deelOpFacebook(url) {
221            window.open("https://www.facebook.com/sharer/sharer.php?u=" + encodeURIComponent(url),
222                        "delen", "width=600,height=500,menubar=no,toolbar=no");
223        }
224    </script>
224
225
226    
226<script type="text/javascript">
227        var fullscreen = false;
228        var secondclick = 0;
229        var popupid = 0;
230        var shareroute = ''; //share route
231        var shareopstap = ''; // opstapplekken van die route, als positie:osmpoisid-paren
232        var detailszoom = 10;
233        var detailsurl = '';
234        var routenetwerk = 1;
235
236        var editmode = false;
237        var printmode = false;
238        var routemode = false;
239        var mapimagemode = false;
240        var webmode = false;
241
242        function MyMap_GetLayers() {
243            s = "";
244            s = s + "|2|"; //routes
245            s = s + "|400||307||308||309||310|";
246            // De lagen 101 (bezienswaardigheid), 102 (musea), 103 (oplaadpunt), 301
247            // (parkeerplaats) en 303 (molens) staan hier niet meer: die gegevens zijn oud en
248            // tonen niet meer wat ze beloven. Hun schakelaars zijn uit het venster hieronder
249            // gehaald.
250            //
251            // Zet ze samen terug of allebei niet. Blijft hier een regel staan zonder
252            // bijbehorende schakelaar, dan roept dit script een control aan die niet bestaat,
253            // stopt MyMap_GetLayers halverwege en verdwijnen ook de lagen die het wél doen --
254            // zonder foutmelding op het scherm.
255            //
256            // Veerponten: geen GetPoiLimit-controle. Die grens houdt het aantal spelden op de
257            // kaart beheersbaar bij ver uitzoomen, en er staan er landelijk maar 279 -- de
258            // hele verzameling is kleiner dan wat één POI-laag in één provincie oplevert.
259            if (cb500.GetChecked()) {
260                s = s + "|500|";
261            };
262            // Parkeerplaatsen: zelfde verhaal, en ook hier geen GetPoiLimit-controle. Het zijn
263            // er 2.839 voor Nederland en Belgie samen, en dat is een orde kleiner dan wat een
264            // gewone POI-laag in een enkele provincie oplevert.
265            if (cb501.GetChecked()) {
266                s = s + "|501|";
267            };
268            // Stations: idem, en ook zonder GetPoiLimit-controle -- 765 op fiets en 320 op
269            // wandel. Dit is de enige van de drie die ook op de WANDELsite iets laat zien;
270            // Dataset.cs kiest de bit die bij het merk hoort.
271            if (cb502.GetChecked()) {
272                s = s + "|502|";
273            };
274            // De keuze onthouden voor de volgende keer. In localStorage en niet in een
275            // cookie: het is een voorkeur van deze browser, hij hoeft niet mee te reizen met
276            // elk verzoek, en er is niets aan te herleiden. Wrappen in try/catch omdat een
277            // prive-venster of geblokkeerde site-gegevens hier gooit -- dan werkt de kaart
278            // gewoon, alleen zonder geheugen.
279            try { localStorage.setItem('frnLagen', s); } catch (e) { }
280            return s;
281        }
282        // De laagkeuze van de vorige keer terugzetten. Draait VOOR mymap.initialize(), want
283        // de kaart vraagt bij het opbouwen meteen MyMap_GetLayers op -- eerder terugzetten
284        // zou niets uithalen, later zou de eerste lading de oude stand gebruiken.
285        //
286        // Alleen de drie schakelaars die er zijn. Een laag die in de bewaarde reeks staat
287        // maar geen vinkje meer heeft wordt genegeerd, en dat is precies goed: zo breekt een
288        // oude waarde uit localStorage niets als er ooit een laag verdwijnt.
289        function HerstelLagen() {
290            // ALLES in een try. Deze functie draait als eerste in ControlsInitialized, dus
291            // gooit hij, dan draaien mymap.initialize() en GetRoute() daarna NIET meer en
292            // ligt de hele kaart plat -- voor een voorkeurtje dat gerust mag ontbreken. Een
293            // laagkeuze die niet teruggezet wordt is hinder; een kaart die niet laadt is
294            // een storing.
295            //
296            // HIJ ZET ALLEEN AAN, NOOIT UIT. Alle drie de vinkjes staan server-side op
297            // Checked="False", dus aanzetten wat bewaard is geeft precies de oude stand
298            // terug. Uitzetten voegt niets toe en kan wel schade doen: staat er ooit een
299            // reeks in localStorage van een moment dat er niets aanstond, dan zou deze
300            // functie bij elke lading alles uitzetten en lijkt het alsof de vinkjes stuk
301            // zijn. Een herstelfunctie hoort niets te kunnen breken wat hij 
301niet zelf heeft
302            // gezet.
303            try {
304                var bewaard = localStorage.getItem('frnLagen');
305                if (!bewaard) return;
306
307                var vinkjes = [[cb500, '|500|'], [cb501, '|501|'], [cb502, '|502|']];
308                for (var i = 0; i < vinkjes.length; i++) {
309                    var v = vinkjes[i][0];
310                    if (!v) continue;
311                    if (bewaard.indexOf(vinkjes[i][1]) < 0) continue;
312
313                    // SetChecked is de client-API van ASPxCheckBox, maar hij wordt nergens
314                    // anders in deze codebase gebruikt, dus hier niet op vertrouwen zonder
315                    // te kijken. SetValue is het alternatief dat RouteDetails.aspx wel
316                    // gebruikt.
317                    if (typeof v.SetChecked === 'function') v.SetChecked(true);
318                    else if (typeof v.SetValue === 'function') v.SetValue(true);
319                }
320            } catch (e) {
321                // Prive-venster, geblokkeerde site-gegevens, of een client-API die anders
322                // heet dan verwacht. In alle drie de gevallen: doorgaan.
323            }
324        }
325
326        function GetRouteold() {
327            ret = RouteFetch.GetRoute(false, false, OnCompleteCurrent, OnError, '');
328        }
329
330        function getNodeDisplayLabel(node) {
331            if (node.IsPoi) {
332                return `POI: ${node.Name || "Onbekend"}`;
333            }
334            if (node.IsStart) {
335                return `Startpunt: ${node.NodeLabel}`;
336            }
337            if (node.IsEnd) {
338                return `Eindpunt: ${node.NodeLabel}`;
339            }
340            return `Knooppunt ${node.NodeLabel}`;
341        }
342
343        function OnCompleteCurrent(result) {
344            if (result == "EOA") {
345            }
346            else {
347                document.getElementById('routediv').innerHTML = result;
348            }
349            //ploadroute.Hide();
350            routeLoader.end();
351        }
352        function OnErrorGetPointsList(result) {
353            alert("Fout bij het ophalen van de route. Probeer het nogmaals");
354        }
355
356        function OnError(result) {
357            alert("Fout bij het ophalen van de route. Probeer het nogmaals");
358        }
359        function delRoute(id) {
360            //alert(id);
361            callbackroute.PerformCallback('clearroute:' + id);
362        }
363
364        function moveTo(lat, lng) {
365            mymap.moveTo(lat, lng);
366        }
367
368        var editmode = false;
369        var printmode = false;
370        var routemode = false;
371        var mapimagemode = false;
372        var webmode = false;
373
374        function printRoute() {
375            // window.open('printroute?r=1', '_blank');
376            window.open('/printroute?lang=' + (document.documentElement.lang || 'nl'), '_blank');
377        }
378
379        // De domeinnaam kwam hier uit een lijstje: network == 1 gaf fietsroutenetwerk.nl en al het
380        // andere wandelroutenetwerk.nl. Op vaarroutenetwerk deelde je daardoor een
381        // WANDELroutenetwerk-URL. location.origin is altijd het merk waar de bezoeker zit, dus dat
382        // kan niet meer misgaan -- en de parameter is daarmee overbodig geworden. Hij blijft in de
383        // handtekening staan omdat de knop in de opmaak hem meegeeft.
384        function shareRoute(network) {
385            deelOpFacebook(location.origin + '/routeplanner?route=' + shareroute
386                + (shareopstap ? '&opstap=' + encodeURIComponent(shareopstap) : ''));
387        }
388        function createLoader(elementId, delay) {
389            return {
390                pending: 0,
391                timer: null,
392                visible: false,
393
394                begin: function () {
395                    this.pending++;
396
397                    if (this.visible || this.timer) return;
398
399                    this.timer = setTimeout(() => {
400                        if (this.pending > 0) {
401                            var el = document.getElementById(elementId);
402                            if (el) el.classList.remove('d-none');
403                            this.visible = true;
404                        }
405                        this.timer = null;
406                    }, delay || 120);
407                },
408
409                end: function () {
410                    this.pending = Math.max(0, this.pending - 1);
411
412                    if (this.pending > 0) return;
413
414                    if (this.timer) {
415                        clearTimeout(this.timer);
416                        this.timer = null;
417                    }
418
419                    var el = document.getElementById(elementId);
420                    if (el) el.classList.add('d-none');
421                    this.visible = false;
422                },
423
424                reset: function () {
425                    this.pending = 0;
426
427                    if (this.timer) {
428                        clearTimeout(this.timer);
429                        this.timer = null;
430                    }
431
432                    var el = document.getElementById(elementId);
433                    if (el) el.classList.add('d-none');
434                    this.visible = false;
435                }
436            };
437        }
438
439        var mapLoader = createLoader('map-loader', 120);
440        var routeLoader = createLoader('route-loader', 120);
441    </script>
441
442    
442<script type="text/javascript">
443//<![CDATA[
444Sys.WebForms.PageRequestManager._initialize('ctl00$Content$ScriptManager1', 'ctl13', [], [], [], 90, 'ctl00');
445//]]>
446</script>
446
447
448    
448<script id="dxss_1738334504">
449<!--
450ASPx.SS(function(ASPx, dx) {
451ASPx.createControl(ASPxClientCallback,'Content_CallbackCookies','cbcook',{'callBack':function(arg) { WebForm_DoCallback('ctl00$Content$CallbackCookies',arg,ASPx.Callback,'Content_CallbackCookies',ASPx.CallbackError,true); },'uniqueID':'ctl00$Content$CallbackCookies'});
452
453});
454//-->
455</script>
455
456    
456<script id="dxss_1909736707">
457<!--
458ASPx.SS(function(ASPx, dx) {
459ASPx.createControl(ASPxClientCallback,'Content_CallbackUpdate','cbupdate',{'callBack':function(arg) { WebForm_DoCallback('ctl00$Content$CallbackUpdate',arg,ASPx.Callback,'Content_CallbackUpdate',ASPx.CallbackError,true); },'uniqueID':'ctl00$Content$CallbackUpdate'});
460
461});
462//-->
463</script>
463
464        
464<script id="dxss_401540279">
465<!--
466ASPx.SS(function(ASPx, dx) {
467var dxo = ASPx.GetGlobalEvents();
468dxo.SetEvents({'ControlsInitialized':function(s,e){HerstelLagen();mymap.initialize();GetRoute(routenetwerk);}});
469
470});
471//-->
472</script>
472
473  
474  <link rel="preconnect" href="https://cdn.maptiler.com" crossorigin />
475  
475<script src="https://cdn.maptiler.com/maptiler-sdk-js/v1.1.1/maptiler-sdk.umd.min.js"></script>
475
476  <link href="https://cdn.maptiler.com/maptiler-sdk-js/v1.1.1/maptiler-sdk.css" rel="stylesheet" />
477
478    <link href="/Content/StylesControl.css" rel="stylesheet" />
479    
479<script src="/Scripts/jquery.autocomplete.min.js"></script>
479
480    <link href="/Content/autocomplete_with_jquery.css?v=20260822" rel="stylesheet" />
481    
482    
482<script type="text/javascript" src="/Scripts/route-texts.js?v=20260920b"></script>
482
483    
484    
484<script type="text/javascript" src="/Scripts/route-kenmerken.js?v=20260920b"></script>
484
485    
485<script type="text/javascript" src="/Scripts/route-render.js?v=20260920b"></script>
485
486    
487    
487<script type="text/javascript" src="/Scripts/route-richting.js?v=20260824b"></script>
487
488    
488<script type="text/javascript" src="/Scripts/mapclustering.js?20261001-131206 "></script>
488
489
490
491    <input type="hidden" name="ctl00$Content$HFlat" id="HFlat" value="52.088682" />
492    <input type="hidden" name="ctl00$Content$HFlng" id="HFlng" value="5.120113" />
493    <input type="hidden" name="ctl00$Content$HFzoom" id="HFzoom" value="8" />
494       <div class="container-fluid">
495
496
497
498
499
500
501    <div id="Content_ASPxCallbackPanel1" style="width:200px;">
502	
503                <!-- Modal -->
504                <div class="modal fade" id="modFilter" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
505                    <div class="modal-dialog">
506                        <div class="modal-content modal-lg">
507                            <div class="modal-header">
508                                <h4 id="Content_ASPxCallbackPanel1_H1" class="modal-title">Interessante plaatsen</h4>
509                                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
510                            </div>
511                            <div class="modal-body">
512                                <div class="container">
513                                    <div class="row" style="padding: 10px">
514                                        
515                                        <div style="float: right; width: 100%">
516                                            <div style="float: left">
517                                                <img src="/Images/Markers/poi500.svg" width="25px" height="25px" alt="" />
518                                            </div>
519                                            <div style="float: left">
520                                                <table class="dxeBase_Metropolis dxeTAR" id="Content_ASPxCallbackPanel1_CheckBox500" style="font-size:12pt;">
521		<tr>
522			<td class="dxichCellSys"><span class="dxWeb_edtCheckBoxUnchecked_Metropolis dxICheckBox_Metropolis dxichSys dx-not-acc"><span class="dxKBSW"><input id="Content_ASPxCallbackPanel1_CheckBox500_S" class="dxKBSI" name="ctl00$Content$ASPxCallbackPanel1$CheckBox500" value="U" type="text" readonly="readonly" style="border-width:0;width:0;height:0;padding:0;margin:0;background-color:transparent;display:block;opacity:0;" /></span></span></td><td class="dxichTextCellSys"><label>Veerponten</label></td>
523		</tr>
524	</table>
524<script id="dxss_1688043302">
525<!--
526ASPx.SS(function(ASPx, dx) {
527ASPx.createControl(ASPxClientCheckBox,'Content_ASPxCallbackPanel1_CheckBox500','cb500',{'uniqueID':'ctl00$Content$ASPxCallbackPanel1$CheckBox500','scStates':6,'scPostfix':'Metropolis','imageProperties':{'4':['dxWeb_edtCheckBoxChecked_Metropolis','dxWeb_edtCheckBoxUnchecked_Metropolis'],'8':['dxWeb_edtCheckBoxCheckedDisabled_Metropolis','dxWeb_edtCheckBoxUncheckedDisabled_Metropolis']},'icbFocusedStyle':['dxICBFocused_Metropolis','']},{'CheckedChanged':function(s, e) {
528	cbcook.PerformCallback(1);
529}},null,{'decorationStyles':[]});
530
531});
532//-->
533</script>
533
534                                            </div>
535                                        </div>
536                                        
537                                        <div style="float: right; width: 100%">
538                                            <div style="float: left">
539                                                <img src="/Images/Markers/poi501.svg" width="25px" height="25px" alt="" />
540                                            </div>
541                                            <div style="float: left">
542                                                <table class="dxeBase_Metropolis dxeTAR" id="Content_ASPxCallbackPanel1_CheckBox501" style="font-size:12pt;">
543		<tr>
544			<td class="dxichCellSys"><span class="dxWeb_edtCheckBoxUnchecked_Metropolis dxICheckBox_Metropolis dxichSys dx-not-acc"><span class="dxKBSW"><input id="Content_ASPxCallbackPanel1_CheckBox501_S" class="dxKBSI" name="ctl00$Content$ASPxCallbackPanel1$CheckBox501" value="U" type="text" readonly="readonly" style="border-width:0;width:0;height:0;padding:0;margin:0;background-color:transparent;display:block;opacity:0;" /></span></span></td><td class="dxichTextCellSys"><label>Parkeerplaats</label></td>
545		</tr>
546	</table>
546<script id="dxss_1711718246">
547<!--
548ASPx.SS(function(ASPx, dx) {
549ASPx.createControl(ASPxClientCheckBox,'Content_ASPxCallbackPanel1_CheckBox501','cb501',{'uniqueID':'ctl00$Content$ASPxCallbackPanel1$CheckBox501','scStates':6,'scPostfix':'Metropolis','imageProperties':{'4':['dxWeb_edtCheckBoxChecked_Metropolis','dxWeb_edtCheckBoxUnchecked_Metropolis'],'8':['dxWeb_edtCheckBoxCheckedDisabled_Metropolis','dxWeb_edtCheckBoxUncheckedDisabled_Metropolis']},'icbFocusedStyle':['dxICBFocused_Metropolis','']},{'CheckedChanged':function(s, e) { cbcook.PerformCallback(1); }},null,{'decorationStyles':[]});
550
551});
552//-->
553</script>
553
554                                            </div>
555                                        </div>
556                                        <div style="float: right; width: 100%">
557                                            <div style="float: left">
558                                                <img src="/Images/Markers/poi502.svg" width="25px" height="25px" alt="" />
559                                            </div>
560                                            <div style="float: left">
561                                                <table class="dxeBase_Metropolis dxeTAR" id="Content_ASPxCallbackPanel1_CheckBox502" style="font-size:12pt;">
562		<tr>
563			<td class="dxichCellSys"><span class="dxWeb_edtCheckBoxUnchecked_Metropolis dxICheckBox_Metropolis dxichSys dx-not-acc"><span class="dxKBSW"><input id="Content_ASPxCallbackPanel1_CheckBox502_S" class="dxKBSI" name="ctl00$Content$ASPxCallbackPanel1$CheckBox502" value="U" type="text" readonly="readonly" style="border-width:0;width:0;height:0;padding:0;margin:0;background-color:transparent;display:block;opacity:0;" /></span></span></td><td class="dxichTextCellSys"><label>Treinstation</label></td>
564		</tr>
565	</table>
565<script id="dxss_1583199289">
566<!--
567ASPx.SS(function(ASPx, dx) {
568ASPx.createControl(ASPxClientCheckBox,'Content_ASPxCallbackPanel1_CheckBox502','cb502',{'uniqueID':'ctl00$Content$ASPxCallbackPanel1$CheckBox502','scStates':6,'scPostfix':'Metropolis','imageProperties':{'4':['dxWeb_edtCheckBoxChecked_Metropolis','dxWeb_edtCheckBoxUnchecked_Metropolis'],'8':['dxWeb_edtCheckBoxCheckedDisabled_Metropolis','dxWeb_edtCheckBoxUncheckedDisabled_Metropolis']},'icbFocusedStyle':['dxICBFocused_Metropolis','']},{'CheckedChanged':function(s, e) { cbcook.PerformCallback(1); }},null,{'decorationStyles':[]});
569
570});
571//-->
572</script>
572
573                                            </div>
574                                        </div>
575                                        <div style="float: right; width: 100%; height: 15px;">
576                                        </div>
577                                    </div>
578                                </div>
579                            </div>
580                            <div class="modal-footer">
581                            </div>
582                        </div>
583                    </div>
584                </div>
585            
586</div>
587
588    <div class="row">
589        <div class="col-md-8">
590            <div class="row">
591                <div class="kaartbalk" style="width: 100%; min-height: 49px; padding: 5px 10px 0; float: left;">
592<div class="btn-toolbar filterbalk" role="toolbar">
593  <div class="btn-group me-2" role="group">
594                            <input type="search" class="form-control" id="search-box-input" placeholder="Zoeken" />
595                            <button type="button" class="btn bg-transparent" style="margin-left: -40px; z-index: 100;" id="reset-autocomplete" title="Zoekveld leegmaken" aria-label="Zoekveld leegmaken">
596                                <i class="fa fa-times"></i>
597                            </button>
598
599  </div>
600
601
602</div>
603              
604                </div>
605                
606            </div>
607            <div class="row kaartsticky">
608               
609             <div id="map-wrapper" style="position: relative; width: 100%; height: var(--planner-hoogte); clear: left;">
610    <div id="map_canvas" style="width: 100%; height: 100%;"></div>
611
612    <div id="map-loader" class="panel-loader d-none">
613        <div class="spinner-border" role="status" aria-hidden="true"></div>
614    </div>
615</div>
616
617            </div>
618            <div style="width: 100%; height: 25px"></div>
619        </div>
620        <div class="col-md-4">
621
622            <div id="routePanel" class="route-panel">
623    
624    <div id="routePanelHandle" class="route-panel-handle d-md-none" aria-label="Toon routeoverzicht">
625      <div class="route-panel-grip"></div>
626      <span class="route-panel-title">
626Routeoverzicht</span>
627    </div>
628
629    <div id="routePanelBody" class="route-panel-body">
630
631
632
633
634            <div id="Div1" style="width: 100%; clear: left;">
635                <div id="Content_divrouteheader" class="kaartbalk" style="width: 100%; min-height: 49px; padding: 5px 0 0 10px;">
636
637                    
638
639                    
640                    
641                    <div class="btn-group me-3" role="group" aria-label="Wat er op de kaart staat">
642
643                        <button id="ButtonLagen" type="button" class="btn btn-light btn-md mt-0" onclick="popupfilter.PerformCallback(1);" title="Interessante plaatsen" aria-label="Interessante plaatsen">
644                            <span class="fa fa-layer-group"></span>
645                        </button>
646
647                    </div>
648                    
649
650                    <div class="btn-group me-3" role="group" aria-label="De route veranderen">
651
652                        
653                        <button id="ButtonOmdraaien" type="button" class="btn btn-light btn-md mt-0" onclick="omdraaiRoute();" title="Route omdraaien" aria-label="Route omdraaien">
654                            <span class="fa fa-exchange-alt"></span>
655                        </button>
656
657                        
658                        <button id="Button3" type="button" class="btn btn-light btn-md mt-0" onclick="wisRoute();" title="Wissen" aria-label="Wissen">
659                            <span class="fa fa-trash wisicoon"></span>
660                        </button>
661
662                    </div>
663
664                    <div class="btn-group" role="group" aria-label="Bewaren, downloaden en delen">
665
666                        
667                        <button id="ButtonBewaar" type="button" class="btn btn-light btn-md mt-0" onclick="callbacksave.PerformCallback(&#39;open&#39;);" title="Deze route bewaren" aria-label="Deze route bewaren">
668                            <span class="fa fa-save"></span>
669                        </button>
670
671                        
672                        <button id="Button4" type="button" class="btn btn-light btn-md mt-0" onclick="callbackgpx.PerformCallback();" title="Download route als GPX" aria-label="Download route als GPX">
673                            <span class="fa fa-download"></span>
674                        </button>
675
676                        <button id="Button5" type="button" class="btn btn-light btn-md mt-0" onclick="callbackprint.PerformCallback(0);" title="Afdrukken" aria-label="Afdrukken">
677                            <span class="fa fa-print"></span>
678                        </button>
679
680                        <button id="Button6" type="button" class="btn btn-light btn-md mt-0" onclick="shareroutepopup.PerformCallback();" title="Delen" aria-label="Delen">
681                            <span class="fa fa-share-alt"></span>
682                        </button>
683
684                        
685                        <button id="Button7" type="button" class="btn btn-light btn-md mt-0" onclick="callbackqrscan.PerformCallback(0);" title="Scan route met app" aria-label="Scan route met app">
686                            <span class="fa fa-qrcode"></span>
687                        </button>
688
689                    </div>
690
691                </div>
692               
693                <div id="route-overview-wrapper" class="routeoverzicht" style="position: relative;">
694                    <h3>
694Routeoverzicht</h3>
695                    <table id="routeTable" class="table table-borderless align-middle">
696                        <tbody>
697                            <!-- Rijen worden dynamisch toegevoegd via GetRoute() -->
698                        </tbody>
699                    </table>
700
701                    <div id="route-loader" class="panel-loader d-none">
702                        <div class="spinner-border" role="status" aria-hidden="true"></div>
703                    </div>
704                </div>
705
706                
706<script id="dxss_1833219525">
707<!--
708ASPx.SS(function(ASPx, dx) {
709ASPx.createControl(ASPxClientCallback,'Content_CallbackRoute','callbackroute',{'callBack':function(arg) { WebForm_DoCallback('ctl00$Content$CallbackRoute',arg,ASPx.Callback,'Content_CallbackRoute',ASPx.CallbackError,true); },'uniqueID':'ctl00$Content$CallbackRoute'},{'CallbackComplete':function(s, e) {
710  mymap.Reload();
711   GetRoute(routenetwerk);
712                      //loadPanel.Hide();
713                         mapLoader.end();
714
715}});
716
717});
718//-->
719</script>
719
720                
720<script id="dxss_1796588062">
721<!--
722ASPx.SS(function(ASPx, dx) {
723ASPx.createControl(ASPxClientCallback,'Content_CallbackRoutePoi','callbackroutepoi',{'callBack':function(arg) { WebForm_DoCallback('ctl00$Content$CallbackRoutePoi',arg,ASPx.Callback,'Content_CallbackRoutePoi',ASPx.CallbackError,true); },'uniqueID':'ctl00$Content$CallbackRoutePoi'},{'CallbackComplete':function(s, e) {
724  mymap.Reload();
725   GetRoute(routenetwerk);
726   $('#modPoi').modal('hide');
727                      //loadPanel.Hide();
728                         mapLoader.end();
729}});
730
731});
732//-->
733</script>
733
734                
734<script id="dxss_1015962674">
735<!--
736ASPx.SS(function(ASPx, dx) {
737ASPx.createControl(ASPxClientCallback,'Content_ASPxCallbackSelectRoute','cbselroute',{'callBack':function(arg) { WebForm_DoCallback('ctl00$Content$ASPxCallbackSelectRoute',arg,ASPx.Callback,'Content_ASPxCallbackSelectRoute',ASPx.CallbackError,true); },'uniqueID':'ctl00$Content$ASPxCallbackSelectRoute'},{'BeginCallback':function(s, e) {
738//ploadroute.Show();
739  routeLoader.begin();
740
741},'CallbackComplete':function(s, e) {
742                         //loadPanel.Hide();
743                         mapLoader.end();
744                          $('#modRoute').modal('hide');
745                            if(e.result.toString()) {
746                                var s = e.result.toString().split(';');
747                                mymap.SetCenter(s[0],s[1],12);
748                            }
749                      //    mymap.Reload();
750   GetRoute(routenetwerk);
751}});
752
753});
754//-->
755</script>
755
756                
756<script id="dxss_829232937">
757<!--
758ASPx.SS(function(ASPx, dx) {
759ASPx.createControl(ASPxClientCallback,'Content_ASPxCallbackAutoRoute','callbackautoroute',{'callBack':function(arg) { WebForm_DoCallback('ctl00$Content$ASPxCallbackAutoRoute',arg,ASPx.Callback,'Content_ASPxCallbackAutoRoute',ASPx.CallbackError,true); },'uniqueID':'ctl00$Content$ASPxCallbackAutoRoute'},{'CallbackComplete':function(s, e) {
760  mymap.Reload();
761   GetRoute(routenetwerk);
762                      //loadPanel.Hide();
763                         mapLoader.end();
764}});
765
766});
767//-->
768</script>
768
769
770                <div style="width: 100%; height: 30px; background-color: #FFFFFF; float: left;">
771                    <div style="padding-top: 5px; padding-left: 5px;">
772                        <span class="dxeBase" id="Content_ASPxLabelInfo" style="font-size:12pt;">(Tijd gebaseerd op 19 km/uur)</span>
773                        
774                    </div>
775                </div>
776                <div style="width: 100%; height: 30px; background-color: #FFFFFF; float: left;">
777                </div>
778            </div>
779        </div>
780                </div>
781            
782        </div>
783    </div>
784
785
786
787    <div id="Content_ASPxCallbackPanelPoi" style="width:200px;">
788	
789                <!-- Modal -->
790                <div class="modal fade" id="modPoi" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
791                    <div class="modal-dialog modal-lg">
792                        <div class="modal-content">
793                            <div class="modal-header">
794                                <h4 id="Content_ASPxCallbackPanelPoi_poptitle" class="modal-title">Modal title</h4>
795                                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
796                            </div>
797                            <div class="modal-body">
798                                <div class="container">
799                                    <div class="row">
800                                        <div class="col-md-3 col-lg-3">
801                                            <img class="dxeImage" id="Content_ASPxCallbackPanelPoi_ASPxImagepoiImage" src="/DXR.axd?r=1_87-Rkqku" alt="" style="height:83px;width:148px;" />
802                                            <br />
803                                            <a href="#" id="Content_ASPxCallbackPanelPoi_buttonPhotobook" class="btn btn-primary" onclick="callbackphoto.PerformCallback(8026);">Fotoboek</a>
804
805                                            <br />
806                                            <div id="Content_ASPxCallbackPanelPoi_Specialoffertext">
807                                            </div>
808                                            <br />
809                                            
810                                        </div>
811                                        <div class="col-md-9 col-lg-9">
812                                            <div style="padding: 0px 0px 0px 10px">
813                                                <div id="Content_ASPxCallbackPanelPoi_infotext"></div>
814                                                <br />
815                                                <br />
816                                                <span id="Content_ASPxCallbackPanelPoi_poiaddress"></span>
817                                                <br />
818                                                <span id="Content_ASPxCallbackPanelPoi_poiaddress2"></span>
819                                                <br />
820                                                <span id="Content_ASPxCallbackPanelPoi_poitel"></span>
821                                                <br />
822                                                
823                                                
824
825                                                <span class="dxeBase" id="Content_ASPxCallbackPanelPoi_poiID" style="color:White;font-size:10pt;"></span>
825<script id="dxss_1822473788">
826<!--
827ASPx.SS(function(ASPx, dx) {
828ASPx.createControl(ASPxClientLabel,'Content_ASPxCallbackPanelPoi_poiID','labelid',{'uniqueID':'ctl00$Content$ASPxCallbackPanelPoi$poiID','scStates':4,'scPostfix':''});
829
830});
831//-->
832</script>
832
833                                                <br />
834                                                <br />
835                                                <div id="Content_ASPxCallbackPanelPoi_clockicon">
836                                                    
837                                                    <button type="button" class="btn btn-link p-0 border-0 align-baseline" onclick="$('#opentimes1').toggle('slow');" title="Openingstijden" aria-label="Openingstijden" aria-controls="opentimes1">
838                                                        <img src="/Images/clock.png" id="Content_ASPxCallbackPanelPoi_openTimesCLock" alt="" />
839                                                    </button>
840                                                    <a href="#" id="Content_ASPxCallbackPanelPoi_openTimes" onclick="$(&#39;#opentimes1&#39;).toggle(&#39;slow&#39;);">Openingstijden</a>
841                                                    <img src="/Images/clock.png" id="Content_ASPxCallbackPanelPoi_openTimesCLockURL" title="Openingstijden en beschikbaarheid" />
842                                                    <a id="Content_ASPxCallbackPanelPoi_openTimesURL" target="_blank">Openingstijden en beschikbaarheid</a>
843
844                                                </div>
845                                                <br />
846                                                <br />
847
848
849
850                                            </div>
851                                        </div>
852                                    </div>
853                                    <div class="row" id="offer" style="display: none">
854                                    </div>
855
856                                    <div class="row" id="opentimes1" style="display: none">
857
858                                        <div class="col-md-4 col-lg-4">
859                                            Maandag:
860                                        <span id="Content_ASPxCallbackPanelPoi_Labelmon">Onbekend</span><br />
861                                            Dinsdag:
862                                        <span id="Content_ASPxCallbackPanelPoi_Labeltue">Onbekend</span><br />
863                                            Woensdag:
864                                        <span id="Content_ASPxCallbackPanelPoi_Labelwed">Onbekend</span><br />
865                                        </div>
866                                        <div class="col-md-4 col-lg-4">
867                                            Donderdag:
868                                        <span id="Content_ASPxCallbackPanelPoi_Labelthu">Onbekend</span><br />
869                                            Vrijdag:
870                                        <span id="Content_ASPxCallbackPanelPoi_Labelfri">Onbekend</span><br />
871                                            Zaterdag:
872                                        <span id="Content_ASPxCallbackPanelPoi_Labelsat">Onbekend</span><br />
873
874                                        </div>
875                                        <div class="col-md-4 col-lg-4">
876                                            Zondag:
877                                        <span id="Content_ASPxCallbackPanelPoi_Labelsun">Onbekend</span><br />
878                                        </div>
879                                    </div>
880                                </div>
881
882                            </div>
883                            <div class="modal-footer">
884                                <div class="mr-auto">
885
886                                    <img class="dxeImage" id="Content_ASPxCallbackPanelPoi_ASPxImageNode" src="/DXR.axd?r=1_87-Rkqku" alt="" style="height:40px;width:40px;" />
887
888
889
890                                    
891                                </div>
892
893                                <a href="#" id="Content_ASPxCallbackPanelPoi_ButtonPoiInfo" class="btn btn-primary" onclick="window.open(detailsurl,&#39;_blank&#39;);">
893Details afstappunt</a>
894                                <a href="#" id="Content_ASPxCallbackPanelPoi_ButtonAddToRoute" class="btn btn-primary" onclick="callbackroutepoi.PerformCallback(&#39;poiclick:&#39;+labelid.GetText());">Toevoegen aan route</a>
895                                 
896
897
898                            </div>
899                        </div>
900                        <!-- /.modal-content -->
901                    </div>
902                    <!-- /.modal-dialog -->
903                </div>
904                <!-- /.modal -->
905            
906</div>
907
908    
909    <div id="Content_ASPxCallbackPanelOpstap" style="width:200px;">
910	
911                <div class="modal fade" id="modOpstap" tabindex="-1" role="dialog" aria-hidden="true">
912                    <div class="modal-dialog">
913                        <div class="modal-content">
914                            <div class="modal-header">
915                                <img src="/Images/Markers/poi502.svg" id="Content_ASPxCallbackPanelOpstap_opstapIcoon" width="28" height="28" alt="" style="margin-right: 8px" />
916                                <h4 id="Content_ASPxCallbackPanelOpstap_opstapTitel" class="modal-title"></h4>
917                                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
918                            </div>
919                            <div class="modal-body">
920                                <p id="Content_ASPxCallbackPanelOpstap_opstapNaam" style="font-size: 1.1em; margin-bottom: 4px"></p>
921                                <p id="Content_ASPxCallbackPanelOpstap_opstapToelichting" class="text-muted" style="font-size: 0.9em"></p>
922                                <div id="Content_ASPxCallbackPanelOpstap_opstapKnooppunten"></div>
923                                <p id="Content_ASPxCallbackPanelOpstap_opstapGeenRoute" class="text-muted"></p>
924                                
925                                <span class="dxeBase" id="Content_ASPxCallbackPanelOpstap_opstapId" style="display:none;"></span>
925<script id="dxss_259318721">
926<!--
927ASPx.SS(function(ASPx, dx) {
928ASPx.createControl(ASPxClientLabel,'Content_ASPxCallbackPanelOpstap_opstapId','labelopstapid',{'uniqueID':'ctl00$Content$ASPxCallbackPanelOpstap$opstapId','clientVisible':false,'scStates':4,'scPostfix':''});
929
930});
931//-->
932</script>
932
933                                <a href="#" id="Content_ASPxCallbackPanelOpstap_ButtonOpstapToevoegen" class="btn btn-primary" data-bs-dismiss="modal" onclick="callbackroute.PerformCallback(&#39;opstapclick:&#39; + labelopstapid.GetText()); return false;">Toevoegen aan route</a>
934                            </div>
935                        </div>
936                    </div>
937                </div>
938            
939</div>
940
941    
942    <div class="dxpnlControl" id="Content_ASPxCallbackPanelSave" style="width:200px;">
943	
944                <div class="modal fade" id="modSave" tabindex="-1" role="dialog" aria-hidden="true">
945                    <div class="modal-dialog">
946                        <div class="modal-content">
947                            <div class="modal-header">
948                                <h4 class="modal-title">Deze route bewaren</h4>
949                                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
950                            </div>
951                            <div class="modal-body">
952
953                                <div id="savedAnoniem" style="display: none;">
954                                    <p>Om een route te bewaren hebt u een account nodig. Uw route blijft staan terwijl u inlogt, dus u kunt daarna gewoon verder.</p>
955                                    <a href="/inloggen?ReturnUrl=%2frouteplanner" id="Content_ASPxCallbackPanelSave_LinkBewaarInloggen" class="btn btn-primary">
956                                        Inloggen
957                                    </a>
958                                </div>
959
960                                <div id="savedLeeg" style="display: none;">
961                                    <p class="mb-0">Stel eerst een route samen door knooppunten op de kaart te kiezen.</p>
962                                </div>
963
964                                <div id="savedInvoer" style="display: none;">
965                                    <label for="routenaam" class="form-label">
966                                        Naam van de route</label>
967                                    <input type="text" class="form-control mb-3" id="routenaam" maxlength="255" />
968                                    <button type="button" class="btn btn-primary"
969                                        onclick="callbacksave.PerformCallback('save:' + document.getElementById('routenaam').value);">
970                                        Bewaren
971                                    </button>
972                                </div>
973
974                                <div id="savedKlaar" style="display: none;">
975                                    <p>De route is bewaard. Bij de volgende synchronisatie staat hij ook in de app.</p>
976                                    <a href="/mijn-routes" id="Content_ASPxCallbackPanelSave_LinkBewaarMijnRoutes" class="btn btn-outline-secondary">
977                                        Mijn routes bekijken
978                                    </a>
979                                </div>
980
981                                <div id="savedFout" style="display: none;">
982                                    <p class="mb-0">Het bewaren is niet gelukt. Probeert u het zo nog eens.</p>
983                                </div>
984
985                            </div>
986                        </div>
987                    </div>
988                </div>
989            
990</div><table id="Content_ASPxCallbackPanelSave_LP" class="dxpnlLoadingPanelWithContent dxlpLoadingPanelWithContent" style="left:0px;top:0px;z-index:30000;display:none;">
991	<tr>
992		<td class="dx" style="padding-right:0px;"><img class="dxlp-loadingImage dxlp-imgPosLeft" src="/DXR.axd?r=1_87-Rkqku" alt="" style="vertical-align:middle;" /></td><td class="dx" style="padding-left:0px;"><span id="Content_ASPxCallbackPanelSave_TL">Loading&hellip;</span></td>
993	</tr>
994</table><div id="Content_ASPxCallbackPanelSave_LD" class="dxpnlLoadingDivWithContent dxlpLoadingDivWithContent dx-ft" style="left:0px;top:0px;z-index:29999;display:none;position:absolute;">
995
996</div>
996<script id="dxss_1432148671">
997<!--
998ASPx.SS(function(ASPx, dx) {
999ASPx.createControl(ASPxClientCallbackPanel,'Content_ASPxCallbackPanelSave','callbacksave',{'callBack':function(arg) { WebForm_DoCallback('ctl00$Content$ASPxCallbackPanelSave',arg,ASPx.Callback,'Content_ASPxCallbackPanelSave',ASPx.CallbackError,true); },'uniqueID':'ctl00$Content$ASPxCallbackPanelSave','hideContentOnCallback':false},{'EndCallback':function(s, e) {
1000            var stand = s.cp_stand;
1001
1002            document.getElementById('savedAnoniem').style.display   = (stand == 'anoniem'  ? '' : 'none');
1003            document.getElementById('savedLeeg').style.display      = (stand == 'leeg'     ? '' : 'none');
1004            document.getElementById('savedInvoer').style.display    = (stand == 'invoer'   ? '' : 'none');
1005            document.getElementById('savedKlaar').style.display     = (stand == 'klaar'    ? '' : 'none');
1006            document.getElementById('savedFout').style.display      = (stand == 'fout'     ? '' : 'none');
1007
1008            if (stand == 'invoer') {
1009                var vak = document.getElementById('routenaam');
1010                if (s.cp_naam) { vak.value = s.cp_naam; }
1011                setTimeout(function() { vak.focus(); vak.select(); }, 400);
1012            }
1013
1014            var myModal = document.getElementById('modSave');
1015            var modal = new bootstrap.Modal(myModal);
1016            modal.show();
1017        }});
1018
1019});
1020//-->
1021</script>
1021
1022
1023   <div class="dxpnlControl" id="Content_ASPxCallbackPanelGPX" style="width:200px;">
1024	
1025                <!-- Modal -->
1026                <div class="modal fade" id="modGpx" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
1027                    <div class="modal-dialog">
1028                        <div class="modal-content">
1029                            <div class="modal-header">
1030                                <h4 id="Content_ASPxCallbackPanelGPX_H4" class="modal-title">GPX download</h4>
1031                                 <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
1032                            </div>
1033                            <div class="modal-body">
1034                                <div class="container">
1035                                    <div class="row">
1036                                        <span id="routedownloadtext"></span>
1037                                        <br />
1038                                         <button id="buttondownloadroute" type="button" class="btn btn-primary" onclick="window.location = &#39;../downloadroute?r=1&#39;;" title="Download route als GPX">
1039                                Download GPX bestand
1040                            </button>
1041
1042
1043                                      
1044
1045                                    </div>
1046                                    <div class="row" style="padding: 30px; visibility: collapse;">
1047                                        Upload GPX route (test)
1048                                    <table class="dxuc-root dxucControl" id="Content_ASPxCallbackPanelGPX_ASPxUploadControlGPX" style="width:280px;">
1049		<tr>
1050			<td style="width:100%;vertical-align:top;"><table id="Content_ASPxCallbackPanelGPX_ASPxUploadControlGPX_UploadInputs" class="dxucInputs" style="width:100%;border-collapse:separate;">
1051				<tr id="Content_ASPxCallbackPanelGPX_ASPxUploadControlGPX_FIT" style="display:none;">
1052					<td id="Content_ASPxCallbackPanelGPX_ASPxUploadControlGPX_TextBoxT" class="dxTB dxucTextBox dx-al" style="width:100%;border-right-style:Solid;border-right-width:0px;"><input id="Content_ASPxCallbackPanelGPX_ASPxUploadControlGPX_TextBoxT_Input" class="dxTI" type="file" name="Content_ASPxCallbackPanelGPX_ASPxUploadControlGPX_TextBoxT_Input" style="position:absolute;filter:alpha(opacity=0);opacity:0;top:-5000px;z-index:29999;" /><input id="Content_ASPxCallbackPanelGPX_ASPxUploadControlGPX_TextBoxT_FakeInput" class="dxTF dxucEditArea" type="text" readonly="readonly" tabindex="-1" style="background-color:Transparent;border-width:0px;width:100%;" /></td><td id="Content_ASPxCallbackPanelGPX_ASPxUploadControlGPX_ClearBoxT" class="dxCB dxucTextBox" style="border-left-style:Solid;border-left-width:0px;border-right-style:Solid;border-right-width:0px;"><a href="javascript:;" style="visibility:hidden;"><img id="Content_ASPxCallbackPanelGPX_ASPxUploadControlGPX_ClearBoxTImg" title="Clear selection" class="dxWeb_ucClearButton" src="/DXR.axd?r=1_87-Rkqku" alt="Clear selection" style="display:inline;" /></a></td><td id="Content_ASPxCallbackPanelGPX_ASPxUploadControlGPX_BrowseT" class="dxBB dxucBrowseButton"><a tabindex="-1" href="javascript:;">Browse...</a></td>
1053				</tr><tr id="Content_ASPxCallbackPanelGPX_ASPxUploadControlGPX_ErrRRT" style="display:none;">
1054					<td class="dxucErrorCell" colspan="3"></td>
1055				</tr><tr class="dxucSR" style="display:none;">
1056					<td colspan="3" style="font:0;height:2px;"></td>
1057				</tr><tr id="Content_ASPxCallbackPanelGPX_ASPxUploadControlGPX_FI0">
1058					<td id="Content_ASPxCallbackPanelGPX_ASPxUploadControlGPX_TextBox0" class="dxTB dxucTextBox dx-al" style="width:100%;border-right-style:Solid;border-right-width:0px;"><input id="Content_ASPxCallbackPanelGPX_ASPxUploadControlGPX_TextBox0_Input" class="dxTI" type="file" name="Content_ASPxCallbackPanelGPX_ASPxUploadControlGPX_TextBox0_Input" style="position:absolute;filter:alpha(opacity=0);opacity:0;top:-5000px;z-index:29999;" /><input id="Content_ASPxCallbackPanelGPX_ASPxUploadControlGPX_TextBox0_FakeInput" class="dxTF dxucEditArea" type="text" readonly="readonly" tabindex="-1" style="background-color:Transparent;border-width:0px;width:100%;" /></td><td id="Content_ASPxCallbackPanelGPX_ASPxUploadControlGPX_ClearBox0" class="dxCB dxucTextBox" style="border-left-style:Solid;border-left-width:0px;border-right-style:Solid;border-right-width:0px;"><a href="javascript:;" style="visibility:hidden;"><img id="Content_ASPxCallbackPanelGPX_ASPxUploadControlGPX_ClearBox0Img" title="Clear selection" class="dxWeb_ucClearButton" src="/DXR.axd?r=1_87-Rkqku" alt="Clear selection" style="display:inline;" /></a></td><td id="Content_ASPxCallbackPanelGPX_ASPxUploadControlGPX_Browse0" class="dxBB dxucBrowseButton"><a tabindex="-1" href="javascript:;">Browse...</a></td>
1059				</tr><tr id="Content_ASPxCallbackPanelGPX_ASPxUploadControlGPX_ErrR0" style="display:none;">
1060					<td class="dxucErrorCell" colspan="3"></td>
1061				</tr>
1062			</table><div id="Content_ASPxCallbackPanelGPX_ASPxUploadControlGPX_CErr" class="dxucErrorCell" style="padding-top:13px;display:none;">
1063				Common error text is displayed here
1064			</div></td>
1065		</tr>
1066	</table><iframe id="Content_ASPxCallbackPanelGPX_ASPxUploadControlGPX_UploadIframe" title="No user content" name="Content_ASPxCallbackPanelGPX_ASPxUploadControlGPX_UploadIframe" style="overflow:hidden;border:0;position:absolute;display:none;z-index:100000;filter:progid:DXImageTransform.Microsoft.Alpha(Style=0, Opacity=0);">
1067
1068	</iframe>
1068<script id="dxss_889187303">
1069<!--
1070ASPx.SS(function(ASPx, dx) {
1071ASPx.AddHoverItems('Content_ASPxCallbackPanelGPX_ASPxUploadControlGPX',[[['dxucBrowseButtonHover'],[''],['Browse0']]]);
1072ASPx.AddPressedItems('Content_ASPxCallbackPanelGPX_ASPxUploadControlGPX',[[['dxucBrowseButtonPressed'],[''],['Browse0']]]);
1073ASPx.AddDisabledItems('Content_ASPxCallbackPanelGPX_ASPxUploadControlGPX',[[['dxucDisabled dxucButtonDisabled'],[''],['Add','Upload','Cancel','Remove0']],[['dxucDisabled dxucTextBoxDisabled'],[''],['TextBox0'],['','_FakeInput']],[['dxucDisabled dxucTextBoxDisabled'],[''],['ClearBox0'],,[[{'spriteCssClass':'dxWeb_ucClearButtonDisabled'}]],['Img']],[['dxucDisabled dxucBrowseButtonDisabled'],[''],['Browse0']]]);
1074ASPx.createControl(ASPxClientUploadControl,'Content_ASPxCallbackPanelGPX_ASPxUploadControlGPX','',{'uniqueID':'ctl00$Content$ASPxCallbackPanelGPX$ASPxUploadControlGPX','stateObject':{'inputCount':1},'fileInputSpacing':'2px','generalErrorText':'File upload failed due to an external error','callbackResultErrorText':'The web server returned unexpected response.','uploadWasCanceledErrorText':'File upload was canceled.','selectedSeveralFilesText':'{0} files are selected for upload','validationSettings':{'maxFileSize':0,'multiSelectionErrorText':'Attention! \r\n\r\n{0} files are invalid and will not be uploaded. Possible reasons are: they exceed the allowed file size ({1}), their extensions are not allowed, or their filenames contain invalid characters. These files have been removed from the selection: \r\n\r\n{2}','invalidWindowsFileNameErrorText':'The file name contains invalid characters.','maxFileSizeErrorText':'File size exceeds the maximum allowed size, which is {0} bytes'},'progressHandlerPage':'/ASPxUploadProgressHandlerPage.ashx','uploadingKey':'ead6dfd4140c1ecc0cfe7baf12848765','advancedModeEnabled':true,'slUploadHelperUrl':'/DXR.axd?r=1_135-Rkqku','autoModeEnabled':true,'settings':'bwrrBCszQWJup/bU6NAXe4eH7cl7DqGQiAFqzmoLNv/hrsBfp8e3BsuqRgvpDrC/2DKr/2a7zm8DHnbB3wdjRkXmUSCN/3/tCrkCiiE4wsoK5ZAzxkd+IiwP8s2hlY8yqEUrA2nfoOUZ2QVGFcOmQyrNpLQV3NXpovBB35zmdgQzpjh5afUWVpu3N7PgwifetFLLJqpO0eOIX569ATtPN6llPosBVEOQC+gf87O+gtKavlNkmUbkMtbcFLNDsM+G','autoStart':true,'templateDisabledTextBoxItem':{'element':'TextBoxT','postfixes':['','_FakeInput'],'imageUrls':[''],'imagePostfixes':[''],'className':['dxucDisabled dxucTextBoxDisabled'],'cssText':[''],'name':'Content_ASPxCallbackPanelGPX_ASPxUploadControlGPX'},'templateDisabledClearBoxItem':{'element':'ClearBoxT','postfixes':[''],'imagePostfixes':['Img'],'className':['dxucDisabled dxucTextBoxDisabled'],'cssText':[''],'name':'Content_ASPxCallbackPanelGPX_ASPxUploadControlGPX','imageObjs':[{'spriteCssClass':'dxWeb_ucClearButtonDisabled'}]},'templateHoveredBrowseItem':{'element':'BrowseT','postfixes':[''],'imagePostfixes':['Img'],'className':['dxucBrowseButtonHover'],'cssText':[''],'name':'Content_ASPxCallbackPanelGPX_ASPxUploadControlGPX','imageObjs':[]},'templatePressedBrowseItem':{'element':'BrowseT','postfixes':[''],'imagePostfixes':['Img'],'className':['dxucBrowseButtonPressed'],'cssText':[''],'name':'Content_ASPxCallbackPanelGPX_ASPxUploadControlGPX','imageObjs':[]},'templateDisabledBrowseItem':{'element':'BrowseT','postfixes':[''],'imagePostfixes':['Img'],'className':['dxucDisabled dxucBrowseButtonDisabled'],'cssText':[''],'name':'Content_ASPxCallbackPanelGPX_ASPxUploadControlGPX','imageObjs':[]},'templateDisabledRemoveItem':{'element':'RemoveT','postfixes':[''],'imagePostfixes':['Img'],'className':['dxucDisabled dxucButtonDisabled'],'cssText':[''],'name':'Content_ASPxCallbackPanelGPX_ASPxUploadControlGPX','imageObjs':[]}},{'FileUploadComplete':function(s, e) {
1075                            if(s.cp_close.toString()) {
1076                                var s = s.cp_close.split(';');
1077                                mymap.SetCenter(s[0],s[1],12);
1078                            }
1079  mymap.Reload();
1080   GetRoute(routenetwerk);
1081   $('#modGpx').modal('hide');
1082                      //loadPanel.Hide();
1083                                             mapLoader.end();
1084}});
1085
1086});
1087//-->
1088</script>
1088
1089                                    </div>
1090                                </div>
1091                            </div>
1092                            <div class="modal-footer">
1093                            </div>
1094                        </div>
1095                        <!-- /.modal-content -->
1096                    </div>
1097                    <!-- /.modal-dialog -->
1098                </div>
1099                <!-- /.modal -->
1100            
1101</div><table id="Content_ASPxCallbackPanelGPX_LP" class="dxpnlLoadingPanelWithContent dxlpLoadingPanelWithContent" style="left:0px;top:0px;z-index:30000;display:none;">
1102	<tr>
1103		<td class="dx" style="padding-right:0px;"><img class="dxlp-loadingImage dxlp-imgPosLeft" src="/DXR.axd?r=1_87-Rkqku" alt="" style="vertical-align:middle;" /></td><td class="dx" style="padding-left:0px;"><span id="Content_ASPxCallbackPanelGPX_TL">Loading&hellip;</span></td>
1104	</tr>
1105</table><div id="Content_ASPxCallbackPanelGPX_LD" class="dxpnlLoadingDivWithContent dxlpLoadingDivWithContent dx-ft" style="left:0px;top:0px;z-index:29999;display:none;position:absolute;">
1106
1107</div>
1107<script id="dxss_87613750">
1108<!--
1109ASPx.SS(function(ASPx, dx) {
1110ASPx.createControl(ASPxClientCallbackPanel,'Content_ASPxCallbackPanelGPX','callbackgpx',{'callBack':function(arg) { WebForm_DoCallback('ctl00$Content$ASPxCallbackPanelGPX',arg,ASPx.Callback,'Content_ASPxCallbackPanelGPX',ASPx.CallbackError,true); },'uniqueID':'ctl00$Content$ASPxCallbackPanelGPX','hideContentOnCallback':false},{'EndCallback':function(s, e) {
1111        	downloadroute = s.cp_close;
1112            if(downloadroute.length==0){
1113                document.getElementById('routedownloadtext').innerText=routeText('makeRouteFirst');
1114                $('#buttondownloadroute').prop('disabled', true);            
1115            }else{
1116                document.getElementById('routedownloadtext').innerText='';    
1117                $('#buttondownloadroute').prop('disabled', false);            
1118            }
1119  var myModal = document.getElementById('modGpx');
1120  var modal = new bootstrap.Modal(myModal)
1121  modal.show();  
1122
1123}});
1124
1125});
1126//-->
1127</script>
1127
1128
1129    <div id="Content_ASPxPopupControlShare">
1130	
1131                <!-- Modal -->
1132                <div class="modal fade" id="modShare" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
1133                    <div class="modal-dialog">
1134                        <div class="modal-content  modal-lg">
1135                            <div class="modal-header">
1136                                <h4 id="Content_ASPxPopupControlShare_poproutetitle" class="modal-title">Route delen</h4>
1137                                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
1138                            </div>
1139                            <div class="modal-body">
1140                                <div class="container">
1141                                    <div class="row">
1142                                        <div class="col">
1143                                            <p></p>
1144                                            
1145                                            <span id="routecharetext2"></span>
1146                                            <br />
1147                           
1148                            <button id="buttonshareroute" type="button" class="btn btn-primary" onclick="shareRoute(1);" title="Delen via Facebook">
1149                               Delen via Facebook                              
1150                            </button>
1151                                        </div>
1152                                    </div>
1153                                </div>
1154                            </div>
1155                        </div>
1156                    </div>
1157                </div>
1158            
1159</div>
1160
1161        <div id="Content_ASPxCallbackQRScan" style="width:200px;">
1162	
1163            
1164                <!-- Modal -->
1165                <div class="modal fade" id="modQRscan" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
1166                    <div class="modal-dialog">
1167                        <div class="modal-content">
1168                            <div class="modal-header">
1169                                <h4 id="Content_ASPxCallbackQRScan_H5" class="modal-title">Scan de QR-code met de App</h4>
1170                                 <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
1171                            </div>
1172                            <div class="modal-body">
1173                                <div class="container">
1174                                    <div class="row" style="padding: 5px">
1175                                        <div class="col">
1176                                            <span id="routeqrscantext"></span><br />
1177                                            <img class="dxeImage biClass dxe-loadingImage" id="ASPxBinaryImageQR" onload="ASPx.ASPxImageLoad.OnLoad(this,&#39;&#39;,0,&#39;&#39;)" onabort="ASPx.ASPxImageLoad.OnLoad(this,&#39;&#39;,0,&#39;&#39;)" onerror="ASPx.ASPxImageLoad.OnLoad(this,&#39;&#39;,0,&#39;&#39;)" src="/DXR.axd?r=1_87-Rkqku" alt="" />
1177<script id="dxss_653834645">
1178<!--
1179ASPx.SS(function(ASPx, dx) {
1180ASPx.createControl(ASPxClientBinaryImage,'ASPxBinaryImageQR','',{'callBack':function(arg) { WebForm_DoCallback('ctl00$Content$ASPxCallbackQRScan$ASPxBinaryImageQR',arg,ASPx.Callback,'ASPxBinaryImageQR',ASPx.CallbackError,true); },'uniqueID':'ctl00$Content$ASPxCallbackQRScan$ASPxBinaryImageQR','scStates':4,'scPostfix':'','stateObject':{'uploadedFileName':null},'enableEditing':false,'allowDropOnPreview':false,'showLoadingImage':true,'loadingImageData':{"cssClasses":["dxe-loadingImage"],"backgroundImageUrl":"","loadingImage":""},'imageUrlTemplate':'/DXB.axd?DXCache=||dxbiKey||'},null,null,{'decorationStyles':[{'key':'F','className':'dxeFocused','cssText':''}]});
1181
1182});
1183//-->
1184</script>
1184
1185                                        </div>
1186                                    </div>
1187                                </div>
1188                                <div class="modal-footer">
1189                                </div>
1190                            </div>
1191                        </div>
1192                        <!-- /.modal-content -->
1193                    </div>
1194                    <!-- /.modal-dialog -->
1195                </div>
1196                <!-- /.modal -->
1197            
1198                  
1199</div>
1200    <div id="Content_ASPxCallbackPrint" style="width:200px;">
1201	
1202                <!-- Modal -->
1203                <div class="modal fade" id="modPrint" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
1204                    <div class="modal-dialog">
1205                        <div class="modal-content">
1206                            <div class="modal-header">
1207                                <h4 id="Content_ASPxCallbackPrint_H6" class="modal-title">Afdrukken route PDF</h4>
1208                                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
1209                            </div>
1210                            <div class="modal-body">
1211                                <div class="container">
1212                                    <div class="row" style="padding: 5px">
1213                                        <div class="col">
1214                                            <span id="routeprinttext"></span><br />
1215                                            <br />
1216                                            
1217                                            <br />
1218                                            <button id="buttonprintroute" type="button" class="btn btn-primary" onclick="printRoute();" title="Afdrukken">
1219                                Afdrukken
1220                            </button>
1221                                           
1222                                        </div>
1223                                    </div>
1224                                </div>
1225                            </div>
1226                            <div class="modal-footer">
1227                            </div>
1228                        </div>
1229                        <!-- /.modal-content -->
1230                    </div>
1231                    <!-- /.modal-dialog -->
1232                </div>
1233                <!-- /.modal -->
1234           
1235</div>
1235<script id="dxss_596335632">
1236<!--
1237ASPx.SS(function(ASPx, dx) {
1238ASPx.createControl(dx.BootstrapClientMenu,'TopMenu','topMenu',{'uniqueID':'ctl00$TopMenu','renderData':{'':[0,[1],[2],[3],[4],[5],[6],[7]],'2':[[0],[1],[2],[3],[4],[5],[6]],'6':[[1],[2],[3]]}},null,null,{'items':[{'name':'Routeplanner'},{'name':'Fietsroutes'},{'items':[{'name':'bezienswaardigheden'},{'name':'etenendrinken'},{'name':'overnachten'},{'name':'fietsverhuur'},{'name':'musea'},{'name':'winkels'},{'name':'informatiepunten'}],'beginGroup':true,'name':'menuafstappunten'},{'name':'App'},{'name':'Contact'},{'name':'Help'},{'items':[{'name':'linkfrn','visible':false},{'name':'linkwrn'},{'name':'linkvrn'},{'name':'linksn'}],'beginGroup':true,'name':'menuanderenetwerken'},{'name':'BedrijfAanmelden'}]});
1239
1240ASPx.createControl(dx.BootstrapClientCallbackPanel,'Content_ASPxCallbackPanel1','popupfilter',{'callBack':function(arg) { WebForm_DoCallback('ctl00$Content$ASPxCallbackPanel1',arg,ASPx.Callback,'Content_ASPxCallbackPanel1',ASPx.CallbackError,true); },'uniqueID':'ctl00$Content$ASPxCallbackPanel1','hideContentOnCallback':false,'loadingPanel':{}},{'EndCallback':function(s, e) {
1241  var myModal = document.getElementById('modFilter');
1242  var modal = new bootstrap.Modal(myModal)
1243  modal.show();    
1244
1245}});
1246
1247ASPx.createControl(dx.BootstrapClientCallbackPanel,'Content_ASPxCallbackPanelPoi','popuppoi',{'callBack':function(arg) { WebForm_DoCallback('ctl00$Content$ASPxCallbackPanelPoi',arg,ASPx.Callback,'Content_ASPxCallbackPanelPoi',ASPx.CallbackError,true); },'uniqueID':'ctl00$Content$ASPxCallbackPanelPoi','hideContentOnCallback':false,'loadingPanel':{}},{'EndCallback':function(s, e) {
1248            if(s.cp_close.toString()) {
1249                detailsurl = s.cp_close.toString();
1250            }
1251  var myModal = document.getElementById('modPoi');
1252  var modal = new bootstrap.Modal(myModal)
1253  modal.show();    
1254}});
1255
1256ASPx.createControl(dx.BootstrapClientCallbackPanel,'Content_ASPxCallbackPanelOpstap','popupopstap',{'callBack':function(arg) { WebForm_DoCallback('ctl00$Content$ASPxCallbackPanelOpstap',arg,ASPx.Callback,'Content_ASPxCallbackPanelOpstap',ASPx.CallbackError,true); },'uniqueID':'ctl00$Content$ASPxCallbackPanelOpstap','hideContentOnCallback':false,'loadingPanel':{}},{'EndCallback':function(s, e) {
1257  var myModal = document.getElementById('modOpstap');
1258  var modal = new bootstrap.Modal(myModal)
1259  modal.show();
1260}});
1261
1262ASPx.createControl(dx.BootstrapClientCallbackPanel,'Content_ASPxPopupControlShare','shareroutepopup',{'callBack':function(arg) { WebForm_DoCallback('ctl00$Content$ASPxPopupControlShare',arg,ASPx.Callback,'Content_ASPxPopupControlShare',ASPx.CallbackError,true); },'uniqueID':'ctl00$Content$ASPxPopupControlShare','hideContentOnCallback':false,'loadingPanel':{}},{'EndCallback':function(s, e) {
1263        	shareroute = s.cp_close;
1264        	shareopstap = s.cp_opstap || '';
1265            if(shareroute.length==0){
1266                document.getElementById('routecharetext2').innerText=routeText('makeRouteFirst');
1267                $('#buttonshareroute').prop('disabled', true);            
1268            }else{
1269                document.getElementById('routecharetext2').innerText='';    
1270                $('#buttonshareroute').prop('disabled', false);            
1271            }
1272              var myModal = document.getElementById('modShare');
1273              var modal = new bootstrap.Modal(myModal)
1274              modal.show();
1275}});
1276
1277ASPx.createControl(dx.BootstrapClientCallbackPanel,'Content_ASPxCallbackQRScan','callbackqrscan',{'callBack':function(arg) { WebForm_DoCallback('ctl00$Content$ASPxCallbackQRScan',arg,ASPx.Callback,'Content_ASPxCallbackQRScan',ASPx.CallbackError,true); },'uniqueID':'ctl00$Content$ASPxCallbackQRScan','hideContentOnCallback':false,'loadingPanel':{}},{'EndCallback':function(s, e) {
1278             scanroute = s.cp_close;
1279        	if(scanroute.length==0){
1280                 document.getElementById('routeqrscantext').innerText=routeText('makeRouteFirst');
1281                 document.getElementById('ASPxBinaryImageQR').style.visibility = 'hidden'; 
1282            }else{
1283                 document.getElementById('routeqrscantext').innerText='';
1284                 document.getElementById('ASPxBinaryImageQR').style.visibility = 'visible'; 
1285            }
1286  var myModal = document.getElementById('modQRscan');
1287  var modal = new bootstrap.Modal(myModal)
1288  modal.show();  
1289
1290}});
1291
1292ASPx.createControl(dx.BootstrapClientCallbackPanel,'Content_ASPxCallbackPrint','callbackprint',{'callBack':function(arg) { WebForm_DoCallback('ctl00$Content$ASPxCallbackPrint',arg,ASPx.Callback,'Content_ASPxCallbackPrint',ASPx.CallbackError,true); },'uniqueID':'ctl00$Content$ASPxCallbackPrint','hideContentOnCallback':false,'loadingPanel':{}},{'EndCallback':function(s, e) {
1293             printroute = s.cp_close;
1294	if(printroute.length==0){
1295            $('#buttonprintroute').prop('disabled', true);            
1296            document.getElementById('routeprinttext').innerText=routeText('makeRouteFirst');
1297            }else{
1298            $('#buttonprintroute').prop('disabled', false);            
1299            document.getElementById('routeprinttext').innerText=routeText('buildingMap');
1300            
1301            }
1302            var myModal = document.getElementById('modPrint');
1303            var modal = new bootstrap.Modal(myModal)
1304            modal.show();
1305}});
1306
1307
1308});
1309//-->
1310</script>
1310
1311</div>
1312    
1312<script type="text/javascript">
1313        var liqAccessToken = "pk.04be797ed19e41b91dcbfb642185196a"
1314        $('#search-box-input').autocomplete({
1315            minChars: 3,
1316            deferRequestBy: 250,
1317            serviceUrl: 'https://eu1.locationiq.com/v1/autocomplete.php',
1318            paramName: 'q',
1319            params: {
1320                // The input parameters to the API goes here
1321                key: liqAccessToken,
1322                format: "json",
1323                countrycodes: "nl,be,de",
1324                limit: 5
1325            },
1326            ajaxSettings: {
1327                dataType: 'json'
1328            },
1329            formatResult: function (suggestion, currentValue) {
1330                // Current value is the input query. We can use this to highlight the search phrase in the result
1331                var format = "<div class='autocomplete-suggestion-name'>" + highlight(suggestion.data.display_place, currentValue) + "</div>" +
1332                    "<div class='autocomplete-suggestion-address'>" + highlight(suggestion.data.display_address, currentValue) + "</div>"
1333                return format;
1334            },
1335            transformResult: function (response) {
1336                var suggestions = $.map(response, function (dataItem) {
1337                    return { value: dataItem.display_name, data: dataItem };
1338                })
1339
1340                return {
1341                    suggestions: suggestions
1342                };
1343            },
1344            onSelect: function (suggestion) {
1345                map.fitBounds(
1346                    [[suggestion.data.boundingbox[2], suggestion.data.boundingbox[0]],
1347                    [suggestion.data.boundingbox[3], suggestion.data.boundingbox[1]]], {
1348                    maxZoom: 15
1349                }
1350                );
1351            }
1352        });
1353        // For triggering reset
1354        $("#reset-autocomplete").click(function () {
1355            $('#search-box-input').val("");
1356        });
1357        //Displays the geocoding response in the "result" div
1358        function displayLatLon(display_name, lat, lng) {
1359            var resultString = "You have selected " + display_name + "<br/>Lat: " + lat + "<br/>Lon: " + lng;
1360            document.getElementById("result").innerHTML = resultString;
1361        }
1362        function highlight(text, focus) {
1363            var r = RegExp('(' + escapeRegExp(focus) + ')', 'gi');
1364            return text.replace(r, '<strong>$1</strong>');
1365        }
1366        function escapeRegExp(str) {
1367            return str.replace(/[-[\]/{}()*+?.\\^$|]/g, '\\$&');
1368        }
1369        const dropdownItems = document.querySelectorAll(".dropdown-menu .dropdown-item")
1370
1371        dropdownItems.forEach(item => {
1372            item.addEventListener("click", function (e) {
1373                mymap.SetRegion(e.target.id);
1374                mymap.Reload();
1375            })
1376        })
1377        window.onRouteChanged = () => mymap.Reload();
1378    </script>
1378
1379    
1379<script>
1380        (function () {
1381            function toggleRoutePanel() {
1382                const p = document.getElementById('routePanel');
1383                if (!p) return;
1384                p.classList.toggle('open');
1385            }
1386
1387            document.addEventListener('DOMContentLoaded', function () {
1388                const handle = document.getElementById('routePanelHandle');
1389                if (handle) handle.addEventListener('click', toggleRoutePanel);
1390
1391                // Optioneel: klik op kaart sluit paneel (handig op mobiel)
1392                const map = document.getElementById('map_canvas');
1393                if (map) map.addEventListener('click', function () {
1394                    const p = document.getElementById('routePanel');
1395                    if (p) p.classList.remove('open');
1396                });
1397            });
1398        })();
1399</script>
1399
1400
1401        </main>
1402        <footer>
1403
1404            <div id="divfooter" class="voettekst">
1405
1406
1407            
1408    <div id="FooterContent_textdiv" class="row" style="padding: 0px 50px 0px 50px">Klik op de knooppunten om uw route te bepalen. Onder de kaart ziet u hoe ver u fietst en hoe lang u gemiddeld over het fietsen doet. De snelheid is gebaseerd op een snelheid van 19 kilometer per uur. Op de kaart ziet u ook verschillende andere iconen. U kunt hieraan aflezen waar u kunt overnachten, eten en drinken. Daarnaast vindt u hier een overzicht van locaties waar u een fiets kunt huren. U kunt deze adressen bekijken en toevoegen aan uw route door er simpelweg op te klikken.<div class="w-100 mt-2"><a href="/fietsknooppunten">Hoe werken fietsknooppunten?</a></div></div>
1409    
1410                            <div id="textdiv" class="row" style="padding: 0px 50px 0px 50px">
1411                    
1412                    <div id="kolomRegios" class="col-md-4">
1413                        
1414                        <h4>Gebieden in Nederland</h4>
1415                        <ul class="list-unstyled">
1416                            <li id="ligh"><a href="/fietsroutes-groene-hart">Het Groene Hart</a></li>
1417                            <li id="live"><a href="/fietsroutes-veluwe">Veluwe</a></li>
1418                            
1419                            <li id="liplaatsen"><a href="/fietsen-in">Fietsen per plaats</a></li>
1420                            
1421
1422                           
1423                            
1424                        </ul>
1425                    </div>
1426                    <div id="kolomProvincies" class="col-md-4">
1427                        <h4>Provincies</h4>
1428                        <ul class="list-unstyled">   
1429                            <li id="li1"><a href="/fietsroutes-drenthe">Drenthe</a></li>
1430                            <li id="li2"><a href="/fietsroutes-flevoland">Flevoland</a></li>
1431                            <li id="li3"><a href="/fietsroutes-friesland">Friesland</a></li>
1432                            <li id="li4"><a href="/fietsroutes-gelderland">Gelderland</a></li>
1433                            <li id="li5"><a href="/fietsroutes-provincie-groningen">Groningen</a></li>
1434                            <li id="li6"><a href="/fietsroutes-limburg">Limburg</a></li>
1435                            <li id="li7"><a href="/fietsroutes-noord-brabant">Noord-Brabant</a></li>
1436                            <li id="li8"><a href="/noord-holland">Noord-Holland</a></li>
1437                            <li id="li9"><a href="/fietsroutes-overijssel">Overijssel</a></li>
1438                            <li id="li10"><a href="/fietsroutes-provincie-utrecht">Utrecht</a></li>
1439                            <li id="li11"><a href="/zeeland">Zeeland</a></li>
1440                            <li id="li12"><a href="/fietsroutes-zuid-holland">Zuid-Holland</a></li>
1441                        </ul>
1442                    </div>
1443                    <div class="col-md-4">
1444                        <h4>Service</h4>
1445                        <ul class="list-unstyled">
1446                            
1447                            
1448                            <li><a href="/fietsknooppunten" id="linkKnooppunten">Fietsknooppunten</a></li>
1449                            <li><a href="https://www.routenetwerk.nl/Account/Login.aspx" id="linkportal" target="_blank">Ondernemer portaal</a></li>
1450                            <li><a href="/app">App</a></li>
1451                            <li><a href="/contact">Contact</a></li>
1452                            <li><a href="/disclaimer">Disclaimer</a></li>
1453                            <li><a href="/privacybeleid">Privacybeleid</a></li>
1454                            
1455                            <li><a href="/privacybeleid" onclick="return cookievoorkeurOpnieuw();">Cookievoorkeur wijzigen</a></li>
1456                            <li><a href="/afstappunten" id="linkAfstappunten">Afstappunten</a></li>
1457                            <li><a href="/berichten" id="linkBerichten">Berichten</a></li>
1458                            <li><a href="https://fietsoplaadpunten.nl" id="oplaadpunten" target="_blank">Oplaadpunten</a></li>
1459                        </ul>
1460                    </div>
1461                </div>
1462
1463                </div>
1464
1465        </footer>
1466
1467        
1468        <div id="cookiebalk" class="cookiebalk" role="region" aria-label="Cookies" hidden="hidden">
1469            <div class="cookiebalk-regel">
1470                <div class="cookiebalk-tekst">
1471                    Wij gebruiken cookies om te zien hoe deze website gebruikt wordt. Dat mag alleen met uw toestemming.
1472                    
1473                    <button type="button" id="cookieDetailsKnop" class="btn btn-link cookiebalk-detailsknop"
1474                            aria-expanded="false" aria-controls="cookieDetails">
1475                        Welke partijen?</button>
1476                </div>
1477                <div class="cookiebalk-knoppen">
1478                    <button type="button" id="cookieNee" class="btn btn-light">
1479                        Alleen noodzakelijke</button>
1480                    <button type="button" id="cookieJa" class="btn btn-primary">
1481                        Accepteren</button>
1482                </div>
1483            </div>
1484            <div id="cookieDetails" class="cookiebalk-details" hidden="hidden">
1485                <strong>Waar u toestemming voor geeft</strong><br />
1486                Google Analytics meet hoe de website als geheel gebruikt wordt. Dit is de enige externe partij; de cookies die daarbij horen blijven tot twee jaar staan.
1487                <a href="/privacybeleid">Meer hierover in ons privacybeleid</a>
1488            </div>
1489        </div>
1490    
1491
1492<script type="text/javascript">
1493//<![CDATA[
1494
1495var callBackFrameUrl='/WebResource.axd?d=beToSAE3vdsL1QUQUxjWdUTzsYcRXJBMQ_6yd2z6coujW9agQB5Pk76fMzTdzf2nE86bADRMsGc3olkvBNxK7w2&t=639040157733241510';
1496WebForm_InitCallback();//]]>
1497</script>
1497
1498</form>
1499        
1499<script>
1500            // De navigatiebalk staat op fixed-top, dus de inhoud eronder moet weggehouden worden.
1501            // site.css heeft daarvoor een terugval van --navbalk (70px); dit script vervangt die
1502            // door de hoogte die de balk werkelijk heeft.
1503            //
1504            // 31-08-2026: drie dingen bijgesteld.
1505            //   * Ook op DOMContentLoaded. Dit draaide alleen op 'load', en dat wacht op alle
1506            //     afbeeldingen. Tot dat moment gold de vaste 70px, en klopte die niet -- door een
1507            //     langere merknaam of een grotere letterinstelling -- dan verdween de bovenste
1508            //     inhoud onder de balk, soms seconden lang.
1509            //   * Ook op orientationchange, want het --vh-scriptje hierboven doet dat al en de
1510            //     hoogte van de balk kan bij het draaien van een telefoon veranderen.
1511            //   * Het zet nu ook --planner-chrome: de ruimte die de balk bovenaan inneemt. site.css
1512            //     rekent daarmee de hoogte van kaart en routepaneel uit, in plaats van met een
1513            //     geraden getal.
1514            function adjustBodyPadding() {
1515                const navbar = document.querySelector('.navbar.fixed-top');
1516                if (!navbar) return;
1517                const hoogte = navbar.offsetHeight;
1518                document.body.style.paddingTop = hoogte + 'px';
1519                // 24px marge onder de kaart, zodat het paneel niet tegen de onderrand plakt.
1520                document.documentElement.style.setProperty('--planner-chrome', (hoogte + 24) + 'px');
1521            }
1522            document.addEventListener('DOMContentLoaded', adjustBodyPadding);
1523            window.addEventListener('load', adjustBodyPadding);
1524            window.addEventListener('resize', adjustBodyPadding);
1525            window.addEventListener('orientationchange', adjustBodyPadding);
1526
1527            // Telt de doorklik naar de ondernemer en de tik op zijn telefoonnummer.
1528            //
1529            // Horeca betaalt voor zijn vermelding en vraagt steeds vaker wat die oplevert. De
1530            // weergave van een afstappuntpagina ging al naar PoiLog; deze twee -- iemand gaat naar
1531            // mijn site, iemand belt me -- waren precies de gebeurtenissen die ontbraken.
1532            //
1533            // Hier en niet per pagina, want dezelfde twee links staan op vier plekken: de
1534            // afstappuntpagina, de lijst, de provinciepagina's en het venster in de routeplanner.
1535            // De links zelf komen uit Services\Pois\Contactlink; die zet de onclick erop.
1536            //
1537            // sendBeacon en geen gewone fetch: de browser is op dat moment al bezig met
1538            // wegnavigeren of met het openen van de belapp, en een gewone aanroep wordt dan
1539            // afgekapt. Lukt het niet, dan gebeurt er verder niets -- de bezoeker is toch al
1540            // onderweg naar de ondernemer, en een gemist getal is geen kapotte pagina.
1541            //
1542            // Er gaat geen bezoekersgegeven mee, alleen welk afstappunt en welke soort klik.
1543            // Daarom heeft dit geen cookietoestemming nodig en blijft de telling compleet, ook
1544            // straks als de cookiebanner er is.
1545            function poiKlik(poi, soort) {
1546                try {
1547                    if (!navigator.sendBeacon) return true;
1548                    var gegevens = new FormData();
1549                    gegevens.append('poi', poi);
1550                    gegevens.append('soort', soort);
1551                    navigator.sendBeacon('/PoiKlik.ashx', gegevens);
1552                } catch (e) { }
1553                return true;   // de link doet gewoon zijn werk
1554            }
1555        </script>
1555
1556        
1556<script>
1557            // DevExpress zet onbekende attributen op de OMHULLENDE div van een tekstvak, niet op de
1558            // <input> erbinnen. Nagemeten op /contact:
1559            //
1560            //   <div class="dxbs-textbox" inputmode="email" autocomplete="email" ...>
1561            //       <div><input class="form-control" type="text" ... /></div>
1562            //   </div>
1563            //
1564            // Daar doen ze niets. Dit haalt ze van de huls en zet ze op het veld, zodat een telefoon
1565            // het juiste toetsenbord opent en de browser het adres kan invullen.
1566            //
1567            // Waarom zo en niet per veld in code-behind: de bedoeling staat nu bij het veld zelf in
1568            // de opmaak, waar je hem zoekt. En dit werkt voor elk DevExpress-tekstvak op de site,
1569            // ook de vakken die er later bij komen.
1570            //
1571            // Het echte antwoord is die controls vervangen door <asp:TextBox>, zoals Inloggen.aspx
1572            // al doet -- dat is de enige pagina die dit vanaf het begin goed deed. Maar dat is
1573            // markup- en validatiewerk in pagina's met callbacks eromheen, en dit haalt het
1574            // gebruikersprobleem nu al weg.
1575            (function () {
1576                var verplaatsbaar = ['inputmode', 'autocomplete', 'autocapitalize', 'autocorrect', 'spellcheck'];
1577
1578                function verplaatsAttributen() {
1579                    var hulzen = document.querySelectorAll('.dxbs-textbox');
1580                    for (var i = 0; i < hulzen.length; i++) {
1581                        var huls = hulzen[i];
1582                        var veld = huls.querySelector('input');
1583                        if (!veld) continue;
1584                        for (var j = 0; j < verplaatsbaar.length; j++) {
1585                            var naam = verplaatsbaar[j];
1586                            if (huls.hasAttribute(naam)) {
1587                                veld.setAttribute(naam, huls.getAttribute(naam));
1588                                huls.removeAttribute(naam);
1589                            }
1590                        }
1591                    }
1592                }
1593
1594                function start() {
1595                    verplaatsAttributen();
1596
1597                    // Een callback tekent het paneel opnieuw en brengt de attributen terug op de
1598                    // huls. Alleen kijken op pagina's die zulke vakken hebben; op de routeplanner
1599                    // muteert de kaart voortdurend en daar staat geen enkel DevExpress-tekstvak.
1600                    if (!document.querySelector('.dxbs-textbox')) return;
1601                    var wacht = null;
1602                    new MutationObserver(function () {
1603                        clearTimeout(wacht);
1604                        wacht = setTimeout(verplaatsAttributen, 100);
1605                    }).observe(document.body, { childList: true, subtree: true });
1606                }
1607
1608                if (document.readyState === 'loading') {
1609                    document.addEventListener('DOMContentLoaded', start);
1610                } else {
1611                    start();
1612                }
1613            })();
1614        </script>
1614
1615</body>
1616</html>

Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.