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 = '© <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
orpointToLayer
function inL.geojson
to create markers