It’s only part of my JS. I didn’t copy the whole thing.
However, here is the entire thing.
It works GREAT.
/\*\* \* phpVMS - Virtual Airline Administration Software \* Copyright (c) 2008 Nabeel Shahzad \* For more information, visit www.phpvms.net \* Forums: http://www.phpvms.net/forum \* Documentation: http://www.phpvms.net/docs \* \* phpVMS is licenced under the following license: \* Creative Commons Attribution Non-commercial Share Alike (by-nc-sa) \* View license.txt in the root, or visit http://creativecommons.org/licenses/by-nc-sa/3.0/ \* \* @author Nabeel Shahzad \* @copyright Copyright (c) 2008, Nabeel Shahzad \* @link http://www.phpvms.net \* @license http://creativecommons.org/licenses/by-nc-sa/3.0/ \* \* Rewritten for Google Maps v3 \*/ /\*\* \* \*/ function renderAcarsMap(opts) { let bounds = []; let selPath = []; let selPoints = [], selMarkers = []; let selDepMarker, selArrMarker, selPointsLayer, selPathLayer; let flightMarkers = []; let headingIcons = {}; let info\_window = null; let run\_once = false; opts = Object.assign({ render\_elem: 'routemap', provider: 'OpenStreetMap.Mapnik', autozoom: false, zoom: 5, refreshTime: 12000, autorefresh: true }, opts); const map = createMap(opts); /\*\* \* Get the marker for a specific heading \* @param {\*} heading \*/ const getHeadingIcon = (heading) =\> { if (!(heading in headingIcons)) { headingIcons[heading] = L.icon({ iconUrl: url + "uploads/maps/heading/" + heading + ".png", iconSize: [35, 35] }); } return headingIcons[heading]; }; /\*\* \* Clear all of the markers and selected points \*/ const clearSelMarkers = () =\> { if (selDepMarker) { selDepMarker.remove(); selDepMarker = null; } if (selArrMarker) { selArrMarker.remove(); selArrMarker = null; } if (selPointsLayer) { selPointsLayer.remove(); selPointsLayer = null; } if (selPathLayer) { selPathLayer.remove(); selPathLayer = null; } for (let i in selMarkers) { selMarkers[i].remove(); } selPoints = []; selPath = []; }; /\*\* \* Draw the points/route for a flight \* @param {\*} features \*/ const flightClick = (flight) =\> { clearSelMarkers(); const depCoords = L.latLng(flight.deplat, flight.deplng); selDepMarker = L.marker(depCoords, { icon: MapFeatures.icons.departure, }).addTo(map); const arrCoords = L.latLng(flight.arrlat, flight.arrlng); selArrMarker = L.marker(arrCoords, { icon: MapFeatures.icons.arrival, }).addTo(map); selPoints.push(depCoords); $.each(flight.route\_details, function(i, nav) { const loc = L.latLng(nav.lat, nav.lng); const icon = (nav.type === 3) ? MapFeatures.icons.vor : MapFeatures.icons.fix; selPoints.push(loc); const marker = L.marker(loc, { icon: icon, title: nav.title, }) .bindPopup(tmpl("navpoint\_bubble", { nav: nav })).on("popupopen", () =\> { $(".leaflet-popup-close-button").on("click", e =\> { clearSelMarkers(); }) }) .addTo(map); selMarkers.push(marker); }); selPoints.push(arrCoords); selPointsLayer = L.geodesic([selPoints], { weight: 3, opacity: 0.3, color: '#000000', steps: 4 }).addTo(map); /\*map.fitBounds(selPointsLayer.getBounds(),{padding: [200, 200]});\*/ /\* Attempt to show flight path \*/ $.post("/action.php/trackflight/getposreps", { pilotid: flight.pilotid.substring(3), flightnum: flight.flightnum }) .done(function( dirflts ) { $.each(dirflts, function(i, nav) { if(nav.latitude === undefined || nav.longitude === undefined) { return; } const ploc = L.latLng(nav.latitude, nav.longitude) selPath.push(ploc); }); selPathLayer = L.geodesic([selPath], { weight: 4, opacity: 0.5, color: 'red', steps: 8 }).addTo(map); }); }; /\*\* \* \* @param {\*} data \*/ const populateMap = (data) =\> { clearMap(); $("#pilotlist").html(""); /\*if (data.length == 0) { return false; }\*/ if (data.length == 0) { $("#acars\_map\_divider").hide(); $("#acars\_map\_table").hide(); // Or .css("display", "none"); return false; } $("#acars\_map\_divider").hide(); $("#acars\_map\_table").show(); // or .css("display", "block"); let lat, lng; let details, row, pilotlink; bounds = []; $.each(data, function(i, flight) { if (flight == null || flight.lat == null || flight.lng == null || flight.lat == "" || flight.lng == "") { return; } flight.lat = Number(flight.lat); flight.lng = Number(flight.lng); lat = flight.lat; lng = flight.lng; if (i % 2 == 0) flight.trclass = "even"; else flight.trclass = "odd"; // Pull ze templates! const map\_row = tmpl("acars\_map\_row", { flight: flight }); const detailed\_bubble = tmpl("acars\_map\_bubble", { flight: flight }); $('#pilotlist').append(map\_row); const pos = L.latLng(lat, lng); const marker = L.marker(pos, { icon: getHeadingIcon(flight.heading), zIndexOffset: 1000, }) .on('click', (e) =\> { flightClick(flight); }) .bindPopup(detailed\_bubble).on("popupopen", () =\> { $(".leaflet-popup-close-button").on("click", e =\> { clearSelMarkers(); }) }) .addTo(map); flightMarkers.push(marker); bounds.push(pos); /\* Clear everything when Popup closes \*/ /\* marker.getPopup().on('remove', function() { clearSelMarkers(); /\*map.setZoom(opts.zoom);\*/ /\*});\*/ }); // If they selected autozoom, only do the zoom first time if (opts.autozoom == true && run\_once == false) { map.fitBounds(bounds); run\_once = true; } } /\*\* \* Clear all markers and layers \*/ const clearMap = () =\> { // clear markers for (let i in flightMarkers) { flightMarkers[i].remove(); } }; /\*\* \* \*/ const liveRefresh = () =\> { $.ajax({ type: "GET", url: url + "/action.php/acars/data", dataType: "json", cache: false, success: function(data) { populateMap(data); } }); }; /\*\* \* Render \* \*/ liveRefresh(); if (opts.autorefresh == true) { setInterval(function() { liveRefresh(); }, opts.refreshTime); } }
