nicklewis96/.block

## .block
license: mit

## README.md

      
    Raw
  

              README.md
            
          
    Built with blockbuilder.org
forked from nicklewis96's block: better ebola map

  
## data.json

      
Display the source blob

    
Display the rendered blob

    
    Raw
  

              data.json
            
          
      Loading

      Sorry, something went wrong. Reload?
      Sorry, we cannot display this file.
      Sorry, this file is invalid so it cannot be displayed.
      
          Viewer requires iframe.
      
    
## index.html
<!DOCTYPE html>
<head>
  <meta charset="utf-8">
  <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js"></script>
  <script src='https://api.mapbox.com/mapbox.js/v2.2.3/mapbox.js'></script>
  <link href='https://api.mapbox.com/mapbox.js/v2.2.3/mapbox.css' rel='stylesheet' />
  <style>
    body { margin:0;position:fixed;top:0;right:0;bottom:0;left:0; }
    #map {
      position:absolute;
      width: 100%;
      height: 100%;
    }
  </style>
</head>

<body>
  <input type="checkbox" name = "usa" onclick= usaClicked()> United States<br>
  <input type="checkbox" name = "liberia"  onclick="liberiaClicked()"> Liberia<br>
  <input type="checkbox" name = "guinea"  onclick="guineaClicked()"> Guinea<br>
  <div id="map"></div>
  <script>
   function usaClicked() {
     d3.select("body").selectAll("input")[0].forEach(function (i) {console.log(i.checked)});

   }
     function liberiaClicked() {
     alert("i am an alert box");
   }
     function guineaClicked() {
     alert("i am an alert box");
   }
    L.mapbox.accessToken = 'pk.eyJ1IjoiZW5qYWxvdCIsImEiOiJjaWhtdmxhNTIwb25zdHBsejk0NGdhODJhIn0.2-F2hS_oTZenAWc0BMf_uw'

    //Setup our Leaflet map using Mapbox.js
    var map = L.mapbox.map('map', 'mapbox.satellite')
    .setView([10,0], 2);

    // Setup our svg layer that we can manipulate with d3
    var svg = d3.select(map.getPanes().overlayPane)
      .append("svg");
    var g = svg.append("g").attr("class", "leaflet-zoom-hide");

    function project(ll) {
      // our data came from csv, make it Leaflet friendly
     // var a = [+ll.lat, +ll.lon];
      // convert it to pixel coordinates
      var b = [+ll[1], +ll[0]];
      var point = map.latLngToLayerPoint(L.latLng(b))
      return point;
    }

    d3.json("data.json", function(err, data) {
      console.log("data", data);
      var dots = g.selectAll("circle.dot")
        .data(data.features)

      dots.enter().append("circle").classed("dot", true)
      .attr("r", 1)
      .style({
        fill: "#0082a3",
        "fill-opacity": 0.6,
        stroke: "#004d60",
        "stroke-width": 1
      })
      .transition().duration(1000)
      .attr("r", 6)


      function render() {
        // We need to reposition our SVG and our containing group when the map
        // repositions via zoom or pan
        // https://github.com/zetter/voronoi-maps/blob/master/lib/voronoi_map.js
        var bounds = map.getBounds();
        var topLeft = map.latLngToLayerPoint(bounds.getNorthWest())
        var bottomRight = map.latLngToLayerPoint(bounds.getSouthEast())
        svg.style("width", map.getSize().x + "px")
          .style("height", map.getSize().y + "px")
          .style("left", topLeft.x + "px")
          .style("top", topLeft.y + "px");
        g.attr("transform", "translate(" + -topLeft.x + "," + -topLeft.y + ")");

        // We reproject our data with the updated projection from leaflet
        g.selectAll("circle.dot")
        .attr({
          cx: function(d) { return project(d.geometry.coordinates).x},
          cy: function(d) { return project(d.geometry.coordinates).y},
        })

      }

      // re-render our visualization whenever the view changes
      map.on("viewreset", function() {
        render()
      })
      map.on("move", function() {
        render()
      })

      // render our initial visualization
      render()
    })

  </script>
</body>
	<!DOCTYPE html>
	<head>
	<meta charset="utf-8">
	<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js"></script>
	<script src='https://api.mapbox.com/mapbox.js/v2.2.3/mapbox.js'></script>
	<link href='https://api.mapbox.com/mapbox.js/v2.2.3/mapbox.css' rel='stylesheet' />
	<style>
	body { margin:0;position:fixed;top:0;right:0;bottom:0;left:0; }
	#map {
	position:absolute;
	width: 100%;
	height: 100%;
	}
	</style>
	</head>

	<body>
	<input type="checkbox" name = "usa" onclick= usaClicked()> United States<br>
	<input type="checkbox" name = "liberia" onclick="liberiaClicked()"> Liberia<br>
	<input type="checkbox" name = "guinea" onclick="guineaClicked()"> Guinea<br>
	<div id="map"></div>
	<script>
	function usaClicked() {
	d3.select("body").selectAll("input")[0].forEach(function (i) {console.log(i.checked)});

	}
	function liberiaClicked() {
	alert("i am an alert box");
	}
	function guineaClicked() {
	alert("i am an alert box");
	}
	L.mapbox.accessToken = 'pk.eyJ1IjoiZW5qYWxvdCIsImEiOiJjaWhtdmxhNTIwb25zdHBsejk0NGdhODJhIn0.2-F2hS_oTZenAWc0BMf_uw'

	//Setup our Leaflet map using Mapbox.js
	var map = L.mapbox.map('map', 'mapbox.satellite')
	.setView([10,0], 2);

	// Setup our svg layer that we can manipulate with d3
	var svg = d3.select(map.getPanes().overlayPane)
	.append("svg");
	var g = svg.append("g").attr("class", "leaflet-zoom-hide");

	function project(ll) {
	// our data came from csv, make it Leaflet friendly
	// var a = [+ll.lat, +ll.lon];
	// convert it to pixel coordinates
	var b = [+ll[1], +ll[0]];
	var point = map.latLngToLayerPoint(L.latLng(b))
	return point;
	}

	d3.json("data.json", function(err, data) {
	console.log("data", data);
	var dots = g.selectAll("circle.dot")
	.data(data.features)

	dots.enter().append("circle").classed("dot", true)
	.attr("r", 1)
	.style({
	fill: "#0082a3",
	"fill-opacity": 0.6,
	stroke: "#004d60",
	"stroke-width": 1
	})
	.transition().duration(1000)
	.attr("r", 6)


	function render() {
	// We need to reposition our SVG and our containing group when the map
	// repositions via zoom or pan
	// https://github.com/zetter/voronoi-maps/blob/master/lib/voronoi_map.js
	var bounds = map.getBounds();
	var topLeft = map.latLngToLayerPoint(bounds.getNorthWest())
	var bottomRight = map.latLngToLayerPoint(bounds.getSouthEast())
	svg.style("width", map.getSize().x + "px")
	.style("height", map.getSize().y + "px")
	.style("left", topLeft.x + "px")
	.style("top", topLeft.y + "px");
	g.attr("transform", "translate(" + -topLeft.x + "," + -topLeft.y + ")");

	// We reproject our data with the updated projection from leaflet
	g.selectAll("circle.dot")
	.attr({
	cx: function(d) { return project(d.geometry.coordinates).x},
	cy: function(d) { return project(d.geometry.coordinates).y},
	})

	}

	// re-render our visualization whenever the view changes
	map.on("viewreset", function() {
	render()
	})
	map.on("move", function() {
	render()
	})

	// render our initial visualization
	render()
	})

	</script>
	</body>