D3 Examples - A Coruña city historic map

xxxxxxxxxx
 
<!DOCTYPE html>
<meta charset="utf-8" />
<style>
body {
    font-size: 62.5%;
}
.legend {
    position: absolute;
    top: 1em;;
    font-family: sans-serif;
    font-size: 1.2em;
    height: 100px;
    width: 300px;
}
</style>
<body>
    <div class="js-map">
​
    </div>
    <script src="d3.js"></script>
    <script src="d3-legend.min.js"></script>
    <script src="topojson.js"></script>
    <script src="rbush.js"></script>
    <script src="spam.js"></script>
​
    <script type='text/javascript'>
​
​
    var color = d3.scale.ordinal()
    .domain(["archaeological/historic/ethnographic places", "old town", "urban expansion area", "protected colonial buildings/traditional Village"])
    .range(["rgba(189, 0, 38,0.4)", "rgba(0,104,55,0.7)", "rgba(120,198,121,0.7)","rgba(253, 184, 99,0.7)"])
​
    d3.select("body").append("svg")
    .attr("class", "legend")
​
    var legend = d3.legend.color()
    .shapeHeight(15)
    .shapeWidth(15)
    .shapePadding(2)
    .labelOffset(10)
    .orient("vertical")
    .labelAlign("start")
    .ascending(false)
    .scale(color)
​
    d3.select(".legend")
    .call(legend)
​
    d3.json("main.json", function(error, d) {
        topojson.presimplify(d)
​
        var map = new StaticCanvasMap({
            element: ".js-map",
            width: 900,
            height: 1050,
​
            data: [
                {
                    features: topojson.feature(d, d.objects["border"]),
                    paintfeature: function(parameters, d) {
                        parameters.context.lineWidth = 1.2
                        parameters.context.strokeStyle = "rgb(197,197,197)";
                        parameters.context.stroke()
                        parameters.context.fillStyle = "rgb(255, 255, 255)";
                        parameters.context.fill()
                        parameters.context.save()
                        parameters.context.shadowColor = "rgba(197,197,197,0.5)";
                        parameters.context.shadowBlur = 8
                        parameters.context.fill()
                        parameters.context.restore()
                        parameters.context.clip()
                    }
                },
                {   // archaeological/historic/ethnographic places
                    features: topojson.feature(d, d.objects["histo"]),
                    paintfeature: function(parameters, d) {
                        parameters.context.lineWidth = 1
                        parameters.context.strokeStyle = "rgba(189, 0, 38,0.5)";
                        parameters.context.stroke()
​
                        parameters.context.fillStyle = "rgba(189, 0, 38,0.4)";
                        parameters.context.fill()
                    }
                },
                {   // streets
                    features: topojson.feature(d, d.objects["st"]),
                    paintfeature: function(parameters, d) {
                        parameters.context.lineWidth = 1
                        parameters.context.fillStyle = "rgba(197,197,197,0.3)";
                        parameters.context.fill()
                    }
                },
                {   // old town
                    features: topojson.feature(d, d.objects["casc"]),
                    paintfeature: function(parameters, d) {
                        parameters.context.lineWidth = 1
                        parameters.context.fillStyle = "rgba(0,104,55,0.7)";
                        parameters.context.fill()
                    }
                },
                {   // colonial buildings
                    features: topojson.feature(d, d.objects["col"]),
                    paintfeature: function(parameters, d) {
                        parameters.context.lineWidth = 1
                        parameters.context.fillStyle = "rgba(253, 184, 99,0.7)";
                        parameters.context.fill()
                    }
                },
                {   // 2nd phase expansion district
                    features: topojson.feature(d, d.objects["ex"]),
                    paintfeature: function(parameters, d) {
                        parameters.context.lineWidth = 1
                        parameters.context.fillStyle = "rgba(120,198,121,0.7)";
                        parameters.context.fill()
                    }
                }
​
            ]
        })
        map.init()
    })
​
    </script>
</body>
</html>
​
    