Globe project

forked from earthjs's block: a complete globe

<!DOCTYPE html>
<meta charset="utf-8">
<link type="text/css" rel="stylesheet" href="earthjs.css">
<script type='text/javascript' src='https://d3js.org/d3.v4.min.js'></script>
<script type='text/javascript' src='https://d3js.org/topojson.v3.min.js'></script>
<script type='text/javascript' src='earthjs.min.js'></script>
<div class="set-options"></div>
<svg id="earth"></svg>
<script>
var g = earthjs();
g.register(earthjs.plugins.configPlugin());
g.register(earthjs.plugins.wheelZoomPlugin());
g.register(earthjs.plugins.versorMousePlugin());
g.register(earthjs.plugins.autorotatePlugin(10));
g.register(earthjs.plugins.dropShadowSvg());
g.register(earthjs.plugins.oceanSvg());
g.register(earthjs.plugins.graticuleSvg());
g.register(earthjs.plugins.fauxGlobeSvg());
g.register(earthjs.plugins.worldSvg(
  'world-110m.json', 
  'world-110m-country-names.tsv'));
g.register(earthjs.plugins.centerSvg());
g.register(earthjs.plugins.countryTooltipSvg());
g.register(earthjs.plugins.placesSvg('places.json'));
  
g.centerSvg.focused(function() {
    g.autorotatePlugin.stop();
    options.stop = true;
})
g._.options.transparent = true;
g.ready(function(){
    g.create();
})

var options = p=g.configPlugin.set();
var buttonClick = function(str) {
    var arr = str.split(':'), key = arr[2];
    var resultx = {};
    options[key] = !options[key];
    resultx[key] =  options[key];
    console.log(resultx);
    if (key=='hideCountries')
        resultx.hideLand = false;
    g.configPlugin.set(resultx);
};

Modified http://d3js.org/d3.v4.min.js to a secure url

Modified http://d3js.org/topojson.v3.min.js to a secure url

https://d3js.org/d3.v4.min.js

https://d3js.org/topojson.v3.min.js