Skip to content

Instantly share code, notes, and snippets.

@pvernier

pvernier/heatmap_wifis_barranco.html

Last active March 21, 2017 21:58
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save pvernier/7882754 to your computer and use it in GitHub Desktop.
Save pvernier/7882754 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
heatmap_wifis_barranco.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf8" />
<title>HeatMap de los wifis en Barranco</title>
<link rel="stylesheet" href="/site_media/js/Leaflet/leaflet.css" />
<script src="/site_media/js/Leaflet/leaflet.js" type="text/javascript"></script>
<script type="text/javascript" src="/site_media/js/heatcanvas/heatcanvas.js"></script>
<script type="text/javascript" src="/site_media/js/heatcanvas/heatcanvas-leaflet.js"></script>
<script src="/site_media/js/demo/wifis_barranco.js" type="text/javascript"></script>
<style type="text/css">
#map{
}
</style>
<script type="text/javascript">
function init(){
var map = new L.Map("map");
var markerLayers = new L.LayerGroup();
L.tileLayer('https://cartodb-basemaps-{s}.global.ssl.fastly.net/light_all/{z}/{x}/{y}.png', {
maxZoom: 18,
attribution: '&copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>, &copy;<a href="https://cartodb.com/attributions">CartoDB</a>'
}).addTo(map);
map.setView(new L.LatLng(-12.1473, -77.021), 16);
var colores = function(value){
return [0.8, 1, value, 1];
}
var heatmap = new
L.TileLayer.HeatCanvas({},{'step':0.1,
'degree':HeatCanvas.LINEAR, 'opacity':0.7, 'colorscheme': colores});
for(var i=0,l=wifis.length; i<l; i++) {
heatmap.pushData(wifis[i][1], wifis[i][0], wifis[i][2]);
if(wifis[i][2]> -1) {
var marker = new L.Marker(new L.LatLng(wifis[i][1], wifis[i][0]));
marker.bindPopup(wifis[i][2].toString());
markerLayers.addLayer(marker);
}
}
map.addLayer(heatmap);
map.addLayer(markerLayers);
L.control.layers({"heatmap":heatmap, "markers": markerLayers}).addTo(map);
}
</script>
</head>
<body onload="init();">
<div id="map" style="width:850px; height:500px;"></div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment