leaflet-semicircle
Version:
Draw semicircles on Leaflet maps
138 lines (120 loc) • 4.23 kB
HTML
<html>
<head>
<title>Leaflet Semicircle Pie chart example</title>
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.1.0/dist/leaflet.css" />
<script src="https://unpkg.com/leaflet@1.1.0/dist/leaflet.js"></script>
<script src="../Semicircle.js"></script>
<script src="Pie.js"></script>
<style>
html {
height: 100%;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
vertical-align: baseline;
}
body { height: 100%; margin: 0; padding: 0;}
#map {
width: 100%; height: 100%;
}
#info {
background: rgba(255, 255, 255, 0.85);
box-shadow: 0 0 15px rgba(0, 0, 0, 0.2);
position: fixed;
width: 50%;
max-width: 600px;
left: 45%;
margin-left: -300px;
padding: 6px 8px;
border-radius: 5px;
font: 14px/16px Arial, Helvetica, sans-serif;
}
#info h4:first-child {
margin: 0 0 5px;
}
.leaflet-div-icon {
border: none;
}
.leaflet-pie-label {
font-family: sans-serif;
background: transparent;
border: none;
white-space: nowrap;
}
.leaflet-pie-label.left {
text-align: right;
}
</style>
</head>
<body>
<div id="info">
<h4><a href="https://github.com/jieter/Leaflet-semicircle">Pie charts using leaflet-semicircle</a></h4>
<p>
When using a single number, it is interpreted as a percentage:
</p>
<pre>L.pie([50.66, -0.0], 45).addTo(map);</pre>
<p>
You can also pass an array of <code>{num: Number, label: String}</code>-maps:
<pre>
L.pie([50.68, 0.05], [
{num: 45, label: 'Bob'},
{num: 60, label: 'Tom'},
{num: 45, label: 'Ada'}
]).addTo(map);
</pre>
</div>
<div id="map"></div>
<script>
var map = L.map('map').setView([50.68, 0], 13);
// Pie chart using a single number.
L.pie([50.66, -0.0], 45).addTo(map);
// Use different opacity for the chunks
L.pie([50.66, 0.05], 15, {
pathOptions: {
opacity: 0.9,
fillOpacity: 0.9
}
}).addTo(map);
// annotations:
function annotation (latlng, text) {
L.marker(latlng, {
icon: L.divIcon({
iconSize: [0, 0],
html: text
})
}).addTo(map);
}
annotation([50.66, -0.04], 'Using single number:');
// Pie chart using an array of numbers.
var piechart = L.pie([50.68, 0], [45, 50, 45]).addTo(map);
// Pie chart using an array of {num: <>, label: <>}-maps
L.pie([50.68, 0.05], [
{num: 45, label: 'Bob'},
{num: 60, label: 'Tom'},
{num: 45, label: 'Ada'}
]).addTo(map);
annotation([50.68, -0.04], 'Using arrays (numbers/maps):');
// Test removing a Pie chart layer.
var soonToBeRemoved = L.pie(
[50.70, 0],
[10, 20, 30, 40, 50, 70],
{
colors: ['#fff', '#afb', '#fba']
}
).addTo(map);
annotation([50.70, -0.04], 'Disappears in 3s:');
setTimeout(function () {
map.removeLayer(soonToBeRemoved);
// this doesn't work (yet)
piechart.setData([15, 50, 45]);
}, 3000);
L.tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
attribution: '© <a href="http://openstreetmap.org">OpenStreetMap</a> contributors, <a href="http://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>',
maxZoom: 18
}).addTo(map);
// move the #info div into the map
map.addControl(new (L.Control.extend({onAdd: function () { return L.DomUtil.get('info'); }}))());
</script>
</body>
</html>