import 'bootstrap.css';
import '@mescius/wijmo.styles/wijmo.css';
import './styles.css';
//
import { httpRequest } from '@mescius/wijmo';
import { Position, Palettes } from '@mescius/wijmo.chart';
import { FlexMap, GeoMapLayer, ColorScale } from '@mescius/wijmo.chart.map';
//
document.readyState === 'complete' ? init() : window.onload = init;
//
function init() {
let map = new FlexMap('#map', {
header: 'Average Temperature By State',
legend: { position: Position.Left },
tooltip: { content: (f) => f.name + ' ' + dataMap.get(f.name) + '°F' },
layers: [
new GeoMapLayer({
url: 'data/US.json',
itemsSourceChanged: (s, a) => { map.zoomTo(s.getGeoBBox()); },
colorScale: new ColorScale({
colors: Palettes.Diverging.RdYlBu,
binding: (o) => dataMap.get(o.properties.name),
scale: (v) => 1 - v,
format: 'n0"°F"'
})
})
]
});
let dataMap = new Map();
httpRequest('data/temp.json', {
success: xhr => {
JSON.parse(xhr.responseText).forEach(el => dataMap.set(el.State, parseFloat(el.AverageTemperature)));
}
});
}
//
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>MESCIUS Wijmo US Choropleth</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>
body {
margin-bottom: 24px;
}
.wj-flexmap {
max-width: 600px;
}
[
{
"State": "Alabama",
"AverageTemperature": "62.8000"
},
{
"State": "Alaska",
"AverageTemperature": "26.6000"
},
{
"State": "Arizona",
"AverageTemperature": "60.3000"
},
{
"State": "Arkansas",
"AverageTemperature": "60.4000"
},
{
"State": "California",
"AverageTemperature": "59.4000"
},
{
"State": "Colorado",
"AverageTemperature": "45.1000"
},
{
"State": "Connecticut",
"AverageTemperature": 49
},
{
"State": "Delaware",
"AverageTemperature": "55.3000"
},
{
"State": "Florida",
"AverageTemperature": "70.7000"
},
{
"State": "Georgia",
"AverageTemperature": "63.5000"
},
{
"State": "Hawaii",
"AverageTemperature": 70
},
{
"State": "Idaho",
"AverageTemperature": "44.4000"
},
{
"State": "Illinois",
"AverageTemperature": "51.8000"
},
{
"State": "Indiana",
"AverageTemperature": "51.7000"
},
{
"State": "Iowa",
"AverageTemperature": "47.8000"
},
{
"State": "Kansas",
"AverageTemperature": "54.3000"
},
{
"State": "Kentucky",
"AverageTemperature": "55.6000"
},
{
"State": "Louisiana",
"AverageTemperature": "66.4000"
},
{
"State": "Maine",
"AverageTemperature": 41
},
{
"State": "Maryland",
"AverageTemperature": "54.2000"
},
{
"State": "Massachusetts",
"AverageTemperature": "47.9000"
},
{
"State": "Michigan",
"AverageTemperature": "44.4000"
},
{
"State": "Minnesota",
"AverageTemperature": "41.2000"
},
{
"State": "Mississippi",
"AverageTemperature": "63.4000"
},
{
"State": "Missouri",
"AverageTemperature": "54.6000"
},
{
"State": "Montana",
"AverageTemperature": "42.7000"
},
{
"State": "Nebraska",
"AverageTemperature": "48.8000"
},
{
"State": "Nevada",
"AverageTemperature": "49.9000"
},
{
"State": "New Hampshire",
"AverageTemperature": "43.8000"
},
{
"State": "New Jersey",
"AverageTemperature": "52.7000"
},
{
"State": "New Mexico",
"AverageTemperature": "53.4000"
},
{
"State": "New York",
"AverageTemperature": "45.4000"
},
{
"State": "North Carolina",
"AverageTemperature": 59
},
{
"State": "North Dakota",
"AverageTemperature": "40.4000"
},
{
"State": "Ohio",
"AverageTemperature": "50.7000"
},
{
"State": "Oklahoma",
"AverageTemperature": "59.6000"
},
{
"State": "Oregon",
"AverageTemperature": "48.4000"
},
{
"State": "Pennsylvania",
"AverageTemperature": "48.8000"
},
{
"State": "Rhode Island",
"AverageTemperature": "50.1000"
},
{
"State": "South Carolina",
"AverageTemperature": "62.4000"
},
{
"State": "South Dakota",
"AverageTemperature": "45.2000"
},
{
"State": "Tennessee",
"AverageTemperature": "57.6000"
},
{
"State": "Texas",
"AverageTemperature": "64.8000"
},
{
"State": "Utah",
"AverageTemperature": "48.6000"
},
{
"State": "Vermont",
"AverageTemperature": "42.9000"
},
{
"State": "Virginia",
"AverageTemperature": "55.1000"
},
{
"State": "Washington",
"AverageTemperature": "48.3000"
},
{
"State": "West Virginia",
"AverageTemperature": "51.8000"
},
{
"State": "Wisconsin",
"AverageTemperature": "43.1000"
},
{
"State": "Wyoming",
"AverageTemperature": 42
}
]
{"type":"FeatureCollection", "features": [
{"type":"Feature","geometry":{"type":"Polygon","coordinates":[[[-95.16,49.37],[-95.16,49.01],[-95.18,48.99],[-97.23,48.99],[-97.1,48.65],[-97.16,48.53],[-97.12,48.43],[-97.14,48.38],[-97.12,48.28],[-97.12,48.13],[-97.04,47.95],[-97,47.92],[-97.01,47.9],[-96.99,47.81],[-96.95,47.78],[-96.86,47.6],[-96.87,47.42],[-96.84,47.39],[-96.85,47.26],[-96.83,47.17],[-96.83,47],[-96.81,46.94],[-96.76,46.92],[-96.8,46.79],[-96.78,46.72],[-96.79,46.64],[-96.75,46.6],[-96.75,46.5],[-96.72,46.44],[-96.6,46.32],[-96.6,46.22],[-96.56,46.17],[-96.56,46.1],[-96.58,46.02],[-96.56,45.94],[-96.59,45.84],[-96.64,45.76],[-96.84,45.65],[-96.86,45.6],[-96.77,45.51],[-96.71,45.42],[-96.69,45.41],[-96.57,45.39],[-96.49,45.35],[-96.45,45.3],[-96.45,43.5],[-95.15,43.5],[-93.85,43.5],[-92.55,43.5],[-91.25,43.5],[-91.24,43.74],[-91.28,43.8],[-91.28,43.9],[-91.3,43.93],[-91.36,43.94],[-91.41,44.01],[-91.47,44.03],[-91.54,44.07],[-91.66,44.07],[-91.82,44.16],[-91.95,44.34],[-92.1,44.44],[-92.29,44.47],[-92.33,44.53],[-92.39,44.58],[-92.58,44.61],[-92.82,44.76],[-92.78,44.82],[-92.78,44.89],[-92.76,44.93],[-92.8,45.08],[-92.77,45.09],[-92.75,45.13],[-92.77,45.19],[-92.76,45.28],[-92.71,45.33],[-92.66,45.43],[-92.75,45.56],[-92.88,45.58],[-92.9,45.61],[-92.89,45.7],[-92.77,45.81],[-92.77,45.83],[-92.7,45.91],[-92.57,45.96],[-92.53,45.99],[-92.47,46],[-92.43,46.03],[-92.36,46.03],[-92.32,46.07],[-92.29,46.08],[-92.29,46.66],[-92.22,46.66],[-92.2,46.71],[-92.16,46.73],[-92.14,46.76],[-92.11,46.77],[-91.96,46.73],[-91.47,46.92],[-90.65,47.31],[-89.96,47.29],[-89.5,48],[-89.71,48],[-89.78,48.02],[-89.92,47.99],[-90,48.02],[-90.07,48.1],[-90.12,48.12],[-90.49,48.1],[-90.54,48.08],[-90.59,48.1],[-90.75,48.08],[-90.79,48.1],[-90.81,48.16],[-90.85,48.19],[-90.84,48.22],[-90.87,48.23],[-91.07,48.17],[-91.28,48.06],[-91.37,48.06],[-91.43,48.04],[-91.49,48.05],[-91.57,48.05],[-91.59,48.09],[-91.69,48.1],[-91.72,48.11],[-91.7,48.14],[-91.74,48.18],[-91.85,48.2],[-91.98,48.24],[-92.01,48.26],[-92.04,48.33],[-92.07,48.35],[-92.15,48.35],[-92.28,48.33],[-92.3,48.31],[-92.29,48.25],[-92.37,48.22],[-92.46,48.33],[-92.49,48.43],[-92.53,48.45],[-92.66,48.44],[-92.7,48.45],[-92.72,48.46],[-92.71,48.48],[-92.63,48.5],[-92.65,48.54],[-92.88,48.58],[-92.98,48.62],[-93.26,48.63],[-93.39,48.61],[-93.45,48.6],[-93.46,48.56],[-93.49,48.54],[-93.78,48.52],[-93.81,48.54],[-93.84,48.62],[-93.87,48.64],[-94.23,48.65],[-94.29,48.71],[-94.52,48.7],[-94.59,48.73],[-94.69,48.78],[-94.71,48.81],[-94.71,48.91],[-94.81,49.17],[-94.81,49.21],[-94.84,49.31],[-94.93,49.35],[-95.1,49.35],[-95.16,49.37]]]},"properties":{"name":"Minnesota","name_local":"","admin":"United States of America","type":"State"}},
{"type":"Feature","geometry":{"type":"MultiPolygon","coordinates":[[[[-117.04,48.99],[-118.48,48.99],[-119.8,48.99],[-121.33,48.99],[-122.75,48.99],[-122.73,48.96],[-122.8,48.96],[-122.81,48.93],[-122.76,48.94],[-122.75,48.92],[-122.77,48.87],[-122.7,48.83],[-122.7,48.79],[-122.7,48.8],[-122.66,48.78],[-122.67,48.73],[-122.64,48.72],[-122.57,48.78],[-122.51,48.76],[-122.5,48.74],[-122.53,48.69],[-122.5,48.68],[-122.49,48.64],[-122.46,48.62],[-122.44,48.58],[-122.47,48.55],[-122.53,48.58],[-122.57,48.59],[-122.49,48.53],[-122.49,48.45],[-122.51,48.45],[-122.57,48.49],[-122.58,48.46],[-122.63,48.52],[-122.7,48.5],[-122.66,48.45],[-122.68,48.43],[-122.65,48.4],[-122.62,48.41],[-122.58,48.44],[-122.56,48.43],[-122.57,48.41],[-122.53,48.37],[-122.48,48.36],[-122.39,48.3],[-122.38,48.28],[-122.4,48.24],[-122.45,48.26],[-122.53,48.25],[-122.51,48.15],[-122.38,48.06],[-122.35,48.05],[-122.38,48.1],[-122.46,48.14],[-122.47,48.18],[-122.44,48.23],[-122.38,48.21],[-122.36,48.12],[-122.34,48.09],[-122.24,48.03],[-122.22,48.04],[-122.19,48.03],[-122.21,47.99],[-122.32,47.94],[-122.34,47.87],[-122.4,47.8],[-122.38,47.72],[-122.43,47.66],[-122.34,47.6],[-122.35,47.56],[-122.38,47.6],[-122.41,47.57],[-122.37,47.5],[-122.37,47.44],[-122.33,47.39],[-122.33,47.36],[-122.42,47.32],[-122.43,47.3],[-122.4,47.28],[-122.43,47.26],[-122.54,47.32],[-122.54,47.28],[-122.57,47.21],[-122.65,47.13],[-122.72,47.09],[-122.82,47.17],[-122.83,47.14],[-122.86,47.13],[-122.85,47.17],[-122.9,47.13],[-122.89,47.05],[-122.92,47.06],[-122.94,47.09],[-122.94,47.13
