jvanbussel
Forum Replies Created
Viewing 3 replies - 1 through 3 (of 3 total)
-
In addition, i added the “async function” (which is the real solution for the issue, i believe – still to find relation with gdpr plugin). full code :
<!-- wp:heading --> <h2 class="wp-block-heading">Administrative details</h2> <!-- /wp:heading --> <!-- wp:table {"hasFixedLayout":true,"borderColor":"white"} --> <figure class="wp-block-table"><table class="has-border-color has-white-border-color has-fixed-layout"><tbody><tr><td><strong>Hospital recognition number</strong></td><td>%fpshealth_hco_hosp_001%</td></tr><tr><td><strong>Campus establishment number</strong></td><td>%fpshealth_hco_hosp_002%</td></tr><tr><td><strong>Registered office address</strong></td><td>%fpshealth_hco_hosp_005%</td></tr><tr><td><strong>Postal code</strong></td><td>%fpshealth_hco_hosp_006%</td></tr><tr><td><strong>Municipality</strong></td><td>%fpshealth_hco_hosp_007%</td></tr><tr><td><strong>Telephone number</strong></td><td>%fpshealth_hco_hosp_008%</td></tr><tr><td><strong>Website</strong></td><td>%fpshealth_hco_hosp_009%</td></tr><tr><td><strong>Region</strong></td><td>%fpshealth_hco_hosp_010%</td></tr><tr><td><strong>Language</strong></td><td>%fpshealth_hco_hosp_011%</td></tr><tr><td><strong>Province</strong></td><td>%fpshealth_hco_hosp_012%</td></tr><tr><td><strong>Hospital grouping</strong></td><td>%fpshealth_hco_hosp_013%</td></tr><tr><td><strong>Locoregional hospital network</strong></td><td>%fpshealth_hco_hosp_015%</td></tr><tr><td><strong>Type of hospital</strong></td><td>%fpshealth_hco_hosp_016%</td></tr><tr><td><strong>Hospital status</strong></td><td>%fpshealth_hco_hosp_017%</td></tr></tbody></table></figure> <!-- /wp:table --> <!-- wp:spacer {"height":"25px"} --> <div style="height:25px" aria-hidden="true" class="wp-block-spacer"></div> <!-- /wp:spacer --> <!-- wp:heading --> <h2 class="wp-block-heading">Hospitalisation services</h2> <!-- /wp:heading --> <!-- wp:table {"hasFixedLayout":true,"borderColor":"white"} --> <figure class="wp-block-table"><table class="has-border-color has-white-border-color has-fixed-layout"><tbody><tr><td><strong>Neuropsychiatry service for observation and treatment of adult patients</strong> (A service)</td><td>%fpshealth_hco_hosp_018% beds</td></tr><tr><td><strong>Day care in A-service</strong></td><td>%fpshealth_hco_hosp_019% beds</td></tr><tr><td><strong>Night care in A-service</strong></td><td>%fpshealth_hco_hosp_020% beds</td></tr><tr><td><strong>Service for diagnosis and surgical treatment</strong> (C service)</td><td>%fpshealth_hco_hosp_022% beds</td></tr><tr><td><strong>Service for diagnosis and medical treatment</strong> (D service)</td><td>%fpshealth_hco_hosp_024% beds</td></tr><tr><td><strong>Service for mixed hospitalization C + D services</strong></td><td>%fpshealth_hco_hosp_023% beds</td></tr><tr><td><strong>Pediatric service</strong> (E service)</td><td>%fpshealth_hco_hosp_025% beds</td></tr><tr><td><strong>Geriatrics service</strong> (G service)</td><td>%fpshealth_hco_hosp_026% beds</td></tr><tr><td><strong>Service for intensive treatment of psychiatric patients "SGA - adults" </strong>(IB service)</td><td>%fpshealth_hco_hosp_027% beds</td></tr><tr><td><strong>Neuropsychiatry service for observation and treatment of children</strong> (K service)</td><td>%fpshealth_hco_hosp_028% beds</td></tr><tr><td><strong>Day care in K-service</strong></td><td>%fpshealth_hco_hosp_029% beds</td></tr><tr><td><strong>Night care in K-service</strong></td><td>%fpshealth_hco_hosp_030% beds</td></tr><tr><td><strong>Infectious diseases service</strong> (L service)</td><td>%fpshealth_hco_hosp_031% beds</td></tr><tr><td><strong>Maternity ward</strong> (M service)</td><td>%fpshealth_hco_hosp_032% beds</td></tr><tr><td><strong>Intensive neonatology service</strong> (NIC service)</td><td>%fpshealth_hco_hosp_033% beds</td></tr><tr><td><strong>Specialized service for patients with cardio-pulmonary disorders</strong> (S1 service)</td><td>%fpshealth_hco_hosp_034% beds</td></tr><tr><td><strong>Specialized service for patients with locomotor disorders</strong> (S2 service)</td><td>%fpshealth_hco_hosp_035% beds</td></tr><tr><td><strong>Specialized service for patients with neurological disorders</strong> (S3 service) </td><td>%fpshealth_hco_hosp_036% beds</td></tr><tr><td><strong>Specialized service for palliative care</strong> (S4 service)</td><td>%fpshealth_hco_hosp_037% beds</td></tr><tr><td><strong>Specialized service for patients with chronic conditions</strong> (S5 service)</td><td>%fpshealth_hco_hosp_038% beds</td></tr><tr><td><strong>Specialized service for patients with psycho-geriatric disorders</strong> (S6 service)</td><td>%fpshealth_hco_hosp_039% beds</td></tr><tr><td><strong>Neuropsychiatry service for the treatment of adult patients</strong> (T service)</td><td>%fpshealth_hco_hosp_040% beds</td></tr><tr><td><strong>Day care in T-service</strong></td><td>%fpshealth_hco_hosp_041% beds</td></tr><tr><td><strong>Night care in T-service</strong></td><td>%fpshealth_hco_hosp_042% beds</td></tr><tr><td><strong>Family placement intramuros</strong></td><td>%fpshealth_hco_hosp_043% beds</td></tr><tr><td><strong>Family-based placements</strong></td><td>%fpshealth_hco_hosp_044% beds</td></tr><tr><td><strong>Day & night nursing for geriatric patients requiring neuro-psychiatric treatment</strong></td><td>%fpshealth_hco_hosp_045% beds</td></tr></tbody></table></figure> <!-- /wp:table --> <!-- wp:separator {"backgroundColor":"cyan-bluish-gray","className":"is-style-default"} --> <hr class="wp-block-separator has-text-color has-cyan-bluish-gray-color has-alpha-channel-opacity has-cyan-bluish-gray-background-color has-background is-style-default"/> <!-- /wp:separator --> <!-- wp:table {"hasFixedLayout":true,"borderColor":"white"} --> <figure class="wp-block-table"><table class="has-border-color has-white-border-color has-fixed-layout"><tbody><tr><td><strong>Total number of beds and/or places per campus</strong></td><td>%fpshealth_hco_hosp_046% beds</td></tr><tr><td><strong>Total number of beds and/or places per hospital</strong></td><td>%fpshealth_hco_hosp_047% beds</td></tr></tbody></table></figure> <!-- /wp:table --> <!-- wp:spacer {"height":"25px"} --> <div style="height:25px" aria-hidden="true" class="wp-block-spacer"></div> <!-- /wp:spacer --> <!-- wp:heading --> <h2 class="wp-block-heading">Medical services and medical-technical services</h2> <!-- /wp:heading --> <!-- wp:table {"hasFixedLayout":true,"borderColor":"white"} --> <figure class="wp-block-table"><table class="has-border-color has-white-border-color has-fixed-layout"><tbody><tr><td><strong>Medical imaging with scanner (CT scanner)</strong></td><td>%fpshealth_hco_hosp_049%</td></tr><tr><td><strong>Medical imaging with magnetic resonance imaging (MRI)</strong></td><td>%fpshealth_hco_hosp_050%</td></tr><tr><td><strong>Nuclear medicine service with PET scanner</strong></td><td>%fpshealth_hco_hosp_051%</td></tr><tr><td><strong>Radiotherapy service</strong></td><td>%fpshealth_hco_hosp_052%</td></tr><tr><td><strong>Center for the treatment of chronic renal insufficiency</strong></td><td>%fpshealth_hco_hosp_053%</td></tr><tr><td><strong>Transplantation center</strong></td><td>%fpshealth_hco_hosp_054%</td></tr><tr><td><strong>Center for human genetics</strong></td><td>%fpshealth_hco_hosp_055%</td></tr><tr><td><strong>Center for severe burns</strong></td><td>%fpshealth_hco_hosp_056%</td></tr></tbody></table></figure> <!-- /wp:table --> <!-- wp:spacer {"height":"25px"} --> <div style="height:25px" aria-hidden="true" class="wp-block-spacer"></div> <!-- /wp:spacer --> <!-- wp:heading --> <h2 class="wp-block-heading">Care programs</h2> <!-- /wp:heading --> <!-- wp:table {"hasFixedLayout":true,"borderColor":"white"} --> <figure class="wp-block-table"><table class="has-border-color has-white-border-color has-fixed-layout"><tbody><tr><td><strong>Care program for cardiac pathology A</strong></td><td>%fpshealth_hco_hosp_057%</td></tr><tr><td><strong>Care program for cardiac pathology B1-B2</strong></td><td>%fpshealth_hco_hosp_059%</td></tr><tr><td><strong>Care program for cardiac pathology B3</strong></td><td>%fpshealth_hco_hosp_058%</td></tr><tr><td><strong>Care program for cardiac pathology C</strong></td><td>%fpshealth_hco_hosp_060%</td></tr><tr><td><strong>Care program for cardiac pathology E</strong></td><td>%fpshealth_hco_hosp_061%</td></tr><tr><td><strong>Care program for cardiac pathology P</strong></td><td>%fpshealth_hco_hosp_062%</td></tr><tr><td><strong>Care program for cardiac pathology T</strong></td><td>%fpshealth_hco_hosp_063%</td></tr><tr><td><strong>Association care program for cardiac pathology</strong></td><td>%fpshealth_hco_hosp_064%</td></tr><tr><td><strong>Stroke care program: basic stroke care program (S1)</strong></td><td>%fpshealth_hco_hosp_065%</td></tr><tr><td><strong>Stroke care program: specialized stroke care program with invasive procedures (S2)</strong></td><td>%fpshealth_hco_hosp_066%</td></tr><tr><td><strong>Reproductive medicine program – Type A</strong></td><td>%fpshealth_hco_hosp_067%</td></tr><tr><td><strong>Reproductive medicine program – Type B</strong></td><td>%fpshealth_hco_hosp_068%</td></tr><tr><td><strong>Reproductive medicine program association</strong></td><td>%fpshealth_hco_hosp_069%</td></tr><tr><td><strong>Basic oncological care program</strong></td><td>%fpshealth_hco_hosp_070%</td></tr><tr><td><strong>Oncology care program</strong></td><td>%fpshealth_hco_hosp_071%</td></tr><tr><td><strong>Pediatric hemato-oncology care program</strong></td><td>%fpshealth_hco_hosp_072%</td></tr><tr><td><strong>Care program for children</strong></td><td>%fpshealth_hco_hosp_073%</td></tr><tr><td><strong>Oncology program association</strong></td><td>%fpshealth_hco_hosp_074%</td></tr><tr><td><strong>Pediatric hemato-oncology program</strong></td><td>%fpshealth_hco_hosp_075%</td></tr><tr><td><strong>Program for children</strong></td><td>%fpshealth_hco_hosp_076%</td></tr><tr><td><strong>Geriatric patient program: geriatric service</strong></td><td>%fpshealth_hco_hosp_077%</td></tr><tr><td><strong>Geriatric patient program: geriatric consultation</strong></td><td>%fpshealth_hco_hosp_078%</td></tr><tr><td><strong>Geriatric patient program: geriatric day hospital</strong></td><td>%fpshealth_hco_hosp_079%</td></tr><tr><td><strong>Geriatric patient program: internal liaison</strong></td><td>%fpshealth_hco_hosp_080%</td></tr><tr><td><strong>Geriatric patient program: external liaison</strong></td><td>%fpshealth_hco_hosp_081%</td></tr><tr><td><strong>Geriatric patient program association</strong></td><td>%fpshealth_hco_hosp_082%</td></tr></tbody></table></figure> <!-- /wp:table --> <!-- wp:spacer {"height":"25px"} --> <div style="height:25px" aria-hidden="true" class="wp-block-spacer"></div> <!-- /wp:spacer --> <!-- wp:heading --> <h2 class="wp-block-heading">Hospital functions</h2> <!-- /wp:heading --> <!-- wp:table {"hasFixedLayout":true,"borderColor":"white"} --> <figure class="wp-block-table"><table class="has-border-color has-white-border-color has-fixed-layout"><tbody><tr><td><strong>Hospital pharmacy</strong></td><td>%fpshealth_hco_hosp_083%</td></tr><tr><td><strong>Hospital pharmacy - drug depot</strong></td><td>%fpshealth_hco_hosp_084%</td></tr><tr><td><strong>Hospital pharmacy association</strong></td><td>%fpshealth_hco_hosp_085%</td></tr><tr><td><strong>Intensive care</strong></td><td>%fpshealth_hco_hosp_086%</td></tr><tr><td><strong>Local donor coordination</strong></td><td>%fpshealth_hco_hosp_087%</td></tr><tr><td><strong>Hospital blood bank</strong></td><td>%fpshealth_hco_hosp_088%</td></tr><tr><td><strong>Local neonatal care (N*- function)</strong></td><td>%fpshealth_hco_hosp_089%</td></tr><tr><td><strong>Regional perinatal care (P*- function)</strong></td><td>%fpshealth_hco_hosp_090%</td></tr><tr><td><strong>Pediatric liaison</strong></td><td>%fpshealth_hco_hosp_091%</td></tr><tr><td><strong>First emergency care</strong></td><td>%fpshealth_hco_hosp_092%</td></tr><tr><td><strong>Specialized emergency care</strong></td><td>%fpshealth_hco_hosp_093%</td></tr><tr><td><strong>Medical Urgency Group (MUG)</strong></td><td>%fpshealth_hco_hosp_094%</td></tr><tr><td><strong>Medical Urgency Group (MUG) association</strong></td><td>%fpshealth_hco_hosp_095%</td></tr><tr><td><strong>Palliative care</strong></td><td>%fpshealth_hco_hosp_096%</td></tr><tr><td><strong>Surgical day hospitalization</strong></td><td>%fpshealth_hco_hosp_097%</td></tr><tr><td><strong>Non-surgical day hospitalization</strong></td><td>%fpshealth_hco_hosp_098%</td></tr><tr><td><strong>Rare diseases</strong></td><td>%fpshealth_hco_hosp_099%</td></tr><tr><td><strong>Expert center for coma patients</strong></td><td>%fpshealth_hco_hosp_100%</td></tr><tr><td><strong>Ombuds function</strong></td><td>%fpshealth_hco_hosp_101%</td></tr></tbody></table></figure> <!-- /wp:table --> <!-- wp:spacer {"height":"25px"} --> <div style="height:25px" aria-hidden="true" class="wp-block-spacer"></div> <!-- /wp:spacer --> <!-- wp:heading --> <h2 class="wp-block-heading">Residence of patients</h2> <!-- /wp:heading --> <!-- wp:heading {"level":3} --> <h3 class="wp-block-heading">Total number of classic hospitalisations in %fpshealth_hco_hosp_003%, by residence (municipality) of the patient (year 2021)</h3> <!-- /wp:heading --> <!-- wp:html --> <div id="map01" style="width: 100%; height: 600px;"></div> <link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/leaflet.css" /> <script src="https://unpkg.com/[email protected]/dist/leaflet.js"></script> <script> async function loadMap1() { // Initialize the map with limited zoom and drag functions var map01 = L.map('map01', { center: [50.536, 4.399], zoom: 8, zoomControl: false, scrollWheelZoom: false, doubleClickZoom: false, touchZoom: false, dragging: false }); // Load the base map layer L.tileLayer('https://{s}.basemaps.cartocdn.com/light_nolabels/{z}/{x}/{y}.png', { maxZoom: 19, attribution: '©OpenStreetMap, ©CartoDB' }).addTo(map01); // Function to set the color for each area function getColor01(indicator01) { return indicator01 > 999 ? '#001d6b' : indicator01 > 499 ? '#28438d' : indicator01 > 249 ? '#39569e' : indicator01 > 99 ? '#4a6aaf' : indicator01 > 49 ? '#6e93cf' : indicator01 > 24 ? '#97bdef' : indicator01 > 1 ? '#add3ff' : '#FFFFFF'; } // Function to set the style of each area function style01(feature) { return { fillColor: getColor01(feature.properties.indicator01), weight: 1, opacity: 1, color: 'gray', dashArray: '1', fillOpacity: 0.7 }; } // Area highlighting function function highlightFeature01(e) { var layer01 = e.target; layer01.setStyle({ weight: 3, color: '#FF6600', dashArray: '', fillOpacity: 0.9 }); if (!L.Browser.ie && !L.Browser.opera && !L.Browser.edge) { layer01.bringToFront(); } info01.update(layer01.feature.properties); } // Reset the highlight style function resetHighlight01(e) { geojson01.resetStyle(e.target); info01.update(); } // Function to add interaction function onEachFeature01(feature, layer01) { layer01.bindPopup(feature.properties.shape4); layer01.on({ mouseover: highlightFeature01, mouseout: resetHighlight01 }); } // Info box var info01 = L.control({position: 'topright'}); info01.onAdd = function (map01) { this._div = L.DomUtil.create('div', 'info'); this.update(); return this._div; }; info01.update = function (props) { this._div.innerHTML = '<h5>Classic hospitalisations in <br />%fpshealth_hco_hosp_003% (2021)</h5>' + (props ? '<b>' + 'Inhabitants of "' + props.shape4 + '":</b><br />' + props.indicator01 + ' hospitalisations' : 'Hover over a Belgian municipality.'); }; info01.addTo(map01); // Legend var legend01 = L.control({position: 'bottomright'}); legend01.onAdd = function (map) { var div = L.DomUtil.create('div', 'info legend'), // Aangepaste waarden in de grades array grades = [0, 1, 25, 50, 100, 250, 500, 1000], labels = [], from, to; for (var i = 0; i < grades.length; i++) { from = grades[i]; to = grades[i + 1] ? grades[i + 1] - 1 : ''; // Set the color based on the value just below the upper limit of the current range var color01 = (i === grades.length - 1) ? getColor01(from) : getColor01(grades[i + 1] - 0.1); if (i === 0) { labels.push( '<i style="background:' + color01 + '; width:18px; height:18px; float:left; margin-right:8px; opacity:0.7;"></i> ' + from); } else { labels.push( '<i style="background:' + color01 + '; width:18px; height:18px; float:left; margin-right:8px; opacity:0.7;"></i> ' + from + (to ? '–' + to : ' - ')); } } div.innerHTML = labels.join('<br>'); return div; }; legend01.addTo(map01); // Load the GeoJSON data await fetch('%fpshealth_hco_hosp_102%') .then(response => response.json()) .then(data => { geojson01 = L.geoJson(data, { style: style01, onEachFeature: onEachFeature01 }).addTo(map01); }); } </script> <!-- /wp:html --> <!-- wp:spacer {"height":"25px"} --> <div style="height:25px" aria-hidden="true" class="wp-block-spacer"></div> <!-- /wp:spacer --> <!-- wp:heading {"level":3} --> <h3 class="wp-block-heading">Total number of day hospitalisations in %fpshealth_hco_hosp_003%, by residence (municipality) of the patient (year 2021)</h3> <!-- /wp:heading --> <!-- wp:html --> <div id="map02" style="width: 100%; height: 600px;"></div> <link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/leaflet.css" /> <script src="https://unpkg.com/[email protected]/dist/leaflet.js"></script> <script> async function loadMap2() { // Initialize the map with limited zoom and drag functions var map02 = L.map('map02', { center: [50.536, 4.399], zoom: 8, zoomControl: false, scrollWheelZoom: false, doubleClickZoom: false, touchZoom: false, dragging: false }); // Load the base map layer L.tileLayer('https://{s}.basemaps.cartocdn.com/light_nolabels/{z}/{x}/{y}.png', { maxZoom: 19, attribution: '©OpenStreetMap, ©CartoDB' }).addTo(map02); // Function to set the color for each area function getColor02(indicator02) { return indicator02 > 999 ? '#001d6b' : indicator02 > 499 ? '#28438d' : indicator02 > 249 ? '#39569e' : indicator02 > 99 ? '#4a6aaf' : indicator02 > 49 ? '#6e93cf' : indicator02 > 24 ? '#97bdef' : indicator02 > 1 ? '#add3ff' : '#FFFFFF'; } // Function to set the style of each area function style02(feature) { return { fillColor: getColor02(feature.properties.indicator02), weight: 1, opacity: 1, color: 'gray', dashArray: '1', fillOpacity: 0.7 }; } // Area highlighting function function highlightFeature02(e) { var layer02 = e.target; layer02.setStyle({ weight: 3, color: '#FF6600', dashArray: '', fillOpacity: 0.9 }); if (!L.Browser.ie && !L.Browser.opera && !L.Browser.edge) { layer02.bringToFront(); } info02.update(layer02.feature.properties); } // Reset the highlight style function resetHighlight02(e) { geojson02.resetStyle(e.target); info02.update(); } // Function to add interaction function onEachFeature02(feature, layer02) { layer02.bindPopup(feature.properties.shape4); layer02.on({ mouseover: highlightFeature02, mouseout: resetHighlight02 }); } // Info box var info02 = L.control({position: 'topright'}); info02.onAdd = function (map02) { this._div = L.DomUtil.create('div', 'info'); this.update(); return this._div; }; info02.update = function (props) { this._div.innerHTML = '<h5>Day hospitalisations in <br />%fpshealth_hco_hosp_003% (2021)</h5>' + (props ? '<b>' + 'Inhabitants of "' + props.shape4 + '":</b><br />' + props.indicator02 + ' hospitalisations' : 'Hover over a Belgian municipality.'); }; info02.addTo(map02); // Legend var legend02 = L.control({position: 'bottomright'}); legend02.onAdd = function (map) { var div = L.DomUtil.create('div', 'info legend'), // Aangepaste waarden in de grades array grades = [0, 1, 25, 50, 100, 250, 500, 1000], labels = [], from, to; for (var i = 0; i < grades.length; i++) { from = grades[i]; to = grades[i + 1] ? grades[i + 1] - 1 : ''; // Set the color based on the value just below the upper limit of the current range var color02 = (i === grades.length - 1) ? getColor02(from) : getColor02(grades[i + 1] - 0.1); if (i === 0) { labels.push( '<i style="background:' + color02 + '; width:18px; height:18px; float:left; margin-right:8px; opacity:0.7;"></i> ' + from); } else { labels.push( '<i style="background:' + color02 + '; width:18px; height:18px; float:left; margin-right:8px; opacity:0.7;"></i> ' + from + (to ? '–' + to : ' - ')); } } div.innerHTML = labels.join('<br>'); return div; }; legend02.addTo(map02); // load GeoJSON-data await fetch('%fpshealth_hco_hosp_102%') .then(response => response.json()) .then(data => { geojson02 = L.geoJson(data, { style: style02, onEachFeature: onEachFeature02 }).addTo(map02); }); } // Load first map loadMap1().then(() => { // When first map is fully loaded, load second map loadMap2(); }); </script> <!-- /wp:html --> <!-- wp:spacer --> <div style="height:100px" aria-hidden="true" class="wp-block-spacer"></div> <!-- /wp:spacer -->- This reply was modified 2 years, 4 months ago by jvanbussel.
issue found: when i deactivate plugin CookieYes | GDPR Cookie Consent both maps are rendered correctly…
- This reply was modified 2 years, 4 months ago by jvanbussel.
thnx for feedback @threadi.
I just found out that if i use 2 different geojson’s, the data of both maps are rendered correctly … in Microsoft Edge, not in Chrome …
- This reply was modified 2 years, 4 months ago by jvanbussel.
Viewing 3 replies - 1 through 3 (of 3 total)