initial implementation of tutorials page
MODIFY
_data/tutorials.yml
_data/tutorials.yml
-- id: heatmap
+- name: heatmap
title: Heatmap Feature
description: This example shows how to add a heatmap to a map.
- - id: deepzoom
+- name: deepzoom
title: Deepzoom tiled image example
description: Rendering a tiled image using the Deepzoom protocol.
-- id: geoJSON
+- name: geoJSON
title: GeoJSON file reader
description: Shows how to use the included geoJSON reader, and how to use the properties to adjust the style of the features. In this example, you can edit the json file while the features on the map update in response. You can also drop a new geoJSON file onto the text editor to load it.
-- id: hurricanes
+- name: hurricanes
title: Hurricane tracking data
description: Explore historic hurricane paths since 1980 on an interactive map.
-- id: legend
+- name: legend
title: Feature legends
description: This example shows how to create a legend to describe feature styles on a map.
-- id: lines
+- name: lines
title: Line Feature
description: This example shows the variations that are available for line features.
-- id: pixelmap
+- name: pixelmap
title: Pixelmap feature
description: This example shows how to use a pixelmap feature. The pixelmap colors areas based on an index derived from an image and some data per index.
-- id: polygons
+- name: polygons
title: Polygon features
description: This example shows how to add polygons to a map.
-- id: quads
+- name: quads
title: Quad features
description: This example shows how to add dynamic quads to a map.
-- id: reprojection
+- name: reprojection
title: Reproject tiles
description: This example shows how you can reproject tiles from one projection to another. The source tiles are in Web Mercator (EPSG:3857), but can be drawn in many different projections.
-- id: sld
+- name: sld
title: Adding styles to WMS raster layers
description: Rendering tiles from a WMS server by customizing the style.
-- id: tiles
+- name: tiles
title: Tile layer with controllable options
description: This example provides controls for changing many options on tile layers. The code and query parameters allow even more options to be adjusted.
-- id: transitions
+- name: transitions
title: Using animated transitions
description: Using animations to transition between points on a map.
-- id: widgets
+- name: widgets
title: Map Widgets
description: This example shows how the widgets API can be used to place elements on top of the map.
-- id: wms
+- name: wms
title: Rendering tiles from a WMS server
description: Rendering tiles from a WMS server by customizing the tile URL of an OSM layer.

MODIFY
_layouts/default.html
_layouts/default.html
<nav id="mainNav" class="navbar navbar-default navbar-custom navbar-fixed-top">
<div class="container">
<!-- Brand and toggle get grouped for better mobile display -->
- <div class="navbar-header page-scroll">
+ <div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
<span class="sr-only">Toggle navigation</span> Menu <i class="fa fa-bars"></i>
</button>
- <a class="navbar-brand page-scroll" href="/">GeoJS</a>
+ <a class="navbar-brand" href="/">GeoJS</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<li class="hidden">
<a href="#page-top"></a>
</li>
- <li>
- <a class="page-scroll" href="#services">Services</a>
- </li>
- <li>
- <a class="page-scroll" href="#portfolio">Portfolio</a>
+ <li class="{%if page.url == "/"%}active{%endif%}">
+ <a href="/">Welcome</a>
</li>
- <li>
- <a class="page-scroll" href="#about">About</a>
+ <li class="{%if page.url contains "tutorials"%}active{%endif%}">
+ <a href="/tutorials">Tutorials</a>
</li>
<li>
- <a class="page-scroll" href="#team">Team</a>
+ <a href="/examples">Examples</a>
</li>
<li>
- <a class="page-scroll" href="#contact">Contact</a>
+ <a href="http://geojs.readthedocs.io/en/latest/">Docs</a>
</li>
<li>
- <a class="page-scroll" href="/tutorials">Tutorials</a>
- </li>
- <li>
- <a class="page-scroll" href="/examples">Examples</a>
+ <a href="https://github.com/OpenGeoscience/geojs">Github</a>
</li>
</ul>
</div>
<!-- Bootstrap Core JavaScript -->
<script src="{{ "vendor/bootstrap/js/bootstrap.min.js" | relative_url }}"></script>
- <!-- Plugin JavaScript -->
- <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.3/jquery.easing.min.js" integrity="sha384-mE6eXfrb8jxl0rzJDBRanYqgBxtJ6Unn4/1F7q4xRRyIw7Vdg9jP4ycT7x1iVsgb" crossorigin="anonymous"></script>
-
<!-- Theme JavaScript -->
<script src="{{ "js/agency.js" | relative_url }}"></script>

