Sunday 31 July 2016

javascript - Leaflet load JSON data


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

arcpy - Changing output name when exporting data driven pages to JPG?

Is there a way to save the output JPG, changing the output file name to the page name, instead of page number? I mean changing the script fo...