Skip to content

Instantly share code, notes, and snippets.

@DevAndyLee
Last active Apr 30, 2019
Embed
What would you like to do?
Perspective map of world airports
height: 650
border: no
license: apache-2.0

Airports of the world

Click on "Show points" and "Show region" to switch between locations plotted by latitude/longitude or country.

.example {
position: absolute;
top: 40px;
left: 0;
right: 0;
bottom: 0;
}
.controls ul {
margin: 0;
padding: 5px;
list-style: none;
}
.controls li {
display: inline-block;
margin-right: 20px;
}
window.addEventListener('WebComponentsReady', function() {
const countryMap = {
"Russian Federation": "Russia",
"Congo DRC": "Congo (Kinshasa)",
"Congo": "Congo (Brazzaville)",
"Côte d'Ivoire": "Cote d'Ivoire",
"Svalbard": ""
};
registerMapRegions({
name: "Country",
url: "https://opendata.arcgis.com/datasets/252471276c9941729543be8789e06e12_0.kml",
key: props => countryMap[props["Country"]] || props["Country"]
});
const viewer = document.querySelector('.example');
var columns = "ID,Name,City,Country,IATA,ICAO,Latitude,Longitude,Altitude,Timezone,TZ,Type,Source";
var url = 'https://raw.githubusercontent.com/jpatokal/openflights/master/data/airports.dat';
// Fetch and load arrow data.
var xhr = new XMLHttpRequest();
xhr.open('GET', url, true);
xhr.onload = function() {
viewer.load(columns + "\n" + xhr.response);
// Toggle the config controls open.
viewer.toggleConfig();
}
xhr.send(null);
const withoutLatLng = columns => columns.filter(c => c !== "Longitude" && c !== "Latitude");
document.getElementById('map_points').addEventListener('change', evt => {
const cols = withoutLatLng(viewer.columns);
viewer.view = "map_points";
viewer["row-pivots"] = '["Name"]';
viewer.columns = JSON.stringify(["Longitude", "Latitude"].concat(cols));
});
document.getElementById('map_regions').addEventListener('change', evt => {
const cols = withoutLatLng(viewer.columns);
viewer.view = "map_regions";
viewer["row-pivots"] = '["Country"]';
if (cols.length < 1) cols.push("Altitude");
viewer.columns = JSON.stringify(cols);
});
});
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">
<!-- include polyfills for custom event, Symbol and Custom Elements -->
<script src="//unpkg.com/babel-polyfill@6.26.0/dist/polyfill.js"></script>
<script src="//unpkg.com/custom-event-polyfill@0.3.0/custom-event-polyfill.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/document-register-element/1.8.0/document-register-element.js"></script>
<script src="https://openlayers.org/en/v5.3.0/build/ol.js"></script>
<script src="https://unpkg.com/@jpmorganchase/perspective/build/perspective.js"></script>
<script src="https://unpkg.com/@jpmorganchase/perspective-viewer/build/perspective.view.js"></script>
<script src="https://unpkg.com/perspective-viewer-maps@0.0.15/build/maps.plugin.js"></script>
<script src="example.js"></script>
<link rel='stylesheet' href="https://unpkg.com/@jpmorganchase/perspective-viewer/build/material.css" is="custom-style">
<link rel='stylesheet' href="example.css">
</head>
<body>
<div class="controls">
<ul>
<li>
<input type="radio" id="map_points" name="map_style" value="map_points" checked>
<label for="map_points">Show points</label>
</li>
<li>
<input type="radio" id="map_regions" name="map_style" value="map_regions">
<label for="map_regions">Show regions</label>
</li>
</ul>
</div>
<perspective-viewer class="example" view="map_points" row-pivots='["Name"]' columns='["Longitude","Latitude"]'
aggregates='{"Latitude":"avg","Longitude":"avg", "Altitude":"avg"}' filters='[["Latitude", ">", -60], ["Latitude", "&lt;", 80]]'>
</perspective-viewer>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment