Leaflet – Loading JSON Data in Leaflet

geojsonjavascriptjsonleaflet

Does my code have problem? Because if I run in Visual Studio, it doesn't show error, but the file didn't load on my map.
I put the JSON file and HTML on my desktop.

This is my code :

    var osmUrl = 'https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',
        osmAttrib = '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors',
        osm = L.tileLayer(osmUrl, { maxZoom: 20, attribution: osmAttrib });
    var map = L.map('map').setView([24.151687694799833, 120.64116954803465], 15).addLayer(osm);

    L.control.scale().addTo(map);

    $.getJSON("taiwan.json", function (data) {
        var datalayer = L.geoJson(data, {
            onEachFeature: function (feature, featureLayer) {
                featureLayer.bindPopup(feature.properties.date);
            }
        }).addTo(map);
        map.fitBounds(datalayer.getBounds());
    });

</script>

This is my json (part of one)

{"type": "FeatureCollection","features": [
{
  "type": "Feature",
  "properties": {
    "date": "1\/5\/1995 6:14:00",
    "id": "第001號",
    "lat": "24.96",
    "lng": "121.7",
    "depth": "91.5",
    "magnitude": "4.5",
    "desc": "台北市地震站東偏南方20.2公里",
    "_id": 49710583
  },
  "geometry": {
    "type": "Point",
    "coordinates": [ 121.7, 24.96 ]
  }
},
{
  "type": "Feature",
  "properties": {
    "date": "1\/10\/1995 15:55:00",
    "id": "第002號",
    "lat": "23.68",
    "lng": "121.43",
    "depth": "3.8",
    "magnitude": "5.1",
    "desc": "花蓮西林地震站南方14.6公里",
    "_id": 49710584
  },
  "geometry": {
    "type": "Point",
    "coordinates": [ 121.43, 23.68 ]
  }
},

Best Answer

You need to define styles or pointToLayer function in L.geojson to create markers

var geojsonMarkerOptions = {
    radius: 8,
    fillColor: "#ff7800",
    color: "#000",
    weight: 1,
    opacity: 1,
    fillOpacity: 0.8
};
$.getJSON("taiwan.json", function (data) {
    var datalayer = L.geoJson(data, {
        onEachFeature: function (feature, featureLayer) {
            featureLayer.bindPopup(feature.properties.date);
        },
        pointToLayer: function (feature, latlng) {
            return L.circleMarker(latlng, geojsonMarkerOptions);
        }
    }).addTo(map);
    map.fitBounds(datalayer.getBounds());
});
Related Question