Here’s an example of what I see:
View post on imgur.com
And here’s the shortcode I’m using to display the profile:[elevation gpx="' . esc_url($file_url) . '" !linearGradient imperial waypoints=0 polyline=4 trkStart=0 trkEnd=0 summary=0]
[out:json][timeout:250];
{{geocodeArea:Deutschland}}->.searchArea;
nwr[amenity=school][!"isced:level"](area.searchArea);
out geom;or this
[out:json][timeout:250];
{{geocodeArea:Bayern}}->.searchArea;
nwr[amenity=school][!"isced:level"](area.searchArea);
out geom;or this
[out:json][timeout:250];
{{geocodeArea:München}}->.searchArea;
nwr[amenity=school][!"isced:level"](area.searchArea);
out geom;
Dear Hupe -13 – think that the dataset gives back a map – i think that it should be possible that we can export this in geojson – are we able to show the map in a leaflet or so .on a wordpress-widget!?
Look forward to hear from you
]]>“And by the way, how can we place the symbols next to the name in the legend? Thank you! Great plugin!!”
[leaflet-map lat=41.47492520278639 lng=352.11181640625006 zoom=9 height=”450″]
[fullscreen]
[leaflet-geojson circleMarker color=red radius=5 src=”https://192.168.10.13/wp-content/uploads/2024/01/pote.geojson”]Nome:{NOME}[/leaflet-geojson]
[leaflet-geojson circleMarker color=blue radius=5 src=”https://192.168.10.13/wp-content/uploads/2024/01/clies.geojson”]Nome:{NOME}[/leaflet-geojson]
[[leaflet-featuregroup property=CAE values=”pot” groups=”Pote” visible=0]
[leaflet-featuregroup property=”Com” values=”Br,Ce,Ch,Jo,Ma,Pe,Re,Ri” groups=”Br,Ce,Ch,Jo,Ma,Pe,Re,Ri” visible=0]
I want to render 2 leaflet maps of Belgian municipalities in the same wordpress post using html blocks.
I use different id’s for map (map1 and map2), info (info1 and info2), geojson (geojson1 and geojson2) and legend (legend1 and legend2).
Both maps use the same geojson but different property (indicator01 and indicator02)
in the ‘edit’mode the maps are rendered correctly … BUT in publish mode not … There the tileLayer for both maps is rendered correctly, as do the infobox and the legend. but the geojson is only for the 2nd map rendered correctly. for the first map, no data is rendered.
In browser console, i cannot find any relevant issues…
Any suggestions on root cause and solution?
Thnx in advance,
Johan
<!-- 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="map1" style="width: 100%; height: 600px;"></div>
<link rel="stylesheet" />
<script src="https://unpkg.com/[email protected]/dist/leaflet.js"></script>
<script>
// Initialiseer de kaart met beperkte zoom- en sleepfuncties
var map1 = L.map('map1', {
center: [50.536, 4.399],
zoom: 8,
zoomControl: false,
scrollWheelZoom: false,
doubleClickZoom: false,
touchZoom: false,
dragging: false
});
// Laad de basiskaartlaag
L.tileLayer('https://{s}.basemaps.cartocdn.com/light_nolabels/{z}/{x}/{y}.png', {
maxZoom: 19,
attribution: '?OpenStreetMap, ?CartoDB'
}).addTo(map1);
// Functie om de kleur voor elk gebied in te stellen
function getColor(indicator01) {
return indicator01 > 999 ? '#001d6b' :
indicator01 > 499 ? '#28438d' :
indicator01 > 249 ? '#39569e' :
indicator01 > 99 ? '#4a6aaf' :
indicator01 > 49 ? '#6e93cf' :
indicator01 > 24 ? '#97bdef' :
indicator01 > 1 ? '#add3ff' :
'#FFFFFF';
}
// Functie om de stijl van elk gebied in te stellen
function style(feature) {
return {
fillColor: getColor(feature.properties.indicator01),
weight: 1,
opacity: 1,
color: 'gray',
dashArray: '1',
fillOpacity: 0.7
};
}
// Functie voor het highlighten van gebieden
function highlightFeature(e) {
var layer = e.target;
layer.setStyle({
weight: 3,
color: '#FF6600',
dashArray: '',
fillOpacity: 0.9
});
if (!L.Browser.ie && !L.Browser.opera && !L.Browser.edge) {
layer.bringToFront();
}
info1.update(layer.feature.properties);
}
// Reset de highlight stijl
function resetHighlight(e) {
geojson1.resetStyle(e.target);
info1.update();
}
// Functie om interactie toe te voegen
function onEachFeature(feature, layer) {
layer.bindPopup(feature.properties.shape4);
layer.on({
mouseover: highlightFeature,
mouseout: resetHighlight
});
}
// Info box
var info1 = L.control({position: 'topright'});
info1.onAdd = function (map1) {
this._div = L.DomUtil.create('div', 'info');
this.update();
return this._div;
};
info1.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.');
};
info1.addTo(map1);
// Legend
var legend1 = L.control({position: 'bottomright'});
legend1.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 : '';
// Bepaal de kleur op basis van de waarde net onder de bovengrens van het huidige bereik
var color = (i === grades.length - 1) ? getColor(from) : getColor(grades[i + 1] - 0.1);
if (i === 0) {
labels.push(
'<i style="background:' + color + '; width:18px; height:18px; float:left; margin-right:8px; opacity:0.7;"></i> ' +
from);
} else {
labels.push(
'<i style="background:' + color + '; width:18px; height:18px; float:left; margin-right:8px; opacity:0.7;"></i> ' +
from + (to ? '–' + to : ' - '));
}
}
div.innerHTML = labels.join('<br>');
return div;
};
legend1.addTo(map1);
// Laad de GeoJSON-data
var geojson1;
fetch('https://raw.githubusercontent.com/healthfacts/factsheet_hospital_market_share-geojson/main/factsheet_hospital_market_share_2021_322.geojson')
.then(response => response.json())
.then(data => {
geojson1 = L.geoJson(data, {
style: style,
onEachFeature: onEachFeature
}).addTo(map1);
});
</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="map2" style="width: 100%; height: 600px;"></div>
<link rel="stylesheet" />
<script src="https://unpkg.com/[email protected]/dist/leaflet.js"></script>
<script>
// Initialiseer de kaart met beperkte zoom- en sleepfuncties
var map2 = L.map('map2', {
center: [50.536, 4.399],
zoom: 8,
zoomControl: false,
scrollWheelZoom: false,
doubleClickZoom: false,
touchZoom: false,
dragging: false
});
// Laad de basiskaartlaag
L.tileLayer('https://{s}.basemaps.cartocdn.com/light_nolabels/{z}/{x}/{y}.png', {
maxZoom: 19,
attribution: '?OpenStreetMap, ?CartoDB'
}).addTo(map2);
// Functie om de kleur voor elk gebied in te stellen
function getColor(indicator02) {
return indicator02 > 999 ? '#001d6b' :
indicator02 > 499 ? '#28438d' :
indicator02 > 249 ? '#39569e' :
indicator02 > 99 ? '#4a6aaf' :
indicator02 > 49 ? '#6e93cf' :
indicator02 > 24 ? '#97bdef' :
indicator02 > 1 ? '#add3ff' :
'#FFFFFF';
}
// Functie om de stijl van elk gebied in te stellen
function style(feature) {
return {
fillColor: getColor(feature.properties.indicator02),
weight: 1,
opacity: 1,
color: 'gray',
dashArray: '1',
fillOpacity: 0.7
};
}
// Functie voor het highlighten van gebieden
function highlightFeature(e) {
var layer = e.target;
layer.setStyle({
weight: 3,
color: '#FF6600',
dashArray: '',
fillOpacity: 0.9
});
if (!L.Browser.ie && !L.Browser.opera && !L.Browser.edge) {
layer.bringToFront();
}
info2.update(layer.feature.properties);
}
// Reset de highlight stijl
function resetHighlight(e) {
geojson2.resetStyle(e.target);
info2.update();
}
// Functie om interactie toe te voegen
function onEachFeature(feature, layer) {
layer.bindPopup(feature.properties.shape4);
layer.on({
mouseover: highlightFeature,
mouseout: resetHighlight
});
}
// Info box
var info2 = L.control({position: 'topright'});
info2.onAdd = function (map2) {
this._div = L.DomUtil.create('div', 'info');
this.update();
return this._div;
};
info2.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.indicator02 + ' hospitalisations'
: 'Hover over a Belgian municipality.');
};
info2.addTo(map2);
// Legend
var legend2 = L.control({position: 'bottomright'});
legend2.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 : '';
// Bepaal de kleur op basis van de waarde net onder de bovengrens van het huidige bereik
var color = (i === grades.length - 1) ? getColor(from) : getColor(grades[i + 1] - 0.1);
if (i === 0) {
labels.push(
'<i style="background:' + color + '; width:18px; height:18px; float:left; margin-right:8px; opacity:0.7;"></i> ' +
from);
} else {
labels.push(
'<i style="background:' + color + '; width:18px; height:18px; float:left; margin-right:8px; opacity:0.7;"></i> ' +
from + (to ? '–' + to : ' - '));
}
}
div.innerHTML = labels.join('<br>');
return div;
};
legend2.addTo(map2);
// Laad de GeoJSON-data
var geojson2;
fetch('https://raw.githubusercontent.com/healthfacts/factsheet_hospital_market_share-geojson/main/factsheet_hospital_market_share_2021_322.geojson')
.then(response => response.json())
.then(data => {
geojson2 = L.geoJson(data, {
style: style,
onEachFeature: onEachFeature
}).addTo(map2);
});
</script>
<!-- wp:spacer -->
<div style="height:100px" aria-hidden="true" class="wp-block-spacer"></div>
<!-- /wp:spacer --> [leaflet-geojson src="/path/to/file"]is there a way to do something like
[leaflet-geojson src=[my-geojson-shortcode]]Longer version:
I’ve got a custom post type that I created with ACF called “Routes”. Each route has and ACF “file” type field where I can upload the geojson associated with a route. I’ve selected the option to have ACF return the full file path (e.g. https://mysite.com/path.to.file.geojson) when the field is referenced.
I’m trying to create a template with Divi so that each route page will display a map with the geojson data. Therefore, I’m looking for a way to call the geojson data with some sort of placeholder. Are there any work-arounds within the leaflet-geojson shortcode that would allow me to do something like this?
]]>For example. I would like to show the distance traveled, max elevation, max grade, and other data recorded by my GPS.
I prefer geojson or kml for performance reasons. I have a large map with a lot of data. There are about 1,300 waypoints. Therefore, I would need to use something like an attribute table or data included in the kml file.
Thanks for the plugin. This does exactly what I need. I will be making a donation soon!
]]>