add significant lakes to the map

add conversion between m/s and knots
jersey99 · Dec 16, 2013 · 8d170b0 · 8d170b0
1 parent db40d16
commit 8d170b0
Show file tree

Hide file tree

Showing 11 changed files with 77 additions and 27 deletions.
diff --git a/.gitignore b/.gitignore
@@ -1,3 +1,4 @@
+.DS_Store
 .idea
 node_modules
 target

diff --git a/README.md b/README.md
@@ -52,13 +52,18 @@ simplified, larger scale for animation and a more detailed, smaller scale for st
 following commands build these files:
 
     curl "http://www.nacis.org/naturalearth/50m/physical/ne_50m_coastline.zip" -o ne_50m_coastline.zip
+    curl "http://www.nacis.org/naturalearth/50m/physical/ne_50m_lakes.zip" -o ne_50m_lakes.zip
     curl "http://www.nacis.org/naturalearth/110m/physical/ne_110m_coastline.zip" -o ne_110m_coastline.zip
-    unzip -o ne_\*_coastline.zip
+    curl "http://www.nacis.org/naturalearth/110m/physical/ne_110m_lakes.zip" -o ne_110m_lakes.zip
+    unzip -o ne_\*.zip
     ogr2ogr -f GeoJSON coastline_50m.json ne_50m_coastline.shp
     ogr2ogr -f GeoJSON coastline_110m.json ne_110m_coastline.shp
-    ogr2ogr -simplify 1 -f GeoJSON coastline_tiny.json ne_110m_coastline.shp
-    topojson -o earth-topo.json coastline_50m.json coastline_110m.json
-    topojson -o earth-topo-mobile.json coastline_110m.json coastline_tiny.json
+    ogr2ogr -f GeoJSON -where "scalerank < 4" lakes_50m.json ne_50m_lakes.shp
+    ogr2ogr -f GeoJSON -where "scalerank < 2 AND admin='admin-0'" lakes_110m.json ne_110m_lakes.shp
+    ogr2ogr -f GeoJSON -simplify 1 coastline_tiny.json ne_110m_coastline.shp
+    ogr2ogr -f GeoJSON -simplify 1 -where "scalerank < 2 AND admin='admin-0'" lakes_tiny.json ne_110m_lakes.shp
+    topojson -o earth-topo.json coastline_50m.json coastline_110m.json lakes_50m.json lakes_110m.json
+    topojson -o earth-topo-mobile.json coastline_110m.json coastline_tiny.json lakes_110m.json lakes_tiny.json
     cp earth-topo*.json <earth-git-repository>/public/data/
 
 getting weather data

diff --git a/public/data/earth-topo-mobile.json b/public/data/earth-topo-mobile.json
diff --git a/public/data/earth-topo.json b/public/data/earth-topo.json
diff --git a/public/index.html b/public/index.html
@@ -39,9 +39,14 @@
     <div id="details">
         <p id="status"></p>
         <div id="location">
-            <span id="location-coord"></span>
-            <span id="location-close" class="invisible text-button"> ✕ </span>
-            <p id="location-value"></p>
+            <p>
+                <span id="location-coord"></span>
+                <span id="location-close" class="invisible text-button"> ✕ </span>
+            </p>
+            <p>
+                <span id="location-value"></span>
+                <span id="toggle-units" class="invisible text-button"></span>
+            </p>
         </div>
         <p id="start">
             <span id="show-menu" class="text-button">earth</span>

diff --git a/public/jp/index.html b/public/jp/index.html
@@ -39,9 +39,14 @@
     <div id="details">
         <p id="status"></p>
         <div id="location">
-            <span id="location-coord"></span>
-            <span id="location-close" class="invisible text-button"> ✕ </span>
-            <p id="location-value"></p>
+            <p>
+                <span id="location-coord"></span>
+                <span id="location-close" class="invisible text-button"> ✕ </span>
+            </p>
+            <p>
+                <span id="location-value"></span>
+                <span id="toggle-units" class="invisible text-button"></span>
+            </p>
         </div>
         <p id="start">
             <span id="show-menu" class="text-button">地球</span>

