nerik/CartoDB-webinar-webapp.md

## CartoDB-webinar-webapp.md

      
    Raw
  

              CartoDB-webinar-webapp.md
            
          
    Demo projects


Illustreets: http://illustreets.co.uk/explore-england/
DataFrance: http://map.datafrance.info/

Dataset used :


Greg's cable map : http://map.datafrance.info/

Yeoman + CartoDB :


First install Node and Yeoman : http://yeoman.io/learning/index.html
Then install the generator : https://github.com/nerik/generator-cartodb

Language references :


PostgreSQL : http://www.postgresql.org/docs/9.5/static/index.html
PostGIS : http://postgis.net/docs/manual-2.2/
CartoCSS : http://docs.cartodb.com/cartodb-platform/cartocss/

CartoDB documentation :


CartoDB for web developers : https://cartodb.com/solutions/web-mobile/
CartoDB.js : http://docs.cartodb.com/cartodb-platform/cartodb-js/
Tutorials : http://docs.cartodb.com/tutorials/
The Map Academy : http://academy.cartodb.com/


## index.html
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Cool stuff</title>
  <link rel="stylesheet" href="http://libs.cartocdn.com/cartodb.js/v3/3.15/themes/css/cartodb.css" />
  <script src="//localhost:9091"></script>

  <style media="screen">
    html, body, #map {
      height: 100%;
      width: 100%;
      padding: 0;
      margin: 0;
    }
    .country {
      position: absolute;
      z-index: 99;
    }
  </style>
</head>
<body>
  <div id="map">
    <input type="text" class="country"></input>
  </div>

  <script src="http://libs.cartocdn.com/cartodb.js/v3/3.15/cartodb.js"></script>
  <script type="text/javascript">
    function main() {
      cartodb.createVis('map', 'http://documentation.cartodb.com/api/v2/viz/2b13c956-e7c1-11e2-806b-5404a6a683d5/viz.json', {
      })
      .done(function(vis, layers) {
        // layer 0 is the base layer, layer 1 is cartodb layer
        // setInteraction is disabled by default
        // layers[1].setInteraction(true);
        layers[1].on('featureOver', function(e, latlng, pos, data) {
          console.log(data)
        });
        // you can get the native map to work with it
        var map = vis.getNativeMap();

        var sublayers = layers[1].getSubLayers();
        sublayers.forEach(function (sublayer) {
          console.log(sublayer.getSQL())
          console.log(sublayer.getCartoCSS())
        })

        // sublayers[0].setSQL('select * from european_countries_e where pop2005 < 10000000')
        // sublayers[0].setSQL('select * from european_countries_e WHERE name = \'Poland\'')

        var template = cartodb._.template('select * from european_countries_e WHERE name = \'<%= countryName %>\'')

        // sublayers[0].setSQL(template({countryName: 'France'}))

        $('.country').on('change', function (evt) {
          console.log(evt.target.value)
          sublayers[0].setSQL(template({countryName: evt.target.value}))
        });

        sublayers[0].setCartoCSS('#european_countries_e{ polygon-fill: #ff00FF;}')
      })
      .error(function(err) {
        console.log(err);
      });
    }
    window.onload = main;

  </script>
</body>
</html>

## web dev webinar.pdf

      
Display the source blob

    
Display the rendered blob

    
    Raw
  

              web dev webinar.pdf
            
          
      Sorry, something went wrong. Reload?
      Sorry, we cannot display this file.
      Sorry, this file is invalid so it cannot be displayed.
      
          Viewer requires iframe.
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<title>Cool stuff</title>
	<link rel="stylesheet" href="http://libs.cartocdn.com/cartodb.js/v3/3.15/themes/css/cartodb.css" />
	<script src="//localhost:9091"></script>

	<style media="screen">
	html, body, #map {
	height: 100%;
	width: 100%;
	padding: 0;
	margin: 0;
	}
	.country {
	position: absolute;
	z-index: 99;
	}
	</style>
	</head>
	<body>
	<div id="map">
	<input type="text" class="country"></input>
	</div>

	<script src="http://libs.cartocdn.com/cartodb.js/v3/3.15/cartodb.js"></script>
	<script type="text/javascript">
	function main() {
	cartodb.createVis('map', 'http://documentation.cartodb.com/api/v2/viz/2b13c956-e7c1-11e2-806b-5404a6a683d5/viz.json', {
	})
	.done(function(vis, layers) {
	// layer 0 is the base layer, layer 1 is cartodb layer
	// setInteraction is disabled by default
	// layers[1].setInteraction(true);
	layers[1].on('featureOver', function(e, latlng, pos, data) {
	console.log(data)
	});
	// you can get the native map to work with it
	var map = vis.getNativeMap();

	var sublayers = layers[1].getSubLayers();
	sublayers.forEach(function (sublayer) {
	console.log(sublayer.getSQL())
	console.log(sublayer.getCartoCSS())
	})

	// sublayers[0].setSQL('select * from european_countries_e where pop2005 < 10000000')
	// sublayers[0].setSQL('select * from european_countries_e WHERE name = \'Poland\'')

	var template = cartodb._.template('select * from european_countries_e WHERE name = \'<%= countryName %>\'')

	// sublayers[0].setSQL(template({countryName: 'France'}))

	$('.country').on('change', function (evt) {
	console.log(evt.target.value)
	sublayers[0].setSQL(template({countryName: evt.target.value}))
	});

	sublayers[0].setCartoCSS('#european_countries_e{ polygon-fill: #ff00FF;}')
	})
	.error(function(err) {
	console.log(err);
	});
	}
	window.onload = main;

	</script>
	</body>
	</html>