TEXT 11
Untitled Guest on 15th September 2020 09:15:41 AM
  1. <html>
  2. <head>
  3. <title></title>
  4. </head>
  5. <body>
  6. <canvas id='rotatingGlobe' width='400' height='400'
  7.   style='width: 400px; height: 400px; cursor: move;'></canvas>
  8. <script>
  9. (function() {
  10.   var globe = planetaryjs.planet();
  11.   // Load our custom `autorotate` plugin; see below.
  12.   globe.loadPlugin(autorotate(10));
  13.   // The `earth` plugin draws the oceans and the land; it's actually
  14.   // a combination of several separate built-in plugins.
  15.   //
  16.   // Note that we're loading a special TopoJSON file
  17.   // (world-110m-withlakes.json) so we can render lakes.
  18.   globe.loadPlugin(planetaryjs.plugins.earth({
  19.     topojson: { file:   '/world-110m-withlakes.json' },
  20.     oceans:   { fill:   '#000080' },
  21.     land:     { fill:   '#339966' },
  22.     borders:  { stroke: '#008000' }
  23.   }));
  24.   // Load our custom `lakes` plugin to draw lakes; see below.
  25.   globe.loadPlugin(lakes({
  26.     fill: '#000080'
  27.   }));
  28.   // The `pings` plugin draws animated pings on the globe.
  29.   globe.loadPlugin(planetaryjs.plugins.pings());
  30.   // The `zoom` and `drag` plugins enable
  31.   // manipulating the globe with the mouse.
  32.   globe.loadPlugin(planetaryjs.plugins.zoom({
  33.     scaleExtent: [100, 300]
  34.   }));
  35.   globe.loadPlugin(planetaryjs.plugins.drag({
  36.     // Dragging the globe should pause the
  37.     // automatic rotation until we release the mouse.
  38.     onDragStart: function() {
  39.       this.plugins.autorotate.pause();
  40.     },
  41.     onDragEnd: function() {
  42.       this.plugins.autorotate.resume();
  43.     }
  44.   }));
  45.   // Set up the globe's initial scale, offset, and rotation.
  46.   globe.projection.scale(175).translate([175, 175]).rotate([0, -10, 0]);
  47.  
  48.   // Every few hundred milliseconds, we'll draw another random ping.
  49.   var colors = ['red', 'yellow', 'white', 'orange', 'green', 'cyan', 'pink'];
  50.   setInterval(function() {
  51.     var lat = Math.random() * 170 - 85;
  52.     var lng = Math.random() * 360 - 180;
  53.     var color = colors[Math.floor(Math.random() * colors.length)];
  54.     globe.plugins.pings.add(lng, lat, { color: color, ttl: 2000, angle: Math.random() * 10 });
  55.   }, 150);
  56.  
  57.   var canvas = document.getElementById('rotatingGlobe');
  58.   // Special code to handle high-density displays (e.g. retina, some phones)
  59.   // In the future, Planetary.js will handle this by itself (or via a plugin).
  60.   if (window.devicePixelRatio == 2) {
  61.     canvas.width = 800;
  62.     canvas.height = 800;
  63.     context = canvas.getContext('2d');
  64.     context.scale(2, 2);
  65.   }
  66.   // Draw that globe!
  67.   globe.draw(canvas);
  68.  
  69.   // This plugin will automatically rotate the globe around its vertical
  70.   // axis a configured number of degrees every second.
  71.   function autorotate(degPerSec) {
  72.     // Planetary.js plugins are functions that take a `planet` instance
  73.     // as an argument...
  74.     return function(planet) {
  75.       var lastTick = null;
  76.       var paused = false;
  77.       planet.plugins.autorotate = {
  78.         pause:  function() { paused = true;  },
  79.         resume: function() { paused = false; }
  80.       };
  81.       // ...and configure hooks into certain pieces of its lifecycle.
  82.       planet.onDraw(function() {
  83.         if (paused || !lastTick) {
  84.           lastTick = new Date();
  85.         } else {
  86.           var now = new Date();
  87.           var delta = now - lastTick;
  88.           // This plugin uses the built-in projection (provided by D3)
  89.           // to rotate the globe each time we draw it.
  90.           var rotation = planet.projection.rotate();
  91.           rotation[0] += degPerSec * delta / 1000;
  92.           if (rotation[0] >= 180) rotation[0] -= 360;
  93.           planet.projection.rotate(rotation);
  94.           lastTick = now;
  95.         }
  96.       });
  97.     };
  98.   };
  99.  
  100.   // This plugin takes lake data from the special
  101.   // TopoJSON we're loading and draws them on the map.
  102.   function lakes(options) {
  103.     options = options || {};
  104.     var lakes = null;
  105.  
  106.     return function(planet) {
  107.       planet.onInit(function() {
  108.         // We can access the data loaded from the TopoJSON plugin
  109.         // on its namespace on `planet.plugins`. We're loading a custom
  110.         // TopoJSON file with an object called "ne_110m_lakes".
  111.         var world = planet.plugins.topojson.world;
  112.         lakes = topojson.feature(world, world.objects.ne_110m_lakes);
  113.       });
  114.  
  115.       planet.onDraw(function() {
  116.         planet.withSavedContext(function(context) {
  117.           context.beginPath();
  118.           planet.path.context(context)(lakes);
  119.           context.fillStyle = options.fill || 'black';
  120.           context.fill();
  121.         });
  122.       });
  123.     };
  124.   };
  125. })();
  126. </script>
  127. </body>
  128. </html>

Paste is for source code and general debugging text.

Login or Register to edit, delete and keep track of your pastes and more.

Raw Paste

Login or Register to edit or fork this paste. It's free.