diff --git a/public/libs/earth/1.0.0/earth.js b/public/libs/earth/1.0.0/earth.js
@@ -215,12 +215,17 @@
         return µ.loadJson(resource).then(function(topo) {
             if (cancel.requested) return null;
             log.time("building meshes");
-            var lo = topojson.feature(topo, µ.isMobile() ? topo.objects.coastline_tiny : topo.objects.coastline_110m);
-            var hi = topojson.feature(topo, µ.isMobile() ? topo.objects.coastline_110m : topo.objects.coastline_50m);
+            var o = topo.objects;
+            var coastLo = topojson.feature(topo, µ.isMobile() ? o.coastline_tiny : o.coastline_110m);
+            var coastHi = topojson.feature(topo, µ.isMobile() ? o.coastline_110m : o.coastline_50m);
+            var lakesLo = topojson.feature(topo, µ.isMobile() ? o.lakes_tiny : o.lakes_110m);
+            var lakesHi = topojson.feature(topo, µ.isMobile() ? o.lakes_110m : o.lakes_50m);
             log.timeEnd("building meshes");
             return {
-                boundaryLo: lo,
-                boundaryHi: hi
+                coastLo: coastLo,
+                coastHi: coastHi,
+                lakesLo: lakesLo,
+                lakesHi: lakesHi
             };
         });
     }
@@ -293,6 +298,7 @@
 
         var path = d3.geo.path().projection(globe.projection).pointRadius(7);
         var coastline = d3.select(".coastline");
+        var lakes = d3.select(".lakes");
         d3.selectAll("path").attr("d", path);  // do an initial draw -- fixes issue with safari
 
         // Throttled draw method helps with slow devices that would get overwhelmed by too many redraw events.
