{yearShown}
\r\n \r\n \r\n \r\n navigateTo({\r\n [secondary ? 'yearCompare' : 'year']: parseInt(e.target.value),\r\n })\r\n }\r\n value={activeYear}\r\n title=\"Kies een jaar\"\r\n >\r\n {years.map((year) => (\r\n \r\n ))}\r\n \r\n\r\n
\r\n\r\n \r\n {\r\n const prevYear =\r\n activeYear - 1 < mapSettings.firstYear\r\n ? mapSettings.lastYear\r\n : activeYear - 1;\r\n navigateTo({\r\n [secondary ? 'yearCompare' : 'year']: prevYear,\r\n });\r\n }}\r\n />\r\n {\r\n const nextYear =\r\n activeYear + 1 > mapSettings.lastYear\r\n ? mapSettings.firstYear\r\n : activeYear + 1;\r\n navigateTo({\r\n [secondary ? 'yearCompare' : 'year']: nextYear,\r\n });\r\n }}\r\n iconSvg={IconArrowRight}\r\n />\r\n
\r\n \r\n setHovered(true)}\r\n onMouseLeave={() => setHovered(false)}\r\n onTouchStart={() => setHovered(true)}\r\n onTouchEndCapture={() => setHovered(false)}\r\n onClick={onClick}\r\n >\r\n \r\n navigateTo({\r\n [secondary ? 'yearCompare' : 'year']: year,\r\n })\r\n }\r\n />\r\n {years.map((year) => {\r\n const includesYear = mapSettings.sliderValues.includes(year);\r\n return (\r\n \r\n {includesYear && {year}}\r\n \r\n );\r\n })}\r\n
\r\n \r\n \r\n );\r\n}\r\n","var _rect, _line;\nvar _excluded = [\"title\", \"titleId\"];\nfunction _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }\nfunction _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }\nfunction _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }\nimport * as React from \"react\";\nfunction SvgLayoutTwoColums(_ref, svgRef) {\n var title = _ref.title,\n titleId = _ref.titleId,\n props = _objectWithoutProperties(_ref, _excluded);\n return /*#__PURE__*/React.createElement(\"svg\", _extends({\n xmlns: \"http://www.w3.org/2000/svg\",\n viewBox: \"0 0 24 24\",\n ref: svgRef,\n \"aria-labelledby\": titleId\n }, props), title === undefined ? /*#__PURE__*/React.createElement(\"title\", {\n id: titleId\n }, \"layout-two-colums\") : title ? /*#__PURE__*/React.createElement(\"title\", {\n id: titleId\n }, title) : null, _rect || (_rect = /*#__PURE__*/React.createElement(\"rect\", {\n className: \"a\",\n x: 1.5,\n y: 1.497,\n width: 21,\n height: 21,\n rx: 1.5,\n ry: 1.5\n })), _line || (_line = /*#__PURE__*/React.createElement(\"line\", {\n className: \"a\",\n x1: 12,\n y1: 1.497,\n x2: 12,\n y2: 22.497\n })));\n}\nvar ForwardRef = /*#__PURE__*/React.forwardRef(SvgLayoutTwoColums);\nexport default __webpack_public_path__ + \"static/media/layout-two-colums.6eb29c7c.svg\";\nexport { ForwardRef as ReactComponent };","var _circle, _line;\nvar _excluded = [\"title\", \"titleId\"];\nfunction _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }\nfunction _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }\nfunction _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }\nimport * as React from \"react\";\nfunction SvgSearch(_ref, svgRef) {\n var title = _ref.title,\n titleId = _ref.titleId,\n props = _objectWithoutProperties(_ref, _excluded);\n return /*#__PURE__*/React.createElement(\"svg\", _extends({\n xmlns: \"http://www.w3.org/2000/svg\",\n viewBox: \"0 0 24 24\",\n ref: svgRef,\n \"aria-labelledby\": titleId\n }, props), title === undefined ? /*#__PURE__*/React.createElement(\"title\", {\n id: titleId\n }, \"search\") : title ? /*#__PURE__*/React.createElement(\"title\", {\n id: titleId\n }, title) : null, _circle || (_circle = /*#__PURE__*/React.createElement(\"circle\", {\n className: \"a\",\n cx: 9.813,\n cy: 9.812,\n r: 9.063,\n transform: \"translate(-3.056 4.62) rotate(-23.025)\"\n })), _line || (_line = /*#__PURE__*/React.createElement(\"line\", {\n className: \"a\",\n x1: 16.221,\n y1: 16.22,\n x2: 23.25,\n y2: 23.25\n })));\n}\nvar ForwardRef = /*#__PURE__*/React.forwardRef(SvgSearch);\nexport default __webpack_public_path__ + \"static/media/search.cd38e40f.svg\";\nexport { ForwardRef as ReactComponent };","var _path, _line, _line2;\nvar _excluded = [\"title\", \"titleId\"];\nfunction _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }\nfunction _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }\nfunction _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }\nimport * as React from \"react\";\nfunction SvgMaps(_ref, svgRef) {\n var title = _ref.title,\n titleId = _ref.titleId,\n props = _objectWithoutProperties(_ref, _excluded);\n return /*#__PURE__*/React.createElement(\"svg\", _extends({\n xmlns: \"http://www.w3.org/2000/svg\",\n viewBox: \"0 0 24 24\",\n ref: svgRef,\n \"aria-labelledby\": titleId\n }, props), title === undefined ? /*#__PURE__*/React.createElement(\"title\", {\n id: titleId\n }, \"maps\") : title ? /*#__PURE__*/React.createElement(\"title\", {\n id: titleId\n }, title) : null, _path || (_path = /*#__PURE__*/React.createElement(\"path\", {\n className: \"a\",\n d: \"M16.307,2.838a1.5,1.5,0,0,0-1.114,0L8.807,5.393a1.5,1.5,0,0,1-1.114,0L1.779,3.027a.75.75,0,0,0-1.029.7V18.1a1.5,1.5,0,0,0,.943,1.393l6,2.4a1.5,1.5,0,0,0,1.114,0l6.386-2.555a1.5,1.5,0,0,1,1.114,0L22.221,21.7a.75.75,0,0,0,1.029-.7V6.631a1.5,1.5,0,0,0-.943-1.393Z\"\n })), _line || (_line = /*#__PURE__*/React.createElement(\"line\", {\n className: \"a\",\n x1: 8.25,\n y1: 5.5,\n x2: 8.25,\n y2: 22\n })), _line2 || (_line2 = /*#__PURE__*/React.createElement(\"line\", {\n className: \"a\",\n x1: 15.75,\n y1: 2.731,\n x2: 15.75,\n y2: 19.231\n })));\n}\nvar ForwardRef = /*#__PURE__*/React.forwardRef(SvgMaps);\nexport default __webpack_public_path__ + \"static/media/maps.97268072.svg\";\nexport { ForwardRef as ReactComponent };","var _line, _line2, _line3;\nvar _excluded = [\"title\", \"titleId\"];\nfunction _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }\nfunction _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }\nfunction _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }\nimport * as React from \"react\";\nfunction SvgNavigationMenu(_ref, svgRef) {\n var title = _ref.title,\n titleId = _ref.titleId,\n props = _objectWithoutProperties(_ref, _excluded);\n return /*#__PURE__*/React.createElement(\"svg\", _extends({\n xmlns: \"http://www.w3.org/2000/svg\",\n viewBox: \"0 0 24 24\",\n ref: svgRef,\n \"aria-labelledby\": titleId\n }, props), title === undefined ? /*#__PURE__*/React.createElement(\"title\", {\n id: titleId\n }, \"navigation-menu\") : title ? /*#__PURE__*/React.createElement(\"title\", {\n id: titleId\n }, title) : null, _line || (_line = /*#__PURE__*/React.createElement(\"line\", {\n className: \"a\",\n x1: 2.25,\n y1: 18.003,\n x2: 21.75,\n y2: 18.003\n })), _line2 || (_line2 = /*#__PURE__*/React.createElement(\"line\", {\n className: \"a\",\n x1: 2.25,\n y1: 12.003,\n x2: 21.75,\n y2: 12.003\n })), _line3 || (_line3 = /*#__PURE__*/React.createElement(\"line\", {\n className: \"a\",\n x1: 2.25,\n y1: 6.003,\n x2: 21.75,\n y2: 6.003\n })));\n}\nvar ForwardRef = /*#__PURE__*/React.forwardRef(SvgNavigationMenu);\nexport default __webpack_public_path__ + \"static/media/navigation-menu.82efb750.svg\";\nexport { ForwardRef as ReactComponent };","var _path, _line, _polyline;\nvar _excluded = [\"title\", \"titleId\"];\nfunction _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }\nfunction _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }\nfunction _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }\nimport * as React from \"react\";\nfunction SvgShare1(_ref, svgRef) {\n var title = _ref.title,\n titleId = _ref.titleId,\n props = _objectWithoutProperties(_ref, _excluded);\n return /*#__PURE__*/React.createElement(\"svg\", _extends({\n xmlns: \"http://www.w3.org/2000/svg\",\n viewBox: \"0 0 24 24\",\n ref: svgRef,\n \"aria-labelledby\": titleId\n }, props), title === undefined ? /*#__PURE__*/React.createElement(\"title\", {\n id: titleId\n }, \"share-1\") : title ? /*#__PURE__*/React.createElement(\"title\", {\n id: titleId\n }, title) : null, _path || (_path = /*#__PURE__*/React.createElement(\"path\", {\n className: \"a\",\n d: \"M17.25,8.25h1.5a1.5,1.5,0,0,1,1.5,1.5v12a1.5,1.5,0,0,1-1.5,1.5H5.25a1.5,1.5,0,0,1-1.5-1.5v-12a1.5,1.5,0,0,1,1.5-1.5h1.5\"\n })), _line || (_line = /*#__PURE__*/React.createElement(\"line\", {\n className: \"a\",\n x1: 12,\n y1: 0.75,\n x2: 12,\n y2: 11.25\n })), _polyline || (_polyline = /*#__PURE__*/React.createElement(\"polyline\", {\n className: \"a\",\n points: \"8.25 4.5 12 0.75 15.75 4.5\"\n })));\n}\nvar ForwardRef = /*#__PURE__*/React.forwardRef(SvgShare1);\nexport default __webpack_public_path__ + \"static/media/share-1.d1362eed.svg\";\nexport { ForwardRef as ReactComponent };","var _line, _line2;\nvar _excluded = [\"title\", \"titleId\"];\nfunction _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }\nfunction _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }\nfunction _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }\nimport * as React from \"react\";\nfunction SvgClose(_ref, svgRef) {\n var title = _ref.title,\n titleId = _ref.titleId,\n props = _objectWithoutProperties(_ref, _excluded);\n return /*#__PURE__*/React.createElement(\"svg\", _extends({\n xmlns: \"http://www.w3.org/2000/svg\",\n viewBox: \"0 0 24 24\",\n ref: svgRef,\n \"aria-labelledby\": titleId\n }, props), title === undefined ? /*#__PURE__*/React.createElement(\"title\", {\n id: titleId\n }, \"close\") : title ? /*#__PURE__*/React.createElement(\"title\", {\n id: titleId\n }, title) : null, _line || (_line = /*#__PURE__*/React.createElement(\"line\", {\n className: \"a\",\n x1: 0.75,\n y1: 23.249,\n x2: 23.25,\n y2: 0.749\n })), _line2 || (_line2 = /*#__PURE__*/React.createElement(\"line\", {\n className: \"a\",\n x1: 23.25,\n y1: 23.249,\n x2: 0.75,\n y2: 0.749\n })));\n}\nvar ForwardRef = /*#__PURE__*/React.forwardRef(SvgClose);\nexport default __webpack_public_path__ + \"static/media/close.a7b977a1.svg\";\nexport { ForwardRef as ReactComponent };","import { RefObject, useEffect } from 'react';\r\n\r\ntype AnyEvent = MouseEvent | TouchEvent;\r\n\r\nfunction useOnClickOutside\r\n setTimeout(() => setSnack(false), 5000)}\r\n nodeRef={snackRef}\r\n classNames={{\r\n enterActive: styles.Topbar_snacks___active,\r\n enterDone: styles.Topbar_snacks___active,\r\n }}\r\n >\r\n
\r\n );\r\n}\r\n","import { useRef } from 'react';\r\nimport styles from './NavigationMobile.module.css';\r\nimport Button from './shared/Button';\r\nimport { ReactComponent as IconCompare } from './icons/layout-two-colums.svg';\r\nimport { ReactComponent as IconMap } from './icons/maps.svg';\r\nimport { ReactComponent as IconPlay } from './icons/controls-play.svg';\r\nimport { ReactComponent as IconPause } from './icons/controls-pause.svg';\r\nimport { ReactComponent as IconShare } from './icons/share-1.svg';\r\nimport { CSSTransition } from 'react-transition-group';\r\nimport useOnClickOutside from './utils/useOnClickOutside';\r\nimport useUrlParams from './utils/useUrlParams';\r\nimport useToggleCompare from './utils/useToggleCompare';\r\n\r\ntype NavigationMobileProps = {\r\n isOpen: boolean;\r\n toggle: (open?: boolean) => void;\r\n playing: boolean;\r\n togglePlay: (toggle?: boolean) => void;\r\n toggleSecondaryPlay: (toggle?: boolean) => void;\r\n toggleInfoModal: () => void;\r\n toggleShareModal: () => void;\r\n setSnack: (message: string | false) => void;\r\n modalOpen: boolean;\r\n};\r\n\r\nexport default function NavigationMobile({\r\n isOpen,\r\n toggle,\r\n playing,\r\n togglePlay,\r\n toggleSecondaryPlay,\r\n setSnack,\r\n toggleInfoModal,\r\n toggleShareModal,\r\n modalOpen,\r\n}: NavigationMobileProps) {\r\n const nodeRef = useRef(null);\r\n const toggleCompare = useToggleCompare(\r\n setSnack,\r\n togglePlay,\r\n toggleSecondaryPlay\r\n );\r\n const { comparing } = useUrlParams();\r\n useOnClickOutside(\r\n nodeRef,\r\n () => {\r\n if (isOpen && !modalOpen) toggle(false);\r\n },\r\n '#toggleMobileNavigation'\r\n );\r\n\r\n return (\r\n \r\n \r\n
\r\n\r\n \r\n \r\n
\r\n \r\n \r\n \r\n {comparing ? 'Stop vergelijken' : 'Vergelijken'}\r\n \r\n
\r\n\r\n \r\n \r\n
\r\n\r\n \r\n ![\"Logo](\"/images/logo-kadaster.svg\")
\r\n
\r\n\r\n \r\n\r\n \r\n \r\n Topotijdreis
\r\n\r\n
\r\n \r\n {snack}
\r\n \r\n
\r\n \r\n );\r\n}\r\n","var _path;\nvar _excluded = [\"title\", \"titleId\"];\nfunction _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }\nfunction _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }\nfunction _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }\nimport * as React from \"react\";\nfunction SvgTwitter(_ref, svgRef) {\n var title = _ref.title,\n titleId = _ref.titleId,\n props = _objectWithoutProperties(_ref, _excluded);\n return /*#__PURE__*/React.createElement(\"svg\", _extends({\n id: \"Layer_1\",\n xmlns: \"http://www.w3.org/2000/svg\",\n xmlnsXlink: \"http://www.w3.org/1999/xlink\",\n x: \"0px\",\n y: \"0px\",\n width: \"56.693px\",\n height: \"56.693px\",\n viewBox: \"0 0 56.693 56.693\",\n style: {\n enableBackground: \"new 0 0 56.693 56.693\"\n },\n xmlSpace: \"preserve\",\n ref: svgRef,\n \"aria-labelledby\": titleId\n }, props), title ? /*#__PURE__*/React.createElement(\"title\", {\n id: titleId\n }, title) : null, _path || (_path = /*#__PURE__*/React.createElement(\"path\", {\n fill: \"currentColor\",\n strokeWidth: 0,\n d: \"M54.082,15.5495c-1.8115,0.8047-3.7597,1.3477-5.8051,1.5913c2.0874-1.25,3.6894-3.2305,4.4443-5.5918 c-1.9531,1.1587-4.1152,2-6.418,2.4536c-1.8432-1.9643-4.4702-3.1919-7.3769-3.1919c-5.5816,0-10.1069,4.5254-10.1069,10.107 c0,0.792,0.0893,1.563,0.2617,2.3027c-8.3999-0.4209-15.8477-4.4443-20.8325-10.5596c-0.8697,1.4922-1.3682,3.2281-1.3682,5.0811 c0,3.5063,1.7842,6.5996,4.4961,8.4126c-1.6563-0.0532-3.2154-0.5073-4.5777-1.2647c-0.0009,0.042-0.0009,0.0845-0.0009,0.128 c0,4.896,3.4839,8.9809,8.1079,9.9101c-0.8482,0.2305-1.7412,0.3545-2.6631,0.3545c-0.6519,0-1.2847-0.063-1.9019-0.1816 c1.2867,4.0151,5.0191,6.9375,9.441,7.019c-3.459,2.711-7.8165,4.3267-12.5523,4.3267c-0.8154,0-1.6196-0.0484-2.4106-0.1411 c4.4736,2.8681,9.7856,4.541,15.4931,4.541c18.5908,0,28.7559-15.4009,28.7559-28.7569c0-0.4375-0.0088-0.8745-0.0283-1.3076 C51.0137,19.3571,52.728,17.5769,54.082,15.5495z\"\n })));\n}\nvar ForwardRef = /*#__PURE__*/React.forwardRef(SvgTwitter);\nexport default __webpack_public_path__ + \"static/media/twitter.1927d724.svg\";\nexport { ForwardRef as ReactComponent };","import React, { useRef } from 'react';\r\nimport styles from './Modal.module.css';\r\nimport { ReactComponent as IconClose } from './../icons/close.svg';\r\nimport { useClickAway, useKey } from 'react-use';\r\nimport Div100vh from 'react-div-100vh';\r\nimport { CSSTransition } from 'react-transition-group';\r\nimport Button from '../shared/Button';\r\n\r\ntype ModalProps = {\r\n children: React.ReactNode;\r\n handleClose: () => void;\r\n isOpen: boolean;\r\n};\r\n\r\nexport default function Modal({ children, handleClose, isOpen }: ModalProps) {\r\n useKey(\r\n 'Escape',\r\n () => {\r\n if (isOpen) handleClose();\r\n },\r\n undefined,\r\n [isOpen]\r\n );\r\n const modalRef = useRef(null);\r\n const modalInnerRef = useRef(null);\r\n useClickAway(modalInnerRef, () => {\r\n if (isOpen) handleClose();\r\n });\r\n\r\n return (\r\n \r\n \r\n Play\r\n \r\n
\r\n\r\n {comparing ? 'Stop vergelijken' : 'Vergelijken'}\r\n \r\n
\r\n\r\n Over Topotijdreis\r\n \r\n
\r\n\r\n Delen\r\n \r\n
\r\n \r\n
\r\n
\r\n
\r\n {children}\r\n
\r\n \r\n
\r\n Over meer dan 200 jaar topografie en luchtfoto's
\r\n\r\n Op 18 februari 1815 werd het Topographisch Bureau opgericht. Sinds die\r\n datum verzamelt en ontsluit de Nederlandse overheid geografische\r\n informatie: bijvoorbeeld over de ligging van wegen, water, bebouwing\r\n en landbouwgrond. Later ging het Bureau verder onder de naam\r\n Topografische Dienst. In 2004 werd de Dienst onderdeel van het\r\n Kadaster.\r\n
\r\n\r\n Hiermee haalde het Kadaster jarenlange ervaring met het verzamelen van\r\n geo-informatie in huis. Een resultaat om trots op te zijn: meer dan\r\n 200 jaar topografische kaarten van topniveau. Om dit niveau te\r\n behouden investeren we in innovaties, waar mogelijk in samenwerking\r\n met overheden, het bedrijfsleven en de wetenschap. Door nieuwe\r\n methoden en technieken hebben gebruikers nog meer plezier van onze\r\n kaarten. Deze zijn actueler dan ooit.\r\n
\r\n\r\n Sinds 1927 worden topografische kaarten gemaakt met behulp van\r\n luchtfoto's, dat zijn foto’s vanuit een vliegtuig loodrecht naar\r\n beneden. Vanaf die tijd zijn er van Nederland luchtfoto’s beschikbaar\r\n met verschillende intervallen. Vanaf 2006 is begonnen met het maken\r\n van digitale luchtfoto’s van (delen van) Nederland, deze worden in\r\n Topotijdreis getoond.\r\n
\r\n\r\n Om 200 jaar topografie te vieren is in 2015 deze tijdreis-app gemaakt.\r\n Ontdek met de app meer dan 200 jaar aan topografische gegevens van\r\n Nederland en luchtfoto’s vanaf 2006!\r\n
\r\nVeel plezier bij het gebruik van Topotijdreis !
\r\n\r\n
\r\n\r\n Disclaimer
\r\n\r\n Topotijdreis met luchtfoto’s is met grote zorg opgebouwd uit\r\n gedigitaliseerde en geogerefereerde historische kaarten en\r\n luchtfoto's. Toch kunnen er nog onvolkomenheden voorkomen.\r\n
\r\n\r\n \r\n Toegankelijkheidsverklaring\r\n \r\n
\r\n\r\n \r\n Algemene voorwaarden & Privacy\r\n \r\n
\r\n\r\n
\r\n\r\n Topografische kaarten
\r\n\r\n De kaarten zijn opgebouwd uit meerdere kaartschalen en tonen gegevens\r\n conform het Nederlands tiling schema op de schalen 1:12.288.000 (level\r\n 0) t/m 1:6.000 (level 11). De gebruikte kaartprojectie is het\r\n Rijksdriehoekstelsel.\r\n
\r\n\r\n Het kan voorkomen dat de kaarten uit de beginperiode verschoven liggen\r\n ten opzichte van de moderne topografie. Door de eenvoudige projectie\r\n die in de beginperiode is toegepast bij de oorspronkelijke\r\n vervaardiging van de Kraijenhoff-kaart en de Postroutekaart uit 1815\r\n is er geen sprake van een constante schaal. De schaal is wel verbeterd\r\n bij de digitale inpassing van de kaarten maar het kaartbeeld is niet\r\n beter te corrigeren.\r\n
\r\n\r\n In Topotijdreis zijn de volgende topografische kaarten opgenomen (van\r\n overzicht naar detail, en van oud naar jong):\r\n
\r\nPostroutekaart
\r\n\r\n Weergave in Topotijdreis in 1815 op schaal 1 op 400.000\r\n
\r\n Een prachtig getekende historische topografische kaart met routes van\r\n postkoetsen in de tijd van Napoleon.\r\n
Algemene Kaart Nederland
\r\n\r\n Weergave in Topotijdreis van 1816 tot en met 1888 op schaal 1 op\r\n 400.000\r\n
\r\n De Algemene Kaarten van Nederland van 1816, 1821 en 1830 geven een\r\n mooi overzicht van Nederland in die tijd.\r\n
Gemeentekaart
\r\n\r\n Weergave in Topotijdreis van 1889 tot nu op schaal 1 op 400.000\r\n
\r\n De Gemeentekaart van Nederland geeft een overzicht van de\r\n administratieve indeling van Nederland in gemeenten. Op de kaart vindt\r\n u onder andere rijksgrenzen, provinciegrenzen en gemeentegrenzen.{' '}\r\n
Topografische Kaart 200D
\r\n\r\n Weergave in Topotijdreis van 1867 tot en met 1995 op schaal 1 op\r\n 200.000\r\n
\r\n De historische kaarten op schaal 1:200.000 zijn uitgegeven tussen 1865\r\n en 1955. U ziet op deze topografische kaart het terrein en landschap\r\n van vroeger op kleine schaal.\r\n
Wegenkaart
\r\n\r\n Weergave in Topotijdreis van 1996 tot en met 2014 op schaal 1 op\r\n 250.000\r\n
\r\n De Historische wegenkaart geeft een gedetailleerd beeld van de\r\n Nederlandse wegen in het verleden.\r\n
TOP250
\r\n\r\n Weergave in Topotijdreis van 2015 tot nu op schaal 1 op 250.000\r\n
\r\n De topografische kaarten op schaal 1:250.000 worden in deze vorm\r\n uitgegeven sinds 2015. Deze kleine schaal geeft een goed overzicht van\r\n een groter gebied.\r\n
Krayenhoffkaart
\r\n\r\n Weergave in Topotijdreis van 1815 tot en met 1849 op schaal 1 op\r\n 115.200\r\n
\r\n De Krayenhoffkaart is een topografische kaart van de Bataafse\r\n Republiek, gemaakt tussen 1798 en 1822. De kaart dankt zijn naam aan\r\n baron en cartograaf Krayenhoff. De laatste gewijzigde druk werd\r\n gemaakt in ongeveer 1870.\r\n
Topografische Militaire Kaart
\r\n\r\n Weergave in Topotijdreis van 1850 tot en met 1935 op schaal 1 op\r\n 50.000\r\n
\r\n De Topografische Militaire Kaart van het Koninkrijk der Nederlanden\r\n verscheen van 1850 tot 1864. Door de gedetailleerde weergave is de\r\n kaart een uitstekende bron van informatie voor de bestudering van het\r\n 19-eeuwse, voor-industriële Nederlandse landschap.{' '}\r\n
TOP50
\r\n\r\n Weergave in Topotijdreis van 1903 tot nu op schaal 1 op 50.000\r\n
\r\n Topografische kaarten op schaal 1:50.000 zijn uitgegeven tussen 1903\r\n en nu. De kaart is in kleur en geeft een volledig beeld van het\r\n terrein en het landschap, met onder meer huizen in het buitengebied,\r\n straten, water, bos en plaatsnamen.\r\n
Bonnebladen
\r\n\r\n Weergave in Topotijdreis van 1865 tot en met 1949 op schaal 1 op\r\n 25.000\r\n
\r\n Bonnebladen zijn gedetailleerde militaire kaarten. Deze kaartbladen\r\n werden vanaf 1865 voor het eerst in kleur gedrukt door het voormalige\r\n Topographisch Bureau.\r\n
TOP25
\r\n\r\n Weergave in Topotijdreis van 1935 tot nu op schaal 1 op 25.000\r\n
\r\n Topografische kaarten op schaal 1:25.000 zijn uitgegeven tussen 1935\r\n en nu. U ziet op een topografische kaart het terrein en landschap met\r\n huizen, straten en plaatsnamen. Waar was bebouwing? Hoe liepen beekjes\r\n en rivieren? U ziet ook waar bos, hei of weidegrond was. De kaarten\r\n bevatten gedetailleerde topografische informatie.\r\n
\r\n Bovengenoemde Topotijdreis kaarten zijn te{' '}\r\n \r\n bestellen\r\n \r\n .\r\n
\r\n\r\n
\r\n\r\n Luchtfoto’s
\r\n\r\n In Topotijdreis zijn momenteel alleen de digitale luchtfoto’s\r\n opgenomen vanaf het eerste jaar dat de bedekking van Nederland\r\n digitaal compleet is, en dat is 2006.\r\n
\r\n\r\n De luchtfoto’s zijn vervaardigd op een schaal van ongeveer 1:18.000 en\r\n beslaan een gebied van circa 4 x 4 km. Alle luchtfoto’s zijn loodrecht\r\n naar beneden genomen, t/m 2006 in zwart/wit en vanaf 2007 zijn de\r\n luchtfoto's opgenomen in kleur.\r\n
\r\n\r\n Er zijn analoge luchtfoto's vanaf 1927 beschikbaar, deze zijn te{' '}\r\n \r\n bestellen\r\n \r\n .\r\n
\r\n\r\n
\r\n Veelgestelde vragen
\r\n\r\n\r\n \r\n Waarom zie ik soms geen verschil in het kaartbeeld wanneer ik wissel\r\n tussen jaren?\r\n \r\n
\r\n\r\n Dit komt omdat er voor die gebieden dan geen nieuwe kaarten zijn\r\n gemaakt. De kaart van een specifiek jaar laat de historische\r\n topografische data zien die tot op dat jaar actueel beschikbaar waren.\r\n Dit kan betekenen dat er gedurende meerdere jaren geen verschil in de\r\n kaart waarneembaar is.\r\n
\r\n\r\n\r\n Waarom zijn bepaalde kaarten verschillend van kleur?\r\n
\r\n\r\n Destijds waren er verschillende drukkers om de topografische kaarten\r\n te printen. Zij hadden een eigen productieproces en manier van\r\n opslaan. Dit verklaart het kleurverschil.\r\n
\r\n\r\n\r\n Zijn alle kaarten in kleur?\r\n
\r\n\r\n Nee, per gebied en jaartal kan dit variëren. Dit heeft te maken met\r\n het doel waar de kaart voor gemaakt werd/wordt.\r\n
\r\n\r\n\r\n Is er bij een kaart ook een legenda beschikbaar?\r\n
\r\n\r\n Nee, hiervoor moet u een{' '}\r\n \r\n bestelling plaatsen\r\n \r\n .\r\n
\r\n\r\n\r\n Kan ik een kaart ook downloaden als een PDF-bestand?\r\n
\r\n\r\n Nee, wel kunt u een kaart{' '}\r\n bestellen.\r\n
\r\n\r\n\r\n Staan er ook kadastrale grenzen op kaarten?\r\n
\r\n\r\n Nee, alleen de topografie wordt weergegeven. Wilt u een kaart met\r\n kadastrale grenzen dan kunt u een{' '}\r\n \r\n kadastrale kaart opvragen\r\n \r\n .\r\n
\r\n\r\n\r\n \r\n Waarom klopt de informatie op de kaart niet met de werkelijkheid?\r\n Mijn huis staat niet juist weergegeven.\r\n \r\n
\r\n\r\n Er zit een periode tussen de werkelijke opname en de feitelijke\r\n uitgave waarin de kaart is gemaakt.\r\n
\r\n\r\n\r\n Zijn er ook kaarten aanwezig van voor 1815?\r\n
\r\n\r\n Nee, voor die tijd bestond er nog geen topografische dienst. Er zijn\r\n wel topografische kaarten maar die zijn regionaal beschikbaar.\r\n Bijvoorbeeld via het Nationaal archief, dit kan per gemeente,\r\n provincie verschillen.\r\n
\r\n\r\n\r\n \r\n Mag ik een print-screen maken van een kaart en dit publiceren?\r\n \r\n
\r\n\r\n U mag de website topotijdreis niet commercieel gebruiken. Het volgende\r\n is niet toegestaan:\r\n
\r\n- \r\n
- het vragen van betaling en/of registratie voor toegang; \r\n
- het toe- of invoegen van reclame-uitingen; \r\n
- \r\n logo’s of andere content (al dan niet via layers, pop-ups en\r\n dergelijke);\r\n \r\n
- \r\n het creëren van additionele functionaliteiten en afgeleide diensten.\r\n \r\n
\r\n Overig gebruik is alleen toegestaan als daarvoor voorafgaande\r\n schriftelijke toestemming van het Kadaster is verkregen. Zie hiervoor\r\n ook{' '}\r\n \r\n Algemene voorwaarden & Privacy\r\n \r\n .\r\n
\r\n\r\n\r\n \r\n Waarom zie ik vliegvelden en kazernes niet op oudere kaarten?\r\n \r\n
\r\n\r\n In een bepaalde periode viel dit onder geclassificeerd gebied en mocht\r\n niet weergegeven worden. Dit werd witgelaten of met een fantasie\r\n (grasvelden, slootjes) gebied weergegeven.\r\n
\r\n\r\n\r\n \r\n Waarom is een gebouw op een kaart niet zichtbaar in het jaar van\r\n uitgifte?\r\n \r\n
\r\n\r\n De kaarten worden gemaakt op basis van de luchtfoto en daar zit een\r\n paar jaar tussen, dit kan oplopen tot 5 jaar. Daarnaast werden vroeger\r\n de kaarten ook niet zo vaak herzien als tegenwoordig.\r\n
\r\n\r\n\r\n Zijn er luchtfoto's van voor 2006 beschikbaar?\r\n
\r\n\r\n Er zijn analoge luchtfoto's{' '}\r\n \r\n vanaf 1927 beschikbaar\r\n \r\n
\r\n\r\n\r\n Hoe goed zijn details op de foto's te onderscheiden?\r\n
\r\n\r\n Het detailniveau verschilt per vluchtjaar en is afhankelijk van\r\n seizoensinvloeden. De luchtfoto's zijn gevlogen op een hoogte van\r\n ongeveer 1800 meter t.b.v. topografische kaarten op een schaal van\r\n 1:10.000. Kleine objecten zoals schuttingen en hekken zijn niet\r\n zichtbaar op de foto's.\r\n
\r\n\r\n\r\n \r\n Waarom staan er alleen luchtfoto’s vanaf 2006 in Topotijdreis?\r\n \r\n
\r\n\r\n Vanaf 2006 zijn de luchtfoto’s digitaal beschikbaar en daarom\r\n makkelijk in Topotijdreis op te nemen. Voor 2006 is (een groot deel\r\n van) Nederland alleen met analoge luchtfoto’s opgenomen. Deze zijn\r\n niet geschikt voor opname in Topotijdreis.\r\n
\r\n\r\n\r\n Hoe kun je het beste navigeren in de luchtfoto?\r\n
\r\n\r\n In de luchtfoto’s staan geen namen ed. Het kan daarom lastig zijn om\r\n in de luchtfoto de gewenste locatie te vinden. Het makkelijkste is om\r\n op de kaart in Topotijdreis je locatie te zoeken en dan via de knop\r\n over te schakelen naar de luchtfoto.\r\n
\r\n\r\n\r\n \r\n Waarom hebben de kaart en de luchtfoto niet dezelfde tijdsbalk?\r\n \r\n
\r\n\r\n Luchtfoto’s zijn niet voor ieder jaar beschikbaar en de nieuwe\r\n luchtfoto’s en de nieuwe topografische kaart kunnen op verschillende\r\n tijdstippen beschikbaar komen.\r\n
\r\n\r\n\r\n \r\n Waarom bevatten de kaart en de luchtfoto van hetzelfde jaartal niet\r\n dezelfde informatie? / Waarom zie ik wel iets op de luchtfoto, maar\r\n niet op de topografische kaart?\r\n \r\n
\r\n\r\n De luchtfoto’s worden gebruikt als bron voor het actualiseren van de\r\n topografische kaarten. Vanwege de doorlooptijd van de processen rondom\r\n luchtfoto’s en topografische kaarten zijn de topografische kaarten\r\n meestal gebaseerd op de luchtfoto’s van het jaar ervoor. Als\r\n voorbeeld: De topografische kaarten uit 2019 zijn gebaseerd op\r\n luchtfoto’s uit 2018.\r\n
\r\n\r\n\r\n In welke browser kan ik de app het beste bekijken?\r\n
\r\n\r\n Gebruik de meest recente versie van uw browser. De app werkt het beste\r\n in Google Chrome en Mozilla Firefox.\r\n
\r\n\r\n \r\n \r\n Twitter\r\n {' '}\r\n \r\n Facebook\r\n {' '}\r\n \r\n LinkedIn\r\n \r\n \r\n WhatsApp\r\n \r\n \r\n E-mail\r\n \r\n
\r\n Delen
\r\nDeel Topotijdreis met iemand die ook even terug in de tijd wil.
\r\nKopieer de url en deel waar je maar wilt.
\r\n\r\n e.target.select()}\r\n value={`https://www.topotijdreis.nl${location.pathname}`}\r\n onChange={() => {}}\r\n />\r\n {\r\n setCopiedToClipboard(true);\r\n navigator.clipboard.writeText(\r\n `https://www.topotijdreis.nl${location.pathname}`\r\n );\r\n }}\r\n >\r\n {copiedToClipboard ? 'Gekopieerd!' : 'Kopieer'}\r\n \r\n
\r\n \r\n \r\n {attributionUrl ? (\r\n \r\n {attribution}\r\n \r\n ) : (\r\n attribution\r\n )}\r\n
\r\n \r\n \r\n Powered by Esri\r\n \r\n
\r\n \r\n );\r\n}\r\n","import {\r\n useRef,\r\n useEffect,\r\n forwardRef,\r\n useImperativeHandle,\r\n useCallback,\r\n useState,\r\n} from 'react';\r\nimport classNames from 'classnames';\r\nimport styles from './Map.module.css';\r\nimport MapView from '@arcgis/core/views/MapView';\r\nimport Search from '@arcgis/core/widgets/Search';\r\nimport Locate from '@arcgis/core/widgets/Locate';\r\nimport * as watchUtils from '@arcgis/core/core/watchUtils';\r\nimport WebMap from '@arcgis/core/WebMap';\r\nimport TileLayer from '@arcgis/core/layers/TileLayer';\r\nimport useUrlParams from '../utils/useUrlParams';\r\nimport { joinMapState, splitMapState } from '../utils/urlUtils';\r\nimport { getMapSettings, lods, MapTypes } from '../utils/mapUtils';\r\nimport { useParams } from 'react-router-dom';\r\nimport Point from '@arcgis/core/geometry/Point';\r\nimport SpatialReference from '@arcgis/core/geometry/SpatialReference';\r\nimport ScaleBar from '@arcgis/core/widgets/ScaleBar';\r\nimport Attribution from '@arcgis/core/widgets/Attribution';\r\nimport Graphic from '@arcgis/core/Graphic';\r\nimport Zoom from '@arcgis/core/widgets/Zoom';\r\nimport CustomAttribution from './CustomAttribution';\r\nimport { LocatorService } from '../settings.json';\r\n\r\nconst geolocationSource = {\r\n url: LocatorService,\r\n outFields: ['Addr_type'],\r\n placeholder: 'Zoek op de kaart',\r\n singleLineFieldName: 'SingleLine',\r\n};\r\n\r\ntype MapProps = {\r\n mobileSearchInstance: any;\r\n children: React.ReactNode;\r\n secondary?: boolean;\r\n comparing?: boolean;\r\n activeYear: number;\r\n mapType: MapTypes;\r\n mapTypeCompare: MapTypes;\r\n};\r\n\r\nfunction Map(\r\n {\r\n mobileSearchInstance,\r\n children,\r\n mapType,\r\n activeYear,\r\n mapTypeCompare,\r\n secondary = false,\r\n }: MapProps,\r\n ref: any\r\n) {\r\n // const mapDiv = useRef(null);\r\n const mapRef = useRef