diff --git a/TODO.md b/TODO.md index f68d491..89748b2 100644 --- a/TODO.md +++ b/TODO.md @@ -40,6 +40,9 @@ Traffic heatmap (DB needed) CC BY-SA 3.0 https://commons.wikimedia.org/wiki/File:Plane_font_awesome.svg +public/flaticon.com/ga-*.png +
Icons made by Freepik from www.flaticon.com
+ ## Theme Green 33cc99 A10 @@ -54,4 +57,6 @@ Local search https://docs.mapbox.com/mapbox-gl-js/example/forward-geocode-custom-data/ Progressive taxi? / taxi markup for pilot assist -https://docs.mapbox.com/mapbox-gl-js/example/measure/ \ No newline at end of file +https://docs.mapbox.com/mapbox-gl-js/example/measure/ + +https://docs.mapbox.com/mapbox-gl-js/example/set-popup/ \ No newline at end of file diff --git a/block.html b/block.html new file mode 100644 index 0000000..06d636b --- /dev/null +++ b/block.html @@ -0,0 +1,47 @@ +

Traffic in VATPAC airspace

+
+ \ No newline at end of file diff --git a/client.js b/client.js index ee16bbd..43ebc14 100644 --- a/client.js +++ b/client.js @@ -3,7 +3,9 @@ import fetch from 'node-fetch'; import { xml2js } from 'xml-js'; import dms2dec from 'dms2dec'; import { lineToPolygon, lineString } from '@turf/turf'; +import bunyan from 'bunyan'; +var log = bunyan.createLogger({name: "vatsim-map"}) const cache = new NodeCache( { stdTTL: 15, checkperiod: 30 } ); /** @@ -14,7 +16,7 @@ const cache = new NodeCache( { stdTTL: 15, checkperiod: 30 } ); */ export function clearCache(){ - console.log('Clearing cache') + log.info('Clearing cache') cache.flushAll(); return true; } @@ -36,12 +38,20 @@ export async function getVatsimData (url) { .then( data => { return data; }) - .catch(err => console.log(err)); + .catch(err => log.error(err)); data = res; - console.log(`cache:set url:${url} keys:${Object.keys(data).length}`) + log.info({ + cache: 'set', + url: url, + keys: Object.keys(data).length + }) cache.set("vatsimData", data, 15); }else{ - console.log(`cache:get url:${url} keys:${Object.keys(data).length}`) + log.info({ + cache: 'get', + url: url, + keys: Object.keys(data).length + }) } return data; } @@ -55,12 +65,20 @@ export async function getVatsimAFV (url) { .then( data => { return data; }) - .catch(err => console.log(err)); + .catch(err => log.error(err)); data = res; - console.log(`cache:set url:${url} keys:${Object.keys(data).length}`) + log.info({ + cache: 'set', + url: url, + keys: Object.keys(data).length + }); cache.set("vatsimAFV", data, 15); }else{ - console.log(`cache:get url:${url} keys:${Object.keys(data).length}`) + log.info({ + cache: 'get', + url: url, + keys: Object.keys(data).length + }) } return data; } @@ -82,20 +100,27 @@ export async function getLineFeatures (url) { .then( data => { return data; }) - .catch(err => console.log(err)); + .catch(err => log.error(err)); data = await xml2js(res, {compact: true, spaces: 4}); }catch(err){ throw Error(err); } var features = xmlToFeatures(data); - console.log(features); - console.log(`cache:set url:${url} objs:${features.length}`) + log.info({ + cache: 'set', + url: url, + objs: data.length + }) cache.set(url, features, 86400); return features; }else{ - console.log(`cache:get url:${url} objs:${data.length}`) + log.info({ + cache: 'get', + url: url, + objs: data.length + }) return data; } } @@ -107,70 +132,72 @@ function xmlToFeatures (data) { // (?[+-][0-9]{2})(?[0-9]{2})(?[0-9]{2}\.[0-9]{3})(?[+-][0-9]{3})(?[0-9]{2})(?[0-9]{2}\.[0-9]{3}) const re = new RegExp(/(?[+-])(?[0-9]{2})(?[0-9]{2})(?[0-9]{2}\.[0-9]{3})(?[+-])(?[0-9]{3})(?[0-9]{2})(?[0-9]{2}\.[0-9]{3})/g) - // Handle Maps - FIR Boundaries - try{ - data.Maps.Map.Line.forEach(function(obj){ - var lineStringArr = []; - var matches = [...obj._text.matchAll(re)]; - matches.forEach(function(match){ - // Convert vaySys DMS into decimal degrees - // https://github.com/vatSys/xml-tools/blob/master/DotAIPtoXML/DotAIPtoXML/Coordinate.cs#L119 - var pos = { - latitude: [ - parseInt(match.groups.latD), - parseInt(match.groups.latM), - parseFloat(match.groups.latS) - ], - latRef: (match.groups.latRef == '+') ? "N" : "S", - longitude: [ - parseInt(match.groups.lonD), - parseInt(match.groups.lonM), - parseFloat(match.groups.lonS) - ], - lonRef: (match.groups.lonRef == '+') ? "E" : "W" - } - var [ latitude, longitude ] = dms2dec(pos.latitude,pos.latRef,pos.longitude,pos.lonRef); - // Turf is geoJSON so we continue the stupidity here with long THEN lat. - lineStringArr.push([longitude, latitude]); - }); - polys.push(lineToPolygon(lineString(lineStringArr),{mutate: true, properties: {name: obj._attributes.Name}})); - }) - }catch(err){ - console.log(err); + if(data.Maps.Map.Line == undefined){ + // Handle volumes + try{ + data.Volumes.Boundary.forEach(function(obj){ + var lineStringArr = []; + var matches = [...obj._text.matchAll(re)]; + matches.forEach(function(match){ + // Convert vaySys DMS into decimal degrees + // https://github.com/vatSys/xml-tools/blob/master/DotAIPtoXML/DotAIPtoXML/Coordinate.cs#L119 + var pos = { + latitude: [ + parseInt(match.groups.latD), + parseInt(match.groups.latM), + parseFloat(match.groups.latS) + ], + latRef: (match.groups.latRef == '+') ? "N" : "S", + longitude: [ + parseInt(match.groups.lonD), + parseInt(match.groups.lonM), + parseFloat(match.groups.lonS) + ], + lonRef: (match.groups.lonRef == '+') ? "E" : "W" + } + var [ latitude, longitude ] = dms2dec(pos.latitude,pos.latRef,pos.longitude,pos.lonRef); + // Turf is geoJSON so we continue the stupidity here with long THEN lat. + lineStringArr.push([longitude, latitude]); + }); + polys.push(lineToPolygon(lineString(lineStringArr),{mutate: true, properties: {name: obj._attributes.Name}})); + }) + }catch(err){ + log.error(err); + } + }else{ + // Handle Maps - FIR Boundaries + try{ + data.Maps.Map.Line.forEach(function(obj){ + var lineStringArr = []; + var matches = [...obj._text.matchAll(re)]; + matches.forEach(function(match){ + // Convert vaySys DMS into decimal degrees + // https://github.com/vatSys/xml-tools/blob/master/DotAIPtoXML/DotAIPtoXML/Coordinate.cs#L119 + var pos = { + latitude: [ + parseInt(match.groups.latD), + parseInt(match.groups.latM), + parseFloat(match.groups.latS) + ], + latRef: (match.groups.latRef == '+') ? "N" : "S", + longitude: [ + parseInt(match.groups.lonD), + parseInt(match.groups.lonM), + parseFloat(match.groups.lonS) + ], + lonRef: (match.groups.lonRef == '+') ? "E" : "W" + } + var [ latitude, longitude ] = dms2dec(pos.latitude,pos.latRef,pos.longitude,pos.lonRef); + // Turf is geoJSON so we continue the stupidity here with long THEN lat. + lineStringArr.push([longitude, latitude]); + }); + polys.push(lineToPolygon(lineString(lineStringArr),{mutate: true, properties: {name: obj._attributes.Name}})); + }) + }catch(err){ + log.error(err); + } } - // Handle volumes - try{ - data.Volumes.Boundary.forEach(function(obj){ - var lineStringArr = []; - var matches = [...obj._text.matchAll(re)]; - matches.forEach(function(match){ - // Convert vaySys DMS into decimal degrees - // https://github.com/vatSys/xml-tools/blob/master/DotAIPtoXML/DotAIPtoXML/Coordinate.cs#L119 - var pos = { - latitude: [ - parseInt(match.groups.latD), - parseInt(match.groups.latM), - parseFloat(match.groups.latS) - ], - latRef: (match.groups.latRef == '+') ? "N" : "S", - longitude: [ - parseInt(match.groups.lonD), - parseInt(match.groups.lonM), - parseFloat(match.groups.lonS) - ], - lonRef: (match.groups.lonRef == '+') ? "E" : "W" - } - var [ latitude, longitude ] = dms2dec(pos.latitude,pos.latRef,pos.longitude,pos.lonRef); - // Turf is geoJSON so we continue the stupidity here with long THEN lat. - lineStringArr.push([longitude, latitude]); - }); - polys.push(lineToPolygon(lineString(lineStringArr),{mutate: true, properties: {name: obj._attributes.Name}})); - }) - }catch(err){ - console.log(err); - } - return polys }; diff --git a/public/aircraft.png b/public/aircraft.png deleted file mode 100644 index e67f3b8..0000000 Binary files a/public/aircraft.png and /dev/null differ diff --git a/public/flaticon.com/ga-dark.png b/public/flaticon.com/ga-dark.png new file mode 100644 index 0000000..41059ac Binary files /dev/null and b/public/flaticon.com/ga-dark.png differ diff --git a/public/flaticon.com/ga-light.png b/public/flaticon.com/ga-light.png new file mode 100644 index 0000000..b7cb6e3 Binary files /dev/null and b/public/flaticon.com/ga-light.png differ diff --git a/public/fontawesome/jet-dark.png b/public/fontawesome/jet-dark.png new file mode 100644 index 0000000..f4f1b79 Binary files /dev/null and b/public/fontawesome/jet-dark.png differ diff --git a/public/fontawesome/jet-light.png b/public/fontawesome/jet-light.png new file mode 100644 index 0000000..35bbd1e Binary files /dev/null and b/public/fontawesome/jet-light.png differ diff --git a/public/leader.png b/public/leader.png deleted file mode 100644 index 6e7c7b0..0000000 Binary files a/public/leader.png and /dev/null differ diff --git a/public/map.html b/public/map.html index aa49976..adf1b07 100644 --- a/public/map.html +++ b/public/map.html @@ -1,5 +1,6 @@ + @@ -62,145 +58,323 @@ if (tmp[0] === parameterName) result = decodeURIComponent(tmp[1]); }); return result; - } + } var theme = findGetParameter('theme'); if(theme == 'dark'){ map.setStyle(styleDark); } - //options.localGeocoder Function? A function accepting the query string which performs local geocoding to supplement results from the Mapbox Geocoding API. Expected to return an Array of GeoJSON Features in the Carmen GeoJSON format. - function forwardGeocoder(query) { - // var response = await fetch(`${window.location.protocol}//${window.location.hostname}:${window.location.port}/v1/pilots`); - // var json = await response.json(); - var xmlhttp = new XMLHttpRequest(); - xmlhttp.onreadystatechange = function() { - if (this.readyState == 4 && this.status == 200) { - var json = JSON.parse(this.responseText); - // console.log(json.features.length) - var matchingFeatures = []; - for (var i = 0; i < json.features.length; i++) { - var feature = json.features[i]; - // Handle queries with different capitalization - // than the source data by calling toLowerCase(). - if ( - feature.properties.pilot.callsign - .toLowerCase() - .search(query.toLowerCase()) !== -1 - ) { - // Add a tree emoji as a prefix for custom - // data results using carmen geojson format: - // https://github.com/mapbox/carmen/blob/master/carmen-geojson.md - feature['place_name'] = '🌲 ' + feature.properties.pilot.callsign; - feature['center'] = feature.geometry.coordinates; - matchingFeatures.push(feature); + // //options.localGeocoder Function? A function accepting the query string which performs local geocoding to supplement results from the Mapbox Geocoding API. Expected to return an Array of GeoJSON Features in the Carmen GeoJSON format. + // function forwardGeocoder(query) { + // // var response = await fetch(`${window.location.protocol}//${window.location.hostname}:${window.location.port}/v1/pilots`); + // // var json = await response.json(); + // var xmlhttp = new XMLHttpRequest(); + // xmlhttp.onreadystatechange = function() { + // if (this.readyState == 4 && this.status == 200) { + // var json = JSON.parse(this.responseText); + // // console.log(json.features.length) + // var matchingFeatures = []; + // for (var i = 0; i < json.features.length; i++) { + // var feature = json.features[i]; + // // Handle queries with different capitalization + // // than the source data by calling toLowerCase(). + // if ( + // feature.properties.pilot.callsign + // .toLowerCase() + // .search(query.toLowerCase()) !== -1 + // ) { + // // Add a tree emoji as a prefix for custom + // // data results using carmen geojson format: + // // https://github.com/mapbox/carmen/blob/master/carmen-geojson.md + // feature['place_name'] = '🌲 ' + feature.properties.pilot.callsign; + // feature['center'] = feature.geometry.coordinates; + // matchingFeatures.push(feature); + // } + // } + // console.log(matchingFeatures) + // return matchingFeatures; + // } + // }; + // xmlhttp.open("GET", `${window.location.protocol}//${window.location.hostname}:${window.location.port}/v1/pilots`, false); + // xmlhttp.send(); + // } + + // // Add the search control to the map. + // map.addControl( + // new MapboxGeocoder({ + // accessToken: mapboxgl.accessToken, + // mapboxgl: mapboxgl, + // localGeocoder: forwardGeocoder, + // localGeocoderOnly: true, + // zoom: 14, + // placeholder: 'Find aircraft' + // }) + // ); + + + // async function getATCSectors() { + // try{ + // var response = await fetch(`${window.location.protocol}//${window.location.hostname}:${window.location.port}/v1/atc/sectors`); + // var json = await response.json(); + // map.addSource('sectors', { + // 'type': 'geojson', + // 'data': json + // }); + // // Add a new layer to visualize the polygon. + // map.addLayer({ + // 'id': 'sectors', + // 'type': 'fill', + // 'source': 'sectors', // reference the data source + // 'layout': {}, + // 'paint': { + // 'fill-color': '#0080ff', // blue color fill + // 'fill-opacity': 0.1 + // } + // }); + // // Add a black outline around the polygon. + // map.addLayer({ + // 'id': 'outline', + // 'type': 'line', + // 'source': 'sectors', + // 'layout': {}, + // 'paint': { + // 'line-color': '#000', + // 'line-width': 1 + // } + // }); + // // // Add sector labels + // // json.features.forEach(function(sector){ + // // console.log(sector) + // // var marker = new mapboxgl.Marker() + // // .setLngLat(turf.center({geojson: sector})) + // // .addTo(map); + // // }); + + // }catch(err){ + // throw Error(err); + // } + // }; + + // var refresh = setInterval(setPilotMarkers, 1000); + // var drawn = false; + + async function setPilotMarkers () { + console.log(`setPilotMarkers`); + var response = await fetch(`${window.location.protocol}//${window.location.hostname}:${window.location.port}/v1/pilots`); + var json = await response.json(); + try{ + // Marker approach + for (const marker of json.features) { + console.log(marker); + // Create popup for each Marker + const popup = new mapboxgl.Popup({ offset: 25 }).setText( + `Callsign: ${marker.properties.pilot.callsign} + Pilot: ${marker.properties.pilot.name}` + ); + // Regex callsigns + // Anything using a VH callsign or three leters get GA + const re = new RegExp(/^VH-[A-Z]{3}$|^VH[A-Z]{3}$|^[A-Z]{3}$/); + const gaIcon = re.test(marker.properties.pilot.callsign); + console.log(`gaIcon re ${gaIcon}`); + console.log(marker.properties.pilot.callsign) + // Create a DOM element for each marker. + const el = document.createElement('div'); + // const width = 20; + // const height = 20; + el.className = 'marker'; + if(gaIcon == true){ + el.style.width = `17px`; + el.style.height = `17px`; + if(theme=="dark"){ + el.style.backgroundImage = `url(${window.location.protocol}//${window.location.hostname}:${window.location.port}/static/flaticon.com/ga-dark.png)`; + }else{ + el.style.backgroundImage = `url(${window.location.protocol}//${window.location.hostname}:${window.location.port}/static/flaticon.com/ga-light.png)`; + } + }else{ + el.style.width = `20px`; + el.style.height = `20px`; + if(theme=="dark"){ + el.style.backgroundImage = `url(${window.location.protocol}//${window.location.hostname}:${window.location.port}/static/fontawesome/jet-dark.png)`; + }else{ + el.style.backgroundImage = `url(${window.location.protocol}//${window.location.hostname}:${window.location.port}/static/fontawesome/jet-light.png)`; } } - console.log(matchingFeatures) - return matchingFeatures; - } - }; - xmlhttp.open("GET", `${window.location.protocol}//${window.location.hostname}:${window.location.port}/v1/pilots`, false); - xmlhttp.send(); - } - // Add the search control to the map. - map.addControl( - new MapboxGeocoder({ - accessToken: mapboxgl.accessToken, - mapboxgl: mapboxgl, - localGeocoder: forwardGeocoder, - localGeocoderOnly: true, - zoom: 14, - placeholder: 'Find aircraft' - }) - ); + el.style.backgroundSize = '100%'; + el.addEventListener('click', () => { + window.alert(marker.properties.message); + }); + + // Add markers to the map. + new mapboxgl.Marker(el) + .setLngLat(marker.geometry.coordinates) + .setPopup(popup) + // Icon sets are rotated 45 + .setRotation(marker.properties.pilot.heading - 45) + .addTo(map); + // Layer approach - async function getATCSectors() { - try{ - var response = await fetch(`${window.location.protocol}//${window.location.hostname}:${window.location.port}/v1/atc/sectors`); - var json = await response.json(); - map.addSource('sectors', { + // Add a symbol layer + if(theme=="dark"){ + var mapLayer = map.getLayer('aircraft'); + + if(typeof mapLayer !== 'undefined') { + // Remove map layer & source. + map.removeLayer('aircraft').removeSource('aircraft'); + } + + map.addSource('aircraft', { 'type': 'geojson', + 'attribution': 'vatsim-map', 'data': json }); - // Add a new layer to visualize the polygon. - map.addLayer({ - 'id': 'sectors', - 'type': 'fill', - 'source': 'sectors', // reference the data source - 'layout': {}, - 'paint': { - 'fill-color': '#0080ff', // blue color fill - 'fill-opacity': 0.1 - } - }); - // Add a black outline around the polygon. - map.addLayer({ - 'id': 'outline', - 'type': 'line', - 'source': 'sectors', - 'layout': {}, - 'paint': { - 'line-color': '#000', - 'line-width': 1 + map.addLayer({ + 'id': 'aircraft', + 'type': 'symbol', + 'source': 'aircraft', + 'layout': { + // 'icon-image': 'custom-marker', + // 'icon-size': 0.08, + // 'icon-rotate': [ 'get', 'heading', ['object', ['get', 'pilot']]], + // 'icon-allow-overlap': true, + // 'icon-ignore-placement': true, + 'text-field': ['format', ['get', 'callsign', ['object', ['get', 'pilot']]], { 'text-color': '#FFF'}], + 'text-font': [ + 'Open Sans Semibold', + 'Arial Unicode MS Bold' + ], + 'text-offset': [1, 1], + // 'text-anchor': 'bottom', + 'text-variable-anchor': ["top", "bottom", "left"], + 'text-allow-overlap': true, + 'text-ignore-placement': true + } + }); + }else{ + var mapLayer = map.getLayer('aircraft'); + + if(typeof mapLayer !== 'undefined') { + // Remove map layer & source. + map.removeLayer('aircraft').removeSource('aircraft'); + } + + map.addSource('aircraft', { + 'type': 'geojson', + 'attribution': 'vatsim-map', + 'data': json + }); + + map.addLayer({ + 'id': 'aircraft', + 'type': 'symbol', + 'source': 'aircraft', + 'layout': { + // 'icon-image': 'custom-marker', + // 'icon-size': 0.08, + // 'icon-rotate': [ 'get', 'heading', ['object', ['get', 'pilot']]], + // 'icon-allow-overlap': true, + // 'icon-ignore-placement': true, + 'text-field': ['format', ['get', 'callsign', ['object', ['get', 'pilot']]], { 'text-color': '#000'}], + 'text-font': [ + 'Open Sans Semibold', + 'Arial Unicode MS Bold' + ], + 'text-offset': [1, 1], + // 'text-anchor': 'bottom', + 'text-variable-anchor': ["top", "bottom", "left"], + 'text-allow-overlap': true, + 'text-ignore-placement': true + } + }); + } + } - }); - // // Add sector labels - // json.features.forEach(function(sector){ - // console.log(sector) - // var marker = new mapboxgl.Marker() - // .setLngLat(turf.center({geojson: sector})) - // .addTo(map); - // }); - }catch(err){ - throw Error(err); + console.log(err) } }; - var refresh = setInterval(setPilotsLayer, 15000); - var drawn = false; async function setPilotsLayer () { var response = await fetch(`${window.location.protocol}//${window.location.hostname}:${window.location.port}/v1/pilots`); var json = await response.json(); if(drawn == false){ try{ - map.addSource('aircraft', { - 'type': 'geojson', - 'attribution': 'vatsim-map', - 'data': json - }); - // Add a symbol layer - map.addLayer({ - 'id': 'aircraft', - 'type': 'symbol', - 'source': 'aircraft', - 'layout': { - 'icon-image': 'custom-marker', - 'icon-size': 0.08, - 'icon-rotate': [ 'get', 'heading', ['object', ['get', 'pilot']]], - 'icon-allow-overlap': true, - 'icon-ignore-placement': true, - 'text-field': ['format', ['get', 'callsign', ['object', ['get', 'pilot']]], { 'text-color': '#000000'}], - 'text-font': [ - 'Open Sans Semibold', - 'Arial Unicode MS Bold' - ], - 'text-offset': [1, 1], - // 'text-anchor': 'bottom', - 'text-variable-anchor': ["top", "bottom", "left"], - 'text-allow-overlap': true, - 'text-ignore-placement': true + // Layer approach + // map.addSource('aircraft', { + // 'type': 'geojson', + // 'attribution': 'vatsim-map', + // 'data': json + // }); + // // Add a symbol layer + // map.addLayer({ + // 'id': 'aircraft', + // 'type': 'symbol', + // 'source': 'aircraft', + // 'layout': { + // 'icon-image': 'custom-marker', + // 'icon-size': 0.08, + // 'icon-rotate': [ 'get', 'heading', ['object', ['get', 'pilot']]], + // 'icon-allow-overlap': true, + // 'icon-ignore-placement': true, + // 'text-field': ['format', ['get', 'callsign', ['object', ['get', 'pilot']]], { 'text-color': '#000000'}], + // 'text-font': [ + // 'Open Sans Semibold', + // 'Arial Unicode MS Bold' + // ], + // 'text-offset': [1, 1], + // // 'text-anchor': 'bottom', + // 'text-variable-anchor': ["top", "bottom", "left"], + // 'text-allow-overlap': true, + // 'text-ignore-placement': true + // } + // }); + + // Marker approach + for (const marker of json.features) { + // Regex callsigns + // Anything using a VH callsign or three leters get GA + const re = new RegExp('VH-[A-Z]{3}|VH[A-Z]{3}|[A-Z]{3}') + const gaIcon = re.test(marker.callsign); + console.log(`gaIcon re ${gaIcon}`); + // Create a DOM element for each marker. + const el = document.createElement('div'); + const width = 20; + const height = 20; + el.className = 'marker'; + if(gaIcon){ + if(theme=="dark"){ + el.style.backgroundImage = `url(${window.location.protocol}//${window.location.hostname}:${window.location.port}/static/flaticon.com/ga-dark.png)`; + }else{ + el.style.backgroundImage = `url(${window.location.protocol}//${window.location.hostname}:${window.location.port}/static/flaticon.com/ga-light.png)`; + } + }else{ + if(theme=="dark"){ + el.style.backgroundImage = `url(${window.location.protocol}//${window.location.hostname}:${window.location.port}/static/fontawesome/jet-dark.png)`; + }else{ + el.style.backgroundImage = `url(${window.location.protocol}//${window.location.hostname}:${window.location.port}/static/fontawesome/jet-light.png)`; + } + } + el.style.width = `${width}px`; + el.style.height = `${height}px`; + el.style.backgroundSize = '100%'; + + el.addEventListener('click', () => { + window.alert(marker.properties.message); + }); + + // Add markers to the map. + new mapboxgl.Marker(el) + .setLngLat(marker.geometry.coordinates) + .addTo(map); } - }); drawn = true; }catch(err){ console.log(err) } }else{ try{ - map.getSource('aircraft').setData(json); + // map.getSource('aircraft').setData(json); }catch(err){ console.log(err) } @@ -208,17 +382,18 @@ }; map.on('load', function () { + console.log(`map.on load`); // Add an image to use as a custom marker - map.loadImage( - `${window.location.protocol}//${window.location.hostname}:${window.location.port}/static/aircraft.png`, - function (error, image) { - if (error) throw error; - map.addImage('custom-marker', image); - } - ); + // map.loadImage( + // `${window.location.protocol}//${window.location.hostname}:${window.location.port}/static/fontawesome/jet-light.png`, + // function (error, image) { + // if (error) throw error; + // map.addImage('custom-marker', image); + // } + // ); - getATCSectors(); - setPilotsLayer(); + // getATCSectors(); + setPilotMarkers(); }); diff --git a/public/output.png b/public/output.png deleted file mode 100644 index 74fa8f0..0000000 Binary files a/public/output.png and /dev/null differ