clhenrick/.block

## .block
license: mit

## README.md

      
    Raw
  

              README.md
            
          
    Demonstrates loading data from a Carto table and creating a GeoJSON vector layer in a Leaflet Map plus adding popups, styling, and filtering data.
Built with blockbuilder.org
forked from clhenrick's block: Leaflet with a Carto Layer I

  
## index.html
<!DOCTYPE html>
<head>
  <meta charset="utf-8">
  <!-- cartodb.js comes with Leaflet @0.7 and jQuery -->
  <link rel="stylesheet" href="http://libs.cartocdn.com/cartodb.js/v3/3.15/themes/css/cartodb.css" />
  <script src="http://libs.cartocdn.com/cartodb.js/v3/3.15/cartodb.js"></script>
  <!-- This script makes it easy to use Stamen basemaps   -->
  <script type="text/javascript" src="http://maps.stamen.com/js/tile.stamen.js?v1.3.0"></script>

  <style>
    body { margin:0;position:fixed;top:0;right:0;bottom:0;left:0; }
    #map {
      height: 100%;
    }
    .popup-content p {
      padding: 0;
      margin: 0;
    }
  </style>
</head>

<body>
  <div id="map"></div>
  <script>
    // necessary for making AJAX calls on Blockbuilder.org as of 2016-11-02
    jQuery.support.cors = true;
    // create a new map centered on the U.S.
    var map = L.map('map').setView([39.69, -99.185], 5);
    // create a tile layer for our toner basemap
    var darkmatterLayer = new L.TileLayer('http://{s}.basemaps.cartocdn.com/dark_all/{z}/{x}/{y}.png');
		// add the tile layer to the map
		map.addLayer(darkmatterLayer);

    // function to make our popup-content
    var makePopUpContent = function(props) {
      return '<div class="popup-content">' +
               '<p><strong>Date:</strong> ' + props.date + '</p>' +
               '<p><strong>Magnitude:</strong> ' + props.mag + '</p>' +
               '<p><strong>Injured:</strong> ' + props.inj + '</p>' +
             '</div>'
    }

    // color ramp via ColorBrewer: http://colorbrewer2.org/#type=sequential&scheme=Purples&n=5
    var ramp = ['#f2f0f7','#cbc9e2','#9e9ac8','#6a51a3'];

    // returns a color based on a value passed, in this case we are using the value for "mag"
    var getColor = function(d) {
      console.log(d);
      return d >= 4  ? ramp[0] :
             d >= 3  ? ramp[1] :
             d >= 2  ? ramp[2] :
             d >= 1  ? ramp[3] :
                      '#333';
    }

    // style function for styling the GeoJSON layer, uses getColor function above
    var style = function(feature) {
      return {
        color: getColor(feature.properties.mag),
        weight: 3,
        opacity: 1
      }
    }

    // function we can use to filter what data is added to the GeoJSON layer
    // eg try changing the value from 0 to 3 or 4
    var filter = function(feature) {
      return feature.properties.mag > 0;
    }

    // this will be called on each of the GeoJSON features and can be used to create Popups
    // for each GeoJSON feature on our map
    var onEachFeature = function(feature, layer) {
      if (feature.properties) {
        var popUpContent = makePopUpContent(feature.properties);
        layer.bindPopup(popUpContent);
      }
    }

    // Set up our GeoJSON layer with options: filter, onEachFeature, & style
    // add it to the map, but don't add data just yet
    var tornadoLayer = L.geoJson(null, {
      filter: filter,
      onEachFeature: onEachFeature,
      style: style
    }).addTo(map);

    // sample query for our Tornado table
    var query = "SELECT * FROM tornado WHERE \"timestamp\" >= '2012-01-01' and \"timestamp\" < '2013-01-01'";

    // load our data asynchronously from Carto
    var sql = new cartodb.SQL({ user: 'stamen-builder' });
    sql.execute(query, null, { format: 'geojson' })
    .done(function(data) {
      console.log(data);
      // add the tornado data to our tornadoLayer
      tornadoLayer.addData(data);
    });

  </script>
