1

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 ]
  }
},
  • You need to define pointToLayer function in L.geojson to create markers – neogeomat Aug 7 at 4:30
2

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());
});

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.