<!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: 740px; height: 512px; box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.37); }
.pixi .charttitle .subtitle { font-size: 0.9em; font-style: italic; text-anchor: start }
</style>
<script>
window.addEventListener('load', () => {
'use strict';
// Set the map attributes:
const map = {
type: 'raster',
url: 'https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',
subdomains: ['a', 'b', 'c'],
zoom: 5,
coordinates: [46.766616, 2.431521],
};
// Define the chart settings:
const opts = {
chart: {
width: window.innerWidth < (740 * 0.8) ? (window.innerWidth * 0.8) : 740,
height: window.innerHeight < 512 ? window.innerHeight : 512,
},
};
// Set the overlay attributes:
const poi = [{"0":{"title":"Customer 0 location","style":{},"geometry":{"type":"Point","radius":5,"coordinates":[47.65139,-2.72139]},"properties":{"φ":47.65139,"λ":-2.72139}}},{"1":{"title":"Customer 1 location","style":{},"geometry":{"type":"Point","radius":5,"coordinates":[47.67522,-2.71944]},"properties":{"φ":47.67522,"λ":-2.71944}}},{"2":{"title":"Customer 2 location","style":{},"geometry":{"type":"Point","radius":5,"coordinates":[47.25321,-1.61878]},"properties":{"φ":47.25321,"λ":-1.61878}}},{"3":{"title":"Customer 3 location","style":{},"geometry":{"type":"Point","radius":5,"coordinates":[47.2541,-1.61806]},"properties":{"φ":47.2541,"λ":-1.61806}}},{"4":{"title":"Customer 4 location","style":{},"geometry":{"type":"Point","radius":5,"coordinates":[43.49096,-1.45987]},"properties":{"φ":43.49096,"λ":-1.45987}}},{"5":{"title":"Customer 5 location","style":{},"geometry":{"type":"Point","radius":5,"coordinates":[46.69563,-1.42641]},"properties":{"φ":46.69563,"λ":-1.42641}}},{"6":{"title":"Customer 6 location","style":{},"geometry":{"type":"Point","radius":5,"coordinates":[46.66668,-1.1426]},"properties":{"φ":46.66668,"λ":-1.1426}}},{"7":{"title":"Customer 7 location","style":{},"geometry":{"type":"Point","radius":5,"coordinates":[46.1437,-1.14172]},"properties":{"φ":46.1437,"λ":-1.14172}}},{"8":{"title":"Customer 8 location","style":{},"geometry":{"type":"Point","radius":5,"coordinates":[45.63369,-0.9804]},"properties":{"φ":45.63369,"λ":-0.9804}}},{"9":{"title":"Customer 9 location","style":{},"geometry":{"type":"Point","radius":5,"coordinates":[44.82666,-0.67155]},"properties":{"φ":44.82666,"λ":-0.67155}}},{"10":{"title":"Customer 10 location","style":{},"geometry":{"type":"Point","radius":5,"coordinates":[47.4756,-0.52012]},"properties":{"φ":47.4756,"λ":-0.52012}}},{"11":{"title":"Customer 11 location","style":{},"geometry":{"type":"Point","radius":5,"coordinates":[43.32389,-0.37918]},"properties":{"φ":43.32389,"λ":-0.37918}}},{"12":{"title":"Customer 12 location","style":{},"geometry":{"type":"Point","radius":5,"coordinates":[46.60241,0.3267]},"properties":{"φ":46.60241,"λ":0.3267}}},{"13":{"title":"Customer 13 location","style":{},"geometry":{"type":"Point","radius":5,"coordinates":[43.92927,0.61788]},"properties":{"φ":43.92927,"λ":0.61788}}},{"14":{"title":"Customer 14 location","style":{},"geometry":{"type":"Point","radius":5,"coordinates":[47.41978,0.66106]},"properties":{"φ":47.41978,"λ":0.66106}}},{"15":{"title":"Customer 15 location","style":{},"geometry":{"type":"Point","radius":5,"coordinates":[47.41965,0.66109]},"properties":{"φ":47.41965,"λ":0.66109}}},{"16":{"title":"Customer 16 location","style":{},"geometry":{"type":"Point","radius":5,"coordinates":[45.18405,0.70641]},"properties":{"φ":45.18405,"λ":0.70641}}},{"17":{"title":"Customer 17 location","style":{},"geometry":{"type":"Point","radius":5,"coordinates":[47.04652,0.71297]},"properties":{"φ":47.04652,"λ":0.71297}}},{"18":{"title":"Customer 18 location","style":{},"geometry":{"type":"Point","radius":5,"coordinates":[45.80691,1.23705]},"properties":{"φ":45.80691,"λ":1.23705}}},{"19":{"title":"Customer 19 location","style":{},"geometry":{"type":"Point","radius":5,"coordinates":[44.03648,1.37955]},"properties":{"φ":44.03648,"λ":1.37955}}},{"20":{"title":"Customer 20 location","style":{},"geometry":{"type":"Point","radius":5,"coordinates":[43.63874,1.47382]},"properties":{"φ":43.63874,"λ":1.47382}}},{"21":{"title":"Customer 21 location","style":{},"geometry":{"type":"Point","radius":5,"coordinates":[46.82668,1.68108]},"properties":{"φ":46.82668,"λ":1.68108}}},{"22":{"title":"Customer 22 location","style":{},"geometry":{"type":"Point","radius":5,"coordinates":[43.93114,2.1645]},"properties":{"φ":43.93114,"λ":2.1645}}},{"23":{"title":"Customer 23 location","style":{},"geometry":{"type":"Point","radius":5,"coordinates":[48.42876,-4.46748]},"properties":{"φ":48.42876,"λ":-4.46748}}},{"24":{"title":"Customer 24 location","style":{},"geometry":{"type":"Point","radius":5,"coordinates":[47.76587,-3.33067]},"properties":{"φ":47.76587,"λ":-3.33067}}},{"25":{"title":"Customer 25 location","style":{},"geometry":{"type":"Point","radius":5,"coordinates":[48.13565,-1.6873]},"properties":{"φ":48.13565,"λ":-1.6873}}},{"26":{"title":"Customer 26 location","style":{},"geometry":{"type":"Point","radius":5,"coordinates":[49.31062,-1.25602]},"properties":{"φ":49.31062,"λ":-1.25602}}},{"27":{"title":"Customer 27 location","style":{},"geometry":{"type":"Point","radius":5,"coordinates":[49.11265,-1.10032]},"properties":{"φ":49.11265,"λ":-1.10032}}},{"28":{"title":"Customer 28 location","style":{},"geometry":{"type":"Point","radius":5,"coordinates":[48.06859,-0.81101]},"properties":{"φ":48.06859,"λ":-0.81101}}},{"29":{"title":"Customer 29 location","style":{},"geometry":{"type":"Point","radius":5,"coordinates":[48.44204,0.09872]},"properties":{"φ":48.44204,"λ":0.09872}}},{"30":{"title":"Customer 30 location","style":{},"geometry":{"type":"Point","radius":5,"coordinates":[49.49414,0.14203]},"properties":{"φ":49.49414,"λ":0.14203}}},{"31":{"title":"Customer 31 location","style":{},"geometry":{"type":"Point","radius":5,"coordinates":[47.97677,0.20823]},"properties":{"φ":47.97677,"λ":0.20823}}},{"32":{"title":"Customer 32 location","style":{},"geometry":{"type":"Point","radius":5,"coordinates":[49.55107,0.49012]},"properties":{"φ":49.55107,"λ":0.49012}}},{"33":{"title":"Customer 33 location","style":{},"geometry":{"type":"Point","radius":5,"coordinates":[49.45748,1.05583]},"properties":{"φ":49.45748,"λ":1.05583}}},{"34":{"title":"Customer 34 location","style":{},"geometry":{"type":"Point","radius":5,"coordinates":[48.74752,1.35306]},"properties":{"φ":48.74752,"λ":1.35306}}},{"35":{"title":"Customer 35 location","style":{},"geometry":{"type":"Point","radius":5,"coordinates":[50.09945,1.86196]},"properties":{"φ":50.09945,"λ":1.86196}}},{"36":{"title":"Customer 36 location","style":{},"geometry":{"type":"Point","radius":5,"coordinates":[48.73702,1.9077]},"properties":{"φ":48.73702,"λ":1.9077}}},{"37":{"title":"Customer 37 location","style":{},"geometry":{"type":"Point","radius":5,"coordinates":[47.8451,1.92192]},"properties":{"φ":47.8451,"λ":1.92192}}},{"38":{"title":"Customer 38 location","style":{},"geometry":{"type":"Point","radius":5,"coordinates":[48.89357,2.02337]},"properties":{"φ":48.89357,"λ":2.02337}}},{"39":{"title":"Customer 39 location","style":{},"geometry":{"type":"Point","radius":5,"coordinates":[49.04753,2.10468]},"properties":{"φ":49.04753,"λ":2.10468}}},{"40":{"title":"Customer 40 location","style":{},"geometry":{"type":"Point","radius":5,"coordinates":[49.41072,2.11987]},"properties":{"φ":49.41072,"λ":2.11987}}},{"41":{"title":"Customer 41 location","style":{},"geometry":{"type":"Point","radius":5,"coordinates":[48.90548,2.23905]},"properties":{"φ":48.90548,"λ":2.23905}}},{"42":{"title":"Customer 42 location","style":{},"geometry":{"type":"Point","radius":5,"coordinates":[48.78305,2.24582]},"properties":{"φ":48.78305,"λ":2.24582}}},{"43":{"title":"Customer 43 location","style":{},"geometry":{"type":"Point","radius":5,"coordinates":[48.94988,2.26135]},"properties":{"φ":48.94988,"λ":2.26135}}},{"44":{"title":"Customer 44 location","style":{},"geometry":{"type":"Point","radius":5,"coordinates":[48.87533,2.29077]},"properties":{"φ":48.87533,"λ":2.29077}}},{"45":{"title":"Customer 45 location","style":{},"geometry":{"type":"Point","radius":5,"coordinates":[48.75795,2.30665]},"properties":{"φ":48.75795,"λ":2.30665}}},{"46":{"title":"Customer 46 location","style":{},"geometry":{"type":"Point","radius":5,"coordinates":[50.38018,2.33485]},"properties":{"φ":50.38018,"λ":2.33485}}},{"47":{"title":"Customer 47 location","style":{},"geometry":{"type":"Point","radius":5,"coordinates":[47.12404,2.36576]},"properties":{"φ":47.12404,"λ":2.36576}}},{"48":{"title":"Customer 48 location","style":{},"geometry":{"type":"Point","radius":5,"coordinates":[46.34544,2.60889]},"properties":{"φ":46.34544,"λ":2.60889}}},{"49":{"title":"Customer 49 location","style":{},"geometry":{"type":"Point","radius":5,"coordinates":[42.69632,2.90316]},"properties":{"φ":42.69632,"λ":2.90316}}},{"50":{"title":"Customer 50 location","style":{},"geometry":{"type":"Point","radius":5,"coordinates":[43.15747,2.98368]},"properties":{"φ":43.15747,"λ":2.98368}}},{"51":{"title":"Customer 51 location","style":{},"geometry":{"type":"Point","radius":5,"coordinates":[45.78141,3.06326]},"properties":{"φ":45.78141,"λ":3.06326}}},{"52":{"title":"Customer 52 location","style":{},"geometry":{"type":"Point","radius":5,"coordinates":[43.57178,3.85022]},"properties":{"φ":43.57178,"λ":3.85022}}},{"53":{"title":"Customer 53 location","style":{},"geometry":{"type":"Point","radius":5,"coordinates":[43.7969,4.37896]},"properties":{"φ":43.7969,"λ":4.37896}}},{"54":{"title":"Customer 54 location","style":{},"geometry":{"type":"Point","radius":5,"coordinates":[45.43206,4.39569]},"properties":{"φ":45.43206,"λ":4.39569}}},{"55":{"title":"Customer 55 location","style":{},"geometry":{"type":"Point","radius":5,"coordinates":[44.71952,4.60982]},"properties":{"φ":44.71952,"λ":4.60982}}},{"56":{"title":"Customer 56 location","style":{},"geometry":{"type":"Point","radius":5,"coordinates":[44.48687,4.75463]},"properties":{"φ":44.48687,"λ":4.75463}}},{"57":{"title":"Customer 57 location","style":{},"geometry":{"type":"Point","radius":5,"coordinates":[45.80515,4.77091]},"properties":{"φ":45.80515,"λ":4.77091}}},{"58":{"title":"Customer 58 location","style":{},"geometry":{"type":"Point","radius":5,"coordinates":[43.95137,4.82757]},"properties":{"φ":43.95137,"λ":4.82757}}},{"59":{"title":"Customer 59 location","style":{},"geometry":{"type":"Point","radius":5,"coordinates":[46.75179,4.84736]},"properties":{"φ":46.75179,"λ":4.84736}}},{"60":{"title":"Customer 60 location","style":{},"geometry":{"type":"Point","radius":5,"coordinates":[47.33056,5.07861]},"properties":{"φ":47.33056,"λ":5.07861}}},{"61":{"title":"Customer 61 location","style":{},"geometry":{"type":"Point","radius":5,"coordinates":[43.6362,5.10069]},"properties":{"φ":43.6362,"λ":5.10069}}},{"62":{"title":"Customer 62 location","style":{},"geometry":{"type":"Point","radius":5,"coordinates":[43.28791,5.38492]},"properties":{"φ":43.28791,"λ":5.38492}}},{"63":{"title":"Customer 63 location","style":{},"geometry":{"type":"Point","radius":5,"coordinates":[43.51518,5.43053]},"properties":{"φ":43.51518,"λ":5.43053}}},{"64":{"title":"Customer 64 location","style":{},"geometry":{"type":"Point","radius":5,"coordinates":[45.18774,5.75082]},"properties":{"φ":45.18774,"λ":5.75082}}},{"65":{"title":"Customer 65 location","style":{},"geometry":{"type":"Point","radius":5,"coordinates":[43.10751,5.85161]},"properties":{"φ":43.10751,"λ":5.85161}}},{"66":{"title":"Customer 66 location","style":{},"geometry":{"type":"Point","radius":5,"coordinates":[45.57561,5.94418]},"properties":{"φ":45.57561,"λ":5.94418}}},{"67":{"title":"Customer 67 location","style":{},"geometry":{"type":"Point","radius":5,"coordinates":[45.94383,6.06961]},"properties":{"φ":45.94383,"λ":6.06961}}},{"68":{"title":"Customer 68 location","style":{},"geometry":{"type":"Point","radius":5,"coordinates":[43.56779,7.01432]},"properties":{"φ":43.56779,"λ":7.01432}}},{"69":{"title":"Customer 69 location","style":{},"geometry":{"type":"Point","radius":5,"coordinates":[43.70879,7.26753]},"properties":{"φ":43.70879,"λ":7.26753}}},{"70":{"title":"Customer 70 location","style":{},"geometry":{"type":"Point","radius":5,"coordinates":[50.15952,2.33607]},"properties":{"φ":50.15952,"λ":2.33607}}},{"71":{"title":"Customer 71 location","style":{},"geometry":{"type":"Point","radius":5,"coordinates":[49.91163,2.33685]},"properties":{"φ":49.91163,"λ":2.33685}}},{"72":{"title":"Customer 72 location","style":{},"geometry":{"type":"Point","radius":5,"coordinates":[49.90053,2.35191]},"properties":{"φ":49.90053,"λ":2.35191}}},{"73":{"title":"Customer 73 location","style":{},"geometry":{"type":"Point","radius":5,"coordinates":[48.88595,2.35948]},"properties":{"φ":48.88595,"λ":2.35948}}},{"74":{"title":"Customer 74 location","style":{},"geometry":{"type":"Point","radius":5,"coordinates":[48.79889,2.36694]},"properties":{"φ":48.79889,"λ":2.36694}}},{"75":{"title":"Customer 75 location","style":{},"geometry":{"type":"Point","radius":5,"coordinates":[48.85807,2.36797]},"properties":{"φ":48.85807,"λ":2.36797}}},{"76":{"title":"Customer 76 location","style":{},"geometry":{"type":"Point","radius":5,"coordinates":[51.02867,2.37016]},"properties":{"φ":51.02867,"λ":2.37016}}},{"77":{"title":"Customer 77 location","style":{},"geometry":{"type":"Point","radius":5,"coordinates":[50.61886,2.39558]},"properties":{"φ":50.61886,"λ":2.39558}}},{"78":{"title":"Customer 78 location","style":{},"geometry":{"type":"Point","radius":5,"coordinates":[48.81526,2.50627]},"properties":{"φ":48.81526,"λ":2.50627}}},{"79":{"title":"Customer 79 location","style":{},"geometry":{"type":"Point","radius":5,"coordinates":[49.41885,2.82382]},"properties":{"φ":49.41885,"λ":2.82382}}},{"80":{"title":"Customer 80 location","style":{},"geometry":{"type":"Point","radius":5,"coordinates":[50.43005,2.82563]},"properties":{"φ":50.43005,"λ":2.82563}}},{"81":{"title":"Customer 81 location","style":{},"geometry":{"type":"Point","radius":5,"coordinates":[48.95945,2.87261]},"properties":{"φ":48.95945,"λ":2.87261}}},{"82":{"title":"Customer 82 location","style":{},"geometry":{"type":"Point","radius":5,"coordinates":[49.93052,2.93689]},"properties":{"φ":49.93052,"λ":2.93689}}},{"83":{"title":"Customer 83 location","style":{},"geometry":{"type":"Point","radius":5,"coordinates":[50.62551,3.05587]},"properties":{"φ":50.62551,"λ":3.05587}}},{"84":{"title":"Customer 84 location","style":{},"geometry":{"type":"Point","radius":5,"coordinates":[50.61361,3.06278]},"properties":{"φ":50.61361,"λ":3.06278}}},{"85":{"title":"Customer 85 location","style":{},"geometry":{"type":"Point","radius":5,"coordinates":[48.19262,3.26408]},"properties":{"φ":48.19262,"λ":3.26408}}},{"86":{"title":"Customer 86 location","style":{},"geometry":{"type":"Point","radius":5,"coordinates":[49.84728,3.28054]},"properties":{"φ":49.84728,"λ":3.28054}}},{"87":{"title":"Customer 87 location","style":{},"geometry":{"type":"Point","radius":5,"coordinates":[50.36568,3.2891]},"properties":{"φ":50.36568,"λ":3.2891}}},{"88":{"title":"Customer 88 location","style":{},"geometry":{"type":"Point","radius":5,"coordinates":[49.83404,3.30684]},"properties":{"φ":49.83404,"λ":3.30684}}},{"89":{"title":"Customer 89 location","style":{},"geometry":{"type":"Point","radius":5,"coordinates":[49.03447,3.38775]},"properties":{"φ":49.03447,"λ":3.38775}}},{"90":{"title":"Customer 90 location","style":{},"geometry":{"type":"Point","radius":5,"coordinates":[49.10574,6.11277]},"properties":{"φ":49.10574,"λ":6.11277}}},{"91":{"title":"Customer 91 location","style":{},"geometry":{"type":"Point","radius":5,"coordinates":[47.61357,6.15135]},"properties":{"φ":47.61357,"λ":6.15135}}},{"92":{"title":"Customer 92 location","style":{},"geometry":{"type":"Point","radius":5,"coordinates":[47.77547,7.38184]},"properties":{"φ":47.77547,"λ":7.38184}}},{"93":{"title":"Customer 93 location","style":{},"geometry":{"type":"Point","radius":5,"coordinates":[48.62906,7.72751]},"properties":{"φ":48.62906,"λ":7.72751}}}]
// Fix the chart dimensions:
const el = document.getElementById('chart');
el.style.width = opts.chart.width + 'px';
el.style.height = opts.chart.height + 'px';
// Draw the chart:
const chart = Pixi.Map('#chart', map, opts);
// Append the POIs one by one:
let i = 0;
const timer = setInterval(() => {
chart.overlayAppend(poi[i++]);
if (i >= poi.length) {
clearInterval(timer);
}
}, 100);
});
</script>
</head>
<body>
<div id="chart" class="pixi"></div>
</body>
</html>