Initial commit
This commit is contained in:
@@ -0,0 +1,74 @@
|
||||
<!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>
|
||||
Reference in New Issue
Block a user