full redo

hrwgc · Aug 5, 2013 · b56a4d1 · b56a4d1
1 parent 73d5f21
commit b56a4d1
Show file tree

Hide file tree

Showing 8 changed files with 950 additions and 42 deletions.
diff --git a/_includes/rover.js b/_includes/rover.js
@@ -3,47 +3,14 @@
   var zoomout=3000;
   var currentLocation = 0;
 
-function cycle(markers) {
-    var i = 0;
-    function run() {
-        var count = Object.keys(markers._layers).length
-        if (++i > count - 1) i = 0;
-            var feat = markers._layers[parseInt(Object.keys(points._layers)[i])]
-            map.addLayer(feat)
-            map.setView(markers._layers[parseInt(Object.keys(points._layers)[i])].getLatLng(),18);
-            document.getElementById('count').innerHTML = ('<div class="clearfix"><a href="http://mars.jpl.nasa.gov/msl/multimedia/raw/test/?rawid=' 
-                + feat.feature.properties.itemname 
-                + '"  target="_blank"><img src="' 
-                + feat.feature.properties.image 
-                + '" height="400px"/></a><p class="item-date">' + feat.feature.properties.arrivaltime + '</p></div>') || ''
-                window.setTimeout(run, 2000);
-    };
-    run();
-}
+$('body').append('<div class="map-ui">')
 
 $('body').append("<div id='count' style='z-index:90000;position:fixed'></div>")
 
-    $.getJSON('/planets/js/curiosity-path.geojson', function(geojson) {
-        var layer = L.geoJson(geojson, {
-            style: getStyle
-       });
-       map.addLayer(layer).fitBounds(layer.getBounds())
-    });
-    var cData;
-    $.getJSON('/planets/js/locations.geojson', function(cLocations) {
-
-        var arr = cLocations.features.filter(function (value, index, array) {
-                    return (value.properties.image.length > 0) ? true : false;
-                });
-        points = L.geoJson(arr, {
-            style: getStyle //,
-        });
-        points._leaflet_id = 'points';
-       map.fitBounds(points.getBounds())
-       cycle(points)
-    })
 
