Skip to content

Instantly share code, notes, and snippets.

@ndkv

ndkv/README.md

Last active December 15, 2015 12:39
Show Gist options
  • Save ndkv/5262107 to your computer and use it in GitHub Desktop.
Save ndkv/5262107 to your computer and use it in GitHub Desktop.
Download ZIP
/dev/haag CartoDB + Google Maps
Raw
README.md

Demo of CartoDB's SQL querying capabilities through its JavaScript API. Example is based on stock example code.

This choropleth map shows municipalities with a population > 100000. See the unfiltered map here.

Dataset comes from Dutch census data as delivered by this PDOK WFS endpoint. Get the data as GeoJSON by downloading OGR and executing

ogr2ogr -f GeoJSON municipalities2011.geojson WFS:"http://geodata.nationaalgeoregister.nl/wijkenbuurten2011/wfs" gemeenten2011 -t_srs EPSG:4326

CartoDB also supports dynamic styling!

Raw
index.html
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
<style>
html, body, #map {
height: 100%;
padding: 0;
margin: 0;
}
</style>
<link rel="stylesheet" href="http://libs.cartocdn.com/cartodb.js/v2/themes/css/cartodb.css" />
<!--[if lte IE 8]>
<link rel="stylesheet" href="http://libs.cartocdn.com/cartodb.js/v2/themes/css/cartodb.ie.css" />
<![endif]-->
</head>
<body>
<div id="map"></div>
</body>
<!-- include google maps library *before* load cartodb.js -->
<script src="https://maps.googleapis.com/maps/api/js?sensor=false"></script>
<!-- include cartodb.js library -->
<script src="http://libs.cartocdn.com/cartodb.js/v2/cartodb.js"></script>
<script>
function main() {
var map;
// create google maps map
var mapOptions = {
zoom: 7,
center: new google.maps.LatLng(52.079506, 5.410767),
mapTypeId: google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(document.getElementById('map'), mapOptions);
cartodb.createLayer(map, 'http://simeon.cartodb.com/api/v1/viz/14465/viz.json', {
query: 'select * from {{table_name}} where aantal_inw > 100000'
})
.on('done', function(layer) {
map.overlayMapTypes.setAt(0, layer);
layer.on('featureOver', function(e, pos, latlng, data) {
cartodb.log.log(e, pos, latlng, data);
});
layer.on('error', function(err) {
cartodb.log.log('error: ' + err);
});
}).on('error', function() {
cartodb.log.log("some error occurred");
});
}
window.onload = main;
</script>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment