clhenrick/index.html

## index.html
  <!DOCTYPE html>
  <html>
    <head>
      <meta charset=utf-8 />
      <title>Leaflet, Mapbox and D3JS test</title>
      <meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' />
      <script src='https://api.tiles.mapbox.com/mapbox.js/v2.0.1/mapbox.js'></script>
      <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>
      <link href='https://api.tiles.mapbox.com/mapbox.js/v2.0.1/mapbox.css' rel='stylesheet' />
      <style>

        body { margin:0; padding:0; }

        #map {
          width: 1200px;
          height: 800px;
          margin: 50px auto;
        }

        svg {
          position: relative;
        }

        path {
          fill: #000;
          fill-opacity: 0;
          stroke: #fff;
          stroke-width: 1.5px;
        }

        path:hover {
          fill: hsl(340, 50%, 50%);
          fill-opacity: .4;
        }

      </style>
    </head>
    <body>

      <div id='map'></div>

      <script>

        /********************************************************
          MapBox JS code credit:
          https://www.mapbox.com/mapbox.js/example/v1.0.0/plain-leaflet/
        ********************************************************/

        var mapboxTiles = L.tileLayer('https://{s}.tiles.mapbox.com/v3/chenrick.k94zehfr/{z}/{x}/{y}.png');

        var params = {
          center: [0,0],
          minZoom: 2,
          maxZoom: 4,
          zoom: 3,
        };

        var map = L.map('map', params)
            .addLayer(mapboxTiles);

        /********************************************************
          D3 JS code credit: http://bost.ocks.org/mike/leaflet/
        ********************************************************/

        /* set up the svg object in realtionship to the Leaflet map */
        var svg = d3.select(map.getPanes().overlayPane).append("svg"),
              g = svg.append("g").attr("class", "leaflet-zoom-hide");

        d3.json("ne_10m_time_zones.json", function(collection) {

          console.log("collection: ", collection);

          var transform = d3.geo.transform({point: projectPoint}),
                path = d3.geo.path().projection(transform);

          var feature = g.selectAll("path")
                .data(collection.features)
              .enter().append("path");

          map.on("viewreset", reset);
          reset();

          function reset(){
            var bounds = path.bounds(collection),
            topLeft = bounds[0],
            bottomRight = bounds[1];

            svg .attr("width", bottomRight[0] - topLeft[0])
                  .attr("height", bottomRight[1] - topLeft[1])
                  .style("left", topLeft[0] + "px")
                  .style("top", topLeft[1] + "px");

            g   .attr("transform", "translate(" + -topLeft[0] + "," + -topLeft[1] + ")");

            feature.attr("d", path);
          }

          function projectPoint(x, y) {
            var point = map.latLngToLayerPoint(new L.LatLng(y, x));
            this.stream.point(point.x, point.y);
          }

        });

      </script>

    </body>
  </html>

## ne_10m_time_zones.json

      
Display the source blob

    
Display the rendered blob

    
    Raw
  

              ne_10m_time_zones.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.
	<!DOCTYPE html>
	<html>
	<head>
	<meta charset=utf-8 />
	<title>Leaflet, Mapbox and D3JS test</title>
	<meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' />
	<script src='https://api.tiles.mapbox.com/mapbox.js/v2.0.1/mapbox.js'></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>
	<link href='https://api.tiles.mapbox.com/mapbox.js/v2.0.1/mapbox.css' rel='stylesheet' />
	<style>

	body { margin:0; padding:0; }

	#map {
	width: 1200px;
	height: 800px;
	margin: 50px auto;
	}

	svg {
	position: relative;
	}

	path {
	fill: #000;
	fill-opacity: 0;
	stroke: #fff;
	stroke-width: 1.5px;
	}

	path:hover {
	fill: hsl(340, 50%, 50%);
	fill-opacity: .4;
	}

	</style>
	</head>
	<body>

	<div id='map'></div>

	<script>

	/********************************************************
	MapBox JS code credit:
	https://www.mapbox.com/mapbox.js/example/v1.0.0/plain-leaflet/
	********************************************************/

	var mapboxTiles = L.tileLayer('https://{s}.tiles.mapbox.com/v3/chenrick.k94zehfr/{z}/{x}/{y}.png');

	var params = {
	center: [0,0],
	minZoom: 2,
	maxZoom: 4,
	zoom: 3,
	};

	var map = L.map('map', params)
	.addLayer(mapboxTiles);

	/********************************************************
	D3 JS code credit: http://bost.ocks.org/mike/leaflet/
	********************************************************/

	/* set up the svg object in realtionship to the Leaflet map */
	var svg = d3.select(map.getPanes().overlayPane).append("svg"),
	g = svg.append("g").attr("class", "leaflet-zoom-hide");

	d3.json("ne_10m_time_zones.json", function(collection) {

	console.log("collection: ", collection);

	var transform = d3.geo.transform({point: projectPoint}),
	path = d3.geo.path().projection(transform);

	var feature = g.selectAll("path")
	.data(collection.features)
	.enter().append("path");

	map.on("viewreset", reset);
	reset();

	function reset(){
	var bounds = path.bounds(collection),
	topLeft = bounds[0],
	bottomRight = bounds[1];

	svg .attr("width", bottomRight[0] - topLeft[0])
	.attr("height", bottomRight[1] - topLeft[1])
	.style("left", topLeft[0] + "px")
	.style("top", topLeft[1] + "px");

	g .attr("transform", "translate(" + -topLeft[0] + "," + -topLeft[1] + ")");

	feature.attr("d", path);
	}

	function projectPoint(x, y) {
	var point = map.latLngToLayerPoint(new L.LatLng(y, x));
	this.stream.point(point.x, point.y);
	}

	});

	</script>

	</body>
	</html>