<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="//cdn.leafletjs.com/leaflet-0.7.5/leaflet.css" />
<link rel="stylesheet" href="style.css" />
</head>
<body>
<div id="leaflet"></div>
<script type="text/javascript" src="//cdn.leafletjs.com/leaflet-0.7.5/leaflet.js"></script>
<script type="text/javascript" src="script.js"></script>
</body>
</html>
var map = L.map('leaflet', {
'center': [0, 0],
'zoom': 0,
'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>'
})
]
});
var markers = {};
function setMarkers(data) {
data.BMS.forEach(function (obj) {
if (!markers.hasOwnProperty(obj.id)) {
markers[obj.id] = new L.Marker([obj.lat, obj.long]).addTo(map);
markers[obj.id].previousLatLngs = [];
} else {
markers[obj.id].previousLatLngs.push(markers[obj.id].getLatLng());
markers[obj.id].setLatLng([obj.lat, obj.long]);
}
});
}
var json = {
"BMS":[{
"id": 'A',
"lat": -45,
"long": -45
},{
"id": 'B',
"lat": 45,
"long": -45
}]
}
setMarkers(json);
var updatedJson = {
"BMS":[{
"id": 'A',
"lat": -45,
"long": 45
},{
"id": 'B',
"lat": 45,
"long": 45
}]
}
setTimeout(function () {
setMarkers(updatedJson);
}, 3000);
console.log(markers);
body {
margin: 0;
}
html, body, #leaflet {
height: 100%;
}