Skip to content

Instantly share code, notes, and snippets.

@rveciana

rveciana/README.md

Last active August 29, 2015 14:19
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save rveciana/c25ca227d84790e1ba15 to your computer and use it in GitHub Desktop.
Save rveciana/c25ca227d84790e1ba15 to your computer and use it in GitHub Desktop.
Download ZIP
Drop shadow map using Canvas
Raw
README.md

This example shows how to create the drop shadow effect in a map using Canvas.

Since the Canvas object already has the tools to do that, the code is really simple.

Raw
index.html
<!DOCTYPE html>
<meta charset="utf-8">
<body>
<script src="http://d3js.org/d3.v3.min.js"></script>
<script src="http://d3js.org/topojson.v0.min.js"></script>
<script>
var width = 960,
height = 500;
var projection = d3.geo.mercator()
.scale(800)
.rotate([80, -20, 0]);
var canvas = d3.select("body").append("canvas")
.attr("width", width)
.attr("height", height);
var context = canvas.node().getContext("2d");
var path = d3.geo.path()
.projection(projection)
.context(context);
d3.json("https://cdn.rawgit.com/mbostock/4090846/raw/8a7f176072d508218e120773943b595c998991be/world-50m.json", function(error, data) {
var land = topojson.object(data, data.objects.land);
context.fillStyle='#ccc';
context.strokeStyle = '#aaa';
context.save();
context.beginPath();
context.shadowBlur=5;
context.shadowColor='#000';
context.shadowOffsetX=5;
context.shadowOffsetY=5;
path(land);
context.fill();
context.restore();
context.stroke();
});
</script>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment