gamecubate · December 15, 2015 14:29
diff --git a/index.html b/index.html
 <!DOCTYPE html>
 <meta charset="utf-8">
 <head>
 <style>
 
 body {
 	font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
 	width: 960px;
 	height: 500px;
 	position: relative;
 }
 
 div#map1, div#map2 {
 	width: 478px;
 	height: 498px;
 	border: 1px solid #000;
 	margin: 0
 }
 div#map1 {
 	position: absolute;
 }
 div#map2 {
 	position: absolute;
 	left: 480px;
 }

 text {
 	font-size: 18px;
 	fill: #444;
 }
 
 </style>
 
 <script src="http://d3js.org/d3.v3.min.js"></script>
 <link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.5.1/leaflet.css" />
 <script src="http://cdn.leafletjs.com/leaflet-0.5.1/leaflet.js"></script>
 <script src='http://api.tiles.mapbox.com/mapbox.js/v0.6.7/mapbox.js'></script>
 <link href='http://api.tiles.mapbox.com/mapbox.js/v0.6.7/mapbox.css' rel='stylesheet' />
 </head>
 	
 <body>
 <div id="map1"></div>
 <div id="map2"></div>

 <script>
 var dataset = [1,2,3,4,5,6];
 leafletMap();
 mapboxMap();
 		
 function leafletMap()
 {
 	var map = new L.Map('map1', {
 		center: new L.LatLng(45.56, -73.70),
 		zoom: 10,
 		layers: new L.TileLayer('http://a.tiles.mapbox.com/v3/mapbox.world-bright/{z}/{x}/{y}.png')
 	});
 
 	// Initialize the SVG layer
 	map._initPathRoot();
 	var svg = d3.select("#map1").select("svg");
 
 	// Generate SVG
 	addLegend(svg, "Leaflet map + MapBox tiles + d3 SVG circles", dataset);
 }
 
 function mapboxMap()
 {
 	var map = mapbox.map('map2');
 	map.zoom(10).center({ lat:45.56, lon:-73.70 });
 	map.addLayer(mapbox.layer().id('mapbox.world-bright', function() {
 		map.interaction.auto();
 	}));
 	
 	map.ui.zoomer.add();
 	map.ui.zoombox.add();
 	map.ui.pointselector.add();
 
 	var svg = d3.select("#map2").select("svg");
 	
 	addLegend(svg, "MapBox map, tiles + d3 SVG circles", dataset);
 }
 
 function addLegend(svg, label, data)
 {
 	// Add identifier text
 	svg.append("svg:g")
 		.attr("transform", "translate(239,440)")
 		.append("svg:text")
 			.text(label)
 			.attr("text-anchor", "middle");
 
 	// dataset > circle
 	var color = d3.scale.category10();
 	svg.selectAll("circle")
 			.data(data)
 		.enter()
 			.append("svg:circle")
 				.attr("cx", function(d,i){ return 100 + i*50;})
 				.attr("cy", 30)
 				.attr("r", 20)
 				.style("fill", color);
 }
 </script>
 </body>
	<!DOCTYPE html>
	<meta charset="utf-8">
	<head>
	<style>

	body {
	font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
	width: 960px;
	height: 500px;
	position: relative;
	}

	div#map1, div#map2 {
	width: 478px;
	height: 498px;
	border: 1px solid #000;
	margin: 0
	}
	div#map1 {
	position: absolute;
	}
	div#map2 {
	position: absolute;
	left: 480px;
	}

	text {
	font-size: 18px;
	fill: #444;
	}

	</style>

	<script src="http://d3js.org/d3.v3.min.js"></script>
	<link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.5.1/leaflet.css" />
	<script src="http://cdn.leafletjs.com/leaflet-0.5.1/leaflet.js"></script>
	<script src='http://api.tiles.mapbox.com/mapbox.js/v0.6.7/mapbox.js'></script>
	<link href='http://api.tiles.mapbox.com/mapbox.js/v0.6.7/mapbox.css' rel='stylesheet' />
	</head>

	<body>
	<div id="map1"></div>
	<div id="map2"></div>

	<script>
	var dataset = [1,2,3,4,5,6];
	leafletMap();
	mapboxMap();

	function leafletMap()
	{
	var map = new L.Map('map1', {
	center: new L.LatLng(45.56, -73.70),
	zoom: 10,
	layers: new L.TileLayer('http://a.tiles.mapbox.com/v3/mapbox.world-bright/{z}/{x}/{y}.png')
	});

	// Initialize the SVG layer
	map._initPathRoot();
	var svg = d3.select("#map1").select("svg");

	// Generate SVG
	addLegend(svg, "Leaflet map + MapBox tiles + d3 SVG circles", dataset);
	}

	function mapboxMap()
	{
	var map = mapbox.map('map2');
	map.zoom(10).center({ lat:45.56, lon:-73.70 });
	map.addLayer(mapbox.layer().id('mapbox.world-bright', function() {
	map.interaction.auto();
	}));

	map.ui.zoomer.add();
	map.ui.zoombox.add();
	map.ui.pointselector.add();

	var svg = d3.select("#map2").select("svg");

	addLegend(svg, "MapBox map, tiles + d3 SVG circles", dataset);
	}

	function addLegend(svg, label, data)
	{
	// Add identifier text
	svg.append("svg:g")
	.attr("transform", "translate(239,440)")
	.append("svg:text")
	.text(label)
	.attr("text-anchor", "middle");

	// dataset > circle
	var color = d3.scale.category10();
	svg.selectAll("circle")
	.data(data)
	.enter()
	.append("svg:circle")
	.attr("cx", function(d,i){ return 100 + i*50;})
	.attr("cy", 30)
	.attr("r", 20)
	.style("fill", color);
	}
	</script>
	</body>