-    function getStyle() {
+
+
+   function getStyle() {
         return {
             color: '#ffcc00',
             opacity: 0.2,
@@ -53,3 +20,85 @@ $('body').append("<div id='count' style='z-index:90000;position:fixed'></div>")
         };
     }
 
+var cData;
+$.getJSON('/planets/js/locations.geojson', function(geoJson) {
+    var map, markerLayer;
+    function BuildImages() {
+       $('#pictures').empty();
+        markerLayer.setFilter(function(f) {
+            f.properties['marker-symbol'] = 'marker'
+            f.properties['marker-color'] = '#255697'
+            if(f.properties['image'].length > 0 ){
+                var n = f.properties,
+                 d = new Date(n['arrivaltime']).toDateString(),
+                $item = $('<div id="' + n['uid'] + '" class="item pad2" data-coords="' + f.geometry.coordinates + '">');
+
+                $item.append('<h2>Sol '
+                    + parseInt(n.startsol) + '</h2>');
+console.log(n.endsol)
+                $item.append(
+                    '<a href="http://mars.jpl.nasa.gov/msl/multimedia/raw/test/?rawid=' 
+                    + n.itemname 
+                    + '"  target="_blank"><img src="' 
+                    + n.image 
+                    + '" class="full"/></a><p><a href="http://mars.jpl.nasa.gov/msl/multimedia/raw/test/?s='
+                    + parseInt(n.startsol,10)
+
+                    + '&camera=MAST_" target="_blank">All images from Sol '
+                    + parseInt(n.startsol,10) 
+                    + '</a></p>') || ''
+                $item.append(
+                    '<table><tbody>'
+                    + '<tr><td>Arrival Time</td><td>' + d +'</td></tr>'
+                     + '<tr><td>Contributor</td><td>' + n.contributor +'</td></tr>'
+                    + '<tbody></table>');
+
+
+                $('#pictures').append($item);
+                return true;
+            }
+        });
+
+        $('#pictures').scrollTo(0);
+
+        var bounds = markerLayer.getBounds();
+        map.fitBounds(bounds);
+
+        // Re-init newspapers
+        $('#pictures .item').on('mouseover',function(){
+            var coords = $(this).data('coords').split(',');
+            map.setView(new L.LatLng(coords[1],coords[0]),18);
+        });
+    }
+
+    // ----------------------------------------------------------------------
+    // When document is ready, start everything up
+
+$(document).ready(function() {
+
+    // Set up the map, set the zoom level, then add points from above array
+    map = L.mapbox.map('map', 'herwig.mars-terrain,herwig.hirise-ortho,herwig.hirise-ortho-psp,herwig.curiosity-path-imagery', {
+        minZoom: 8,
+        maxZoom: 18,
+    });
+    map.setView([39, -90.7372], 13);
+    $.getJSON('/planets/js/curiosity-path.geojson', function(geojson) {
+    var layer = L.geoJson(geojson, {
+        style: getStyle
+       });
+       map.addLayer(layer).fitBounds(layer.getBounds())
+    });
+
+    markerLayer = L.mapbox.markerLayer(geoJson).addTo(map);
+
+    // Filter the map by the initial active year
+    BuildImages();
+
+    markerLayer.on('click', function(e) {
+        e.layer.unbindPopup();
+        var n = e.layer.feature.properties;
+        $('#pictures').scrollTo('#' + n['uid'], 500 );
+    });
+});
+})
+
diff --git a/_layouts/rover.html b/_layouts/rover.html
@@ -0,0 +1,128 @@
+---
+---
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset=utf-8 />
+<meta name='viewport' content='width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0' />
+<meta name='apple-mobile-web-app-status-bar-style' content='black' />
+<meta name='apple-mobile-web-app-capable' content='yes' />
+<link rel='shortcut icon' href='' type='image/x-icon' />
+<title>{% if page.url != '/index.html' %}| {{page.title}}{% endif %}</title>
+<!-- <link href='http://api.tiles.mapbox.com/mapbox.js/v0.6.7/mapbox.css' rel='stylesheet' /> -->  
+<link href='//api.tiles.mapbox.com/mapbox.js/v1.3.1/mapbox.css' rel='stylesheet' />
+<link href='http://fonts.googleapis.com/css?family=Roboto:400,300,700italic' rel='stylesheet' type='text/css'>
+<link href='{{site.baseurl}}/fonts/stylesheet.css' rel='stylesheet'>
+<script src='//api.tiles.mapbox.com/mapbox.js/v1.3.1/mapbox.js'></script>
+<script src='{{site.baseurl}}/site.js'></script>
+    <link href="{{site.baseurl}}/css/fresh.css" rel="stylesheet" />
+    <link href="{{site.baseurl}}/css/modal.css" rel="stylesheet" />
+
+    <link href="{{site.baseurl}}/css/rover.css" rel="stylesheet" />
+
+
+</head>
+
+<body class='rover'>
+ <div class='black clearfix' id="header">
+        <div class="col12">
+          <div class="col6">
+            <h1>{{page.title}}</h1>
+        </div>
+        <div class="col6">
+          <a href='#' id='learn-more'>Learn more</a>
+        </div>
+    </div>
+</div>
+
+
+    <div id="pane">
+        <div id="map"></div>
+        <div id="pictures" class="black"></div>
+    </div>
+
+  <div id='modal'>
+  <div class='popup'>
+  <div class='header'>
+    <div class='inner'>
+      <h2>{{ page.title }}</h2>
+      <a class='close' href='#close'>&times;</a>
+    </div>
+  </div>
+  <div class='content prose pad1'>
+{% if page.description != empty %}
+
+<h2>Description</h2>
+{{ page.description }}
+{% endif %}
+
+{% if page.sources | size > 0 %}
+<h2>About the Data</h2>
+
+{% for source in page.sources %}
+<div class='source-entry'>
+<h4 class='data-title'> <a class='' href='{{source.url}}' target="_blank"> {{source.title}}</a></h4>
+<p>{{source.description | markdownify}}</p>
+   {% if source.csv | size > 0 %}
+   <a class='action data csv' href='{{source.csv}}'><span class='csv'></span>CSV</a>
+   {% endif %}
+   {% if source.pdf | size > 0 %}
+   <a class='action data pdf' href='{{source.pdf}}'><span class='pdf'></span>PDF</a>
+   {% endif %}
+    {% if source.url | size > 0 %}
+   <a class='action data link' href='{{source.url}}'  target="_blank"><span class='link'></span>www</a>
+   {% endif %}
+</div>
+{% endfor %}
+{% endif %}
+{% if page.content != empty %}
+<h2>Methodology</h2>
+{{ page.content | replace: '!SITE.GITHUB!', site.github  | markdownify }}
+{% endif %}
+
+</div>
+</div>
+</div>
+
+    <script src="{{site.baseurl}}/js/jquery.scrollTo.min.js"></script>
+
+{% if page.map != empty %}
+
+<script>
+$(function () {
+
+  $('a#learn-more').bind('click', openModal);
+
+  function openModal() {
+    $('#overlay,#modal').fadeIn('fast');
+    window.location.hash = 'learn-more'
+    return false;
+  }
+
+  if (location.hash === '#learn-more') {
+    openModal();
+  }
+
+  $('.close').click(function (e) {
+    $('#overlay, #modal').fadeOut();
+    window.location.hash = '';
+    return false;
+  });
+
+
+{% endif %}
+  $('#toggle').click(function(){
+    $('.header').toggleClass('active-header', 20000 );
+    $('#my-slider').toggle()
+  })
+
+{% if page.js %}
+{% include rover.js %}
+{% endif %}
+})
+
+</script>
+
+</body>
+</html>
+
diff --git a/_posts/0200-01-01-curiosity-rover.html b/_posts/0200-01-01-curiosity-rover.html
@@ -1,5 +1,5 @@
 ---
-layout: maps
+layout: rover
 category: map
 title: "Curiosity Rover Images"
 subtitle: ""
@@ -15,8 +15,11 @@
   - min: 10
     max: 18
 sources:
-  - title: ""
-    url: ""
-    description: ""
+  - title: "HiRISE Orthoimagery"
+    url: "http://hirise.lpl.arizona.edu"
+    description: "<p>This layer shows 25cm resolution HiRISE orthoimagery of Gale Crater. Imagery provided by NASA JPL/University of Arizona <a href='http://hirise.lpl.arizona.edu'>High Resolution Imaging Experiment</a>, on board the Mars Reconnaisance Orbiter.</p>"
+  - title: "Gazetteer of Planetary Nomenclature"
+    url: "http://planetarynames.wr.usgs.gov/Page/Members"
+    description: "The source for the location dataset is the International Astronomical Union (IAU) Working Group for Planetary System Nomenclature (WGPSN)."
 description: "<p><p>"
 ---