I found the following script on the web but I don't know how to change the way to read JSON code.
In the script the JSON code is included in a var called sitec
but I need to read that code from an external file. Any ideas how to do?
<!DOCTYPE html>
<html>
<head>
<title>JSON - Leaflet</title>
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.5.1/dist/leaflet.css"
integrity="sha512-xwE/Az9zrjBIphAcBb3F6JVqxf46+CDLwfLMHloNu6KEQCAWi6HcDUbeOfBIptF7tcCzusKFjFw2yuvEpDL9wQ=="
crossorigin="" />
<script src="https://unpkg.com/leaflet@1.5.1/dist/leaflet.js"
integrity="sha512-GffPMF3RvMeYyc1LWMHtK8EbPv0iNZ8/oTtHPx9/cc2ILxQ+u905qIwdpULaqDkyBKgOaB57QTMg7ztg8Jm2Og=="
crossorigin=""></script>
<style>
#map {
width: 800px;
height: 600px;
}
</style>
</head>
<body>
<div id='map'></div>
<script>
var map = L.map('map').setView([52.3059,0.14007], 10);
var osm=new L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png',{
attribution: '© <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'}).addTo(map);
var sitec = {
"type": "FeatureCollection",
"features": [
{
"type": "Feature",
"properties": {
"Title": "Sitec IS",
"Head": "7400 Beach Drive",
"Description": "Gavin Sinclair"
},
"geometry": {
"type": "Point",
"coordinates": [
0.16964435577392578,
52.29220753602784
]
}
},
{
"type": "Feature",
"properties": {
"Title": "JHG",
"Head": "Shortstanton sidings",
"Description": "Conor Murphy"
},
"geometry": {
"type": "Point",
"coordinates": [
0.05458831787109375,
52.29163006501503
]
}
}
]
};
function forEachFeature(feature, layer) {
var popupContent = '<h1><u><font color="red">'+feature.properties.Title+'</h1> </u></font><h2>Address: '+feature.properties.Head+'</h2><p>'+feature.properties.Description+'</p>'
layer.bindPopup(popupContent);
}
L.geoJSON(sitec,{onEachFeature:forEachFeature,
pointToLayer: function (feature, latlng) {
return L.circleMarker(latlng, {
radius: 8,
fillColor: "#ff7800",
color: "#000",
weight: 1,
opacity: 1,
fillOpacity: 0.8
})
}}).addTo(map);
</script>
</body>
</html>