Skip to content

Instantly share code, notes, and snippets.

Last active Apr 30, 2019
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": ""
name: "Country",
url: "",
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 = '';
// Fetch and load arrow data.
var xhr = new XMLHttpRequest();'GET', url, true);
xhr.onload = function() {
viewer.load(columns + "\n" + xhr.response);
// Toggle the config controls open.
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);
<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="//"></script>
<script src="//"></script>
<script src="//"></script>
<script src=""></script>
<script src=""></script>
<script src=""></script>
<script src=""></script>
<script src="example.js"></script>
<link rel='stylesheet' href="" is="custom-style">
<link rel='stylesheet' href="example.css">
<div class="controls">
<input type="radio" id="map_points" name="map_style" value="map_points" checked>
<label for="map_points">Show points</label>
<input type="radio" id="map_regions" name="map_style" value="map_regions">
<label for="map_regions">Show regions</label>
<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]]'>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment