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
            
          
            View raw
	<!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>