BAMG#69593 Data uit Facilitor plaatsen op de landkaart.

svn path=/Website/trunk/; revision=57259

APPL/FAC/Leaflet/leaflet.css

@@ -0,0 +1,657 @@
+/* required styles */
+
+.leaflet-pane,
+.leaflet-tile,
+.leaflet-marker-icon,
+.leaflet-marker-shadow,
+.leaflet-tile-container,
+.leaflet-pane > svg,
+.leaflet-pane > canvas,
+.leaflet-zoom-box,
+.leaflet-image-layer,
+.leaflet-layer {
+	position: absolute;
+	left: 0;
+	top: 0;
+	}
+.leaflet-container {
+	overflow: hidden;
+	}
+.leaflet-tile,
+.leaflet-marker-icon,
+.leaflet-marker-shadow {
+	-webkit-user-select: none;
+	   -moz-user-select: none;
+	        user-select: none;
+	  -webkit-user-drag: none;
+	}
+/* Prevents IE11 from highlighting tiles in blue */
+.leaflet-tile::selection {
+	background: transparent;
+}
+/* Safari renders non-retina tile on retina better with this, but Chrome is worse */
+.leaflet-safari .leaflet-tile {
+	image-rendering: -webkit-optimize-contrast;
+	}
+/* hack that prevents hw layers "stretching" when loading new tiles */
+.leaflet-safari .leaflet-tile-container {
+	width: 1600px;
+	height: 1600px;
+	-webkit-transform-origin: 0 0;
+	}
+.leaflet-marker-icon,
+.leaflet-marker-shadow {
+	display: block;
+	}
+/* .leaflet-container svg: reset svg max-width decleration shipped in Joomla! (joomla.org) 3.x */
+/* .leaflet-container img: map is broken in FF if you have max-width: 100% on tiles */
+.leaflet-container .leaflet-overlay-pane svg {
+	max-width: none !important;
+	max-height: none !important;
+	}
+.leaflet-container .leaflet-marker-pane img,
+.leaflet-container .leaflet-shadow-pane img,
+.leaflet-container .leaflet-tile-pane img,
+.leaflet-container img.leaflet-image-layer,
+.leaflet-container .leaflet-tile {
+	max-width: none !important;
+	max-height: none !important;
+	width: auto;
+	padding: 0;
+	}
+
+.leaflet-container.leaflet-touch-zoom {
+	-ms-touch-action: pan-x pan-y;
+	touch-action: pan-x pan-y;
+	}
+.leaflet-container.leaflet-touch-drag {
+	-ms-touch-action: pinch-zoom;
+	/* Fallback for FF which doesn't support pinch-zoom */
+	touch-action: none;
+	touch-action: pinch-zoom;
+}
+.leaflet-container.leaflet-touch-drag.leaflet-touch-zoom {
+	-ms-touch-action: none;
+	touch-action: none;
+}
+.leaflet-container {
+	-webkit-tap-highlight-color: transparent;
+}
+.leaflet-container a {
+	-webkit-tap-highlight-color: rgba(51, 181, 229, 0.4);
+}
+.leaflet-tile {
+	filter: inherit;
+	visibility: hidden;
+	}
+.leaflet-tile-loaded {
+	visibility: inherit;
+	}
+.leaflet-zoom-box {
+	width: 0;
+	height: 0;
+	-moz-box-sizing: border-box;
+	     box-sizing: border-box;
+	z-index: 800;
+	}
+/* workaround for https://bugzilla.mozilla.org/show_bug.cgi?id=888319 */
+.leaflet-overlay-pane svg {
+	-moz-user-select: none;
+	}
+
+.leaflet-pane         { z-index: 400; }
+
+.leaflet-tile-pane    { z-index: 200; }
+.leaflet-overlay-pane { z-index: 400; }
+.leaflet-shadow-pane  { z-index: 500; }
+.leaflet-marker-pane  { z-index: 600; }
+.leaflet-tooltip-pane   { z-index: 650; }
+.leaflet-popup-pane   { z-index: 700; }
+
+.leaflet-map-pane canvas { z-index: 100; }
+.leaflet-map-pane svg    { z-index: 200; }
+
+.leaflet-vml-shape {
+	width: 1px;
+	height: 1px;
+	}
+.lvml {
+	behavior: url(#default#VML);
+	display: inline-block;
+	position: absolute;
+	}
+
+
+/* control positioning */
+
+.leaflet-control {
+	position: relative;
+	z-index: 800;
+	pointer-events: visiblePainted; /* IE 9-10 doesn't have auto */
+	pointer-events: auto;
+	}
+.leaflet-top,
+.leaflet-bottom {
+	position: absolute;
+	z-index: 1000;
+	pointer-events: none;
+	}
+.leaflet-top {
+	top: 0;
+	}
+.leaflet-right {
+	right: 0;
+	}
+.leaflet-bottom {
+	bottom: 0;
+	}
+.leaflet-left {
+	left: 0;
+	}
+.leaflet-control {
+	float: left;
+	clear: both;
+	}
+.leaflet-right .leaflet-control {
+	float: right;
+	}
+.leaflet-top .leaflet-control {
+	margin-top: 10px;
+	}
+.leaflet-bottom .leaflet-control {
+	margin-bottom: 10px;
+	}
+.leaflet-left .leaflet-control {
+	margin-left: 10px;
+	}
+.leaflet-right .leaflet-control {
+	margin-right: 10px;
+	}
+
+
+/* zoom and fade animations */
+
+.leaflet-fade-anim .leaflet-popup {
+	opacity: 0;
+	-webkit-transition: opacity 0.2s linear;
+	   -moz-transition: opacity 0.2s linear;
+	        transition: opacity 0.2s linear;
+	}
+.leaflet-fade-anim .leaflet-map-pane .leaflet-popup {
+	opacity: 1;
+	}
+.leaflet-zoom-animated {
+	-webkit-transform-origin: 0 0;
+	    -ms-transform-origin: 0 0;
+	        transform-origin: 0 0;
+	}
+svg.leaflet-zoom-animated {
+	will-change: transform;
+}
+
+.leaflet-zoom-anim .leaflet-zoom-animated {
+	-webkit-transition: -webkit-transform 0.25s cubic-bezier(0,0,0.25,1);
+	   -moz-transition:    -moz-transform 0.25s cubic-bezier(0,0,0.25,1);
+	        transition:         transform 0.25s cubic-bezier(0,0,0.25,1);
+	}
+.leaflet-zoom-anim .leaflet-tile,
+.leaflet-pan-anim .leaflet-tile {
+	-webkit-transition: none;
+	   -moz-transition: none;
+	        transition: none;
+	}
+
+.leaflet-zoom-anim .leaflet-zoom-hide {
+	visibility: hidden;
+	}
+
+
+/* cursors */
+
+.leaflet-interactive {
+	cursor: pointer;
+	}
+.leaflet-grab {
+	cursor: -webkit-grab;
+	cursor:    -moz-grab;
+	cursor:         grab;
+	}
+.leaflet-crosshair,
+.leaflet-crosshair .leaflet-interactive {
+	cursor: crosshair;
+	}
+.leaflet-popup-pane,
+.leaflet-control {
+	cursor: auto;
+	}
+.leaflet-dragging .leaflet-grab,
+.leaflet-dragging .leaflet-grab .leaflet-interactive,
+.leaflet-dragging .leaflet-marker-draggable {
+	cursor: move;
+	cursor: -webkit-grabbing;
+	cursor:    -moz-grabbing;
+	cursor:         grabbing;
+	}
+
+/* marker & overlays interactivity */
+.leaflet-marker-icon,
+.leaflet-marker-shadow,
+.leaflet-image-layer,
+.leaflet-pane > svg path,
+.leaflet-tile-container {
+	pointer-events: none;
+	}
+
+.leaflet-marker-icon.leaflet-interactive,
+.leaflet-image-layer.leaflet-interactive,
+.leaflet-pane > svg path.leaflet-interactive,
+svg.leaflet-image-layer.leaflet-interactive path {
+	pointer-events: visiblePainted; /* IE 9-10 doesn't have auto */
+	pointer-events: auto;
+	}
+
+/* visual tweaks */
+
+.leaflet-container {
+	background: #ddd;
+	outline-offset: 1px;
+	}
+.leaflet-container a {
+	color: #0078A8;
+	}
+.leaflet-zoom-box {
+	border: 2px dotted #38f;
+	background: rgba(255,255,255,0.5);
+	}
+
+
+/* general typography */
+.leaflet-container {
+	font-family: "Helvetica Neue", Arial, Helvetica, sans-serif;
+	font-size: 12px;
+	font-size: 0.75rem;
+	line-height: 1.5;
+	}
+
+
+/* general toolbar styles */
+
+.leaflet-bar {
+	box-shadow: 0 1px 5px rgba(0,0,0,0.65);
+	border-radius: 4px;
+	}
+.leaflet-bar a {
+	background-color: #fff;
+	border-bottom: 1px solid #ccc;
+	width: 26px;
+	height: 26px;
+	line-height: 26px;
+	display: block;
+	text-align: center;
+	text-decoration: none;
+	color: black;
+	}
+.leaflet-bar a,
+.leaflet-control-layers-toggle {
+	background-position: 50% 50%;
+	background-repeat: no-repeat;
+	display: block;
+	}
+.leaflet-bar a:hover,
+.leaflet-bar a:focus {
+	background-color: #f4f4f4;
+	}
+.leaflet-bar a:first-child {
+	border-top-left-radius: 4px;
+	border-top-right-radius: 4px;
+	}
+.leaflet-bar a:last-child {
+	border-bottom-left-radius: 4px;
+	border-bottom-right-radius: 4px;
+	border-bottom: none;
+	}
+.leaflet-bar a.leaflet-disabled {
+	cursor: default;
+	background-color: #f4f4f4;
+	color: #bbb;
+	}
+
+.leaflet-touch .leaflet-bar a {
+	width: 30px;
+	height: 30px;
+	line-height: 30px;
+	}
+.leaflet-touch .leaflet-bar a:first-child {
+	border-top-left-radius: 2px;
+	border-top-right-radius: 2px;
+	}
+.leaflet-touch .leaflet-bar a:last-child {
+	border-bottom-left-radius: 2px;
+	border-bottom-right-radius: 2px;
+	}
+
+/* zoom control */
+
+.leaflet-control-zoom-in,
+.leaflet-control-zoom-out {
+	font: bold 18px 'Lucida Console', Monaco, monospace;
+	text-indent: 1px;
+	}
+
+.leaflet-touch .leaflet-control-zoom-in, .leaflet-touch .leaflet-control-zoom-out  {
+	font-size: 22px;
+	}
+
+
+/* layers control */
+
+.leaflet-control-layers {
+	box-shadow: 0 1px 5px rgba(0,0,0,0.4);
+	background: #fff;
+	border-radius: 5px;
+	}
+.leaflet-control-layers-toggle {
+	background-image: url(images/layers.png);
+	width: 36px;
+	height: 36px;
+	}
+.leaflet-retina .leaflet-control-layers-toggle {
+	background-image: url(images/layers-2x.png);
+	background-size: 26px 26px;
+	}
+.leaflet-touch .leaflet-control-layers-toggle {
+	width: 44px;
+	height: 44px;
+	}
+.leaflet-control-layers .leaflet-control-layers-list,
+.leaflet-control-layers-expanded .leaflet-control-layers-toggle {
+	display: none;
+	}
+.leaflet-control-layers-expanded .leaflet-control-layers-list {
+	display: block;
+	position: relative;
+	}
+.leaflet-control-layers-expanded {
+	padding: 6px 10px 6px 6px;
+	color: #333;
+	background: #fff;
+	}
+.leaflet-control-layers-scrollbar {
+	overflow-y: scroll;
+	overflow-x: hidden;
+	padding-right: 5px;
+	}
+.leaflet-control-layers-selector {
+	margin-top: 2px;
+	position: relative;
+	top: 1px;
+	}
+.leaflet-control-layers label {
+	display: block;
+	font-size: 13px;
+	font-size: 1.08333em;
+	}
+.leaflet-control-layers-separator {
+	height: 0;
+	border-top: 1px solid #ddd;
+	margin: 5px -10px 5px -6px;
+	}
+
+/* Default icon URLs */
+.leaflet-default-icon-path { /* used only in path-guessing heuristic, see L.Icon.Default */
+	background-image: url(images/marker-icon.png);
+	}
+
+
+/* attribution and scale controls */
+
+.leaflet-container .leaflet-control-attribution {
+	background: #fff;
+	background: rgba(255, 255, 255, 0.8);
+	margin: 0;
+	}
+.leaflet-control-attribution,
+.leaflet-control-scale-line {
+	padding: 0 5px;
+	color: #333;
+	line-height: 1.4;
+	}
+.leaflet-control-attribution a {
+	text-decoration: none;
+	}
+.leaflet-control-attribution a:hover,
+.leaflet-control-attribution a:focus {
+	text-decoration: underline;
+	}
+.leaflet-control-attribution svg {
+	display: inline !important;
+	}
+.leaflet-left .leaflet-control-scale {
+	margin-left: 5px;
+	}
+.leaflet-bottom .leaflet-control-scale {
+	margin-bottom: 5px;
+	}
+.leaflet-control-scale-line {
+	border: 2px solid #777;
+	border-top: none;
+	line-height: 1.1;
+	padding: 2px 5px 1px;
+	white-space: nowrap;
+	overflow: hidden;
+	-moz-box-sizing: border-box;
+	     box-sizing: border-box;
+
+	background: #fff;
+	background: rgba(255, 255, 255, 0.5);
+	}
+.leaflet-control-scale-line:not(:first-child) {
+	border-top: 2px solid #777;
+	border-bottom: none;
+	margin-top: -2px;
+	}
+.leaflet-control-scale-line:not(:first-child):not(:last-child) {
+	border-bottom: 2px solid #777;
+	}
+
+.leaflet-touch .leaflet-control-attribution,
+.leaflet-touch .leaflet-control-layers,
+.leaflet-touch .leaflet-bar {
+	box-shadow: none;
+	}
+.leaflet-touch .leaflet-control-layers,
+.leaflet-touch .leaflet-bar {
+	border: 2px solid rgba(0,0,0,0.2);
+	background-clip: padding-box;
+	}
+
+
+/* popup */
+
+.leaflet-popup {
+	position: absolute;
+	text-align: center;
+	margin-bottom: 20px;
+	}
+.leaflet-popup-content-wrapper {
+	padding: 1px;
+	text-align: left;
+	border-radius: 12px;
+	}
+.leaflet-popup-content {
+	margin: 13px 24px 13px 20px;
+	line-height: 1.3;
+	font-size: 13px;
+	font-size: 1.08333em;
+	min-height: 1px;
+	}
+.leaflet-popup-content p {
+	margin: 17px 0;
+	margin: 1.3em 0;
+	}
+.leaflet-popup-tip-container {
+	width: 40px;
+	height: 20px;
+	position: absolute;
+	left: 50%;
+	margin-top: -1px;
+	margin-left: -20px;
+	overflow: hidden;
+	pointer-events: none;
+	}
+.leaflet-popup-tip {
+	width: 17px;
+	height: 17px;
+	padding: 1px;
+
+	margin: -10px auto 0;
+	pointer-events: auto;
+
+	-webkit-transform: rotate(45deg);
+	   -moz-transform: rotate(45deg);
+	    -ms-transform: rotate(45deg);
+	        transform: rotate(45deg);
+	}
+.leaflet-popup-content-wrapper,
+.leaflet-popup-tip {
+	background: white;
+	color: #333;
+	box-shadow: 0 3px 14px rgba(0,0,0,0.4);
+	}
+.leaflet-container a.leaflet-popup-close-button {
+	position: absolute;
+	top: 0;
+	right: 0;
+	border: none;
+	text-align: center;
+	width: 24px;
+	height: 24px;
+	font: 16px/24px Tahoma, Verdana, sans-serif;
+	color: #757575;
+	text-decoration: none;
+	background: transparent;
+	}
+.leaflet-container a.leaflet-popup-close-button:hover,
+.leaflet-container a.leaflet-popup-close-button:focus {
+	color: #585858;
+	}
+.leaflet-popup-scrolled {
+	overflow: auto;
+	border-bottom: 1px solid #ddd;
+	border-top: 1px solid #ddd;
+	}
+
+.leaflet-oldie .leaflet-popup-content-wrapper {
+	-ms-zoom: 1;
+	}
+.leaflet-oldie .leaflet-popup-tip {
+	width: 24px;
+	margin: 0 auto;
+
+	-ms-filter: "progid:DXImageTransform.Microsoft.Matrix(M11=0.70710678, M12=0.70710678, M21=-0.70710678, M22=0.70710678)";
+	filter: progid:DXImageTransform.Microsoft.Matrix(M11=0.70710678, M12=0.70710678, M21=-0.70710678, M22=0.70710678);
+	}
+
+.leaflet-oldie .leaflet-control-zoom,
+.leaflet-oldie .leaflet-control-layers,
+.leaflet-oldie .leaflet-popup-content-wrapper,
+.leaflet-oldie .leaflet-popup-tip {
+	border: 1px solid #999;
+	}
+
+
+/* div icon */
+
+.leaflet-div-icon {
+	background: #fff;
+	border: 1px solid #666;
+	}
+
+
+/* Tooltip */
+/* Base styles for the element that has a tooltip */
+.leaflet-tooltip {
+	position: absolute;
+	padding: 6px;
+	background-color: #fff;
+	border: 1px solid #fff;
+	border-radius: 3px;
+	color: #222;
+	white-space: nowrap;
+	-webkit-user-select: none;
+	-moz-user-select: none;
+	-ms-user-select: none;
+	user-select: none;
+	pointer-events: none;
+	box-shadow: 0 1px 3px rgba(0,0,0,0.4);
+	}
+.leaflet-tooltip.leaflet-interactive {
+	cursor: pointer;
+	pointer-events: auto;
+	}
+.leaflet-tooltip-top:before,
+.leaflet-tooltip-bottom:before,
+.leaflet-tooltip-left:before,
+.leaflet-tooltip-right:before {
+	position: absolute;
+	pointer-events: none;
+	border: 6px solid transparent;
+	background: transparent;
+	content: "";
+	}
+
+/* Directions */
+
+.leaflet-tooltip-bottom {
+	margin-top: 6px;
+}
+.leaflet-tooltip-top {
+	margin-top: -6px;
+}
+.leaflet-tooltip-bottom:before,
+.leaflet-tooltip-top:before {
+	left: 50%;
+	margin-left: -6px;
+	}
+.leaflet-tooltip-top:before {
+	bottom: 0;
+	margin-bottom: -12px;
+	border-top-color: #fff;
+	}
+.leaflet-tooltip-bottom:before {
+	top: 0;
+	margin-top: -12px;
+	margin-left: -6px;
+	border-bottom-color: #fff;
+	}
+.leaflet-tooltip-left {
+	margin-left: -6px;
+}
+.leaflet-tooltip-right {
+	margin-left: 6px;
+}
+.leaflet-tooltip-left:before,
+.leaflet-tooltip-right:before {
+	top: 50%;
+	margin-top: -6px;
+	}
+.leaflet-tooltip-left:before {
+	right: 0;
+	margin-right: -12px;
+	border-left-color: #fff;
+	}
+.leaflet-tooltip-right:before {
+	left: 0;
+	margin-left: -12px;
+	border-right-color: #fff;
+	}
+
+/* Printing */
+	
+@media print {
+	/* Prevent printers from removing background-images of controls. */
+	.leaflet-control {
+		-webkit-print-color-adjust: exact;
+		color-adjust: exact;
+		}
+	}

APPL/FAC/fac_report.asp

@@ -7,15 +7,20 @@
     Description:    Voer een nieuwe stijl rapport uit (toon het zoekblok/list body)
                     Ook het tonen van de grafiek gebeurt in dit bestand.
     Parameters:     usrrap_key van een rapport (voorkeur)
+                    of rapcode, de fac_usrrap_code een rapport.
                     of rap_name, de naam van de view van een rapport. Deze moet dan wel uniek zijn
                     mode=list optioneel, toon het rapport direct zonder zoekblok
-    Note:           Procedure rapporten gaan via de oude code fac_usrrap_search.asp
+    Note:           "Procedure rapporten" gaan via de oude code fac_usrrap_search.asp
 
 */
+
+CSP_EXTRADATA = 1; // eventuele S("csp_header_extradata") ook toestaan voor tilemap
 %>
 <!-- #include file="../scf/scaffolding.inc" -->
 <!-- #include file="../api2/model_reports.inc" -->
 <!-- #include file="../Shared/xml_converter.inc" -->
+<!-- #include file="./fac_report_graph.inc" -->
+<!-- #include file="./fac_report_lfmap.inc" -->
 <%
     var usrrap_key = getQParamInt("usrrap_key", -1);
     var widget_height = getQParamInt("widget_height", null);
@@ -189,7 +194,15 @@
     {
         var graph = (rapport.list.autoGraph & 2) == 2;
         var graph_type = getQParamInt("scf_graph_type", graph?rapport.graph_type.id:null);
-        if (mode == "list" && graph_type >= 1)
+        if (mode == "list" && graph_type == 6)
+        {
+            FCLTHeader.Requires({ plugins: ["jQuery"],
+                                  js: [ "./leaflet/leaflet.js"],
+                                  css: ["./leaflet/leaflet.css"]});
+            // Overrule scaffolding_list
+            scaffolding_list = fac_usrrap_list_map;
+        }
+        else if (mode == "list" && graph_type >= 1)
         {
             FCLTHeader.Requires({plugins: ["jQuery"],
                                  js: ["../Localscripts/jqPlot/dist/excanvas.js",
@@ -268,720 +281,6 @@
     params.urllink = {index: urllink_index, col: urllink_col, link: urllink};
 
     scaffolding(rapport, params);
-
-function fac_usrrap_list_graph (model, scf_params)
-{
-    var transit = "";
-    if ("transit" in scf_params)
-        transit = "&" + scf_params.transit.name + "=" + safe.url(scf_params.transit.val);
-
-    var xxx_params = { filter : scf_params.filter || shared.qs2json(model),
-                       columns: scf_params.list.columns,
-                       groupby: scf_params.list.groupby,
-                       scf_graph: "on",
-                       urllink: scf_params.urllink };
-
-    var pivot = ("scf_pivot" in xxx_params.filter)? xxx_params.filter.scf_pivot == 1 : model.list.autoPivot&2
-
-    // Als er een url-key kolom op het eind aanwezig is dan deze kolom niet meetellen.
-    var pivotcol;
-    if (pivot)
-      pivotcol = xxx_params.columns[xxx_params.columns.length - 2 - (urllink_index == -1? 0 : 1)];
-
-    // Voor een rapport heb je minstens twee kolommen nodig en met draaitabel drie kolommen
-    if (( pivot && ((urllink_index > -1 && scf_params.list.columns.length < 4)      // Draaitabel (Ja), Klik-actie (Ja).
-                || (urllink_index == -1 && scf_params.list.columns.length < 3))) || // Draaitabel (Ja), Klik-actie (Nee).
-        (!pivot && ((urllink_index > -1 && scf_params.list.columns.length < 3)      // Draaitabel (Nee), Klik-actie (Ja).
-                || (urllink_index == -1 && scf_params.list.columns.length < 2))))   // Draaitabel (Nee), Klik-actie (Nee).
-      shared.simpel_page(L("lcl_usrrap_invalid_more_columns"));
-
-    var xxx_array = model.REST_GET(xxx_params);
-    // Let op bij draaitabel met pivot kolommen, xxx_params en daarmee ook scf_params.list.columns zijn nu ook aangepast.
-    var xxx_columns = (xxx_params.filter.columns ? xxx_params.filter.columns.split(",") : null);
-
-    graphData = { teller: xxx_array.length
-                , arr_x: []
-                , arr_y: []
-                , arr_xy: []
-                };
-
-    graphAxes = { url: urllink_col? urllink_col : null
-                , xas: { naam: model.fields[scf_params.list.columns[0]].label, dbs: model.fields[scf_params.list.columns[0]].dbs }
-                , yas: []
-                , zas: { naam: ((pivot && xxx_columns && xxx_columns[2]) ? model.fields[xxx_columns[2]].label : null)}
-                };
-
-    for (var c = 1; c < scf_params.list.columns.length; c++)
-    {
-        if (scf_params.list.columns[c] != urllink_col)
-        {
-          graphData.arr_y.push([]);
-          graphAxes.yas.push({ naam: model.fields[scf_params.list.columns[c]].label });
-        }
-    }
-
-    var typX = model.fields[scf_params.list.columns[0]].orgtyp;
-    var lineRenderer = typX=="date" || typX=="datetime";
-
-    var nn_data = xxx_array.length * scf_params.list.columns.length;
-    if (nn_data > 250000)
-    {
-        __DoLog("Te veel ({0}*{1}={2}) datapunten voor grafiek.".format(xxx_array.length, scf_params.list.columns.length, nn_data));
-        shared.simpel_page("Too many ({0}*{1}={2}) datapoints for graph.".format(xxx_array.length, scf_params.list.columns.length, nn_data));
-    }
-
-    for (var i = 0; i < xxx_array.length; i++)
-    {
-      var newtyp = model.fields[scf_params.list.columns[0]].typ;
-      var txtX = xxx_array[i][scf_params.list.columns[0]];
-      if (newtyp == "datetime")
-          txtX = toDateTimeString(txtX);
-      else if (newtyp == "time")
-          txtX = toTimeString(txtX);
-      else if (typeof txtX == "date" || txtX instanceof Date)
-          txtX = toDateString(txtX);
-
-      graphData.arr_x.push(txtX);
-
-      for (var c = 1; c < scf_params.list.columns.length; c++)
-      {
-        if (scf_params.list.columns[c] != urllink_col)
-        { // Als (urllink_index < c) dan moet er 1 van de index van arr_y afgetrokken worden want voor de url wordt geen y-waarde weergegeven.
-          // Als er geen draaitabel actief is dan staat de url-key kolom aan het eind van de kolommen en heeft dan de hoogste index. Er geldt dan altijd (urllink_index > c).
-
-          var ywaarde = pivot && xxx_array[i][scf_params.list.columns[c]]? xxx_array[i][scf_params.list.columns[c]] : xxx_array[i][scf_params.list.columns[c]];
-          var ywaarde_1 = pivot && xxx_array[i][scf_params.list.columns[c - 1]]? xxx_array[i][scf_params.list.columns[c - 1]] : xxx_array[i][scf_params.list.columns[c - 1]];
-          if (graph_type != 4)
-          { // Voor de lijngrafiek moet een null waarde niet getoond worden en een 0 waarde wel.
-            ywaarde = ywaarde || 0;
-          }
-          graphData.arr_y[c - 1].push(ywaarde);
-          graphData.arr_xy.push([ywaarde_1, ywaarde] || 0);
-        }
-      }
-    }
-
-    var aantal_scf = (scf_params.list.columns.length - 1); // Aantal subcategorie<69>n (series)
-    var aantal_xxx = 0;
-    for (var i = 0; i < xxx_array.length; i++)
-    {
-      aantal_xxx += xxx_array[i].scf_subaantal; // Aantal subcategorie<69>n per x-as categorie.
-    }
-
-    var teller;
-    var limiet = [model.limit0 , model.limit1, model.limit2, model.limit3];
-    if (graph_type == 2 || graph_type == 5)
-    { // Er moeten minstens twee aangrenzende limieten zijn ingevuld. Als limiet1 is ingevuld, dan moet ook limiet0 of limiet3 zijn ingevuld.
-      for (var k = 0; k < limiet.length; k++)
-      {
-        if (limiet[k] != null)
-        {
-          teller = k;
-          break;
-        }
-      }
-      if (teller != null && (teller == 3 || limiet[teller + 1] == null))
-      {
-        shared.simpel_page(L("lcl_usrrap_invalid_limits"));
-      }
-    }
-
-    // Testen of van extern toe te voegen gegevens een correct JSON format bevat.
-    rapport.graph_options = rapport.graph_options || "{}";
-    rapport.default_options = S("udr_graph_default_json") || "{}";
-    var test = 0;
-    try
-    {
-        test = 1;
-        var x_1 = JSON.parse(rapport.graph_options);
-        test = 2;
-        var x_1 = JSON.parse(rapport.default_options);
-    }
-    catch(e)
-    {
-        var description = (e.description ? ": " + e.description : "");
-        var warning = L("lcl_dirty")+ " JSON{0} '{1}'" + description;
-        switch (test)
-        {
-            case 1: shared.internal_error( warning.format("", L("lcl_usrrap_graphoptions")) );
-            case 2: shared.internal_error( warning.format(" "+L("lcl_fac_setting"), "udr_graph_default_json"));
-        }
-    }
-
-    graphInit = { title           : model.records_title
-                , graph_type      : graph_type
-                , maxrows         : 0
-                , limiet          : [model.limit0 , model.limit1, model.limit2, model.limit3]
-                , report_options  : JSON.parse(rapport.graph_options) || {}
-                , default_options : JSON.parse(rapport.default_options) || {}
-                , sql_orderby     : "" //oRs("fac_usrgraph_orderby").Value || ""
-                //, sql : sql_select
-                };
-    var asWidget = getQParamInt("asWidget", 0) == 1;
 %>
-<html<%=asWidget ? " style=\"overflow:hidden\"" : ""%>>
-<head>
-<%  FCLTHeader.Generate(); %>
-    <script>
-    function json_reviver(nm, val)
-    {
-        // JSON.parse ondersteund niet het gebruik van functienamen binnen een object.
-        // Door het dan als een string "te_gebruiken_functie" te schrijven heb je wel een geldig json-object.
-        // In deze functie wordt tijdens het parsen gezocht op een van de bekende functiename voor jqplot en dan wordt alleen de te_gebruiken_functie terug gegeven.
-        // Na het parsen bevat het json-object wel de te_gebruiken_functie.
-        if (val && (typeof val == "string"))
-        {
-            switch(val)
-            {
-                case "$.jqplot.Highlighter":                val = $.jqplot.Highlighter; break;
-                case "$.jqplot.PieRenderer":                val = $.jqplot.PieRenderer; break;
-                case "$.jqplot.BarRenderer":                val = $.jqplot.BarRenderer; break;
-                case "$.jqplot.CanvasAxisLabelRenderer":    val = $.jqplot.CanvasAxisLabelRenderer; break;
-                case "$.jqplot.CanvasAxisTickRenderer":     val = $.jqplot.CanvasAxisTickRenderer; break;
-                case "$.jqplot.CanvasOverlay":              val = $.jqplot.CanvasOverlay; break;
-                case "$.jqplot.CanvasTextRenderer":         val = $.jqplot.CanvasTextRenderer; break;
-                case "$.jqplot.CategoryAxisRenderer":       val = $.jqplot.CategoryAxisRenderer; break;
-                case "$.jqplot.MeterGaugeRenderer":         val = $.jqplot.MeterGaugeRenderer; break;
-                case "$.jqplot.PointLabels":                val = $.jqplot.PointLabels; break;
-            }
-        }
-        return val;
-    }
-    var pivot = <%=pivot? 1 : 0%> == 1;
-    var JSONdata = "<%=safe.jsstring(JSON.stringify(graphInit))%>";
-    var l_init = JSON.parse(JSONdata, json_reviver);
-    var report_options = l_init.report_options;
 
-    var JSONdata = "<%=safe.jsstring(JSON.stringify(graphAxes))%>";
-    var l_axes = JSON.parse(JSONdata);
-
-    var JSONdata = "<%=safe.jsstring(JSON.stringify(graphData))%>";
-    var l_data = JSON.parse(JSONdata);
-
-    var l_arr_x = [];
-    for (var x = 0; x < l_data.arr_x.length; x++)
-    {
-      if (l_data.arr_x[x] === null || l_data.arr_x[x] == "")
-          l_arr_x[x] = " ";
-      else
-          l_arr_x[x] = l_data.arr_x[x];
-    }
-    var l_arr_y = l_data.arr_y;
-    var l_xas_naam = l_axes.xas.naam;
-    var l_xas_url = l_axes.url;
-    var l_xas_dbs = l_axes.xas.dbs;
-    var l_yas_naam = (l_axes.zas.naam ? l_axes.zas.naam : l_axes.yas[0].naam);
-    var l_yas_count = l_axes.yas.length;
-
-    var l_colors = (l_yas_count==1?<%=S("udr_graph_colors1")%>:<%=S("udr_graph_colors2")%>);
-
-    var l_labels = [];
-    for (var y = 0; y < l_axes.yas.length; y++)
-    {
-      l_labels.push(l_axes.yas[y].naam || "&nbsp;");
-    }
-
-    // Als niet alle resultaten getoond dienen te worden moet je ook kijken welke labels er getoond dienen te worden.
-    // Omschrijving x-as moet gekoppeld worden aan label omschrijving.
-    // De rapportagemaker is verantwoordelijk dat er niet twee subproductgroepen met dezelfde omschrijving zijn?
-    var JSONdata = "<%=safe.jsstring(JSON.stringify(xxx_array))%>";
-    var l_xxxlabel = JSON.parse(JSONdata);
-    var l_urllink = "<%=safe.htmlattr(urllink)%>";
-    var usrrap_maxresults = <%=usrrap_maxresults%>;
-
-    $.jqplot.config.enablePlugins = true;
-    var handler = function(ev, gridpos, datapos, neighbor, plot)
-                  {
-                    if (neighbor)
-                    {
-                      if (pivot && l_xxxlabel[neighbor.pointIndex].scf_urlkey)
-                      {
-                        var seriename = l_axes.yas[neighbor.seriesIndex].naam;
-                        var url_key = l_xxxlabel[neighbor.pointIndex].scf_urlkey[seriename];
-                        FcltMgr.openDetail(l_urllink + url_key, l_arr_x[neighbor.pointIndex]);
-                      }
-                      else if (l_xxxlabel[neighbor.pointIndex][l_xas_url])
-                      {
-                        var url_key = l_xxxlabel[neighbor.pointIndex][l_xas_url];
-                        FcltMgr.openDetail(l_urllink + url_key, l_arr_x[neighbor.pointIndex]);
-                      }
-                    }
-                  };
-    $.jqplot.eventListenerHooks.push(["jqplotClick", handler]);
-<%
-    switch (graphInit.graph_type)
-    {
-        case 1: // BarChart
-%>
-            var l_colors = (l_yas_count == 1?<%=S("udr_graph_colors1")%> : <%=S("udr_graph_colors2")%>);
-            if (report_options.seriesColors && report_options.seriesColors.lenght > 0)
-                l_colors = report_options.seriesColors;
-            var effectivedata = l_arr_y;
-            var props = { seriesDefaults:{ renderer: $.jqplot.BarRenderer
-                                         , rendererOptions: { fillToZero: true }
-                                         , pointLabels: { show: false }
-                                         }
-                        , stackSeries: true
-                        //, series:[{label: "a"}, {label: "b"}]
-                        , legend: { show: (l_yas_count > 1)
-                                  , placement: (l_yas_count > 1? "outsideGrid" : "insideGrid")
-                                  , location: "ne"
-                                  , labels: l_labels
-                            }
-                        , title: l_init.title
-                        , seriesColors: l_colors
-                        , axes: { xaxis: { renderer: $.jqplot.CategoryAxisRenderer
-                                         , ticks: l_arr_x
-                                         , label: l_xas_naam
-                                         , tickRenderer: $.jqplot.CanvasAxisTickRenderer
-                                         , tickOptions: { enableFontSupport: true
-                                                        , angle: 30
-                                                        , fontSize: "9pt"
-                                                        }
-                                         }
-                                , yaxis: { label: l_yas_naam
-                                         , tickOptions: { formatString: "%.1f"
-                                                        }
-                                         }
-                                }
-                        , highlighter: { show: true
-                                       , showMarker: false
-                                       , tooltipAxes: "y"
-                                       , tooltipLocation: "n"
-                                       , formatString: "<table style='background-color: #cccccc' class='xjqplot-highlighter'><tr><td>%s</td></tr></table>"
-                                       }
-                        };
-<%
-            break;
-        case 2:  // MeterGauge
-%>
-            var l_x = l_arr_x[0];
-            var l_y = l_arr_y[0];
-
-            var effectivedata = [ [100 * l_x / l_y] ];
-            var l_label = l_init.title + l_x + "/"  + l_y;
-            var l_limits = [];
-            var l_colors = <%=S("udr_graph_gauge_colors")%>;
-
-            if (typeof l_arr_x[0] == "string")
-            {
-                effectivedata = [ l_arr_y[0] ];
-                l_label = l_init.title + " " + l_x + ": "  + l_y;
-            }
-
-            if (report_options.seriesDefaults && report_options.seriesDefaults.rendererOptions)
-            {
-              if ("intervals" in report_options.seriesDefaults.rendererOptions)
-              {
-                l_limits = report_options.seriesDefaults.rendererOptions.intervals;
-                delete report_options.seriesDefaults.rendererOptions.intervals; // Voorkom dat deze array de "effectiveprops" overschrijft.
-              }                                                                 // De eerste waarde in het array wordt alleen gebruikt voor het minimum.
-              if ("label" in report_options.seriesDefaults.rendererOptions)
-              {
-                l_label = report_options.seriesDefaults.rendererOptions.label;
-                delete report_options.seriesDefaults.rendererOptions.label;
-              }
-            }
-
-            if (l_limits.length < 3)
-              l_limits = l_init.limiet;
-
-            var l_limit_min = l_limits[0];
-            var l_limit_max = l_limits[l_limits.length-1];
-            l_limits.splice(0,1); // haal alleen de eerste waarde weg.
-            if (l_limits[0] == null && l_limits[1] == null && l_limits[2] == null)
-              l_limits = []; // Dan wordt er in ieder geval een GRIJZE Dashboard getoond.
-
-            var props = { title: l_init.title
-                        , seriesDefaults: { renderer: $.jqplot.MeterGaugeRenderer
-                                          , rendererOptions: { showTicks: true
-                                                             , showTickLabels: true
-                                                             , label: l_label
-                                                             , labelPosition: "bottom"
-                                                             , labelHeightAdjust: -5
-                                                             , background: "#f0f0f0"
-                                                             , tickColor: "#333333"
-                                                             , ringColor: "#333333"
-                                                             , ringWidth: 3
-                                                             , min: l_limit_min    // limiet0
-                                                             , max: l_limit_max    // limiet3
-                                                             , intervals: l_limits // [limiet1, limiet2, limiet3]
-                                                             , intervalColors: l_colors
-                                                             }
-                                          }
-                        };
-<%
-            break;
-        case 3:  // pie-chart
-%>
-            var l_colors = <%=S("udr_graph_pie_colors")%>;
-            var effectivedata = [l_data.arr_xy];
-            var props = { title: l_init.title
-	                      , seriesColors: l_colors
-	                      , seriesDefaults: { renderer:$.jqplot.PieRenderer
-                                          , showDataLabels: true
-                                          , rendererOptions: { fill: true
-                                                             , showDataLabels: true
-                                                             , dataLabelPositionFactor: 1.2
-                                                             , dataLabelCenterOn: true
-                                                             }
-                                          }
-                        , highlighter: { show: false
-                                       , useAxesFormatters: false
-                                       }
-                        , legend: { show: true
-                                  , escapeHtml: true
-                                  , location: "ne"
-                                  }
-                        , grid: { drawBorder: false
-                                , shadow : false
-                                , background: "#ffffff"
-                                }
-                        };
-<%
-            break;
-        case 4: // LineChart
-%>
-            var l_labels = [];
-            for (y=0; y<l_axes.yas.length; y++)
-            {
-              l_labels.push(l_axes.yas[y].naam);
-            }
-            var l_colors = (l_yas_count == 1? <%=S("udr_graph_colors1")%> : <%=S("udr_graph_colors2")%>);
-            if (report_options.seriesColors && report_options.seriesColors.lenght > 0)
-                l_colors = report_options.seriesColors;
-            var effectivedata = l_arr_y;
-            var props = { seriesDefaults: { pointLabels: { show: true
-                                                         }
-                                          , breakOnNull: true
-
-                                          }
-                        , stackSeries: false
-                        , title: l_init.title
-                        , seriesColors: l_colors
-                        , legend: { show: (l_yas_count > 1)
-                                  , placement: (l_yas_count > 1?"outsideGrid" : "insideGrid")
-                                  , location: "ne"
-                                  , labels: l_labels
-                                  }
-                        , axes: { xaxis: { renderer: $.jqplot.CategoryAxisRenderer
-                                         , ticks: l_arr_x
-                                         , label: l_xas_naam
-                                         , tickRenderer: $.jqplot.CanvasAxisTickRenderer
-                                         , tickOptions: { enableFontSupport: true
-                                                        , angle: 30
-                                                        }
-                                         }
-                                , yaxis: { label: (l_yas_count == 1? l_yas_naam : "")
-                                         , tickOptions: { formatString: "%.1f"
-                                                        }
-                                         }
-                                }
-                        , highlighter: { show: true
-                                       , showMarker: false
-                                       , tooltipAxes: "y"
-                                       , tooltipLocation: "n"
-                                       , formatString: "<table style='background-color: #cccccc' class='xjqplot-highlighter'><tr><td>%s</td></tr></table>"
-                                       }
-                        };
-<%
-            break;
-        default:
-            break;
-    }
-
-    if (graphInit.graph_type == 5) // blockgraph
-    {
-%>
-      var l_limits = [];
-      var l_intervalColors = [];
-
-      if (report_options.seriesDefaults)
-      {
-        if ("intervals" in report_options.seriesDefaults.rendererOptions)
-        {
-          l_limits = report_options.seriesDefaults.rendererOptions.intervals;
-          delete report_options.seriesDefaults.rendererOptions.intervals; // Voorkom dat deze array de "effectiveprops" overschrijft.
-        }                                                                 // De eerste waarde in het array wordt alleen gebruikt voor het minimum.
-
-        if ("intervalColors" in report_options.seriesDefaults.rendererOptions)
-        {
-          l_intervalColors = report_options.seriesDefaults.rendererOptions.intervalColors;
-          delete report_options.seriesDefaults.rendererOptions.intervalColors; // Voorkom dat deze array de "effectiveprops" overschrijft.
-        }                                                                      // De eerste waarde in het array wordt alleen gebruikt voor het minimum.
-       }
-
-      if (l_limits.length < 3 &&l_init.limiet && l_init.limiet.length > 0 )
-        l_limits = l_init.limiet;
-
-      if (l_intervalColors.length != 3)
-        l_intervalColors = ["red"," orange", "green"];
-
-      var pivot = <%=pivot? 1 : 0%> == 1;
-      $(function ()
-      {
-        for (var index = 0; index < l_data.teller; index++)
-        {
-          var dialogtxt = "";
-<%        if (pivot)
-          { %>
-            var teller = 0;
-            var equal = true;
-            var waarde;
-            for (var x in l_xxxlabel[index].scf_urlkey)
-            {
-              if (teller == 0)
-                waarde = l_xxxlabel[index].scf_urlkey[x];
-              else
-                equal = (waarde == l_xxxlabel[index].scf_urlkey[x]);
-              teller++;
-              if (!equal) break;
-            }
-            if (!equal)
-            {
-              dialogtxt = "<div id='scfcolpicker" + index + "' class='scfcolpicker scfcolpicker" + index + "' style='display:none'><table width='100%'>";
-              dialogtxt += "<thead><tr><th><%=pivotcol.substr(0, 1).toUpperCase() + pivotcol.substr(1, pivotcol.length - 1)%></th></tr></thead>";
-              var j = 0;
-              for (var s in l_xxxlabel[index].scf_urlkey)
-              {
-                dialogtxt += "<tr OnClick='openArrUrl(" + index + ", \"" + s + "\")'><td>" + s + "</td></tr>";
-                j++;
-              }
-              dialogtxt += "</table></div>";
-            }
-<%        } %>
-
-          // Als er intervallen zijn dan de kleur bepalen aan de hand van de waarde
-          // anders een kleur gebruiken uit S(udr_graph_colors1).
-          var bg_color = (l_limits.length ? colorValue(index) : l_colors[index % l_colors.length]);
-
-          $("#myGraph")
-          .append(
-                   $('<div class="blockgraph">').css({backgroundColor: bg_color})
-                                                .html($("<span class='blockgraph-title'>").text(l_data.arr_x[index]).append("<br>"))
-                                                .append($("<span class='blockgraph-value'>").text(new Intl.NumberFormat().format(arrYValue(index).toFixed(1))))
-                                                .append(dialogtxt)
-                                                .click({index: index},
-                                                       function(event)
-                                                       {
-                                                         $(".scfcolpicker" ).hide(); // Eerst alle scfcolpicker popup schermen verbergen.
-                                                         var teller = 0;
-                                                         var equal = true;
-                                                         var waarde;
-                                                         for (var x in l_xxxlabel[event.data.index].scf_urlkey)
-                                                         {
-                                                           if (teller == 0)
-                                                             waarde = l_xxxlabel[event.data.index].scf_urlkey[x];
-                                                           else
-                                                             equal = (waarde == l_xxxlabel[event.data.index].scf_urlkey[x]);
-                                                           teller++;
-                                                           if (!equal) break;
-                                                         }
-
-                                                         if (pivot)
-                                                         {
-                                                           if (equal)
-                                                           {
-                                                             var url_key = waarde;
-                                                             FcltMgr.openDetail(l_urllink + url_key, l_arr_x[event.data.index]);
-                                                           }
-                                                           else
-                                                           {
-                                                             event.stopPropagation();
-                                                             $("#scfcolpicker" + event.data.index).show();
-                                                             updateTableHeaders();
-                                                             $("#scfcolpicker" + event.data.index).css("width", $("#scfcolpicker" + event.data.index + " table").width());
-                                                             if (event.pageX < ($("#myGraph").width()/2))
-                                                               $("#scfcolpicker" + event.data.index).css("left", 0);
-                                                             else
-                                                               $("#scfcolpicker" + event.data.index).css("right", $("#scfcolpicker" + event.data.index).width() - $(".blockgraph").width() + 20);
-                                                           }
-                                                         }
-                                                         else
-                                                         {
-                                                           var url_key = l_xxxlabel[event.data.index][l_xas_url];
-                                                           FcltMgr.openDetail(l_urllink + url_key, l_arr_x[event.data.index]);
-                                                         }
-                                                       }
-                                                      )
-                 )
-          .click(function(event){$(".scfcolpicker").hide();})
-          FcltMgr.resized(window);
-        }
-
-        $("#searchbody").click(function()
-        {
-          $(".scfcolpicker").hide();
-        });
-
-        $(".scfcolpicker").click(function(event)
-        {
-          event.stopPropagation();
-        });
-      });
-
-      function arrYValue(index)
-      {
-        var value = 0;
-        if (typeof l_data.arr_y[0] == "object")
-        {
-          for (var ix = 0; ix < l_data.arr_y.length; ix++)
-          {
-            value += l_data.arr_y[ix][index];
-          }
-        }
-        else
-        {
-          value = l_data.arr_y[index];
-        }
-        return value;
-      }
-
-      function colorValue(l_indexvalue)
-      {
-        var color;
-        var plimits = [];
-        var oplopend = true;
-        var teller;
-
-        for (var k = 0; k < l_limits.length; k++)
-        {
-          if (l_limits[k] != null)
-          {
-            teller = k;
-            break;
-          }
-        }
-        // Er is al getest of er twee opeenvolgende limieten zijn ingevoerd (serverside).
-        if (l_limits[teller] > l_limits[teller+1])
-          oplopend = false;
-
-        // Kleur bepalen van de tegel door naar de grenswaarden te kijken.
-        var yvalue = arrYValue(l_indexvalue).toFixed(1);
-        if (( oplopend && yvalue < l_limits[0]) ||
-            (!oplopend && (l_limits[0] != null && yvalue > l_limits[0])))                                    // Grenswaarde -/Rood.
-          color = "gray";                                                           // Grijs.
-        else if (( oplopend && yvalue < l_limits[1]) ||
-                 (!oplopend && (l_limits[1] != null && yvalue > l_limits[1])))                               // Grenswaarde Rood/Orange.
-          color = l_intervalColors[0];                                              // Rood.
-        else if (( oplopend && (l_limits[2] == null || yvalue < l_limits[2])) ||
-                 (!oplopend && yvalue > l_limits[2]))                               // Grenswaarde Orange/Groen.
-          color = l_intervalColors[1];                                              // Orange.
-        else if (( oplopend && (l_limits[3] == null || yvalue <= l_limits[3])) ||
-                 (!oplopend && (l_limits[3] == null || yvalue >= l_limits[3])))     // Grenswaarde Groen/-.
-          color = l_intervalColors[2];                                              // Groen
-        else
-          color = "gray";                                                           // Grijs
-
-        return color;
-      }
-
-      function openArrUrl(xindex, yindex)
-      {
-        $("#scfcolpicker" + xindex).hide();
-        FcltMgr.openDetail(l_urllink + l_xxxlabel[xindex].scf_urlkey[yindex], l_arr_x[xindex]);
-      }
-<%  }
-    else
-    { %>
-      var effectiveprops = $.extend(true, props, report_options);
-
-      $(function ()
-      {
-        if (effectivedata.length && effectivedata[0].length)
-        {
-          plot1 = $.jqplot( "myGraph"
-                          , effectivedata
-                          , effectiveprops
-                          );
-        }
-        else
-        {
-          document.getElementById("myGraph").innerHTML = "<p><%=L('lcl_empty_rstable')%></p>";
-        }
-
-        // Pointer array "rows" met referenties naar de legenda regels. Rows is dus geen kopie (clone) van de legenda.
-        var rows = $(".jqplot-table-legend tr");
-
-        // Array met legenda's op alfabetische volgorde zetten.
-        rows.sort(function(a, b)
-                  {
-                    return $(a).children().last().text().localeCompare($(b).children().last().text());
-                  });
-
-        if (<%=graphInit.graph_type%> == 1)
-        {
-         // Verschuif de regels op de juiste plek en verberg de regels die niet gebruikt worden.
-         $.each(rows, function(index, item)
-                      {
-                        if (usrrap_maxresults)
-                        { // Kijken of alle labels wel getoond dienen te worden.
-                          var xas_waarde;
-                          var label = item.lastChild.innerText;
-                          for (var k = 0; k < l_xxxlabel.length; k++)
-                          {
-                            if (l_xxxlabel[k][label])
-                            { // pivot bestaat
-                              xas_waarde = l_xxxlabel[k][l_xas_dbs.toLowerCase()];
-                              break; // Gevonden
-                            }
-                          }
-                          var found = false;
-                          for (var k = 0; k < l_data.arr_x.length; k++)
-                          {
-                            if (xas_waarde && l_data.arr_x[k] == xas_waarde)
-                            { // subxas_waarde bstaat.
-                              found = true;
-                              break; // Gevonden
-                            }
-                          }
-                          $(".jqplot-table-legend tr").parent().append(item); // De parent is table (of tbody).
-                          if (!found)
-                          { // De x-as waarde was niet aanwezig in de lijst die wordt weergegeven.
-                            // Verwijderen van een item uit rows lijst die gebruikt wordt in de each is niet een goed idee (al lijkt het op het eeste gezicht te werken).
-                            // Het kan onverwachte gebeurtenissen opleveren en dat willen we voorkomen.
-                            // Daarom maar verbergen.
-                            $(item).hide();
-                          }
-                          else
-                            $(".jqplot-table-legend tr").parent().append(item); // De parent is table (of tbody).
-                        }
-                        $(".jqplot-table-legend tr").parent().append(item); // De parent is table (of tbody).
-                      });
-        }
-      });
-
-      function toImg()
-      {
-        var imgData = $("#myGraph").jqplotToImageStr({});
-        document.getElementById("myGraph").innerHTML = "<img alt='<%=safe.htmlattr(L("lcl_menu_fac_graphs"))%>' src=" + imgData + ">";
-        $("#toImgButton").hide(); //untested
-        FcltMgr.alert(L("lcl_viewimagealert"));
-      }
-<%  }  %>
-
-    </script>
-</head>
-<body id="listbody">
-    <%
-        var nobuttons = getQParamInt("nobuttons", 0) == 1;
-        var noheader = getQParamInt("noheader", 0) == 1;
-        var buttons = [];
-        if(!nobuttons && graphInit.graph_type != 5)
-            buttons.push({ icon: "fa-file-image", title: L("lcl_openimage"), action: "toImg()", id: "toImgButton" });
-        if (!noheader)
-            IFRAMER_HEADER(model.records_title, buttons);
-        var mygraph_height = ((widget_height != null) ? widget_height : 500) - (!noheader && buttons.length ? 32 : 0);
-        if (graphInit.graph_type == 5)
-        {
-    %>
-            <div id="myGraph"></div>
-<%      } else { %>
-            <div id="myGraph" style="height:<%=mygraph_height%>px;" ></div>
-<%      } %>
-      </body>
-    </html>
-<%
-    }
-%>
 <% ASPPAGE_END(); %>

APPL/FAC/fac_report_lfmap.inc

@@ -0,0 +1,294 @@
+<% /*
+    $Revision$
+    $Id$
+
+    File            lfmap.inc
+    Description:    Toon een rapport als kaart/plattegrond
+    Note:           Globale variabele 'rapport' is al gezet
+*/
+
+function fac_usrrap_list_map(model, scf_params)
+{
+    var coltitle = getQParam("coltitle", "title");
+    if (!(coltitle in rapport.fields))
+    {
+        coltitle = scf_params.list.columns[0]; // eerste kolom
+    }
+    var colwaarde = getQParam("colwaarde", "waarde");
+    if (!(colwaarde in rapport.fields))
+    {
+        colwaarde = scf_params.list.columns[1]; // Tweede kolom
+    }
+    var colurl = getQParam("colurl", null);
+
+    var transit = "";
+    if ("transit" in scf_params)
+        transit = "&" + scf_params.transit.name + "=" + safe.url(scf_params.transit.val);
+
+    var xxx_params = { filter : scf_params.filter || shared.qs2json(model),
+                       columns: scf_params.list.columns,
+                       groupby: scf_params.list.groupby,
+                       urllink: scf_params.urllink };
+
+    xxx_params.filter.showall = 1;
+
+    if (!("coordx" in rapport.fields))
+    {   // eerst template toevoegen
+        rapport.fields["coordx"] =
+            {
+                "dbs": "coordx",
+                "label": "Coordx",
+                "orglabel": "Coordx",
+                "fixedlabel": false,
+                "manual": false,
+                "sql": " komt zo ",
+                "typ": "float",
+                "orgtyp": "float",
+                "group": {
+                    "id": "G",
+                    "name": "N.v.t."
+                },
+                "sorting": {
+                    "id": 3,
+                    "name": "Automatisch"
+                },
+                "visible": "I"
+            };
+        rapport.fields["coordy"] =
+            {
+                "dbs": "coordy",
+                "label": "Coordy",
+                "orglabel": "Coordy",
+                "fixedlabel": false,
+                "manual": false,
+                "sql": " komt zo ",
+                "typ": "float",
+                "orgtyp": "float",
+                "group": {
+                    "id": "G",
+                    "name": "N.v.t."
+                },
+                "sorting": {
+                    "id": 3,
+                    "name": "Automatisch"
+                },
+                "visible": "I"
+            };
+
+        // Voor alg_gebouw_key en alg_locatie_key doen we al wat auto-magie
+        // de versie zonder alg_ ervoor komt uit de udr
+        if ("gebouw_key" in rapport.fields || "alg_gebouw_key" in rapport.fields)
+        {
+            var keyfld = ("gebouw_key" in rapport.fields?"gebouw_key":"alg_gebouw_key");
+            var keyfield = rapport.table + "." + keyfld;
+            rapport.fields["coordx"].sql = "(SELECT COALESCE(alg_gebouw_x, alg_locatie_x)"
+                                         + "   FROM alg_gebouw g"
+                                         + "      , alg_locatie l"
+                                         + "  WHERE g.alg_gebouw_key = " + keyfield
+                                         + "    AND g.alg_locatie_key = l.alg_locatie_key)";
+            rapport.fields["coordy"].sql = "(SELECT COALESCE(alg_gebouw_y, alg_locatie_y)"
+                                         + "   FROM alg_gebouw g"
+                                         + "      , alg_locatie l"
+                                         + "  WHERE g.alg_gebouw_key = " + keyfield
+                                         + "    AND g.alg_locatie_key = l.alg_locatie_key)";
+        }
+        else if ("locatie_key" in rapport.fields || "alg_locatie_key" in rapport.fields)
+        {
+            var keyfld = ("locatie_key" in rapport.fields?"locatie_key":"alg_locatie_key");
+            var keyfield = rapport.table + "." + keyfld;
+            rapport.fields["coordx"].sql = "(SELECT alg_locatie_x"
+                                         + "   FROM alg_locatie l"
+                                         + "  WHERE g.alg_locatie_key = " + keyfield;
+            rapport.fields["coordy"].sql = "(SELECT alg_locatie_y"
+                                         + "   FROM alg_locatie l"
+                                         + "  WHERE g.alg_locatie_key = " + keyfield;
+        }
+        else
+            shared.internal_error( "No suitable coordinate fields found in report");
+    }
+    if (!inArray("coordx", xxx_params.columns))
+    {
+        xxx_params.columns.push("coordx");
+        xxx_params.columns.push("coordy");
+        if (keyfld)
+        {
+            xxx_params.columns.push(keyfld); // waarom krijg ik 'Geen GROUP BY-uitdrukking.' als ik deze vooraan zet?
+            xxx_params.groupby.push(keyfld);
+        }
+        xxx_params.groupby.push("");
+        xxx_params.groupby.push("");
+    }
+
+    var rap_data = rapport.REST_GET(xxx_params);
+    var result = [];
+    var markerwaardemin = -1;
+    var markerwaardemax = -1;
+    var fixedradius = false;
+    var avgmarkerradius = 20;  // straal in px voor standaard (fixed) of middelste (dynamisch) waarde
+    for (var i = 0; i < rap_data.length; i++)
+    {
+        var data = rap_data[i];
+        if (data.coordx === null || data.coordy === null)
+            continue;
+
+        var fclturl = null;
+        if (colurl)
+        {
+            fclturl = data[colurl];
+        }
+        else if (rapport.list.default_url)
+        {
+            fclturl = rapport.list.default_url + data.id;
+        }
+
+        // Waarde-range bepalen
+        if (data[colwaarde] < markerwaardemin || markerwaardemin == -1)
+            markerwaardemin = data[colwaarde];
+        if (data[colwaarde] > markerwaardemax || markerwaardemax == -1)
+            markerwaardemax = data[colwaarde];
+
+        // color is:
+        // the color as defined in the color column, else
+        // the color defined by waarde in relation to the limit0..limit3 definitions, else
+        // no color, i.e. the default
+        var markercolor = data.color;
+        if (!data.color && data[colwaarde] && rapport.limit1 && rapport.limit2)
+        {
+            var descending = (rapport.limit1 > rapport.limit2);
+            if (data[colwaarde]) // EN numeriek
+            {
+                if (descending)
+                {
+                    markercolor = (data[colwaarde] > rapport.limit1 ? "red" :
+                                (data[colwaarde] > rapport.limit2 ? "orange" : "green"))
+                }
+                else
+                {
+                    markercolor = (data[colwaarde] > rapport.limit2 ? "green" :
+                                (data[colwaarde] > rapport.limit1 ? "orange" : "red"))
+                }
+            }
+        }
+        if (markercolor) fixedradius = true;  // ik vind en kleuren en omvang dubbelop en onzin
+
+        result.push({ title:     data[coltitle],
+                      loc:       [data.coordx, data.coordy],
+                      id:        data.id,
+                      fclturl:   rapport.list.default_url?rapport.list.default_url.format(data.id):null,
+                      waarde:    data[colwaarde],
+                      color:     markercolor,
+                      textColor: data.textcolor
+                    });
+    }
+    var markerwaarderange = (markerwaardemax - markerwaardemin).toFixed(0);
+
+%>
+<html>
+<head>
+    <%  FCLTHeader.Generate(); %>
+ <style>
+    body {
+        padding: 0;
+        margin: 0;
+    }
+    geenhekjeaanbeginregel, #mapid {
+        height: 100%;
+        width: 100vw;
+    }
+
+    .datatext {
+        text-align: center;
+        padding: 2px 1px 0 1px;
+        font-size: 12px;
+        min-width: 24px;
+        min-height: 24px;
+        border-radius: 12px;
+    }
+</style>
+
+</head>
+<body>
+    <div id="mapid" style='height: 500px;'></div>
+ <script>
+
+var llhome = [52.155172, 5.387201]; //Onze Lieve Vrouwetoren (Amersfoort)
+
+function resizeIframes()
+{
+    var height = parseInt(document.documentElement.clientHeight);
+    alert(height);
+    //alert($('#mapid').height());
+    height = 600;
+    $('#mapid').height(height);
+    alert($('#mapid').height());
+}
+
+$(function ()
+{
+    var map = L.map('mapid', { preferCanvas: true, zoomControl: false }).setView(llhome, 8);
+
+    var opentileurl = '<%=S("fac_lfmap_tileprovider")%>'; // https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png';
+    // var opentileurl = 'lfosmproxy.asp?z={z}&x={x}&y={y}'; // te veel gedoe vooralsnog
+
+    var maposm = L.tileLayer(opentileurl, {
+		maxZoom: 18,
+		attribution: 'Map data &copy; <a href="https://www.openstreetmap.org/">OpenStreetMap</a> contributors, ' +
+			'<a href="https://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>',
+		id: 'maposm',
+		tileSize: 256,
+		zoomOffset: 0
+	}).addTo(map);
+
+    var xxxxdata = <%= JSON.stringify(result, null, "   ") %>;
+
+    var l = new L.FeatureGroup();
+    map.addLayer(l);
+    for (var i = 0; i < xxxxdata.length; i++)
+    {
+        var data = xxxxdata[i]
+        //https://stackoverflow.com/questions/48872298/
+        var markerOpts = L.Util.extend( {radius: <%=fixedradius ? avgmarkerradius : avgmarkerradius/2+"+(data.waarde-"+markerwaardemin+")*"+avgmarkerradius+"/"+markerwaarderange %>, xxcolor:"#ff4455" }, data );
+        var marker = L.circleMarker(data.loc, markerOpts);
+        l.addLayer(marker);
+
+        if (data.waarde)
+        {
+            var text = L.tooltip({
+                    permanent: true,
+                    direction: 'center',
+                    className: 'datatext'
+                })
+                .setContent(String(data.waarde) || "??")
+                .setLatLng(data.loc)
+                .addTo(l);
+        }
+
+        if (data.title) // wordt niet rechtstreeks door circleMarker ondersteund
+        {
+            var text2 = L.tooltip({
+                direction: 'top',
+                className: 'text2'
+                })
+                .setContent(data.title)
+                .setLatLng(data.loc);
+            marker.bindTooltip(text2);
+        }
+    }
+
+    l.on("click", function (event) {
+//resizeIframes();
+//return;
+        console.log(event);
+        var clickedMarker = event.layer;
+        if (clickedMarker.options.fclturl)
+            FcltMgr.openDetail(clickedMarker.options.fclturl);
+    });
+    //var height = parseInt(parent.document.documentElement.clientHeight);
+    //alert(height);
+    $('#mapid').height($(window).height());
+    map.fitBounds(l.getBounds(), { padding: [20, 20] });
+});
+ </script>
+</body>
+<%}
+%>

APPL/FAC/lfmap.inc

@@ -1,228 +0,0 @@
-<% /*
-    $Revision$
-    $Id$
-
-    lfmap.inc
-
-*/
-var usrrap_key = getQParamInt("usrrap_key", -1);
-
-function fac_usrrap_list_map()
-{
-%>
-<html>
-<head>
-    <%  FCLTHeader.Generate(); %>
-
- <style>
-    geenhekjeaanbeginregel, #mapid { }
-    body {
-        padding: 0;
-        margin: 0;
-    }
-    geenhekjeaanbeginregel, #mapid {
-        height: 100%;
-        width: 100vw;
-    }
-.my-custom-icon{
-  width: 24px !important;
-  height: 24px !important;
-  margin-left: -12px;
-  margin-top: -12px;
-  border-radius: 18px;
-  border: 2px solid #3F51B5;
-  text-align: center;
-  color: #3F51B5;
-  background-color: #fff;
-  font-size: 16px;
-}
-
-  .circle-with-txt {
-    position: relative;
-    color: white;
-    font-size: 12px;
-    font-weight: bold;
-    width: 40px;
-    height: 40px;
-  }
-  .datatext {
-    text-align: center;
-    padding: 2px 1px 0 1px;
-    font-size: 12px;
-    min-width: 24px;
-    min-height: 24px;
-    border-radius: 12px;
-  }
-  .txt {
-    margin: 0;
-    position: absolute;
-    top: 50%;
-    left: 50%;
-    -ms-transform: translate(-50%, -50%);
-    transform: translate(-50%, -50%);
-    font-size: 16px;
-  }
-
-</style>
-
-</head>
-<body>
-    <div id="mapid" style='height: 500px;'></div>
- <script>
-
-var llhome = [52.155172, 5.387201]; //Onze Lieve Vrouwetoren (Amersfoort)
-
-function resizeIframes()
-{
-    var height = parseInt(document.documentElement.clientHeight);
-    alert(height);
-    //alert($('#mapid').height());
-    height = 600;
-    $('#mapid').height(height);
-    alert($('#mapid').height());
-}
-
-$(function ()
-{
-    var map = L.map('mapid', { preferCanvas: true, zoomControl: false }).setView(llhome, 8);
-
-    var opentileurl = 'https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png';
-    var opentileurl = 'lfosmproxy.asp?z={z}&x={x}&y={y}';
-       var maposm = L.tileLayer(opentileurl, {
-    		maxZoom: 18,
-    		attribution: 'Map data &copy; <a href="https://www.openstreetmap.org/">OpenStreetMap</a> contributors, ' +
-    			'<a href="https://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>',
-    		id: 'maposm',
-    		tileSize: 256,
-    		zoomOffset: 0
-    	}).addTo(map);
-
-    //var markersLayer = L.markerClusterGroup({ disableClusteringAtZoom: 11 });
-    //map.addLayer(markersLayer);
-
-<%
-    var usrrap_key = getQParamInt("usrrap_key", -1);
-    if (usrrap_key > 0)
-    {
-        var rapport = model_reports(usrrap_key);
-        var coltitle = getQParamInt("coltitle", "title");
-        var colurl = getQParam("colurl", null);
-
-        var xxx_params = { filter : shared.qs2json(rapport), columns: [coltitle], groupby: [] };
-        xxx_params.filter.showall = 1;
-        xxx_params.filter.limit = 9999;
-        xxx_params.filter.scf_pivot = 0; // nooit (?)
-
-        var rap_data = rapport.REST_GET(xxx_params);
-        var result = [];
-        var markerwaardemin = -1;
-        var markerwaardemax = -1;
-        var fixedradius = false;
-        var avgmarkerradius = 20;  // straal in px voor standaard (fixed) of middelste (dynamisch) waarde
-        for (var i = 0; i < rap_data.length; i++)
-        {
-            var data = rap_data[i];
-
-            var fclturl = null;
-            if (colurl)
-            {
-                fclturl = data[colurl];
-            }
-            else if (rapport.list.default_url)
-            {
-                fclturl = rapport.list.default_url + data.id;
-            }
-
-            // Waarde-range bepalen
-            if (data.waarde < markerwaardemin || markerwaardemin == -1)
-                markerwaardemin = data.waarde;
-            if (data.waarde > markerwaardemax || markerwaardemax == -1)
-                markerwaardemax = data.waarde;
-
-            // color is:
-            // the color as defined in the color column, else
-            // the color defined by waarde in relation to the limit0..limit3 definitions, else
-            // no color, i.e. the default
-            var markercolor = data.color;
-            if (!data.color && data.waarde && rapport.limit1 && rapport.limit2)
-            {
-                var descending = (rapport.limit1 > rapport.limit2);
-                if (data.waarde) // EN numeriek
-                {
-                    if (descending)
-                    {
-                        markercolor = (data.waarde > rapport.limit1 ? "red" :
-                                    (data.waarde > rapport.limit2 ? "orange" : "green"))
-                    }
-                    else
-                    {
-                        markercolor = (data.waarde > rapport.limit2 ? "green" :
-                                    (data.waarde > rapport.limit1 ? "orange" : "red"))
-                    }
-                }
-            }
-            if (markercolor) fixedradius = true;  // ik vind en kleuren en omvang dubbelop en onzin
-
-            result.push({ title:     data.title,
-                          loc:       [data.coordx, data.coordy],
-                          id:        data.id,
-                          fclturl:   rapport.list.default_url?rapport.list.default_url.format(data.id):null,
-                          waarde:    data.waarde,
-                          color:     markercolor,
-                          textColor: data.textcolor
-                        });
-        }
-        var markerwaarderange = (markerwaardemax - markerwaardemin).toFixed(0);
-    }
-
-%>  var xxxxdata = <%= JSON.stringify(result, null, "   ") %>;
-
-    var l = new L.FeatureGroup();
-    map.addLayer(l);
-    for (var i = 0; i < xxxxdata.length; i++)
-    {
-        var data = xxxxdata[i]
-        //https://stackoverflow.com/questions/48872298/
-        var markerOpts = L.Util.extend( {radius: <%=fixedradius ? avgmarkerradius : avgmarkerradius/2+"+(data.waarde-"+markerwaardemin+")*"+avgmarkerradius+"/"+markerwaarderange %>, xxcolor:"#ff4455" }, data );
-        var marker = L.circleMarker(data.loc, markerOpts);
-        l.addLayer(marker);
-
-        if (data.waarde)
-        {
-            var text = L.tooltip({
-                    permanent: true,
-                    direction: 'center',
-                    className: 'datatext'
-                })
-                .setContent(String(data.waarde) || "??")
-                .setLatLng(data.loc)
-                .addTo(l);
-        }
-
-        if (data.title) // wordt niet rechtstreeks door circleMarker ondersteund
-        {
-            var text2 = L.tooltip({
-                direction: 'top',
-                className: 'text2'
-                })
-                .setContent(data.title)
-                .setLatLng(data.loc);
-            marker.bindTooltip(text2);
-        }
-    }
-
-    l.on("click", function (event) {
-//resizeIframes();
-//return;
-        console.log(event);
-        var clickedMarker = event.layer;
-        if (clickedMarker.options.fclturl)
-            FcltMgr.openDetail(clickedMarker.options.fclturl);
-    });
-    map.fitBounds(l.getBounds(), { padding: [20, 20] });
-    //  var control = L.control.layers(baseMaps, null, { collapsed: true, sortLayers: true }).addTo(map);
-});
- </script>
-</body>
-<%}
-%>

APPL/FAC/lfosmproxy.asp

@@ -1,13 +1,23 @@
 <%@language = "javascript" %>
-<%
+<% /*
+    $Revision$
+    $Id$
+
+    YET UNUSED in 2022.3
+
+    File            lfosmproxy.asp
+    Description:    Proxy-bestand om max-tiles op te halen
+                    Voorkomt dat we last krijgen van CORS(?)
+    Parameters:     x, y, z
+    Note:           Nog niet gebruikt in 2022.3 (er zit nog geen opruim mechanisme in)
+
+*/
+
 var JSON_Result = true;
 var ANONYMOUS_Allowed = 1;
 %>
 <!-- #include file="../Shared/common.inc" -->
 <%
-    // $Id$
-    // proxy voor de osm tilemap
-
     var x = getQParamInt("x");
     var y = getQParamInt("y");
     var z = getQParamInt("z");

APPL/Shared/Common.inc

@@ -289,7 +289,13 @@ if (typeof NO_ADDHEADER == "undefined" && S("p3p_header"))
     Response.AddHeader("P3P", S("p3p_header"));
 
 if (typeof NO_ADDHEADER == "undefined" && S("csp_header") && S("csp_header") != "X")
-    Response.AddHeader("Content-Security-Policy", S("csp_header"));
+{
+    if (this.CSP_EXTRADATA) // sta openstreemap tiles toe
+        var csp_header = S("csp_header").format(S("csp_header_extradata"));
+    else
+        var csp_header = S("csp_header").format("");
+    Response.AddHeader("Content-Security-Policy", csp_header);
+}
 
 if (typeof NO_ADDHEADER == "undefined" && S("referrer_policy_header") && S("referrer_policy_header") != "X")
     Response.AddHeader("Referrer-Policy", S("referrer_policy_header"));