Old school D3 from simpler times

All examples By author By category About

LuisSevillano

Full window Github gist

satellite projection w graticule

Inspired by Mike Bostock's satellite projection. This time with graticule and new spam syntaxis (static, dynamic) for each feature. 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.min.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().step([5, 5]),
    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"]),
                    static: {
                        prepaint: function(parameters, d) {
                            parameters.context.beginPath();
                            parameters.path(graticule());
                            parameters.context.lineWidth = 0.4;
                            parameters.context.strokeStyle = 'rgb(122,148,149)';
                            parameters.context.stroke();
                        },
                        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"]),
                    static: {
                        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"]),
                    static: {
                        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>