D3 Examples - satellite projection

xxxxxxxxxx
 
<!DOCTYPE html>
<meta charset="utf-8" />
<body>
    <div class="map">
​
    </div>
    <script src="d3.js"></script>
    <script src="d3.geo.projection.min.js"></script>
    <script src="topojson.js"></script>
    <script src="rbush.js"></script>
    <script src="spam.js"></script>
​
    <script type='text/javascript'>
​
    var madrid = {"name": "Madrid", "coordinates": [-3.8196207,40.4378698]};
​
    var distance =  1.5,
    scale = 5000,
    center = [70, 50],
    rotate = [4.319999999999993,-40.68,145.00000000000006],
    tilt = -35;
​
​
    var graticule = d3.geo.graticule(),
    width = 900,
    height = 650;
​
    d3.json("map.json", function(error, d) {
        topojson.presimplify(d)
​
        var map = new StaticCanvasMap({
            element: ".map",
            width: width,
            height: height,
            projection: d3.geo.satellite()
            .translate([width/2,0])
            .distance(1.1)
            .scale(3250)
            .center([30, 50])
            .rotate([7, -38, -20])
            .tilt(20)
            .clipAngle(Math.acos(1 / 1.1) * 180 / Math.PI - 1e-6)
            ,
            data: [
                {
                    // coastline
                    features: topojson.feature(d, d.objects["coastline"]),
                    paintfeature: function(parameters, d) {
                        parameters.context.lineWidth = 0.2;
                        parameters.context.strokeStyle = "rgba(122, 148, 149, 0.8)";
                        parameters.context.stroke();
                        parameters.context.save()
                        parameters.context.shadowColor = "rgba(122, 148, 149, 0.8)";
                        parameters.context.shadowBlur = 5
                        parameters.context.fillStyle = "rgb(255,255,255)";
                        parameters.context.fill()
                        parameters.context.restore()
                    }
                },
                {
                    // spain provinces
                    features: topojson.feature(d, d.objects["spain"]),
                    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()
                    }
                },
                {   // urban areas
                    features: topojson.feature(d, d.objects["urbanareas"]),
                    paintfeature: function(parameters, d) {
                        parameters.context.lineWidth = 0.2;
                        parameters.context.strokeStyle = "rgba(230,208,157,0.8)";
                        parameters.context.stroke()
                        parameters.context.fillStyle = "rgba(230,208,157,0.6)";
                        parameters.context.fill()
                    },
                    postpaint: function(parameters, d) {
​
                        // city name
                        var point = parameters.map.settings().projection(madrid.coordinates)
                        parameters.context.font = "20px sans-serif"
                        parameters.context.lineWidth = 4;
                        parameters.context.strokeStyle = 'rgba(255,255,255,0.7)';
                        parameters.context.strokeText(madrid.name,point[0] + 10, point[1] + 5)
                        parameters.context.fillStyle = "rgba(80,80,80, 0.7)";
                        parameters.context.fillText(madrid.name, point[0] + 10, point[1] + 5)
                        parameters.context.stroke()
​
                        // point
                        parameters.context.beginPath();
                        parameters.context.arc(point[0], point[1] / parameters.scale, 2 , 0, 2 * Math.PI, true);
                        parameters.context.fillStyle = "rgba(205,23,25,0.8)";
                        parameters.context.fill();
                    }
                }
            ]
        })
        map.init()
    })
​
    </script>
</body>
</html>
​
    