MODIFY
css/main.scss
css/main.scss
---
---
+
+// overwrites
+
+.navbar-custom .nav li a{
+ text-transform: none;
+}
+// @media (min-width: 768px) {
+// .navbar-nav>li>a {
+// padding: 12px 10px;
+// }
+// }
+
+
+// main page
+
.content-wrapper {
- margin-top: 120px;
+ margin-top: 100px;
+}
+
+
+// tutorials page
+
+.tutorial-container{
+ // clear: both;
+ background-color: white;
+ padding: 25px 0;
+ border-bottom: 1px solid #eee;
+
+ .thumbnail-container{
+ // width: 250px;
+ // float: left;
+
+ img{
+ width: 100%;
+ border: 1px solid #eee;
+ border-radius: 2px;
+ }
+ }
+
+ .description{
+ margin-top:20px;
+ }
}
\ No newline at end of file

ADD
css/tutorials.scss
css/tutorials.scss
ADD
img/logo.png
img/logo.png
Binary files /dev/null and b/img/logo.png differ

ADD
img/logo_128.png
img/logo_128.png
Binary files /dev/null and b/img/logo_128.png differ

ADD
img/logo_256.png
img/logo_256.png
Binary files /dev/null and b/img/logo_256.png differ

MODIFY
js/agency.js
js/agency.js
(function($) {
"use strict"; // Start of use strict
- // jQuery for page scrolling feature - requires jQuery Easing plugin
- // $('a.page-scroll').bind('click', function(event) {
- // var $anchor = $(this);
- // $('html, body').stop().animate({
- // scrollTop: ($($anchor.attr('href')).offset().top - 50)
- // }, 1250, 'easeInOutExpo');
- // event.preventDefault();
- // });
-
- // Highlight the top nav as scrolling occurs
- $('body').scrollspy({
- target: '.navbar-fixed-top',
- offset: 51
- });
-
// Closes the Responsive Menu on Menu Item Click
$('.navbar-collapse ul li a').click(function(){
$('.navbar-toggle:visible').click();

MODIFY
tutorials.html
tutorials.html
---
layout: default
-title: Tutorials
-foo: title
+<!-- title: Tutorials -->
---
<div class="container">
- {% for tutorial_name in site.data.tutorial_order %}
- {% assign tutorial = site.tutorial | where: "name", tutorial_name | first %}
<div class="row">
- <div class="col-xs-12">
- <div class="tutorials">
- <>
+ <div class="col-md-8 col-md-offset-2">
+ <h2>Tutorials</h2>
+ {% for tutorial in site.data.tutorials %}
+ <div class="row tutorial-container">
+ <div class="col-sm-4 thumbnail-container">
+ <a href="{{"tutorial"|relative_url}}/{{tutorial.name}}">
<img src="{{"tutorial"|relative_url}}/{{tutorial.name}}/thumb.jpg">
- {{tutorial.title}} - {{tutorial.description}}
+ </a>
</div>
+ <div class="col-sm-8">
+ <a href="{{"tutorial"|relative_url}}/{{tutorial.name}}"><h4 class="title">{{tutorial.title}}</h4></a>
+ <div class="description">{{tutorial.description}}</div>
</div>
</div>
{% endfor %}
</div>
+ </div>
+</div>
\ No newline at end of file

initial implementation of tutorials page