We've all seen the projected head from Elements of map projection with applications to map and chart construction, but the authors in 1921 did not have D3 to help them show a full range of weird distorted faces. This is based on the Map Projection Transitions example by Jason Davies.
// map is at http://work.axismaps.com/amd/gc/oil/ | |
function move_globe( coords, animate, end ) | |
{ | |
if ( insetShowing ) return; | |
if( animate ) | |
{ | |
coords[ 1 ] = coords[ 1 ] > 30 ? 30 : | |
coords[ 1 ] < -30 ? -30 : | |
coords[ 1 ]; |
<!DOCTYPE html> | |
<html> | |
<head> | |
<style type="text/css"> | |
#states path { | |
fill: none; | |
} | |
</style> |
Testing the topojson.presimplify function that is used in Dynamic Simplification examples. It's included in this stripped-down example just for testing purposes: seems to work like a charm in most browsers but for a topojson file with much detail (like the county map here), Firefox chokes on topojson.presimplify.
Testing the topojson.presimplify function that is used in Dynamic Simplification examples. It's included in this stripped-down example just for testing purposes: seems to work like a charm in most browsers but for a topojson file with much detail (like the county map here), Firefox chokes on topojson.presimplify.
An attempt to combine D3 zoomable map tiles and dynamic simplification. Simplification and redrawing occurs only at discrete zoom levels for performance reasons; a scale transformation is used in between.
<html> | |
<head> | |
<title>A Leaflet map!</title> | |
<link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.css"/> | |
<script src="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.js"></script> | |
<style> | |
#map{ width: 900px; height: 500px; } | |
</style> | |
</head> | |
<body> |
<html> | |
<head> | |
<title>A Leaflet map!</title> | |
<link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.css"/> | |
<script src="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.js"></script> | |
<style> | |
#map{ height: 100% } | |
</style> | |
</head> | |
<body> |
<html> | |
<head> | |
<title>A Leaflet map!</title> | |
<link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.css"/> | |
<script src="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.js"></script> | |
<script src="https://code.jquery.com/jquery-2.1.1.min.js"></script> | |
<style> | |
#map{ height: 100% } | |
</style> | |
</head> |