mikelotis/.block

## .block
border: yes

## README.md

      
    Raw
  

              README.md
            
          
    Inspiration

D3 and Leaflet - Mike Bostock
D3 and Leaflet - Shimzu
To understand how D3 and Leaflet associated with each other


## canada-province.geojson

      
Display the source blob

    
Display the rendered blob

    
    Raw
  

              canada-province.geojson
            
          
        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>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Canada!!!</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.3.1/leaflet.css">
    <style>
        html, body{
            padding: 0px;
            margin: 0px;
        }

        html, body, #map{
            width: 100%;
            height: 100%;
        }

        path {
            fill: #000;
            fill-opacity: .2;
            stroke: #fff;
            stroke-width: 1.5px;
        }
    </style>
</head>
<body>
    <div id="map"></div>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.3.1/leaflet.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/4.13.0/d3.min.js"></script>
    <script>
        var map;
        d3.json("canada-province.geojson", main);

        function main(error, provinces){
            //altert error if file not accessible
            if(error){
                alert("error");
                console.log(error);
            }

            /*
             map - to house tiles and svg
             transform -to update paths according to user interaction
             path - converts GeoJson to SVG path elements
            */
            map = L.map("map").setView([63, -106.3468], 3);//56.1304
            var tileLayer = L.tileLayer("http://{s}.tile.osm.org/{z}/{x}/{y}.png",{
                 attributtion: '&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
             });
             var svg;
             var transform = d3.geoTransform({point: projectPoint});
             var path = d3.geoPath().projection(transform);

            //add tile and svg canvas to map
             tileLayer.addTo(map);
             L.svg().addTo(map);

            //add paths to svg
            svg = d3.select("#map").select("svg");
            var featureElements = svg.selectAll("path").data(provinces.features)
               .enter().append("path")
                .attr("d", path);


            //update path after user done dragging or zooming
            map.on("moveend", update);


            //for updating the paths
            function update(){
                featureElements.attr("d", path);
            }

            // for projecting the LatLng(s) to  layerpoints on the leaflet map
             function projectPoint(x, y){
                 var point = map.latLngToLayerPoint(new L.LatLng(y, x));
                 this.stream.point(point.x, point.y);
             }
        }
    </script>
</body>
</html>

## preview.png

      
    Raw
  

              preview.png
            
          
## thumbnail.png

      
    Raw
  

              thumbnail.png
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<title>Canada!!!</title>
	<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.3.1/leaflet.css">
	<style>
	html, body{
	padding: 0px;
	margin: 0px;
	}

	html, body, #map{
	width: 100%;
	height: 100%;
	}

	path {
	fill: #000;
	fill-opacity: .2;
	stroke: #fff;
	stroke-width: 1.5px;
	}
	</style>
	</head>
	<body>
	<div id="map"></div>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.3.1/leaflet.js"></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/4.13.0/d3.min.js"></script>
	<script>
	var map;
	d3.json("canada-province.geojson", main);

	function main(error, provinces){
	//altert error if file not accessible
	if(error){
	alert("error");
	console.log(error);
	}

	/*
	map - to house tiles and svg
	transform -to update paths according to user interaction
	path - converts GeoJson to SVG path elements
	*/
	map = L.map("map").setView([63, -106.3468], 3);//56.1304
	var tileLayer = L.tileLayer("http://{s}.tile.osm.org/{z}/{x}/{y}.png",{
	attributtion: '© <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
	});
	var svg;
	var transform = d3.geoTransform({point: projectPoint});
	var path = d3.geoPath().projection(transform);

	//add tile and svg canvas to map
	tileLayer.addTo(map);
	L.svg().addTo(map);

	//add paths to svg
	svg = d3.select("#map").select("svg");
	var featureElements = svg.selectAll("path").data(provinces.features)
	.enter().append("path")
	.attr("d", path);


	//update path after user done dragging or zooming
	map.on("moveend", update);


	//for updating the paths
	function update(){
	featureElements.attr("d", path);
	}

	// for projecting the LatLng(s) to layerpoints on the leaflet map
	function projectPoint(x, y){
	var point = map.latLngToLayerPoint(new L.LatLng(y, x));
	this.stream.point(point.x, point.y);
	}
	}
	</script>
	</body>
	</html>