I have a script with charts and a leaflet map. The charts will adapt if you click the buttons. I also have a script to get the features. My question; how to adapt the charts by pressing a certain area (Now you get the features) on the map? So area on the map needs to replace the buttons. Area's called: Zuid-Holland , or Zeeland. Anyone idea? This is btw my first ever programming experience ;). So maybe the script is a little bit weird.
The charts, with leaflet map script:
<?php
//Database connection
include 'connection.php';
//Data insert
include 'data.php';
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" type="text/css" href="mijnopmaak.css">
<link rel="stylesheet" href="Leaflet/leaflet.css" />
<style> #mapid {
position: absolute;
top:50%;
right:0;
bottom:0;
left:0;
} </style>
<title>112 Meldingen</title>
</head>
<body>
<h1 style="color:green" align="center">112 Meldingen januari in Zeeland en Zuid-Holland</h1>
<div id="mapid"></div>
<!-- Plaatsen Donut -->
<div style="width: 20%; height: 300px; display: inline-block; left: 550px;">
<canvas id="graph" ></canvas>
<!-- Plaatsen buttons -->
<button class="button button2" id="btn1" >
Zeeland
</button>
<button class="button3 button4" id="btn2">
Zuid-Holland
</button>
<!-- jQuery cdn -->
<script src="https://code.jquery.com/jquery-3.2.1.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4="crossorigin="anonymous"></script>
<!-- Chart.js cdn -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.6.0/Chart.bundle.min.js"></script>
<script src="Leaflet/leaflet.js"></script>
<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<!-- Get the features -->
<script src="L.TileLayer.BetterWMS.js"></script>
<!-- Data to variables -->
<?php include 'variables.php';?>
<script>
var url = 'https://geodata.nationaalgeoregister.nl/cbsprovincies/wms';
var map = L.map('mapid').setView([52.1561113, 5.3878266], 8);
L.tileLayer.betterWms(url, {
layers: 'cbsprovincies2012',
transparent: true,
format: 'image/png'
}).addTo(map);
L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
attribution: '© <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
}).addTo(map);
</script>
<script>
// De donut
var context = document.querySelector('#graph').getContext('2d');
if
(window.bar !=undefined)
window.bar.destroy();
window.bar = new Chart(context, {
options: {
title: {
display: true,
text: 'Meldingen per voertuig in Zuid-Holland'
}},
type: "doughnut",
data: donut_zeeland,
}) ;
//Reactie button1 donut
$("#btn1").on("click", function() {
var context1 = document.querySelector('#graph').getContext('2d');
if
(window.bar !=undefined)
window.bar.destroy();
window.bar = new Chart(context1, {
type: "doughnut",
data: donut_zeeland,
options: {
title: {
display: true,
text: 'Meldingen per voertuig in Zeeland'
}}})});
//Reactie button2 donut
$("#btn2").on("click", function() {
var context2 = document.querySelector('#graph').getContext('2d');
if
(window.bar !=undefined)
window.bar.destroy();
window.bar = new Chart(context2, {
type: "doughnut",
data: donut_zuid,
options: {
title: {
display: true,
text: 'Meldingen per voertuig in Zuid-Holland'
}}})});
</script>
<!-- Plaatsen Lijn -->
<div style="width: 35%; height: 300px;display: inline-block; position: absolute;
left: 750px; top: 150px;" >
<canvas id="Chart1" ></canvas> </div>
<script>
//De lijn
var context3 = document.querySelector('#Chart1').getContext('2d');
if
(window.line !=undefined)
window.line.destroy();
window.line = new Chart(context3, {
type: "line",
data: zeeland_line,
options:{
title: {
display: true,
text: ['Meldingen in januari']
},
legend: {
display: false,
position: 'left',
labels: {
fontColor: 'black'
}
},
tooltips: {
mode: 'nearest',
displayColors:false,
callbacks: {
label: function(tooltipItem) {
return tooltipItem.yLabel;}}},
scales: {
yAxes: [{
ticks: {
beginAtZero: false
}
}],
xAxes: [{
ticks: {
autoskip: false,
}
}]
}
},
}) ;
$("#btn1").on("click", function() {
var context3 = document.querySelector('#Chart1').getContext('2d');
if
(window.line !=undefined)
window.line.destroy();
window.line = new Chart(context3, {
type: "line",
data: zeeland_line,
options: {
legend: {
display: false,
position: 'left',
labels: {
fontColor: 'black'
}
},
title: {
display: true,
text: 'Meldingen in januari'
}
} }
)
});
$("#btn2").on("click", function() {
var context4 = document.querySelector('#Chart1').getContext('2d');
if
(window.line !=undefined)
window.line.destroy();
window.line = new Chart(context4, {
type: "line",
data: zuid_line,
options: {
legend: {
display: false,
position: 'left',
labels: {
fontColor: 'black'
}
},
title: {
display: true,
text: 'Meldingen in januari'
}
}
})
});
</script>
The get features script:
L.TileLayer.BetterWMS = L.TileLayer.WMS.extend({
onAdd: function (map) {
// Triggered when the layer is added to a map.
// Register a click listener, then do all the upstream WMS things
L.TileLayer.WMS.prototype.onAdd.call(this, map);
map.on('click', this.getFeatureInfo, this);
},
onRemove: function (map) {
// Triggered when the layer is removed from a map.
// Unregister a click listener, then do all the upstream WMS things
L.TileLayer.WMS.prototype.onRemove.call(this, map);
map.off('click', this.getFeatureInfo, this);
},
getFeatureInfo: function (evt) {
// Make an AJAX request to the server and hope for the best
var url = this.getFeatureInfoUrl(evt.latlng),
showResults = L.Util.bind(this.showGetFeatureInfo, this);
$.ajax({
url: url,
success: function (data, status, xhr) {
var err = typeof data === 'string' ? null : data;
showResults(err, evt.latlng, data);
},
error: function (xhr, status, error) {
showResults(error);
}
});
},
getFeatureInfoUrl: function (latlng) {
// Construct a GetFeatureInfo request URL given a point
var point = this._map.latLngToContainerPoint(latlng, this._map.getZoom()),
size = this._map.getSize(),
params = {
request: 'GetFeatureInfo',
service: 'WMS',
srs: 'EPSG:4326',
styles: this.wmsParams.styles,
transparent: this.wmsParams.transparent,
version: this.wmsParams.version,
format: this.wmsParams.format,
bbox: this._map.getBounds().toBBoxString(),
height: size.y,
width: size.x,
layers: this.wmsParams.layers,
query_layers: this.wmsParams.layers,
info_format: 'text/html'
};
params[params.version === '1.3.0' ? 'i' : 'x'] = point.x;
params[params.version === '1.3.0' ? 'j' : 'y'] = point.y;
return this._url + L.Util.getParamString(params, this._url, true);
},
showGetFeatureInfo: function (err, latlng, content) {
if (err) { console.log(err); return; } // do nothing if there's an error
// Otherwise show the content in a popup, or something.
L.popup({ maxWidth: 800})
.setLatLng(latlng)
.setContent(content)
.openOn(this._map);
}
});
L.tileLayer.betterWms = function (url, options) {
return new L.TileLayer.BetterWMS(url, options);
};
