You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
234 lines
7.8 KiB
234 lines
7.8 KiB
/* eslint-disable */
|
|
var map = L.map('mapid').setView([63.8333, -152], 1),
|
|
accessToken = 'pk.eyJ1IjoiZmx5bG9jYWwiLCJhIjoiY2t0OHUxZXB6MTVueTJ4cGVwOHRuc2s2NyJ9.YF9frLvISHfOuT7nqs3TNg',
|
|
apiUrl = `https://api.mapbox.com/styles/v1/{id}/tiles/{z}/{x}/{y}?access_token=${accessToken}`;
|
|
|
|
var form = `AND(Is_Origin=1,{IsCurrent-AsOrigin}='Yes')`;
|
|
|
|
var markers = L.markerClusterGroup();
|
|
var destinationsLayer = L.layerGroup();
|
|
|
|
var points = [],
|
|
mainOffset;
|
|
|
|
async function fetchMapData() {
|
|
|
|
const response = await fetch(`https://api.airtable.com/v0/appiQwfVZixRgRICe/Airports_IATA?filterByFormula=${form}&fields[]=Airport_IATA&fields[]=Icon_Url&fields[]=Latitude_Deg&fields[]=Longitude_Deg&sort[0][field]=Airport_IATA&sort[0][direction]=asc`, {
|
|
method: 'GET',
|
|
headers: {
|
|
'Content-Type': 'application/x-www-form-urlencoded',
|
|
'Authorization': 'Bearer keyJ2ht64ZSN57AG1'
|
|
},
|
|
});
|
|
|
|
response.ok; // => false
|
|
response.status; // => 404
|
|
|
|
const mapData = await response.json();
|
|
|
|
points = mapData.records;
|
|
mainOffset = mapData.offset;
|
|
|
|
return mapData;
|
|
}
|
|
|
|
async function fetchMapData2(mapData) {
|
|
if (mapData.offset) {
|
|
|
|
const response = await fetch(`https://api.airtable.com/v0/appiQwfVZixRgRICe/Airports_IATA?filterByFormula=${form}&fields[]=Airport_IATA&fields[]=Icon_Url&fields[]=Latitude_Deg&fields[]=Longitude_Deg&sort[0][field]=Airport_IATA&sort[0][direction]=asc&offset=${mapData.offset}`, {
|
|
method: 'GET',
|
|
headers: {
|
|
'Content-Type': 'application/x-www-form-urlencoded',
|
|
'Authorization': 'Bearer keyJ2ht64ZSN57AG1'
|
|
},
|
|
});
|
|
|
|
response.ok; // => false
|
|
response.status; // => 404
|
|
|
|
const mapData2 = await response.json();
|
|
|
|
points = [...points, ...mapData2.records];
|
|
|
|
return mapData2;
|
|
|
|
}
|
|
}
|
|
|
|
function getOrigIcon(icon) {
|
|
|
|
var origIcon = L.icon({
|
|
iconUrl: icon,
|
|
//shadowUrl: 'leaf-shadow.png',
|
|
iconSize: [80, 40], // size of the icon
|
|
//shadowSize: [50, 64], // size of the shadow
|
|
iconAnchor: [40, 40], // point of the icon which will correspond to marker's location
|
|
//shadowAnchor: [4, 62], // the same for the shadow
|
|
popupAnchor: [0, 0] // point from which the popup should open relative to the iconAnchor
|
|
});
|
|
|
|
return origIcon;
|
|
|
|
}
|
|
|
|
function getBlueIcon() {
|
|
|
|
var origIcon = L.icon({
|
|
iconUrl: 'https://spencerflagg.com/flylocal/pins/pin.svg',
|
|
//shadowUrl: 'leaf-shadow.png',
|
|
iconSize: [14, 16], // size of the icon
|
|
//shadowSize: [50, 64], // size of the shadow
|
|
iconAnchor: [7, 16], // point of the icon which will correspond to marker's location
|
|
//shadowAnchor: [4, 62], // the same for the shadow
|
|
popupAnchor: [0, 0] // point from which the popup should open relative to the iconAnchor
|
|
});
|
|
|
|
return origIcon;
|
|
|
|
}
|
|
|
|
fetchMapData().then(mapData => {
|
|
fetchMapData2(mapData).then(function () {
|
|
|
|
var mapDataFiltered = points.map((record) => {
|
|
return {
|
|
"iata": record.fields.Airport_IATA,
|
|
"lat": record.fields.Latitude_Deg,
|
|
"long": record.fields.Longitude_Deg,
|
|
"icon": record.fields.Icon_Url
|
|
}
|
|
});
|
|
|
|
console.log(mapDataFiltered); // => 'Page not found'
|
|
|
|
mapDataFiltered.forEach((record) => {
|
|
|
|
var popupContent = `
|
|
<div>${record.iata}</div>
|
|
<button id='origBtn' data-iata='${record.iata}' data-lat='${record.lat}' data-long='${record.long}'>make origin</button>
|
|
`;
|
|
|
|
var marker = L.marker([record.lat, record.long], { icon: getOrigIcon(record.icon + '+FFFFFF+BBBBBB+000000') })
|
|
.bindPopup(popupContent);
|
|
//.addTo(map);
|
|
|
|
markers.addLayer(marker);
|
|
});
|
|
})
|
|
});
|
|
|
|
//console.log(mapData[0].Airport_IATA);
|
|
|
|
L.tileLayer(apiUrl, {
|
|
attribution: 'FlyLocal | Map data © <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors, Imagery © <a href="https://www.mapbox.com/">Mapbox</a>',
|
|
maxZoom: 18,
|
|
//id: 'mapbox/streets-v11',
|
|
//id: 'mapbox/outdoors-v11',
|
|
//id: 'mapbox/satellite-streets-v11',
|
|
id: 'flylocal/ckt9x8aho0igb18mmm9ks2fsv',
|
|
tileSize: 512,
|
|
zoomOffset: -1,
|
|
accessToken: 'your.mapbox.access.token'
|
|
}).addTo(map);
|
|
|
|
map.addLayer(markers);
|
|
|
|
map.on('popupopen', function (e) {
|
|
var thisMarker = e.popup._source;
|
|
|
|
console.log(thisMarker);
|
|
|
|
var origButton = document.getElementById("origBtn"),
|
|
destButton = document.getElementById("destBtn");
|
|
|
|
origButton.addEventListener("click", function () {
|
|
//alert(thisButton.dataset.iata);
|
|
|
|
fetchDestData(origButton.dataset.iata).then(mapData => {
|
|
|
|
var mapDataFiltered = mapData.records.map((record) => {
|
|
return {
|
|
"iata": record.fields.Airport_IATA,
|
|
"lat": record.fields.Latitude_Deg,
|
|
"long": record.fields.Longitude_Deg,
|
|
"icon": record.fields.Icon_Url
|
|
}
|
|
});
|
|
|
|
console.log(mapDataFiltered); // => 'Page not found'
|
|
|
|
map.removeLayer(markers);
|
|
|
|
// re-add origin
|
|
var marker = L.marker([thisButton.dataset.lat, thisButton.dataset.long], { icon: getBlueIcon() })
|
|
.addTo(map);
|
|
|
|
destinationsLayer.clearLayers();
|
|
map.removeLayer(destinationsLayer);
|
|
|
|
// add all destinations
|
|
mapDataFiltered.forEach((record) => {
|
|
|
|
|
|
|
|
var popupContent = `
|
|
<div>${record.iata}</div>
|
|
<button id='origBtn' data-iata='${record.iata}' data-lat='${record.lat}' data-long='${record.long}'>make origin</button>
|
|
<button id='destBtn' data-iata='${record.iata}' data-lat='${record.lat}' data-long='${record.long}'>make destination</button>
|
|
`;
|
|
|
|
var marker = L.marker([record.lat, record.long], { icon: getOrigIcon(record.icon + '+05FF00+04C300+000000') })
|
|
.bindPopup(popupContent).addTo(map);
|
|
|
|
|
|
});
|
|
|
|
map.addLayer(destinationsLayer);
|
|
|
|
});
|
|
|
|
});
|
|
|
|
destButton.addEventListener("click", function () {
|
|
|
|
var lat = origButton.dataset.lat,
|
|
long = origButton.dataset.long;
|
|
|
|
var thisArc = L.Polyline.Arc([thisButton.dataset.lat, thisButton.dataset.long], [record.lat, record.long], {
|
|
vertices: 200,
|
|
});
|
|
|
|
var thisDecorator = L.polylineDecorator(thisArc, {
|
|
patterns: [
|
|
// defines a pattern of 10px-wide dashes, repeated every 20px on the line
|
|
{ offset: 0, repeat: 20, symbol: L.Symbol.dash({ pixelSize: 3, pathOptions: { color: '#007FFF', weight: 8, lineCap: 'square' } }) },
|
|
{ offset: '100%', repeat: 0, symbol: L.Symbol.arrowHead({ pixelSize: 15, polygon: false, pathOptions: { stroke: true, color: '#007FFF', weight: 8, lineCap: 'square' } }) }
|
|
]
|
|
});
|
|
|
|
destinationsLayer.addLayer(thisDecorator);
|
|
|
|
});
|
|
});
|
|
|
|
async function fetchDestData(iata) {
|
|
|
|
var destFormula = `AND(Is_Destination=1,{IsCurrent-AsDest}="Yes",(FIND("${iata}", Associated_Origin_Search)>0))`;
|
|
const response = await fetch(`https://api.airtable.com/v0/appiQwfVZixRgRICe/Airports_IATA?filterByFormula=${destFormula}&fields[]=Airport_IATA&fields[]=Latitude_Deg&fields[]=Longitude_Deg&fields[]=Icon_Url&sort[0][field]=Airport_IATA&sort[0][direction]=asc`, {
|
|
method: 'GET',
|
|
headers: {
|
|
'Content-Type': 'application/x-www-form-urlencoded',
|
|
'Authorization': 'Bearer keyJ2ht64ZSN57AG1'
|
|
},
|
|
});
|
|
|
|
response.ok; // => false
|
|
response.status; // => 404
|
|
|
|
const mapData = await response.json();
|
|
|
|
points = mapData.records;
|
|
mainOffset = mapData.offset;
|
|
|
|
return mapData;
|
|
}
|