var mymap = L.map('bigmap').setView([{%START_LOCATION%}], 14); L.tileLayer('https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token={accessToken}', { attribution: 'Map data © OpenStreetMap contributors, CC-BY-SA, Imagery © Mapbox', maxZoom: 20, id: 'mapbox.streets', accessToken: '{%YOUR_API_KEY%}' }).addTo(mymap); var markers = {}; setInterval(datarunner, 1000); function datarunner() { var xhttp = new XMLHttpRequest(); xhttp.onreadystatechange = parsedata; xhttp.open("GET", "http://{%REQUEST_URL_HOST%}:8080/loc", true); xhttp.send(); } //https://leafletjs.com/reference-1.4.0.html#marker function parsedata() { if (this.readyState == 4 && this.status == 200) { var items = JSON.parse(this.responseText); for (var key in items) { if (items.hasOwnProperty(key)) { var markeritem = items[key]; if (!markers.hasOwnProperty(key)) { markers[key] = L.marker([markeritem['Latitude'], markeritem['Longitude']]).addTo(mymap); } else { markers[key].setLatLng([markeritem['Latitude'], markeritem['Longitude']]); } } } } } /*var devices = {}; function get_elm() { var colors = new Array( "http://maps.google.com/mapfiles/ms/icons/green-dot.png", "http://maps.google.com/mapfiles/ms/icons/blue-dot.png", "http://maps.google.com/mapfiles/ms/icons/purple-dot.png", "http://maps.google.com/mapfiles/ms/icons/yellow-dot.png", ); var xhttp = new XMLHttpRequest(); xhttp.onreadystatechange = function () { if (this.readyState == 4 && this.status == 200) { var obj = JSON.parse(this.responseText); var i = 0; for (var names in obj) { if (obj.hasOwnProperty(names)) { if (!devices.hasOwnProperty(names)) { devices[names] = 0; } var list = obj[names]; var j = devices[names]; for (var pos in list) { if (list.hasOwnProperty(pos)) { var m = new google.maps.Marker({ icon: colors[i % colors.length], position: new google.maps.LatLng(list[pos]["Latitude"], list[pos]["Longitude"]), animation: google.maps.Animation.DROP }); var infowindow = new google.maps.InfoWindow({ content: "