Bill Morris wboykinm

Demonstrates the d3.geo.tile plug-in used in conjunction with the d3.geo.mercator projection to clip MapBox Natural Earth II raster tiles. The outline of the United States is loaded in TopoJSON format.

The Briesemeister projection is a rescaled oblique Hammer projection, with an aspect ratio of 1.75:1 rather than 2:1. It uses an oblique aspect of 10°E 45°N.

The Atlantis projection is an oblique aspect of the Mollweide projection.

The orthographic projection is available as d3.geo.orthographic. See also the interactive version, the rotating versions and the animated world tour.

UPDATE: ~~The Vector Tiles are not being served at this time by Openstreetmap. Try later or a different provider (example)~~ Services seem to have resumed

A simple test of extending the L.TileLayer to fetch geoJSON tiles from openstreetmap and render them with d3. This is probably not the most efficient way to do this, as we accept empty image tags (from the standard TileLayer) and use them as containers for the data/requests.

Adapting d3.geo.tile to show OpenStreetMap vector tiles. Via Mike Bostock's example.

  wow
         such voronoi
                 html5
     many cells
                       very convexity
   so tessellation

	<!DOCTYPE html>
	<html>
	<head>
	<style>
	body { margin:0; padding:0; }
	#map { position:absolute; top:0; bottom:0; width:100%; }
	</style>
	</head>
	<div class="leaflet-marker-icon datacenter-marker edge leaflet-zoom-animated leaflet-clickable" tabindex="0" style="margin-left: -6px; margin-top: -6px; width: 12px; height: 12px; -webkit-transform: translate3d(738px, 323px, 0); z-index: 323;"><span class="dot"></span></div>
	<body>

	<!DOCTYPE html>
	<meta charset="utf-8">
	<style>

	rect {
	fill: none;
	pointer-events: all;
	}

	.feature {

	var GeoJSON = function( geojson, options ){

	var _geometryToGoogleMaps = function( geojsonGeometry, opts, geojsonProperties ){

	var googleObj;

	switch ( geojsonGeometry.type ){
	case "Point":
	opts.position = new google.maps.LatLng(geojsonGeometry.coordinates[1], geojsonGeometry.coordinates[0]);
	googleObj = new google.maps.Marker(opts);