Old school D3 from simpler times

All examples By author By category About

LuisSevillano

Full window Github gist

satellite projection

Inspired by Mike Bostock's satellite projection Urban areas and coastline data by naturalearthdata

<!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>