Rotate Planetaryjs map on click event

Question

I am trying to set up a list of links of countries that when the user clicks a link the planetaryjs map rotates to center the selected country on in the 3D map.

I have tried to create a planetaryjs plugin without much luck and looked into D3 transform methods, but I don't know how to make these work given planetaryjs has the onDraw method to allow view updates.

I have set up a test codepen here: https://codepen.io/jjgravity/project/editor/ZrdqnA/

This shows the world map and two links (Paris, Bejing). The yaw/pitch/roll targets are captured in the js file 'js/planetaryapp.js'.

Here's the main code I am using from the js file:

planet.loadPlugin(planetaryjs.plugins.earth({
    topojson: { file: 'js/world-110m.json' },
    oceans:   { fill:   '#a5a5a7' },
    land:     { fill:   '#dbdadc' },
    borders:  { stroke: '#a5a5a7' }
}));

planet.loadPlugin(planetaryjs.plugins.drag({
    onDrag: function() {
        console.log("The planet was dragged!", this, d3.event);
    }
}));

// Make the planet fit well in its canvas
planet.projection.scale(150).translate([150, 150]);
var canvas = document.getElementById('globe');
planet.draw(canvas);

$("#paris a").on("click",function(){
    //co-ordinates ew want to rotate to [0,-30]
    // console.log(planet.projection.rotate());
    var targ = [0,-30,0];
    var speed = [0,-1,0];
    planet.onDraw(function() {
        var rotation = planet.projection.rotate();
        if(rotation[1] > -30){
            rotation -= 1;
        }
    planet.projection.rotate(rotation);
    });

    //planet.plugins.rotatetoloc.dest([0,-30,0]);
});

$("#bejing a").on("click",function(){
    //co-ordinates ew want to rotate to [-80,-20]
    planet.onDraw(function() {
        var rotation = planet.projection.rotate();
        if(rotation[0] > -80){
            rotation[0] -= 1;
        }
        if(rotation[1] < -20){
            rotation[1] += 1;
        }
        planet.projection.rotate(rotation);
    });
});

I am new to D3 and planetaryjs so please forgive me if this is obvious stuff.

Rotate Planetaryjs map on click event

0 Answers0