diff --git a/public/sectormap.html b/public/sectormap.html index ab816a7..c3db0fd 100644 --- a/public/sectormap.html +++ b/public/sectormap.html @@ -1,78 +1,121 @@ - - - - - - - -
- - - - - - - - - - - -
- VATPAC logo
-

Aeronautical Chart

- Positions Diagram
- + + + - (async () => { - var dataset = await getDataset(); - console.log(dataset); - document.getElementById("mgl-map-overlay").innerHTML += `

AIRAC Date ${dataset.Profile.Version._attributes.PublishDate} (${dataset.Profile.Version._attributes.AIRAC}${dataset.Profile.Version._attributes.Revision})

`; - })(); - + + + + + +
+ +
+ VATPAC logo
+

Aeronautical + Chart

Positions Diagram
+
- - +
+ + + + + \ No newline at end of file diff --git a/public/sectormap.js b/public/sectormap.js index 2b457c1..0c919ff 100644 --- a/public/sectormap.js +++ b/public/sectormap.js @@ -1,5 +1,44 @@ // import { feature, featureCollection, sector } from "@turf/turf"; +//Hide Side Text +showSide = true; + +async function getDataset() { + var response = await fetch(`${window.location.protocol}//${window.location.hostname}:${window.location.port}/v1/dataset`); + var json = await response.json(); + dataset = json; + return json; +}; +(async () => { + + var dataset = await getDataset(); + console.log(dataset); + document.getElementById("mgl-map-overlay").innerHTML += `

AIRAC Date ${dataset.Profile.Version._attributes.PublishDate} (${dataset.Profile.Version._attributes.AIRAC}${dataset.Profile.Version._attributes.Revision})

