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 = '© OpenStreetMap 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());
});
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 ]
}
},
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());
});
No comments:
Post a Comment