(site) Add lakes to rotating example

site/public/examples/rotating.ejs

@@ -8,6 +8,8 @@
 
 <p>This code shows the example from the homepage, which rotates, shows randomly positioned, colored, and sized pings on the globe, and supports mouse-based dragging and zooming. It also shows the creation and use of a plugin, which powers the automatic rotation and exposes a public API.</p>
 
+<p>We're using a specially-made TopoJSON file that includes lake data so that we can draw lakes on the globe with a custom plugin, which you can find at the bottom of the JavaScript. The custom TopoJSON was made using the <a href='https://github.com/mbostock/topojson/wiki/Command-Line-Reference'>TopoJSON command-line tool</a> and data from <a href='http://www.naturalearthdata.com/features/'>Natural Earth</a>; you can also <a href='/world-110m-withlakes.json'>download the JSON file</a> for your own use.</p>
+
 <p>The demo also shows how you can keep your globe from looking pixelated on high density displays by changing the canvas' width and height but keeping its <em>displayed</em> width and height the same via CSS styling.</p>
 
 <div style='text-align: center;'>
@@ -23,18 +25,25 @@
 <div class='ui red ribbon label'>JavaScript</div>
 <pre><code class='language-javascript'>(function() {
   var globe = planetaryjs.planet();
+  // Load our custom `autorotate` plugin; see below.
+  globe.loadPlugin(autorotate(10));
   // The `earth` plugin draws the oceans and the land; it's actually
   // a combination of several separate built-in plugins.
+  //
+  // Note that we're loading a special TopoJSON file
+  // (world-110m-withlakes.json) so we can render lakes.
   globe.loadPlugin(planetaryjs.plugins.earth({
-    topojson: { file:   '/world-110m.json' },
+    topojson: { file:   '/world-110m-withlakes.json' },
     oceans:   { fill:   '#000080' },
     land:     { fill:   '#339966' },
     borders:  { stroke: '#008000' }
   }));
+  // Load our custom `lakes` plugin to draw lakes; see below.
+  globe.loadPlugin(lakes({
+    fill: '#000080'
+  }));
   // The `pings` plugin draws animated pings on the globe.
   globe.loadPlugin(planetaryjs.plugins.pings());
-  // Load our custom `autorotate` plugin; see below.
-  globe.loadPlugin(autorotate(10));
   // The `zoom` and `drag` plugins enable
   // manipulating the globe with the mouse.
   globe.loadPlugin(planetaryjs.plugins.zoom({
@@ -104,6 +113,32 @@
       });
     };
   };
+
+  // This plugin takes lake data from the special
+  // TopoJSON we're loading and draws them on the map.
+  function lakes(options) {
+    options = options || {};
+    var lakes = null;
+
+    return function(planet) {
+      planet.onInit(function() {
+        // We can access the data loaded from the TopoJSON plugin
+        // on its namespace on `planet.plugins`. We're loading a custom
+        // TopoJSON file with an object called &quot;ne_110m_lakes&quot;.
+        var world = planet.plugins.topojson.world;
+        lakes = topojson.feature(world, world.objects.ne_110m_lakes);
+      });
+
+      planet.onDraw(function() {
+        planet.withSavedContext(function(context) {
+          context.beginPath();
+          planet.path.context(context)(lakes);
+          context.fillStyle = options.fill || 'black';
+          context.fill();
+        });
+      });
+    };
+  };
 })();</code></pre>
 </div>
 

site/public/examples/rotating.js

@@ -1,17 +1,24 @@
 (function() {
   var globe = planetaryjs.planet();
+  // Load our custom `autorotate` plugin; see below.
+  globe.loadPlugin(autorotate(10));
   // The `earth` plugin draws the oceans and the land; it's actually
   // a combination of several separate built-in plugins.
+  //
+  // Note that we're loading a special TopoJSON file
+  // (world-110m-withlakes.json) so we can render lakes.
   globe.loadPlugin(planetaryjs.plugins.earth({
-    topojson: { file:   '/world-110m.json' },
+    topojson: { file:   '/world-110m-withlakes.json' },
     oceans:   { fill:   '#000080' },
     land:     { fill:   '#339966' },
     borders:  { stroke: '#008000' }
   }));
+  // Load our custom `lakes` plugin to draw lakes; see below.
+  globe.loadPlugin(lakes({
+    fill: '#000080'
+  }));
   // The `pings` plugin draws animated pings on the globe.
   globe.loadPlugin(planetaryjs.plugins.pings());
-  // Load our custom `autorotate` plugin; see below.
-  globe.loadPlugin(autorotate(10));
   // The `zoom` and `drag` plugins enable
   // manipulating the globe with the mouse.
   globe.loadPlugin(planetaryjs.plugins.zoom({
@@ -81,4 +88,30 @@
       });
     };
   };
+
+  // This plugin takes lake data from the special
+  // TopoJSON we're loading and draws them on the map.
+  function lakes(options) {
+    options = options || {};
+    var lakes = null;
+
+    return function(planet) {
+      planet.onInit(function() {
+        // We can access the data loaded from the TopoJSON plugin
+        // on its namespace on `planet.plugins`. We're loading a custom
+        // TopoJSON file with an object called "ne_110m_lakes".
+        var world = planet.plugins.topojson.world;
+        lakes = topojson.feature(world, world.objects.ne_110m_lakes);
+      });
+
+      planet.onDraw(function() {
+        planet.withSavedContext(function(context) {
+          context.beginPath();
+          planet.path.context(context)(lakes);
+          context.fillStyle = options.fill || 'black';
+          context.fill();
+        });
+      });
+    };
+  };
 })();

site/public/js/homepage.js

@@ -3,11 +3,14 @@
   // The `earth` plugin draws the oceans and the land; it's actually
   // a combination of several separate built-in plugins.
   globe.loadPlugin(planetaryjs.plugins.earth({
-    topojson: { file:   'world-110m.json' },
+    topojson: { file:   'world-110m-withlakes.json' },
     oceans:   { fill:   '#000080' },
     land:     { fill:   '#339966' },
     borders:  { stroke: '#008000' }
   }));
+  globe.loadPlugin(lakes({
+    fill: '#000080'
+  }));
   // The `pings` plugin draws animated pings on the globe.
   globe.loadPlugin(planetaryjs.plugins.pings());
   // Load our custom `autorotate` plugin; see below.
@@ -51,6 +54,27 @@
   // Draw that globe!
   globe.draw(canvas);
 
+  function lakes(config) {
+    config = config || {};
+    return function(planet) {
+      var lakes = null;
+
+      planet.onInit(function() {
+        var world = planet.plugins.topojson.world;
+        lakes = topojson.feature(world, world.objects.ne_110m_lakes);
+      });
+
+      planet.onDraw(function() {
+        planet.withSavedContext(function(context) {
+          context.beginPath();
+          planet.path.context(context)(lakes);
+          context.fillStyle = config.fill || 'black';
+          context.fill();
+        });
+      });
+    };
+  };
+
   // This plugin will automatically rotate the globe around its vertical
   // axis a configured number of degrees every second.
   function autorotate(degPerSec) {