spam.js with d3-composite-projections

Finally, I got how to create a ZoomableCanvasMap with a custom projection.

Currently, only the latest spam.js at the master branch supports the

parameters.map.settings()

function.

<!DOCTYPE html>
<meta charset="utf-8" />
<body>
<script src="d3.min.js"></script>
<script src="topojson.min.js"></script>
<script src="rbush.min.js"></script>
<script src="spam.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3-composite-projections/0.3.5/conicequidistantjapan.min.js"></script>
<script type='text/javascript'>
var hover = null

d3.json("empty.json", function(error, d) {

topojson.presimplify(d);

var map = new ZoomableCanvasMap({
        element: "body",
        width: 960,
        height: 500,

projection: d3.geo.conicEquidistantJapan(),
        data: [
            {
                features: topojson.feature(d, d.objects["japan"]),
                static: {
                    paintfeature: function(parameters, d) {
                      parameters.context.lineWidth = 1 / parameters.scale
                      parameters.context.strokeStyle = "#555"
                      parameters.context.stroke()

parameters.context.fillStyle = "#f4efec"
                      parameters.context.fill()
                    },
                    postpaint: function(parameters) {
                        parameters.context.beginPath()
                        parameters.context.moveTo(0,0);
                        parameters.context.lineTo(300,150);
                        var p = new Path2D(parameters.map.settings().projection.getCompositionBorders())
                        parameters.context.strokeStyle = "#555"
                        parameters.context.stroke(p)
                    }
                },
                dynamic: {
                    postpaint: function(parameters) {
                        if (!hover)
                            return

parameters.context.beginPath()
                        parameters.context.lineWidth = 2 / parameters.scale
                        parameters.context.fillStyle = "rgb(241, 205, 151)"
                        parameters.path(hover)
                        parameters.context.stroke()
                        parameters.context.fill()
                    }
                },
                events: {
                    hover: function(parameters, d) {
                        hover = d

parameters.map.paint()
                    },
                    click: function(parameters, d) {
                        parameters.map.zoom(d)
                    }
                }
            }
        ]
    })
    map.init()
})
</script>

Updated missing url https://cdnjs.cloudflare.com/ajax/libs/d3-composite-projections/0.3.5/conicEquidistantJapan.min.js to https://cdnjs.cloudflare.com/ajax/libs/d3-composite-projections/0.3.5/conicequidistantjapan.min.js

https://cdnjs.cloudflare.com/ajax/libs/d3-composite-projections/0.3.5/conicEquidistantJapan.min.js