</body>
	<!DOCTYPE html>
	<head>
	<meta charset="utf-8">
	<!-- cartodb.js comes with Leaflet @0.7 and jQuery -->
	<link rel="stylesheet" href="http://libs.cartocdn.com/cartodb.js/v3/3.15/themes/css/cartodb.css" />
	<script src="http://libs.cartocdn.com/cartodb.js/v3/3.15/cartodb.js"></script>
	<!-- This script makes it easy to use Stamen basemaps -->
	<script type="text/javascript" src="http://maps.stamen.com/js/tile.stamen.js?v1.3.0"></script>

	<style>
	body { margin:0;position:fixed;top:0;right:0;bottom:0;left:0; }
	#map {
	height: 100%;
	}
	.popup-content p {
	padding: 0;
	margin: 0;
	}
	</style>
	</head>

	<body>
	<div id="map"></div>
	<script>
	// necessary for making AJAX calls on Blockbuilder.org as of 2016-11-02
	jQuery.support.cors = true;
	// create a new map centered on the U.S.
	var map = L.map('map').setView([39.69, -99.185], 5);
	// create a tile layer for our toner basemap
	var darkmatterLayer = new L.TileLayer('http://{s}.basemaps.cartocdn.com/dark_all/{z}/{x}/{y}.png');
	// add the tile layer to the map
	map.addLayer(darkmatterLayer);

	// function to make our popup-content
	var makePopUpContent = function(props) {
	return '<div class="popup-content">' +
	'<p><strong>Date:</strong> ' + props.date + '</p>' +
	'<p><strong>Magnitude:</strong> ' + props.mag + '</p>' +
	'<p><strong>Injured:</strong> ' + props.inj + '</p>' +
	'</div>'
	}

	// color ramp via ColorBrewer: http://colorbrewer2.org/#type=sequential&scheme=Purples&n=5
	var ramp = ['#f2f0f7','#cbc9e2','#9e9ac8','#6a51a3'];

	// returns a color based on a value passed, in this case we are using the value for "mag"
	var getColor = function(d) {
	console.log(d);
	return d >= 4 ? ramp[0] :
	d >= 3 ? ramp[1] :
	d >= 2 ? ramp[2] :
	d >= 1 ? ramp[3] :
	'#333';
	}

	// style function for styling the GeoJSON layer, uses getColor function above
	var style = function(feature) {
	return {
	color: getColor(feature.properties.mag),
	weight: 3,
	opacity: 1
	}
	}

	// function we can use to filter what data is added to the GeoJSON layer
	// eg try changing the value from 0 to 3 or 4
	var filter = function(feature) {
	return feature.properties.mag > 0;
	}

	// this will be called on each of the GeoJSON features and can be used to create Popups
	// for each GeoJSON feature on our map
	var onEachFeature = function(feature, layer) {
	if (feature.properties) {
	var popUpContent = makePopUpContent(feature.properties);
	layer.bindPopup(popUpContent);
	}
	}

	// Set up our GeoJSON layer with options: filter, onEachFeature, & style
	// add it to the map, but don't add data just yet
	var tornadoLayer = L.geoJson(null, {
	filter: filter,
	onEachFeature: onEachFeature,
	style: style
	}).addTo(map);

	// sample query for our Tornado table
	var query = "SELECT * FROM tornado WHERE \"timestamp\" >= '2012-01-01' and \"timestamp\" < '2013-01-01'";

	// load our data asynchronously from Carto
	var sql = new cartodb.SQL({ user: 'stamen-builder' });
	sql.execute(query, null, { format: 'geojson' })
	.done(function(data) {
	console.log(data);
	// add the tornado data to our tornadoLayer
	tornadoLayer.addData(data);
	});

	</script>
	</body>