75 lines
2.2 KiB
HTML
75 lines
2.2 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<title>GMaps Heatmap of bike trips | CartoDB.js</title>
|
|
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
|
|
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
|
|
<link rel="shortcut icon" href="http://cartodb.com/assets/favicon.ico" />
|
|
<style>
|
|
html, body, #map {
|
|
height: 100%;
|
|
padding: 0;
|
|
margin: 0;
|
|
}
|
|
</style>
|
|
|
|
<link rel="stylesheet" href="https://libs.cartocdn.com/cartodb.js/v3/3.15/themes/css/cartodb.css" />
|
|
|
|
</head>
|
|
<body>
|
|
<div id="map"></div>
|
|
|
|
<!-- include google maps library -->
|
|
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=INSERTYOURAPIKEYHERE&v=3.32"></script>
|
|
|
|
<!-- include google visualization library -->
|
|
<script type="text/javascript"
|
|
src="https://maps.googleapis.com/maps/api/js?libraries=visualization&sensor=true_or_false">
|
|
</script>
|
|
|
|
<!-- include cartodb.js library -->
|
|
<script src="https://libs.cartocdn.com/cartodb.js/v3/3.15/cartodb.js"></script>
|
|
|
|
<script>
|
|
var map, pointarray, heatmap;
|
|
|
|
function main() {
|
|
// Map center
|
|
var myLatlng = new google.maps.LatLng(40.722, -73.997);
|
|
|
|
var myOptions = {
|
|
zoom: 14,
|
|
center: myLatlng,
|
|
disableDefaultUI: true,
|
|
mapTypeId: google.maps.MapTypeId.SATELLITE
|
|
}
|
|
|
|
// Render basemap
|
|
map = new google.maps.Map(document.getElementById("map"), myOptions);
|
|
|
|
var sql = cartodb.SQL({ user: 'documentation', format: 'geojson'});
|
|
|
|
sql.execute("SELECT cartodb_id, the_geom FROM cleveland_spring_points_281_29").done(function(data) {
|
|
|
|
data = data.features.map(function(r) {
|
|
return new google.maps.LatLng(r.geometry.coordinates[1], r.geometry.coordinates[0])
|
|
});
|
|
|
|
var pointArray = new google.maps.MVCArray(data);
|
|
|
|
heatmap = new google.maps.visualization.HeatmapLayer({
|
|
data: pointArray
|
|
});
|
|
|
|
heatmap.set('radius', heatmap.get('radius') ? null : 20);
|
|
heatmap.set('opacity', heatmap.get('opacity') ? null : .8);
|
|
|
|
heatmap.setMap(map);
|
|
});
|
|
}
|
|
window.onload = main;
|
|
|
|
</script>
|
|
</body>
|
|
</html>
|