Add another tutorial.
Simplify the required pug template a little more.
MODIFY
tests/tutorials.js
tests/tutorials.js
@@ -37,7 +37,7 @@ describe('tutorials', function () {
* function's done callback, so reverse them so that they run in the
* order written. */
tests = base$(base$('.codeblock_test').get().reverse());
- tests.each(function () {
+ tests.each(function (testIdx) {
var test = base$(this),
codeblock = test.prevAll('.codeblock').eq(0),
target = base$('#' + codeblock.attr('target')),
@@ -77,12 +77,20 @@ describe('tutorials', function () {
});
};
/* If we have already run the specific codeblock, don't run it
- * again. If not, click run and wait for the results. */
- if (codeblock.is(base$('.codeblock.active:last'))) {
+ * again. If not, click run and wait for the results. On the
+ * first test (which will be the last added), always force the code
+ * block to run, as it ensures that we catch the load event. */
+ if (codeblock.is(base$('.codeblock.active:last')) && testIdx !== tests.length - 1) {
onCodeLoaded();
} else {
target.one('load', onCodeLoaded);
+ if (testIdx !== tests.length - 1) {
codeblock.find('.codeblock_run').click();
+ } else {
+ var evt = base$.Event('click');
+ evt.shiftKey = true;
+ codeblock.find('.codeblock_run').trigger(evt);
+ }
}
};
});

MODIFY
tutorials/basic/index.pug
tutorials/basic/index.pug
extends ../common/index.pug
-block mainContent
- #maincontent
- #tutorial
+block mainTutorial
:markdown-it
# Tutorial - Simple Map
We need a little bit of html to import the geojs library and to create a div to show our map:
@@ -73,6 +71,3 @@ block mainContent
'map.layers()[0] instanceof geo.osmLayer',
'map.zoom() === 14'
])
-
-
- iframe#workframe

MODIFY
tutorials/common/index.pug
tutorials/common/index.pug
@@ -114,4 +114,7 @@ html(lang="en")
// Add the default main content element
block mainContent
- #map
+ #maincontent
+ #tutorial
+ block mainTutorial
+ iframe#workframe

MODIFY
tutorials/common/tutorials.js
tutorials/common/tutorials.js
@@ -36,14 +36,19 @@ var processBlockInfo = {
* @param {boolean} notLast If true, don't force this to be the last active
* block of code for this set.
* @param {boolean} debounce If true, debounce the update.
+ * @param {boolean} forceRun If true, rerun, even if we think it isn't
+ * necessary.
*/
-function run_block(selector, notLast, debounce) {
+function run_block(selector, notLast, debounce, forceRun) {
var elem = $(selector).closest('.codeblock'),
target = elem.attr('target'),
parentstep = elem.attr('parentstep'),
group = $('.codeblock[target="' + target + '"]'),
activeGroup = elem,
parents;
+ if (forceRun) {
+ processBlockInfo.lastsrc = '';
+ }
notLast = notLast && elem.hasClass('active');
if (!notLast) {
while (parentstep) {
@@ -233,7 +238,7 @@ function start_tutorial(useCodeMirror) {
run_block(evt.target, true);
});
$('.codeblock_run').click(function (evt) {
- run_block(evt.target);
+ run_block(evt.target, undefined, undefined, evt.shiftKey);
});
}

ADD
tutorials/tile_source/index.pug
+extends ../common/index.pug
+
+block mainTutorial
+ :markdown-it
+ # Tutorial - Changing Tile Source
+ When a map is created with teh default map tile layer, it defaults to using tiles from [tile.openstreetmap.org]().
+
+ +codeblock('javascript', 1, undefined, true).
+ var map = geo.map({
+ node: "#map"
+ });
+ var layer = map.createLayer('osm');
+ +codeblock_test('map has one osm layer from openstreetmap', [
+ 'map.layers().length === 1',
+ 'map.layers()[0] instanceof geo.osmLayer',
+ 'layer.url().match(/openstreetmap/)'
+ ])
+
+ :markdown-it
+ You can use a different tile source by changing the URL used by the tile layer. You should also set the attribution.
+
+ +codeblock('javascript', 2).
+ layer.url('http://tile.stamen.com/toner-lite/{z}/{x}/{y}.png')
+ layer.attribution(
+ 'Map tiles by <a href="http://stamen.com">Stamen Design</a>, ' +
+ 'under <a href="http://creativecommons.org/licenses/by/3.0">CC BY 3.0</a>. ' +
+ 'Data by <a href="http://openstreetmap.org">OpenStreetMap</a>, ' +
+ 'under <a href="http://www.openstreetmap.org/copyright">ODbL</a>.')
+ +codeblock_test('url is from stamen.com',
+ 'layer.url().match(/stamen/)'
+ )
+
+ :markdown-it
+ We could have initially created the layer with a different tile server:
+
+ +codeblock('javascript', 3, null, false, 'Step 1-B').
+ var map = geo.map({
+ node: "#map"
+ });
+ var layer = map.createLayer('osm', {
+ url: 'http://tile.stamen.com/toner-lite/{z}/{x}/{y}.png',
+ attribution: 'Map tiles by <a href="http://stamen.com">Stamen Design</a>, under <a href="http://creativecommons.org/licenses/by/3.0">CC BY 3.0</a>. Data by <a href="http://openstreetmap.org">OpenStreetMap</a>, under <a href="http://www.openstreetmap.org/copyright">ODbL</a>.'
+ });
+ +codeblock_test('map has one osm layer from stamen', [
+ 'map.layers().length === 1',
+ 'map.layers()[0] instanceof geo.osmLayer',
+ 'layer.url().match(/stamen/)'
+ ])

ADD
tutorials/tile_source/tutorial.json
+{
+ "title": "Tutorial - Changing Tile Source",
+ "hideNavbar": true,
+ "tutorialCss": [],
+ "tutorialJs": [],
+ "about": {
+ "text": "Make a simple map and change the tile source."
+ }
+}

Add another tutorial.

Simplify the required pug template a little more.