`; +})(); +function toggleBox() { + showSide = !showSide + if (!showSide) { + var element = document.getElementById("mgl-map-overlay"); + element.classList.add("closed"); + var element = document.getElementById("boxBody"); + element.classList.add("hidden"); + var element = document.getElementById("toggleButton"); + element.classList.add("icon"); + } + else { + var element = document.getElementById("mgl-map-overlay"); + element.classList.remove("closed"); + var element = document.getElementById("boxBody"); + element.classList.remove("hidden"); + var element = document.getElementById("toggleButton"); + element.classList.remove("icon"); + } + return showSide + + +} + + function findGetParameter(parameterName) { var result = false, tmp = []; @@ -7,36 +46,36 @@ function findGetParameter(parameterName) { .substr(1) .split("&") .forEach(function (item) { - tmp = item.split("="); - if (tmp[0] === parameterName) result = decodeURIComponent(tmp[1]); + tmp = item.split("="); + if (tmp[0] === parameterName) result = decodeURIComponent(tmp[1]); }); return result; }; -function getSectorByName(sectorName, json){ +function getSectorByName(sectorName, json) { var sector = json.find(e => { - if(e.Name === sectorName){ + if (e.Name === sectorName) { return e; }; }); - if(sector === undefined){ + if (sector === undefined) { console.log(`Loading sector ${sectorName} failed`); } return sector; } -function mergeSectors(sector, sectors, json){ +function mergeSectors(sector, sectors, json) { let mergedSector; // FSS don't have sector volumes, only responsible sectors. - if(sector.volumes.length > 0){ + if (sector.volumes.length > 0) { mergedSector = mergeBoundaries(sector); } - if(sectors.length > 0){ + if (sectors.length > 0) { var sectorVolumes = []; // Union all sector volumes into a polygon - sectors.forEach(function(e){ + sectors.forEach(function (e) { var sector = getSectorByName(e, json); - if(sector){ + if (sector) { var poly = mergeBoundaries(sector); sectorVolumes.push(poly); } @@ -46,53 +85,53 @@ function mergeSectors(sector, sectors, json){ var mergedPoly = unionArray(sectorVolumes); mergedSector = mergedPoly; } - if(mergedSector != undefined){ - mergedSector.properties = {...sector}; + if (mergedSector != undefined) { + mergedSector.properties = { ...sector }; delete mergedSector.properties.responsibleSectors delete mergedSector.properties.volumes return mergedSector; } } -function mergeBoundaries(sector){ +function mergeBoundaries(sector) { var features = sector.volumes.map((volume) => volume.Boundaries.map((boundary) => boundary)).flat(); - if(features.length > 1){ + if (features.length > 1) { var union = unionArray(features); union.properties = { ...sector }; delete union.properties.responsibleSectors; delete union.properties.volumes; return union; - }else if (features.length == 1){ + } else if (features.length == 1) { features[0].properties = { ...sector }; delete features[0].properties.responsibleSectors; delete features[0].properties.volumes; return features[0]; - }else{ + } else { return false; } } -function unionArray(array){ - const bufferKm = 0.2; - var featureCollection = turf.featureCollection(array); - if (featureCollection.length === 0) { - return null +function unionArray(array) { + const bufferKm = 0.2; + var featureCollection = turf.featureCollection(array); + if (featureCollection.length === 0) { + return null + } + // buffer is a dirty dirty hack to close up some holes in datasets + let ret = turf.buffer(featureCollection.features[0], bufferKm, { units: 'kilometers' }); + // let ret = featureCollection.features[0]; + + turf.featureEach(featureCollection, function (currentFeature, featureIndex) { + if (featureIndex > 0) { + ret = turf.union(ret, turf.buffer(currentFeature, bufferKm, { units: 'kilometers' })) + // ret = turf.union(ret, currentFeature); } - // buffer is a dirty dirty hack to close up some holes in datasets - let ret = turf.buffer(featureCollection.features[0],bufferKm, {units: 'kilometers'}); - // let ret = featureCollection.features[0]; - - turf.featureEach(featureCollection, function (currentFeature, featureIndex) { - if (featureIndex > 0) { - ret = turf.union(ret, turf.buffer(currentFeature,bufferKm, {units: 'kilometers'})) - // ret = turf.union(ret, currentFeature); - } - }); + }); - // Remove any holes added in union - ret.geometry.coordinates.length = 1; + // Remove any holes added in union + ret.geometry.coordinates.length = 1; - return ret; + return ret; }; // async function getColourHex(vatsysId){ @@ -108,13 +147,13 @@ function unionArray(array){ // } async function getATCSectors() { - try{ + try { var sectorsResponse = await fetch(`${window.location.protocol}//${window.location.hostname}:${window.location.port}/v1/atc/sectors`); var sectorsJson = await sectorsResponse.json(); var stdSectors = []; sectorsJson.forEach(sector => { - if(sector.standard_position === true){ + if (sector.standard_position === true) { // Merge responsible sectors var mergedSector = mergeSectors(sector, sector.responsibleSectors, sectorsJson) stdSectors.push(mergedSector); @@ -124,9 +163,9 @@ async function getATCSectors() { var borderSectors = []; sectorsJson.forEach(sector => { - if(sector.border_position === true){ + if (sector.border_position === true) { var sector = mergeBoundaries(sector); - if(sector != false){ + if (sector != false) { borderSectors.push(sector); } } @@ -135,9 +174,9 @@ async function getATCSectors() { var upperSectors = []; sectorsJson.forEach(sector => { - if(sector.Callsign.includes("FSS") ||sector.Callsign.includes("CTR")){ + if (sector.Callsign.includes("FSS") || sector.Callsign.includes("CTR")) { var sector = mergeBoundaries(sector); - if(sector != false){ + if (sector != false) { upperSectors.push(sector); } } @@ -145,9 +184,9 @@ async function getATCSectors() { var tmaSectors = []; sectorsJson.forEach(sector => { - if(sector.Callsign.includes("APP")){ + if (sector.Callsign.includes("APP")) { var sector = mergeBoundaries(sector); - if(sector != false){ + if (sector != false) { tmaSectors.push(sector); } } @@ -155,15 +194,15 @@ async function getATCSectors() { var twrSectors = []; sectorsJson.forEach(sector => { - if(sector.Callsign.includes("TWR")){ + if (sector.Callsign.includes("TWR")) { var sector = mergeBoundaries(sector); - if(sector != false){ + if (sector != false) { twrSectors.push(sector); } } }); - SECTORS = turf.featureCollection(upperSectors.concat(tmaSectors,twrSectors)); + SECTORS = turf.featureCollection(upperSectors.concat(tmaSectors, twrSectors)); console.log(`debug geojson`) console.log(SECTORS); @@ -277,9 +316,9 @@ async function getATCSectors() { 'layout': {}, 'minzoom': 5, 'paint': { - 'line-color': "#33cc99", - 'line-width': 3, - 'line-dasharray': [5, 5] + 'line-color': "#33cc99", + 'line-width': 3, + 'line-dasharray': [5, 5] } }); @@ -290,9 +329,9 @@ async function getATCSectors() { 'layout': {}, 'minzoom': 5, 'paint': { - 'line-color': "#3b8df9", - 'line-width': 3, - 'line-dasharray': [1, 1] + 'line-color': "#3b8df9", + 'line-width': 3, + 'line-dasharray': [1, 1] } }); @@ -303,8 +342,8 @@ async function getATCSectors() { 'layout': {}, 'minzoom': 5, 'paint': { - 'line-color': "#949494", - 'line-width': 1 + 'line-color': "#949494", + 'line-width': 1 } }); @@ -334,13 +373,13 @@ async function getATCSectors() { }); map.addLayer({ - 'id': 'stdText', - 'type': 'symbol', - 'source': 'std', // reference the data source - 'layout': stdLayout, - 'paint': { - 'text-color': "#000", - } + 'id': 'stdText', + 'type': 'symbol', + 'source': 'std', // reference the data source + 'layout': stdLayout, + 'paint': { + 'text-color': "#000", + } }); map.addLayer({ @@ -388,7 +427,7 @@ async function getATCSectors() { - }catch(err){ + } catch (err) { // throw Error(err); console.log(err); } @@ -437,9 +476,9 @@ function forwardGeocoder(query) { for (const feature of SECTORS.features) { // Search by callsign if ( - feature.properties.Callsign - .toLowerCase() - .includes(query.toLowerCase()) + feature.properties.Callsign + .toLowerCase() + .includes(query.toLowerCase()) ) { feature['place_name'] = `${feature.properties.FullName} ${feature.properties.Callsign} (${feature.properties.Frequency})`; feature['center'] = turf.centroid(feature).geometry.coordinates; @@ -448,23 +487,23 @@ function forwardGeocoder(query) { // Search by frequency if ( feature.properties.Frequency - .toLowerCase() - .includes(query.toLowerCase()) - ) { - feature['place_name'] = `${feature.properties.FullName} ${feature.properties.Callsign} (${feature.properties.Frequency})`; - feature['center'] = turf.centroid(feature).geometry.coordinates; - matchingFeatures.push(feature); - } + .toLowerCase() + .includes(query.toLowerCase()) + ) { + feature['place_name'] = `${feature.properties.FullName} ${feature.properties.Callsign} (${feature.properties.Frequency})`; + feature['center'] = turf.centroid(feature).geometry.coordinates; + matchingFeatures.push(feature); + } // Search by Name if ( feature.properties.FullName - .toLowerCase() - .includes(query.toLowerCase()) - ) { - feature['place_name'] = `${feature.properties.FullName} ${feature.properties.Callsign} (${feature.properties.Frequency})`; - feature['center'] = turf.centroid(feature).geometry.coordinates; - matchingFeatures.push(feature); - } + .toLowerCase() + .includes(query.toLowerCase()) + ) { + feature['place_name'] = `${feature.properties.FullName} ${feature.properties.Callsign} (${feature.properties.Frequency})`; + feature['center'] = turf.centroid(feature).geometry.coordinates; + matchingFeatures.push(feature); + } }; return matchingFeatures; } @@ -479,7 +518,7 @@ map.addControl( marker: true, placeholder: 'Find sector or frequency' }) - ); +); // Thanks to https://github.com/mapbox/mapbox-gl-js/issues/10093#issuecomment-726192651 const graticule = { @@ -489,15 +528,15 @@ const graticule = { for (let lng = -170; lng <= 180; lng += 10) { graticule.features.push({ type: 'Feature', - geometry: {type: 'LineString', coordinates: [[lng, -90], [lng, 90]]}, - properties: {value: lng} + geometry: { type: 'LineString', coordinates: [[lng, -90], [lng, 90]] }, + properties: { value: lng } }); } for (let lat = -80; lat <= 80; lat += 10) { graticule.features.push({ type: 'Feature', - geometry: {type: 'LineString', coordinates: [[-180, lat], [180, lat]]}, - properties: {value: lat} + geometry: { type: 'LineString', coordinates: [[-180, lat], [180, lat]] }, + properties: { value: lat } }); } @@ -505,8 +544,8 @@ for (let lat = -80; lat <= 80; lat += 10) { map.on('load', function () { map.jumpTo({ - center: [findGetParameter('lon') || 134.9, findGetParameter('lat') || -28.2 ], - zoom: findGetParameter('zoom') || 4.3, + center: [findGetParameter('lon') || 134.9, findGetParameter('lat') || -28.2], + zoom: findGetParameter('zoom') || 3.8, }) map.addSource('graticule', {