@@ -309,14 +315,16 @@
         dispatch.listenTo(
             inputController, {
                 moveStart: function() {
-                    coastline.datum(mesh.boundaryLo);
+                    coastline.datum(mesh.coastLo);
+                    lakes.datum(mesh.lakesLo);
                     rendererAgent.trigger("start");
                 },
                 move: function() {
                     doDraw_throttled();
                 },
                 moveEnd: function() {
-                    coastline.datum(mesh.boundaryHi);
+                    coastline.datum(mesh.coastHi);
+                    lakes.datum(mesh.lakesHi);
                     d3.selectAll("path").attr("d", path);
                     rendererAgent.trigger("render");
                 },
@@ -633,21 +641,34 @@
         d3.select("#data-layer").text(recipe.description);
     }
 
+    function showLocationValue(wind) {
+        var units = d3.select("#location-value").classed("kn") ? "kn" : "m/s";
+        d3.select("#location-value").text(µ.formatVector(wind, units));
+        d3.select("#toggle-units")
+            .text("⇄ " + (units === "kn" ? "m/s" : "kn"))
+            .classed("invisible", false);
+        d3.select("#toggle-units").on("click", function() {
+            d3.select("#location-value").classed("kn", !d3.select("#location-value").classed("kn"));
+            showLocationValue(wind);
+        });
+    }
+
     function showLocationDetails(point, coord) {
         var grid = gridAgent.value(), field = fieldAgent.value();
         if (!grid || !field) return;
         var λ = coord[0], φ = coord[1], wind = grid.interpolate(λ, φ);
         if (µ.isValue(wind) && field(point[0], point[1])[2] !== null) {
             d3.select("#location-coord").text(µ.formatCoordinates(λ, φ));
-            d3.select("#location-value").text(µ.formatVector(wind));
             d3.select("#location-close").classed("invisible", false);
+            showLocationValue(wind);
         }
     }
 
     function clearLocationDetails() {
         d3.select("#location-coord").text("");
-        d3.select("#location-value").text("");
         d3.select("#location-close").classed("invisible", true);
+        d3.select("#location-value").text("");
+        d3.select("#toggle-units").classed("invisible", true);
         d3.select(".location-mark").remove();
     }
 

diff --git a/public/libs/earth/1.0.0/globes.js b/public/libs/earth/1.0.0/globes.js
@@ -180,6 +180,8 @@ var globes = function() {
                     .attr("d", path);
                 mapSvg.append("path")
                     .attr("class", "coastline");
+                mapSvg.append("path")
+                    .attr("class", "lakes");
                 foregroundSvg.append("use")
                     .attr("xlink:href", "#sphere")
                     .attr("class", "foreground-sphere");
@@ -258,6 +260,8 @@ var globes = function() {
                     .attr("d", path);
                 mapSvg.append("path")
                     .attr("class", "coastline");
+                mapSvg.append("path")
+                    .attr("class", "lakes");
                 foregroundSvg.append("use")
                     .attr("xlink:href", "#sphere")
                     .attr("class", "foreground-sphere");
@@ -307,6 +311,9 @@ var globes = function() {
                 mapSvg.append("path")
                     .attr("class", "coastline")
                     .attr("clip-path", "url(#clip)");
+                mapSvg.append("path")
+                    .attr("class", "lakes")
+                    .attr("clip-path", "url(#clip)");
                 foregroundSvg.append("use")
                     .attr("xlink:href", "#sphere")
                     .attr("class", "foreground-sphere");

diff --git a/public/libs/earth/1.0.0/micro.js b/public/libs/earth/1.0.0/micro.js
@@ -12,7 +12,7 @@ var µ = function() {
     var τ = 2 * Math.PI;
     var H = Math.pow(10, -5.2);
     var DEFAULT_CONFIG = "current/wind/isobaric/1000hPa/orthographic";
-    var TOPOLOGY = isMobile() ? "/data/earth-topo-mobile.json" : "/data/earth-topo.json";
+    var TOPOLOGY = isMobile() ? "/data/earth-topo-mobile.json?v2" : "/data/earth-topo.json?v2";
 
     /**
      * @returns {Boolean} true if the specified value is truthy.
@@ -206,10 +206,11 @@ var µ = function() {
      * Returns a human readable string for the provided rectangular wind vector.
      * See http://mst.nerc.ac.uk/wind_vect_convs.html.
      */
-    function formatVector(wind) {
+    function formatVector(wind, units) {
         var d = Math.atan2(-wind[0], -wind[1]) / τ * 360;  // calculate into-the-wind cardinal degrees
         var wd = Math.round((d + 360) % 360 / 5) * 5;  // shift [-180, 180] to [0, 360], and round to nearest 5.
-        return wd.toFixed(0) + "º @ " + wind[2].toFixed(1) + " m/s";
+        var mag = units === "kn" ? (wind[2] * 1.943844).toFixed(0) : wind[2].toFixed(1);  // either knots or m/s
+        return wd.toFixed(0) + "º @ " + mag + " " + units;
     }
 
     /**

diff --git a/public/styles/styles.css b/public/styles/styles.css
@@ -132,7 +132,7 @@ body {
  * SVG Element Styling
  **************************************************************************************************/
 
-.coastline {
+.coastline, .lakes {
     stroke: #ffffff;
     stroke-width: 1.0;
     fill: none;

diff --git a/public/templates/index.html b/public/templates/index.html
@@ -43,9 +43,14 @@
     <div id="details">
         <p id="status"></p>
         <div id="location">
-            <span id="location-coord"></span>
-            <span id="location-close" class="invisible text-button"> ✕ </span>
-            <p id="location-value"></p>
+            <p>
+                <span id="location-coord"></span>
+                <span id="location-close" class="invisible text-button"> ✕ </span>
+            </p>
+            <p>
+                <span id="location-value"></span>
+                <span id="toggle-units" class="invisible text-button"></span>
+            </p>
         </div>
         <p id="start">
             <span id="show-menu" class="text-button">{{__('earth')}}</span>