<!DOCTYPE HTML>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="css/piximaps.min.css">
<script src="js/piximaps.min.js"></script>
<style>
#chart { width: 540px; height: 540px; box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.17); }
.pixi .charttitle .subtitle { font-size: 0.9em; font-style: italic; text-anchor: start }
.pixi .map .series .land.n0 { fill: #0D47A1 }
</style>
<script>
window.addEventListener('load', () => {
'use strict';
// Select the DOM element displaying the event info:
const el = document.getElementById('event');
// Set the map attributes:
const map = {
type: 'geojson',
url: '/maps/maps/unitedstatesofamerica.json',
exclude: { gn_name: ['Alaska', 'Hawaii'] },
coordinates: [40.0, -95.0],
zoom: 8,
minZoom: 1,
maxZoom: 15,
};
// Define the chart settings:
const opts = {
chart: {
width: window.innerWidth < (540 * 0.8) ? (window.innerWidth * 0.8) : 540,
height: window.innerHeight < 540 ? window.innerHeight : 540,
},
title: { label: 'United States of America' },
footer: { label: 'Source Wikipedia (estimation 2014)', x: 3, y: 0 },
legend: { enabled: false },
};
// Define a list of map ids and set their properties:
const states = [
{'USA-US-MA': { title: 'Massachusetts', style: {fillColor: '#2196F3', fillOpacity: 0.75, strokeColor: 'white', strokeWidth: 0.1}, over: {fillOpacity: 1}, properties: { 'Population': '6,745,408' }}},
{'USA-US-MN': { title: 'Minnesota', style: {fillColor: '#2196F3', fillOpacity: 0.75, strokeColor: 'white', strokeWidth: 0.1}, over: {fillOpacity: 1}, properties: { 'Population': '5,457,173' }}},
{'USA-US-MT': { title: 'Montana', style: {fillColor: '#2196F3', fillOpacity: 0.75, strokeColor: 'white', strokeWidth: 0.1}, over: {fillOpacity: 1}, properties: { 'Population': '1,023,579' }}},
{'USA-US-ND': { title: 'North Dakota', style: {fillColor: '#2196F3', fillOpacity: 0.75, strokeColor: 'white', strokeWidth: 0.1}, over: {fillOpacity: 1}, properties: { 'Population': '739,482' }}},
{'USA-US-ID': { title: 'Idaho', style: {fillColor: '#2196F3', fillOpacity: 0.75, strokeColor: 'white', strokeWidth: 0.1}, over: {fillOpacity: 1}, properties: { 'Population': '1,634,464' }}},
{'USA-US-WA': { title: 'Washington', style: {fillColor: '#2196F3', fillOpacity: 0.75, strokeColor: 'white', strokeWidth: 0.1}, over: {fillOpacity: 1}, properties: { 'Population': '7,061,530' }}},
{'USA-US-AZ': { title: 'Arizona', style: {fillColor: '#2196F3', fillOpacity: 0.75, strokeColor: 'white', strokeWidth: 0.1}, over: {fillOpacity: 1}, properties: { 'Population': '6,731,484' }}},
{'USA-US-CA': { title: 'California', style: {fillColor: '#2196F3', fillOpacity: 0.75, strokeColor: 'white', strokeWidth: 0.1}, over: {fillOpacity: 1}, properties: { 'Population': '38,802,500' }}},
{'USA-US-CO': { title: 'Colorado', style: {fillColor: '#2196F3', fillOpacity: 0.75, strokeColor: 'white', strokeWidth: 0.1}, over: {fillOpacity: 1}, properties: { 'Population': '5,355,866' }}},
{'USA-US-NV': { title: 'Nevada', style: {fillColor: '#2196F3', fillOpacity: 0.75, strokeColor: 'white', strokeWidth: 0.1}, over: {fillOpacity: 1}, properties: { 'Population': '2,839,099' }}},
{'USA-US-NM': { title: 'New Mexico', style: {fillColor: '#2196F3', fillOpacity: 0.75, strokeColor: 'white', strokeWidth: 0.1}, over: {fillOpacity: 1}, properties: { 'Population': '2,085,572' }}},
{'USA-US-OR': { title: 'Oregon', style: {fillColor: '#2196F3', fillOpacity: 0.75, strokeColor: 'white', strokeWidth: 0.1}, over: {fillOpacity: 1}, properties: { 'Population': '3,970,239' }}},
{'USA-US-UT': { title: 'Utah', style: {fillColor: '#2196F3', fillOpacity: 0.75, strokeColor: 'white', strokeWidth: 0.1}, over: {fillOpacity: 1}, properties: { 'Population': '2,949,902' }}},
{'USA-US-WY': { title: 'Wyoming', style: {fillColor: '#2196F3', fillOpacity: 0.75, strokeColor: 'white', strokeWidth: 0.1}, over: {fillOpacity: 1}, properties: { 'Population': '584,153' }}},
{'USA-US-AR': { title: 'Arkansas', style: {fillColor: '#2196F3', fillOpacity: 0.75, strokeColor: 'white', strokeWidth: 0.1}, over: {fillOpacity: 1}, properties: { 'Population': '2,966,369' }}},
{'USA-US-IA': { title: 'Iowa', style: {fillColor: '#2196F3', fillOpacity: 0.75, strokeColor: 'white', strokeWidth: 0.1}, over: {fillOpacity: 1}, properties: { 'Population': '3,107,126' }}},
{'USA-US-KS': { title: 'Kansas', style: {fillColor: '#2196F3', fillOpacity: 0.75, strokeColor: 'white', strokeWidth: 0.1}, over: {fillOpacity: 1}, properties: { 'Population': '2,904,021' }}},
{'USA-US-MO': { title: 'Missouri', style: {fillColor: '#2196F3', fillOpacity: 0.75, strokeColor: 'white', strokeWidth: 0.1}, over: {fillOpacity: 1}, properties: { 'Population': '6,063,589' }}},
{'USA-US-NE': { title: 'Nebraska', style: {fillColor: '#2196F3', fillOpacity: 0.75, strokeColor: 'white', strokeWidth: 0.1}, over: {fillOpacity: 1}, properties: { 'Population': '1,881,503' }}},
{'USA-US-OK': { title: 'Oklahoma', style: {fillColor: '#2196F3', fillOpacity: 0.75, strokeColor: 'white', strokeWidth: 0.1}, over: {fillOpacity: 1}, properties: { 'Population': '3,878,051' }}},
{'USA-US-SD': { title: 'South Dakota', style: {fillColor: '#2196F3', fillOpacity: 0.75, strokeColor: 'white', strokeWidth: 0.1}, over: {fillOpacity: 1}, properties: { 'Population': '853,175' }}},
{'USA-US-LA': { title: 'Louisiana', style: {fillColor: '#2196F3', fillOpacity: 0.75, strokeColor: 'white', strokeWidth: 0.1}, over: {fillOpacity: 1}, properties: { 'Population': '4,649,676' }}},
{'USA-US-TX': { title: 'Texas', style: {fillColor: '#2196F3', fillOpacity: 0.75, strokeColor: 'white', strokeWidth: 0.1}, over: {fillOpacity: 1}, properties: { 'Population': '27,695,284' }}},
{'USA-US-CT': { title: 'Connecticut', style: {fillColor: '#2196F3', fillOpacity: 0.75, strokeColor: 'white', strokeWidth: 0.1}, over: {fillOpacity: 1}, properties: { 'Population': '3,596,677' }}},
{'USA-US-NH': { title: 'New Hampshire', style: {fillColor: '#2196F3', fillOpacity: 0.75, strokeColor: 'white', strokeWidth: 0.1}, over: {fillOpacity: 1}, properties: { 'Population': '1,326,813' }}},
{'USA-US-RI': { title: 'Rhode Island', style: {fillColor: '#2196F3', fillOpacity: 0.75, strokeColor: 'white', strokeWidth: 0.1}, over: {fillOpacity: 1}, properties: { 'Population': '1,055,173' }}},
{'USA-US-VT': { title: 'Vermont', style: {fillColor: '#2196F3', fillOpacity: 0.75, strokeColor: 'white', strokeWidth: 0.1}, over: {fillOpacity: 1}, properties: { 'Population': '626,562' }}},
{'USA-US-AL': { title: 'Alabama', style: {fillColor: '#2196F3', fillOpacity: 0.75, strokeColor: 'white', strokeWidth: 0.1}, over: {fillOpacity: 1}, properties: { 'Population': '4,849,377' }}},
{'USA-US-FL': { title: 'Florida', style: {fillColor: '#2196F3', fillOpacity: 0.75, strokeColor: 'white', strokeWidth: 0.1}, over: {fillOpacity: 1}, properties: { 'Population': '19,893,297' }}},
{'USA-US-GA': { title: 'Georgia', style: {fillColor: '#2196F3', fillOpacity: 0.75, strokeColor: 'white', strokeWidth: 0.1}, over: {fillOpacity: 1}, properties: { 'Population': '10,097,343' }}},
{'USA-US-MS': { title: 'Mississippi', style: {fillColor: '#2196F3', fillOpacity: 0.75, strokeColor: 'white', strokeWidth: 0.1}, over: {fillOpacity: 1}, properties: { 'Population': '2,994,079' }}},
{'USA-US-SC': { title: 'South Carolina', style: {fillColor: '#2196F3', fillOpacity: 0.75, strokeColor: 'white', strokeWidth: 0.1}, over: {fillOpacity: 1}, properties: { 'Population': '4,832,482' }}},
{'USA-US-IL': { title: 'Illinois', style: {fillColor: '#2196F3', fillOpacity: 0.75, strokeColor: 'white', strokeWidth: 0.1}, over: {fillOpacity: 1}, properties: { 'Population': '12,880,580' }}},
{'USA-US-IN': { title: 'Indiana', style: {fillColor: '#2196F3', fillOpacity: 0.75, strokeColor: 'white', strokeWidth: 0.1}, over: {fillOpacity: 1}, properties: { 'Population': '6,596,855' }}},
{'USA-US-KY': { title: 'Kentucky', style: {fillColor: '#2196F3', fillOpacity: 0.75, strokeColor: 'white', strokeWidth: 0.1}, over: {fillOpacity: 1}, properties: { 'Population': '4,413,457' }}},
{'USA-US-NC': { title: 'North Carolina', style: {fillColor: '#2196F3', fillOpacity: 0.75, strokeColor: 'white', strokeWidth: 0.1}, over: {fillOpacity: 1}, properties: { 'Population': '10,054,192' }}},
{'USA-US-OH': { title: 'Ohio', style: {fillColor: '#2196F3', fillOpacity: 0.75, strokeColor: 'white', strokeWidth: 0.1}, over: {fillOpacity: 1}, properties: { 'Population': '11,594,163' }}},
{'USA-US-TN': { title: 'Tennessee', style: {fillColor: '#2196F3', fillOpacity: 0.75, strokeColor: 'white', strokeWidth: 0.1}, over: {fillOpacity: 1}, properties: { 'Population': '6,549,352' }}},
{'USA-US-VA': { title: 'Virginia', style: {fillColor: '#2196F3', fillOpacity: 0.75, strokeColor: 'white', strokeWidth: 0.1}, over: {fillOpacity: 1}, properties: { 'Population': '8,326,289' }}},
{'USA-US-WI': { title: 'Wisconsin', style: {fillColor: '#2196F3', fillOpacity: 0.75, strokeColor: 'white', strokeWidth: 0.1}, over: {fillOpacity: 1}, properties: { 'Population': '5,757,564' }}},
{'USA-US-WV': { title: 'West Virginia', style: {fillColor: '#2196F3', fillOpacity: 0.75, strokeColor: 'white', strokeWidth: 0.1}, over: {fillOpacity: 1}, properties: { 'Population': '1,850,326' }}},
{'USA-US-DE': { title: 'Delaware', style: {fillColor: '#2196F3', fillOpacity: 0.75, strokeColor: 'white', strokeWidth: 0.1}, over: {fillOpacity: 1}, properties: { 'Population': '935,614' }}},
{'USA-US-DC': { title: 'District of Columbia', style: {fillColor: '#2196F3', fillOpacity: 0.75, strokeColor: 'white', strokeWidth: 0.1}, over: {fillOpacity: 1}, properties: { 'Population': '658,893' }}},
{'USA-US-MD': { title: 'Maryland', style: {fillColor: '#2196F3', fillOpacity: 0.75, strokeColor: 'white', strokeWidth: 0.1}, over: {fillOpacity: 1}, properties: { 'Population': '5,976,407' }}},
{'USA-US-NJ': { title: 'New Jersey', style: {fillColor: '#2196F3', fillOpacity: 0.75, strokeColor: 'white', strokeWidth: 0.1}, over: {fillOpacity: 1}, properties: { 'Population': '8,938,175' }}},
{'USA-US-NY': { title: 'New York', style: {fillColor: '#2196F3', fillOpacity: 0.75, strokeColor: 'white', strokeWidth: 0.1}, over: {fillOpacity: 1}, properties: { 'Population': '19,746,227' }}},
{'USA-US-PA': { title: 'Pennsylvania', style: {fillColor: '#2196F3', fillOpacity: 0.75, strokeColor: 'white', strokeWidth: 0.1}, over: {fillOpacity: 1}, properties: { 'Population': '12,787,209' }}},
{'USA-US-ME': { title: 'Maine', style: {fillColor: '#2196F3', fillOpacity: 0.75, strokeColor: 'white', strokeWidth: 0.1}, over: {fillOpacity: 1}, properties: { 'Population': '1,330,089' }}},
{'USA-US-MI': { title: 'Michigan', style: {fillColor: '#2196F3', fillOpacity: 0.75, strokeColor: 'white', strokeWidth: 0.1}, over: {fillOpacity: 1}, properties: { 'Population': '9,909,877' }}},
];
// Set the overlay attributes:
const poi = [
{
NY: {
title: 'New York',
style: { fillColor: 'navy', strokeColor: 'white', strokeWidth: 1 },
geometry: {
type: 'Point',
radius: 5,
coordinates: [40.7142700, -74.0059700]
},
properties: {
φ: '40° 42\' 51" N',
λ: '74° 00\' 21" W',
},
},
},
{
LA: {
title: 'Los Angeles',
style: { fillColor: 'navy', strokeColor: 'white', strokeWidth: 1 },
geometry: {
type: 'Point',
radius: 5,
coordinates: [34.0522300, -118.2436800]
},
properties: {
φ: '34° 03\' 08" N',
λ: '118° 14\' 37" W',
},
},
},
{
houston: {
title: 'Houston',
style: { fillColor: 'navy', strokeColor: 'white', strokeWidth: 1 },
geometry: {
type: 'Point',
radius: 5,
coordinates: [29.7632800, -95.3632700]
},
properties: {
φ: '29° 45\' 47" N',
λ: '95° 21\' 47" W',
},
},
},
{
chicago: {
title: 'Chicago',
style: { fillColor: 'navy', strokeColor: 'white', strokeWidth: 1 },
geometry: {
type: 'Point',
radius: 5,
coordinates: [41.8500300, -87.6500500]
},
properties: {
φ: '41° 51\' 00" N',
λ: '87° 39\' 00" W',
},
},
},
{
phil: {
title: 'Philadelphia',
style: { fillColor: 'navy', strokeColor: 'white', strokeWidth: 1 },
geometry: {
type: 'Point',
radius: 5,
coordinates: [39.9523400, -75.1637900]
},
properties: {
φ: '39° 57\' 08" N',
λ: '75° 09\' 49" W',
},
},
},
];
// Fix the chart dimensions:
const el2 = document.getElementById('chart');
el2.style.width = opts.chart.width + 'px';
el2.style.height = opts.chart.height + 'px';
const el3 = document.getElementsByClassName('viewsource');
el3[0].style.width = opts.chart.width + 'px';
// Draw the chart and add the POIs:
const chart = Pixi.Map('#chart', map, opts);
chart.overlayUpdate(states);
chart.overlayAppend(poi);
// Process the event 'overlayover':
chart
.on('overlayover', (data) => {
el.textContent = 'Country: ' + data.overlay.title;
if (data.overlay.geometry.type === 'Point')
el.textContent = 'City: ' + data.overlay.title;
else
el.textContent = 'State: ' + data.overlay.title;
})
// Process the event 'overlayout':
.on('overlayout', () => {
el.textContent = '---';
})
.on('click', (data) => {
console.log(data);
});
;
});
</script>
</head>
<body>
<div id="chart" class="pixi"></div>
</body>
</html>