Add a editor tutorial with CSS and HTML panes.
Default to showing geographic coordinates.
MODIFY
tutorials/editor/tutorial.json
tutorials/editor/tutorial.json
"title": "Editor",
"hideNavbar": true,
"level": 10,
+ "order": 0,
"tutorialJs": ["editor.js"],
"about": {
"text": "Edit and save work in URL."

ADD
tutorials/editor3/editor.js
+/* 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);
+});

ADD
tutorials/editor3/index.pug
+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).
+ <!DOCTYPE html>
+ <html>
+ <head>
+ <script type="text/javascript" src="../../built/geo.ext.min.js"></script>
+ <script type="text/javascript" src="../../built/geo.min.js"></script>
+ <!-- Use a specific version of GeoJS by requesting it from a CDN.
+ For instance, remove the local references, above, and
+ uncomment the following:
+ <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/geojs/0.15.1/geo.ext.min.js"></script>
+ <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/geojs/0.15.1/geo.min.js"></script>
+ -->
+ </head>
+ <body>
+ <div id="map"></div>
+ <div id="info"></div>
+ </body>
+ </html>
+
+ :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()'
+ ])

ADD
tutorials/editor3/thumb.jpg
tutorials/editor3/thumb.jpg
Binary files /dev/null and b/tutorials/editor3/thumb.jpg differ

ADD
tutorials/editor3/tutorial.json
+{
+ "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."
+ }
+}

Add a editor tutorial with CSS and HTML panes.

Default to showing geographic coordinates.