diff --git a/tutorials/editor/tutorial.json b/tutorials/editor/tutorial.json
index 641276455a..d4b39060c2 100644
--- a/tutorials/editor/tutorial.json
+++ b/tutorials/editor/tutorial.json
@@ -2,6 +2,7 @@
"title": "Editor",
"hideNavbar": true,
"level": 10,
+ "order": 0,
"tutorialJs": ["editor.js"],
"about": {
"text": "Edit and save work in URL."
diff --git a/tutorials/editor3/editor.js b/tutorials/editor3/editor.js
new file mode 100644
index 0000000000..4ac38243df
--- /dev/null
+++ b/tutorials/editor3/editor.js
@@ -0,0 +1,7 @@
+/* global start_tutorial */
+
+$(function () {
+ /* start_tutorial has to be called explicitly when we are ready since we need
+ * to ask it to always keep url changes. */
+ start_tutorial(undefined, true);
+});
diff --git a/tutorials/editor3/index.pug b/tutorials/editor3/index.pug
new file mode 100644
index 0000000000..c8ea2d2702
--- /dev/null
+++ b/tutorials/editor3/index.pug
@@ -0,0 +1,69 @@
+extends ../common/index.pug
+
+block mainTutorial
+ :markdown-it
+ # Editor with HTML and CSS
+ Any changes made will be stored in the URL whenever the code is run. This can be sent as a link, bookmarked, or otherwise shared.
+
+ You can interact with the code through the javascript console by accessing the top-level variables in the `tutorial` global parameter.
+
+ :markdown-it
+ **HTML**
+ +codeblock('html', 1).
+
+
+
+
+
+
+
+
+
+
+
+
+
+ :markdown-it
+ **CSS**
+ +codeblock('css', 2).
+ html,body,#map{
+ width: 100%;
+ height: 100%;
+ padding: 0;
+ margin: 0;
+ overflow: hidden;
+ }
+ #info {
+ position: absolute;
+ top: 0;
+ right: 0;
+ background: rgba(255,255,255,0.75);
+ padding: 2px;
+ }
+
+ :markdown-it
+ **Javascript**
+ +codeblock('javascript', 3, undefined, true).
+ var map = geo.map({
+ node: "#map",
+ center: {x: 0.2, y: 49.5},
+ zoom: 11
+ });
+ var layer = map.createLayer('osm');
+ $('#info').text('GeoJS version: ' + geo.version);
+ map.geoOn(geo.event.mousemove, function (evt) {
+ $('#info').text('x: ' + evt.geo.x.toFixed(6) + ', y: ' + evt.geo.y.toFixed(6));
+ })
+ +codeblock_test('map has one osm layer from openstreetmap', [
+ 'map.layers().length === 1',
+ 'map.layers()[0] instanceof geo.osmLayer',
+ 'layer.url().match(/openstreetmap/)'
+ ])
+ +codeblock_test('map has a non-empty info div', [
+ '$("#info").text()'
+ ])
diff --git a/tutorials/editor3/thumb.jpg b/tutorials/editor3/thumb.jpg
new file mode 100644
index 0000000000..1ef691d5c9
Binary files /dev/null and b/tutorials/editor3/thumb.jpg differ
diff --git a/tutorials/editor3/tutorial.json b/tutorials/editor3/tutorial.json
new file mode 100644
index 0000000000..3729b3bffe
--- /dev/null
+++ b/tutorials/editor3/tutorial.json
@@ -0,0 +1,10 @@
+{
+ "title": "Editor with HTML and CSS",
+ "hideNavbar": true,
+ "level": 10,
+ "order": 1,
+ "tutorialJs": ["editor.js"],
+ "about": {
+ "text": "Edit and save work in URL. Edit the HTML to try different versions of GeoJS."
+ }
+}