Permalink
Browse files

full redo

  • Loading branch information...
1 parent 73d5f21 commit b56a4d194a76a27d81609647a466cd34bab597ba Chris Herwig committed Aug 5, 2013
Showing with 950 additions and 42 deletions.
  1. +86 −37 _includes/rover.js
  2. +128 −0 _layouts/rover.html
  3. +7 −4 _posts/0200-01-01-curiosity-rover.html
  4. +424 −0 css/fresh.css
  5. +106 −0 css/modal.css
  6. +189 −0 css/rover.css
  7. +7 −0 js/jquery.scrollTo.min.js
  8. +3 −1 site.css
View
@@ -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 );
+ });
+});
+})
+
View
@@ -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>
+
@@ -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>"
---
Oops, something went wrong.

0 comments on commit b56a4d1

Please sign in to comment.