CODEWITHSUNDEEP
dictionaryd3.jssvg
Thierry Templier
Thierry Templier

Reputation: 202276

Update map rotation with angles with orthographic projection

I try to rotate a map using angles with orthographic projection. My aim is to center a map on a particular place without using drag'n drop or mouse move.

My map is created like that:

var projection = d3.geo.orthographic()
     .scale(248)
     .clipAngle(90);

var svg = d3.select(element[0]).append('svg')
    .attr('preserveAspectRatio', 'xMidYMid')
    .attr('viewBox', '0 0 ' + width + ' ' + height)
    .attr('width', mWidth)
    .attr('height', mWidth * height / width);

svg.append('rect')
   .attr('class', 'background')
   .attr('width', width)
   .attr('height', height);

var g = svg.append('g').attr('id', 'myid');

(...)

I saw this interesting article on the subject: http://www.jasondavies.com/maps/rotate/. But this shows you how to using events.

How to do the same things using angle values?

Thanks for your help! Thierry

Upvotes: 1

Views: 617

Answers (2)

garfieldduck
garfieldduck

Reputation: 11

To center a map to a specific location under orthographic projection, you can use:

projection.rotate([-longitude, -latitude])

There is also interactive documentation about the rotation: https://www.d3indepth.com/geographic/#rotate

Upvotes: 1

altocumulus
altocumulus

Reputation: 21578

Using projection.rotate() should give you the desired rotation.

var lat = 54.6    // latitude 54.6S,
    lon = -22.3   // longitude 22.3E;

projection.rotate([lat, lon]);

This will rotate the projection to center on the coordinates supplied as an array.

Upvotes: 2

Related Questions