HarryStevens / swiftmap

A JavaScript library for making data-driven maps.
https://harrystevens.github.io/swiftmap/
MIT License
9 stars 0 forks source link

Add map.shadow()? #36

Open HarryStevens opened 6 years ago

HarryStevens commented 6 years ago

It's easy to implement. But do web cartographers want it?

// Shadow with clear source of light.
var filter = map.svg.append("filter")
  .attr("id", "dropshadowWithLight")
filter.append("feGaussianBlur")
  .attr("in", "SourceAlpha")
  .attr("stdDeviation", 5)
  .attr("result", "blur")
filter.append("feOffset")
  .attr("in", "blur")
  .attr("dx", 2)
  .attr("dy", 2)
  .attr("result", "offsetBlur");
var feSpecularLighting = filter.append("feSpecularLighting")
  .attr("in", "blur").attr("surfaceScale", 5).attr("specularConstant", .75).attr("specularExponent", 20).attr("lighting-color", "#bbbbbb").attr("result", "specOut")
feSpecularLighting.append("fePointLight")
  .attr("x", -5000)
  .attr("y", -10000)
  .attr("z", 20000);
filter.append("feComposite").attr("in", "SourceGraphic").attr("in2", "specOut").attr("operator", "arithmetic")
.attr("k1", 0).attr("k2", 1).attr("k3", 1).attr("k4", 0).attr("result", "litPaint");
var feMerge = filter.append("feMerge");
feMerge.append("feMergeNode")
  .attr("in", "offsetBlur");
feMerge.append("feMergeNode")
  .attr("in", "litPaint");

// Regular shadow.
var filter0 = map.svg.append("filter")
  .attr("id", "dropshadow")
filter0.append("feGaussianBlur")
  .attr("in", "SourceAlpha")
  .attr("stdDeviation", 5)
filter0.append("feOffset")
  .attr("dx", 2)
  .attr("dy", 2)
  .attr("result", "offsetblur")
var feComponentTransfer = filter0.append("feComponentTransfer");
feComponentTransfer.append("feFuncA")
  .attr("type", "linear")
  .attr("slope", 1)
var feMerge0 = filter0.append("feMerge");
feMerge0.append("feMergeNode");
feMerge0.append("feMergeNode")
  .attr("in", "SourceGraphic");

map.svg.style("filter", "url(#dropshadow)");