jeffreymorganio/.block

## .block
license: mit

## README.md

      
    Raw
  

              README.md
            
          
    An example of loading data from a CSV file with D3 and plotting the data as markers on a Leaflet JS map.

  
## index.html
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/leaflet/0.7.7/leaflet.css" />
  <link rel="stylesheet" href="map.css">
  <script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet/0.7.7/leaflet.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.17/d3.min.js" charset="utf-8"></script>
  <script src="map.js"></script>
  <title>Plotting CSV Map Marker Data</title>
</head>
<body onload="showMap()">
  <div id="leaflet-map"></div>
</body>
</html>

## landmarks.csv

          
            name
            latitude
            longitude

            
              L'Arc de Triomphe
              48.873747
              2.294935

            
              Eiffel Tower
              48.858093
              2.294694

            
              Sacré-Cœur Basilica
              48.886666
              2.343061

            
              Pont des Arts
              48.858322
              2.337488

## map.css
#leaflet-map {
  width: 962px;
  height: 502px;
}

## map.js
var map = null;
var zoomLevel = 13;
var paris = new L.LatLng(48.874652, 2.3200449);

function showMap() {
  initMap();
  loadCSVData();
}

function initMap() {
  var tileLayer = createTileLayer();
  var mapOptions = {
    center: paris,
    zoom: zoomLevel,
    layers: [tileLayer]
  };
  map = new L.Map('leaflet-map', mapOptions);
 }

function createTileLayer() {
  var tileSourceURL = 'http://{s}.tile.osm.org/{z}/{x}/{y}.png';
  var tileSourceOptions = {
   attribution: '&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
  };
  return new L.TileLayer(tileSourceURL, tileSourceOptions);
}

function loadCSVData() {
  d3.csv("landmarks.csv", function(data) {
    data.forEach(function (landmark) {
      addMarker(landmark);
    });
  });
}

function addMarker(landmark) {
  L.marker([landmark.latitude, landmark.longitude])
    .bindPopup(landmark.name)
    .addTo(map);
}

## thumbnail.png

      
    Raw
  

              thumbnail.png
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/leaflet/0.7.7/leaflet.css" />
	<link rel="stylesheet" href="map.css">
	<script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet/0.7.7/leaflet.js"></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.17/d3.min.js" charset="utf-8"></script>
	<script src="map.js"></script>
	<title>Plotting CSV Map Marker Data</title>
	</head>
	<body onload="showMap()">
	<div id="leaflet-map"></div>
	</body>
	</html>
name	latitude	longitude
L'Arc de Triomphe	48.873747	2.294935
Eiffel Tower	48.858093	2.294694
Sacré-Cœur Basilica	48.886666	2.343061
Pont des Arts	48.858322	2.337488
	var map = null;
	var zoomLevel = 13;
	var paris = new L.LatLng(48.874652, 2.3200449);

	function showMap() {
	initMap();
	loadCSVData();
	}

	function initMap() {
	var tileLayer = createTileLayer();
	var mapOptions = {
	center: paris,
	zoom: zoomLevel,
	layers: [tileLayer]
	};
	map = new L.Map('leaflet-map', mapOptions);
	}

	function createTileLayer() {
	var tileSourceURL = 'http://{s}.tile.osm.org/{z}/{x}/{y}.png';
	var tileSourceOptions = {
	attribution: '© <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
	};
	return new L.TileLayer(tileSourceURL, tileSourceOptions);
	}

	function loadCSVData() {
	d3.csv("landmarks.csv", function(data) {
	data.forEach(function (landmark) {
	addMarker(landmark);
	});
	});
	}

	function addMarker(landmark) {
	L.marker([landmark.latitude, landmark.longitude])
	.bindPopup(landmark.name)
	.addTo(map);
	}