FOSSASIA Heat Map
Generates heat maps based on N layers of data.
HTML
<link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.css">
<script src="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.js"></script>
<script src="https://googledrive.com/host/0B3k3BjZD2YfianFhMC1haENtLW8"></script>
<script src="https://googledrive.com/host/0B3k3BjZD2YfiS1RkM2lyQWJyNk0"></script>
<script src="https://googledrive.com/host/0B3k3BjZD2YfidzUwd1NuZkFwOWM"></script>
<script src="https://googledrive.com/host/0B3k3BjZD2YfiV3hFN2RIMFdyNkE"></script>
<div class="heatmap" id="map"></div>
CSS
#map {
height: 500px;
/*Maps are required to define a height*/
}
.leaflet-zoom-hide {
position: absolute !important;
/*Fixes a bug where layers push each other offmap*/
}
.leaflet-control-layers-overlays span {
font-weight: bold;
}
}
JavaScript
/*
Array of Random Data (Length = N)
Possible properties are:
name (string; for map key),
radius (number; opt., defaults to 15),
opacity (number 0-1; opt., defaults to 0.5),
dataset (object; any order) with properties:
min (number; for scale),
max (number; for scale),
data (array of objects, any order) with objects' properties:
lng (decimal longitude),
lat (decimal latitude),
weight (number)
*/
var DATA = [{
name: "Data Set 1",
radius: 25,
opacity: 0.5,
dataset: {
min: 1,
max: 4,
data: [{
lng: 120.973034,
lat: 14.610827,
weight: 3
}, {
lng: 120.999126,
lat: 14.605512,
weight: 2
}, {
lng: 120.998611,
lat: 14.596541,
weight: 4
}, {
lng: 120.968914,
lat: 14.588567,
weight: 1
}]
}
}, {
name: "More Data",
dataset: {
min: 1,
max: 7,
data: [{
lng: 120.969429,
lat: 14.608502,
weight: 3
}, {
lng: 121.020069,
lat: 14.626441,
weight: 2
}, {
lng: 121.019897,
lat: 14.624614,
weight: 4
}, {
lng: 121.016808,
lat: 14.627604,
weight: 7
}, {
lng: 120.957756,
lat: 14.616475,
weight: 2
}, {
lng: 120.966339,
lat: 14.617305,
weight: 4
}, {
lng: 120.972691,
lat: 14.614482,
weight: 1
}]
}
}, {
name: "High Number Data",
radius: 20,
dataset: {
min: 10000,
max: 25000,
data: [{
lng: 120.966854,
lat: 14.634247,
weight: 10000
}, {
lng: 120.970116,
...