import 'bootstrap.css';
import '@mescius/wijmo.styles/wijmo.css';
import './styles.css';
//
import { Point, Rect } from '@mescius/wijmo';
import { FlexMap, GeoMapLayer, ScatterMapLayer } from '@mescius/wijmo.chart.map';
import { getGdpData } from './data';
//
document.readyState === 'complete' ? init() : window.onload = init;
//
function init() {
let map = new FlexMap('#map', {
header: 'ヨーロッパ 1人当たりGDP',
tooltip: {
content: (ht) => {
return ht.gdp ? '<b>{name}</b> \${gdp}<br>ランク {rank}' : '';
}
},
layers: [
new GeoMapLayer({
url: 'data/europe.json',
itemsSourceChanged: (layer, a) => {
const bb = new Rect(-29, 36, 90, 35);
map.zoomTo(bb);
let features = layer.getAllFeatures();
let pts = [];
let gdpData = getGdpData();
let dataMap = new Map();
gdpData.forEach(el => dataMap.set(el.Country, el));
features.forEach(f => {
let rect = map.layers[0].getGeoBBox(f);
let name = f.properties.name;
let pt = new Point(rect.left + 0.5 * rect.width, rect.top + 0.5 * rect.height);
if (name == 'Norway') {
pt = new Point(10.752222, 59.913889);
}
else if (name == 'Russia') {
pt = new Point(37.617222, 55.755833);
}
let el = dataMap.get(name);
if (el) {
pts.push({
x: pt.x, y: pt.y, name: el['Name'], gdp: parseFloat(el[2020]), rank: parseInt(el['Rank'])
});
}
});
map.layers[1].itemsSource = pts;
},
style: { fill: 'rgba(153,216,201,1)', stroke: 'white' }
}),
new ScatterMapLayer({
binding: 'x,y,gdp',
symbolMaxSize: 20,
symbolMinSize: 5,
style: { fill: 'rgba(44,162,95,1)', strokeWidth: 0.5 }
})
]
});
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>MESCIUS Wijmo Bubble Map</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- SystemJS -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.21.5/system.src.js" integrity="sha512-skZbMyvYdNoZfLmiGn5ii6KmklM82rYX2uWctBhzaXPxJgiv4XBwJnFGr5k8s+6tE1pcR1nuTKghozJHyzMcoA==" crossorigin="anonymous"></script>
<script src="systemjs.config.js"></script>
<script>
System.import('./src/app');
</script>
</head>
<body>
<div class="container-fluid">
<div id="map"></div>
</div>
</body>
</html>
export function getGdpData() {
return [
{
"Rank": 1,
"Country": "Luxembourg",
"Name": "ルクセンブルク",
"2020": "112875"
},
{
"Rank": 2,
"Country": "Ireland",
"Name": "アイルランド",
"2020": "89383"
},
{
"Rank": 3,
"Country": "Switzerland",
"Name": "スイス",
"2020": "68340"
},
{
"Rank": 4,
"Country": "Norway",
"Name": "ノルウェー",
"2020": "64856"
},
{
"Rank": 5,
"Country": "Denmark",
"Name": "デンマーク",
"2020": "57781"
},
{
"Rank": 6,
"Country": "Netherlands",
"Name": "オランダ",
"2020": "57101"
},
{
"Rank": 7,
"Country": "Austria",
"Name": "オーストリア",
"2020": "55406"
},
{
"Rank": 8,
"Country": "Iceland",
"Name": "アイスランド",
"2020": "54482"
},
{
"Rank": 9,
"Country": "Germany",
"Name": "ドイツ",
"2020": "53571"
},
{
"Rank": 10,
"Country": "Sweden",
"Name": "スウェーデン",
"2020": "52477"
},
{
"Rank": 11,
"Country": "Belgium",
"Name": "ベルギー",
"2020": "50114"
},
{
"Rank": 12,
"Country": "Finland",
"Name": "フィンランド",
"2020": "49334"
},
{
"Rank": 13,
"Country": "France",
"Name": "フランス",
"2020": "45454"
},
{
"Rank": 14,
"Country": "United Kingdom",
"Name": "イギリス",
"2020": "44288"
},
{
"Rank": 15,
"Country": "Malta",
"Name": "マルタ",
"2020": "43087"
},
{
"Rank": 16,
"Country": "Czech Republic",
"Name": "チェコ",
"2020": "40293"
},
{
"Rank": 17,
"Country": "Italy",
"Name": "イタリア",
"2020": "40066"
},
{
"Rank": 18,
"Country": "Cyprus",
"Name": "キプロス",
"2020": "39079"
},
{
"Rank": 19,
"Country": "Lithuania",
"Name": "リトアニア",
"2020": "38605"
},
{
"Rank": 20,
"Country": "Slovenia",
"Name": "スロベニア",
"2020": "38506"
},
{
"Rank": 21,
"Country": "Spain",
"Name": "スペイン",
"2020": "38143"
},
{
"Rank": 22,
"Country": "Estonia",
"Name": "エストニア",
"2020": "37033"
},
{
"Rank": 23,
"Country": "Poland",
"Name": "ポーランド",
"2020": "33739"
},
{
"Rank": 24,
"Country": "Portugal",
"Name": "ポルトガル",
"2020": "33131"
},
{
"Rank": 25,
"Country": "Hungary",
"Name": "ハンガリー",
"2020": "32434"
},
{
"Rank": 26,
"Country": "Slovakia",
"Name": "スロバキア",
"2020": "32184"
},
{
"Rank": 27,
"Country": "Latvia",
"Name": "ラトビア",
"2020": "30579"
},
{
"Rank": 28,
"Country": "Romania",
"Name": "ルーマニア",
"2020": "30141"
},
{
"Rank": 29,
"Country": "Greece",
"Name": "ギリシャ",
"2020": "29045"
},
{
"Rank": 30,
"Country": "Croatia",
"Name": "クロアチア",
"2020": "27681"
},
{
"Rank": 31,
"Country": "Russia",
"Name": "ロシア",
"2020": "27394"
},
{
"Rank": 32,
"Country": "Bulgaria",
"Name": "ブルガリア",
"2020": "23741"
},
{
"Rank": 33,
"Country": "Montenegro",
"Name": "モンテネグロ",
"2020": "19931"
},
{
"Rank": 34,
"Country": "Belarus",
"Name": "ベラルーシ",
"2020": "19759"
},
{
"Rank": 35,
"Country": "Serbia",
"Name": "セルビア",
"2020": "18840"
},
{
"Rank": 36,
"Country": "North Macedonia",
"Name": "北",
"2020": "16609"
},
{
"Rank": 37,
"Country": "Bosnia and Herzegovina",
"Name": "ボスニア",
"2020": "14895"
},
{
"Rank": 38,
"Country": "Albania",
"Name": "アルバニア",
"2020": "13651"
},
{
"Rank": 39,
"Country": "Moldova",
"Name": "モルドバ",
"2020": "13253"
},
{
"Rank": 40,
"Country": "Ukraine",
"Name": "ウクライナ",
"2020": "12710"
}
];
}
body {
margin-bottom: 24px;
}
.wj-flexmap {
max-width: 600px;
}
(function (global) {
System.config({
transpiler: 'plugin-babel',
babelOptions: {
es2015: true
},
meta: {
'*.css': { loader: 'css' }
},
paths: {
// paths serve as alias
'npm:': 'node_modules/'
},
// map tells the System loader where to look for things
map: {
'jszip': 'npm:jszip/dist/jszip.js',
'@mescius/wijmo': 'npm:@mescius/wijmo/index.js',
'@mescius/wijmo.input': 'npm:@mescius/wijmo.input/index.js',
'@mescius/wijmo.styles': 'npm:@mescius/wijmo.styles',
'@mescius/wijmo.cultures': 'npm:@mescius/wijmo.cultures',
'@mescius/wijmo.chart': 'npm:@mescius/wijmo.chart/index.js',
'@mescius/wijmo.chart.analytics': 'npm:@mescius/wijmo.chart.analytics/index.js',
'@mescius/wijmo.chart.animation': 'npm:@mescius/wijmo.chart.animation/index.js',
'@mescius/wijmo.chart.annotation': 'npm:@mescius/wijmo.chart.annotation/index.js',
'@mescius/wijmo.chart.finance': 'npm:@mescius/wijmo.chart.finance/index.js',
'@mescius/wijmo.chart.finance.analytics': 'npm:@mescius/wijmo.chart.finance.analytics/index.js',
'@mescius/wijmo.chart.hierarchical': 'npm:@mescius/wijmo.chart.hierarchical/index.js',
'@mescius/wijmo.chart.interaction': 'npm:@mescius/wijmo.chart.interaction/index.js',
'@mescius/wijmo.chart.radar': 'npm:@mescius/wijmo.chart.radar/index.js',
'@mescius/wijmo.chart.render': 'npm:@mescius/wijmo.chart.render/index.js',
'@mescius/wijmo.chart.webgl': 'npm:@mescius/wijmo.chart.webgl/index.js',
'@mescius/wijmo.chart.map': 'npm:@mescius/wijmo.chart.map/index.js',
'@mescius/wijmo.gauge': 'npm:@mescius/wijmo.gauge/index.js',
'@mescius/wijmo.grid': 'npm:@mescius/wijmo.grid/index.js',
'@mescius/wijmo.grid.detail': 'npm:@mescius/wijmo.grid.detail/index.js',
'@mescius/wijmo.grid.filter': 'npm:@mescius/wijmo.grid.filter/index.js',
'@mescius/wijmo.grid.search': 'npm:@mescius/wijmo.grid.search/index.js',
'@mescius/wijmo.grid.grouppanel': 'npm:@mescius/wijmo.grid.grouppanel/index.js',
'@mescius/wijmo.grid.multirow': 'npm:@mescius/wijmo.grid.multirow/index.js',
'@mescius/wijmo.grid.transposed': 'npm:@mescius/wijmo.grid.transposed/index.js',
'@mescius/wijmo.grid.transposedmultirow': 'npm:@mescius/wijmo.grid.transposedmultirow/index.js',
'@mescius/wijmo.grid.pdf': 'npm:@mescius/wijmo.grid.pdf/index.js',
'@mescius/wijmo.grid.sheet': 'npm:@mescius/wijmo.grid.sheet/index.js',
'@mescius/wijmo.grid.xlsx': 'npm:@mescius/wijmo.grid.xlsx/index.js',
'@mescius/wijmo.grid.selector': 'npm:@mescius/wijmo.grid.selector/index.js',
'@mescius/wijmo.grid.cellmaker': 'npm:@mescius/wijmo.grid.cellmaker/index.js',
'@mescius/wijmo.nav': 'npm:@mescius/wijmo.nav/index.js',
'@mescius/wijmo.odata': 'npm:@mescius/wijmo.odata/index.js',
'@mescius/wijmo.olap': 'npm:@mescius/wijmo.olap/index.js',
'@mescius/wijmo.rest': 'npm:@mescius/wijmo.rest/index.js',
'@mescius/wijmo.pdf': 'npm:@mescius/wijmo.pdf/index.js',
'@mescius/wijmo.pdf.security': 'npm:@mescius/wijmo.pdf.security/index.js',
'@mescius/wijmo.viewer': 'npm:@mescius/wijmo.viewer/index.js',
'@mescius/wijmo.xlsx': 'npm:@mescius/wijmo.xlsx/index.js',
'@mescius/wijmo.undo': 'npm:@mescius/wijmo.undo/index.js',
'@mescius/wijmo.interop.grid': 'npm:@mescius/wijmo.interop.grid/index.js',
'@mescius/wijmo.touch': 'npm:@mescius/wijmo.touch/index.js',
'@mescius/wijmo.cloud': 'npm:@mescius/wijmo.cloud/index.js',
'@mescius/wijmo.barcode': 'npm:@mescius/wijmo.barcode/index.js',
'@mescius/wijmo.barcode.common': 'npm:@mescius/wijmo.barcode.common/index.js',
'@mescius/wijmo.barcode.composite': 'npm:@mescius/wijmo.barcode.composite/index.js',
'@mescius/wijmo.barcode.specialized': 'npm:@mescius/wijmo.barcode.specialized/index.js',
'jszip': 'npm:jszip/dist/jszip.js',
'bootstrap.css': 'npm:bootstrap/dist/css/bootstrap.min.css',
'css': 'npm:systemjs-plugin-css/css.js',
'plugin-babel': 'npm:systemjs-plugin-babel/plugin-babel.js',
'systemjs-babel-build':'npm:systemjs-plugin-babel/systemjs-babel-browser.js'
},
// packages tells the System loader how to load when no filename and/or no extension
packages: {
src: {
defaultExtension: 'js'
},
"node_modules": {
defaultExtension: 'js'
},
}
});
})(this);
