<svg id="earth-js"/>

<script>
    const g = earthjs({
        width:  700, 
        height: 500,
        selector: '#earth-js',
        rotate: [130,-33,-11],
        transparent: false,
        padding: 0
    });
</script>

Six available options can be define, options to define SVG size use width & height, option to display the globe to specific degree use rotate, and to get the SVG element from DOM use selector. Those options can be omitted and default value will be used, example above is the default value.

<svg id="earth"/>

<script>
    const g = earthjs();
</script>

at this point, code is preparing the projection and internal state being initialised.

<svg id="earth"/>

<script>
    const g = earthjs()
    .register(earthjs.plugins.graticuleSvg())
    .create();
</script>

Graticule data is predefined in D3js, to paint the graticule it need to call create().

Whether it use SVG, Canvas or Threejs, the (plugin) developer who use earthjs library should be able to understand in which part of earthjs code and which part of the plugins do the trick.

g. represent the instance of earthjs._

Corresponding plugin function is getting called:

** when plugin get executed and the return value have a "urls" key, it will register promeses ajax call and will execute onReady function.

one of the options need to be pass is url topojson world.

const g = earthjs()
.register(earthjs.plugins.worldSvg('./d/world-110m.json'));
g.ready(function(){
    g.create();
})

to start triggering ajax, use function ready() and pass in parameter code to be executed.

Canvas is much faster to draw compared with SVG.

const g = earthjs()
.register(earthjs.plugins.canvasPlugin())
.register(earthjs.plugins.worldCanvas('./d/world-110m.json'));
g.ready(function(){
    g.create();
})

for Canvas rendering multiple times will result of overwrite the previous rendered, for SVG the next paint that have the same location will paint on top of it. SVGv2.0 can use z-index to change the order of paint, but need to understand the spec.

earthjs can use multiple layers and from the perspective of developer who use it can be transparent, by mixing use of svg plugins and canvas. Or manipulate/control in which layer plugin should be drawing to.

Example SVG & Canvas plugins used to generate ocean, graticule and land of the world. Canvas automatically generated inside SVG element as foreignObject.

<svg id="earth"></svg>
<script>
    const g = earthjs()
    .register(earthjs.plugins.oceanSvg())
    .register(earthjs.plugins.graticuleSvg())
    .register(earthjs.plugins.canvasPlugin())
    .register(earthjs.plugins.worldCanvas('./d/world-110m.json'));
    g.ready(function(){
        g.create();
    })
</script>

When resizing the browser using [cmd] + [+], canvas inside SVG will not honor the command, as a result canvas will not change the size but the SVG will resize.

To overcome that limitation, canvas drawing need to use standalone(outside SVG) canvas.

<svg id="earth"></svg>
<canvas></canvas>
<script>
    // code same as above
    g.canvasPlugin.selectAll('canvas');
    g.ready(function(){
        g.create();
    })
</script>

in here, graticuleCanvas draw to the first canvas and worldCanvas draw to the second. as both canvas are using same z-index, worldCanvas will cover graticule

<svg id="earth"></svg>
<canvas></canvas>
<canvas></canvas>
<script>
    const g = earthjs()
    .register(earthjs.plugins.mousePlugin())
    .register(earthjs.plugins.oceanSvg())
    .register(earthjs.plugins.canvasPlugin())
    .register(earthjs.plugins.graticuleCanvas())
    .register(earthjs.plugins.worldCanvas('./d/world-110m.json'));

    g.graticuleCanvas.style({line: 'rgba(119,119,119, 1)'});
    g.worldCanvas.style({land: 'rgba(117, 87, 57, 1)'});

    g.canvasPlugin.selectAll('canvas');
    g.graticuleCanvas.drawTo([0]);
    g.worldCanvas.drawTo([1]);

    g.ready(function(){
        g.create();
    })
</script>

but when graticuleCanvas z-index is higher than worldCanvas, the opposite happend, graticule will cover the world.

Here is the illustration layers get drawn with different position, just to get the feeling of the layers.

by mixing two earth with different degree of 180, it can show and know that the other side of earth one with day time and the other with night time, example below show mixed between asia and america continent.

• non interactive SVG should be change to use canvas.