zgazak/index.html

## index.html
<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <title>Leaflet + Open Street Map</title>
        <!-- Leaflet + d3 libraries -->
        <script src="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.js"></script>
        <script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
        <!-- Leaflet CSS -->
        <link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.css" />
        <style>
            #map-container {
                height: 380px;
                width:  512px;
            }
            div {
                display: inline-block;
            }
            #map-legend {
                position: absolute;
            }
        </style>
    </head>
    <body>
        <div id="map-container"></div><!-- Must have an explicit height attribute! -->

        <script>
         var colorScale; // accessible in d3.tsv() and makeWineMap()
colorScale  = d3.scale.category10();
var geoJSON_wineryFeatures = [];

var makeWineMap = function(geoJSON_wineryFeatures) {
   // L = Leaflet name space, pass it the id of our container
   // Define URL for fetching map tiles, and cite source
   var map       = L.map("map-container"),
       bwOsmURL  = "http://{s}.basemaps.cartocdn.com/light_all/{z}/{x}/{y}.png",
       osmAttrs  = "Map data © <a href='http://openstreetmap.org'>OpenStreetMap</a>";
   var osmTiles = new L.TileLayer(bwOsmURL, {
       minZoom: 1,
       maxZoom: 16,
       attribution: osmAttrs
   });
   // Center view on ~NYC
   var usaCoord  = new L.LatLng(0.0,0.0);
   map.setView(usaCoord, 1); // latlng, zoom level
   map.addLayer(osmTiles);
   L.geoJson(geoJSON_wineryFeatures, {
       style: function (feature) {
           return {
               color:       '#000',
               opacity:     0,
               radius:      feature.properties.radius,
               fillColor:   feature.properties.color,
               fillOpacity: 0.5
           };
       },
       onEachFeature: function (feature, layer) {
           layer.bindPopup(feature.properties.info);
       },
       pointToLayer: function (feature, latlng) {
           return L.circleMarker(latlng);
       }
   }).addTo(map);
};

       // Load the data.
var callback = function (data) {
       console.log('data',data)
       colorScale  = d3.scale.category10();
       var geoJSON_wineryFeatures = [];
       data.data.forEach(function(winery,i){
             // tooltip:
             geoJSON_wineryFeatures.push(winery);
        });
       console.log(geoJSON_wineryFeatures);
       makeWineMap(geoJSON_wineryFeatures);
 }

d3.json("https://onesun.io/sunsets/_mapdata", callback);

        </script>
    </body>
</html>
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="utf-8">
	<title>Leaflet + Open Street Map</title>
	<!-- Leaflet + d3 libraries -->
	<script src="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.js"></script>
	<script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
	<!-- Leaflet CSS -->
	<link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.css" />
	<style>
	#map-container {
	height: 380px;
	width: 512px;
	}
	div {
	display: inline-block;
	}
	#map-legend {
	position: absolute;
	}
	</style>
	</head>
	<body>
	<div id="map-container"></div><!-- Must have an explicit height attribute! -->

	<script>
	var colorScale; // accessible in d3.tsv() and makeWineMap()
	colorScale = d3.scale.category10();
	var geoJSON_wineryFeatures = [];

	var makeWineMap = function(geoJSON_wineryFeatures) {
	// L = Leaflet name space, pass it the id of our container
	// Define URL for fetching map tiles, and cite source
	var map = L.map("map-container"),
	bwOsmURL = "http://{s}.basemaps.cartocdn.com/light_all/{z}/{x}/{y}.png",
	osmAttrs = "Map data © <a href='http://openstreetmap.org'>OpenStreetMap</a>";
	var osmTiles = new L.TileLayer(bwOsmURL, {
	minZoom: 1,
	maxZoom: 16,
	attribution: osmAttrs
	});
	// Center view on ~NYC
	var usaCoord = new L.LatLng(0.0,0.0);
	map.setView(usaCoord, 1); // latlng, zoom level
	map.addLayer(osmTiles);
	L.geoJson(geoJSON_wineryFeatures, {
	style: function (feature) {
	return {
	color: '#000',
	opacity: 0,
	radius: feature.properties.radius,
	fillColor: feature.properties.color,
	fillOpacity: 0.5
	};
	},
	onEachFeature: function (feature, layer) {
	layer.bindPopup(feature.properties.info);
	},
	pointToLayer: function (feature, latlng) {
	return L.circleMarker(latlng);
	}
	}).addTo(map);
	};

	// Load the data.
	var callback = function (data) {
	console.log('data',data)
	colorScale = d3.scale.category10();
	var geoJSON_wineryFeatures = [];
	data.data.forEach(function(winery,i){
	// tooltip:
	geoJSON_wineryFeatures.push(winery);
	});
	console.log(geoJSON_wineryFeatures);
	makeWineMap(geoJSON_wineryFeatures);
	}

	d3.json("https://onesun.io/sunsets/_mapdata", callback);

	</script>
	</body>
	</html>