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="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" /> 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&t=639040157733241510" type="text/javascript"></script>
118 119 120
121<script src="/ScriptResource.axd?d=NJmAwtEo3Ipnlaxl6CMhvvWEDGF9aQjerXDRgMwPITyiljABUZDf--PxAEBhmKyCqJzOE6buIEyR2AllEgs8Isp281-4AXtJggpyLFtGzekNH_gPpHp61v9AXfsHJMvRctvXpIOAgMCRMjWNJ-DJiikhMOKgf5PBY7-pXT5d7hU1&t=74a40145" type="text/javascript"></script>
vendor: 2 bytes, line 121
121
122<script src="/ScriptResource.axd?d=dwY9oWetJoJoVpgL6Zq8OD_JYHSA9Jsoeb0lX7fSrk99wWDDeAUFNrOUqSXS69_evaaL6pyx3H0I456Rt4KiRi3dErJLIJkRVw_h0UiX7D3HEbeGqT64IvhNF3PNFoe6sNWQLz9Zj3XS91cP1jaLjjoYX5wI_-znlh9EIPIJEAM1&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&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&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"> </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"> </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('open');" 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="$('#opentimes1').toggle('slow');">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,'_blank');">
893Details afstappunt</a> 894 <a href="#" id="Content_ASPxCallbackPanelPoi_ButtonAddToRoute" class="btn btn-primary" onclick="callbackroutepoi.PerformCallback('poiclick:'+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('opstapclick:' + 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…</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 = '../downloadroute?r=1';" 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…</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,'',0,'')" onabort="ASPx.ASPxImageLoad.OnLoad(this,'',0,'')" onerror="ASPx.ASPxImageLoad.OnLoad(this,'',0,'')" 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.