I make a simple VATSIM card and have a problem. It is impossible to output an array of all coordinates, now only one is displayed.
<h3 id="example">Example:</h3>
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.0.1/dist/leaflet.css" />
<script src="https://unpkg.com/leaflet@1.0.1/dist/leaflet.js"></script>
<div id="map" style="width: 800px; height: 400px"> </div>
<script src="http://code.jquery.com/jquery-2.0.3.min.js"> </script>
<script>
//var map = L.map('map').setView([0,0], 2);
var map = L.map('map', {
'center': [48.11815, 16.55964],
'zoom': 3,
'layers': [
L.tileLayer('http://{s}.basemaps.cartocdn.com/light_all/{z}/{x}/{y}.png', {
attribution: '© <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors, © <a href="http://cartodb.com/attributions">CartoDB</a>'
})
]
});
function moveISS (data) {
$.getJSON('http://test.uspeh-partner.xyz/fsbuild/json.php',
function(data) {
data.forEach(function(item, index) {
var lat = item.latitude;
var lon = item.longitude;
iss.setLatLng([lat, lon]);
isscirc.setLatLng([lat, lon]);
map.panTo([lat, lon], animate=true);
});
// iss.setLatLng([lat, lon]);
// isscirc.setLatLng([lat, lon]);
// map.panTo([lat, lon], animate=true);
});
setTimeout(moveISS, 10000);
}
var ISSIcon = L.icon({
iconUrl: 'http://open-notify.org/Open-Notify-API/map/ISSIcon.png',
iconSize: [50, 30],
iconAnchor: [25, 15],
popupAnchor: [50, 25],
shadowUrl: 'http://open-notify.org/Open-Notify-API/map/ISSIcon_shadow.png',
shadowSize: [60, 40],
shadowAnchor: [30, 15]
});
var iss = L.marker([0, 0], {icon: ISSIcon}).addTo(map);
var isscirc = L.circle([0,0], 2200e3, {color: "#c22", opacity: 0.3, weight:1, fillColor: "#c22", fillOpacity: 0.1}).addTo(map);
moveISS();
console.log(data);
</script>