0

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: '&copy; <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>
Improve this question
  • 1
    i saw the link. But can you integrate the external loading inside that script so i can use? – user2183028 Apr 28 '20 at 6:06
  • 2
    First you have to try it. If it doesn't work, publish a new question with your nonworking code. – TomazicM Apr 28 '20 at 6:24

Browse other questions tagged or ask your own question.