Estou precisando criar um mapa de calor com um campo de futebol, porém, não estou conseguindo...
Estou utilizando o heatmap.js (neste link), porém, não estou conseguindo...
Já segui o passo-a-passo que é dado no repositório, mas não deu certo...
Atualmente o meu código segue desta forma:
<html>
<head>
<title>Mapa de calor do jogo</title>
<script src="https://code.jquery.com/jquery-3.5.1.min.js" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>
<script src="heatmap/build/heatmap.js"></script>
</head>
<body>
<h4>Mapa de calor do campo</h4>
<script type="text/javascript">
window.onload = function() {
var config = {
container: document.getElementById('heatmapContainer'),
radius: 10,
maxOpacity: .5,
minOpacity: 0,
blur: .75
};
// create heatmap with configuration
var heatmapInstance = h337.create(config);
// a single datapoint
var dataPoint = {
x: 5, // x coordinate of the datapoint, a number
y: 5, // y coordinate of the datapoint, a number
value: 100 // the value at datapoint(x, y)
};
heatmapInstance.addData(dataPoint);
// multiple datapoints (for data initialization use setData!!)
var dataPoints = [dataPoint, dataPoint, dataPoint, dataPoint];
heatmapInstance.addData(dataPoints);
var data = {
max: 100,
min: 0,
data: [
dataPoint, dataPoint, dataPoint, dataPoint
]
};
heatmapInstance.setData(data);
}
</script>
<div id="heatmapContainer"></div>
</body>
</html>
Alguém já teve o mesmo problema? Ou consegue me dar uma luz de onde pode estar o problema?
O arquivo JS
utilizado, é o mesmo que está no repositório que postei o link.
Posteriormente, os dados para o heatmap virá da API
da footstats.