tutorials: Fixed broken relative links (#5099)

* Fixed broken realtive links

* Fixed links

* Convert relative link to ./

* Convert relative link to ./

docs/examples/extending/extending-2-layers.md

@@ -5,7 +5,7 @@ title: Extending Leaflet, New Layers
 
 <br>
 
-This tutorial assumes you've read the [theory of Leaflet class inheritance](examples/extending/extending-1-classes.html).
+This tutorial assumes you've read the [theory of Leaflet class inheritance](./extending-1-classes.html).
 
 In Leaflet, a "layer" is anything that moves around when the map is moved around. Before seeing how to create them from scratch, it's easier to explain how to do simple extensions.
 
@@ -30,7 +30,7 @@ Let's illustrate with a custom `L.TileLayer` that will display random kitten ima
     L.tileLayer.kitten = function() {
         return new L.TileLayer.Kitten();
     }
-    
+
     L.tileLayer.kitten().addTo(map);
 
 {% include frame.html url="kittenlayer.html" %}
@@ -65,7 +65,7 @@ And then, include that file when showing a map:
 	</script>
 	…
 
-    
+
 ### `L.GridLayer` and DOM elements
 
 Another extension method is `L.GridLayer.createTile()`. Where `L.TileLayer` assumes that there is a grid of images (as `<img>` elements), `L.GridLayer` doesn't assume that - it allows creating grids of any kind of [HTML Elements](https://developer.mozilla.org/en-US/docs/Web/HTML/Element).
@@ -82,11 +82,11 @@ An example of a custom `GridLayer` is showing the tile coordinates in a `<div>`.
 			return tile;
 		}
 	});
-	
+
 	L.gridLayer.debugCoords = function(opts) {
 		return new L.GridLayer.DebugCoords(opts);
 	};
-	
+
 	map.addLayer( L.gridLayer.debugCoords() );
 
 
@@ -96,11 +96,11 @@ If the element has to do some asynchronous initialization, then use the second f
 		var tile = document.createElement('div');
 		tile.innerHTML = [coords.x, coords.y, coords.z].join(', ');
 		tile.style.outline = '1px solid red';
-		
+
 		setTimeout(function () {
 			done(null, tile);	// Syntax is 'done(error, tile)'
 		}, 500 + Math.random() * 1500);
-		
+
 		return tile;
 	}
 
@@ -113,19 +113,19 @@ A very basic `<canvas>` `GridLayer` looks like:
 	L.GridLayer.CanvasCircles = L.GridLayer.extend({
 		createTile: function (coords) {
 			var tile = document.createElement('canvas');
-			
+
 			var tileSize = this.getTileSize();
 			tile.setAttribute('width', tileSize.x);
 			tile.setAttribute('height', tileSize.y);
-			
+
 			var ctx = tile.getContext('2d');
-			
+
 			// Draw whatever is needed in the canvas context
 			// For example, circles which get bigger as we zoom in
 			ctx.beginPath();
 			ctx.arc(tileSize.x/2, tileSize.x/2, 4 + coords.z*4, 0, 2*Math.PI, false);
 			ctx.fill();
-			
+
 			return tile;
 		}
 	});
@@ -168,26 +168,26 @@ In other words: the map calls the `onAdd()` method of the layer, then the layer
 		onAdd: function(map) {
 			var pane = map.getPane(this.options.pane);
 			this._container = L.DomUtil.create(…);
-			
+
 			pane.appendChild(this._container);
-			
+
 			// Calculate initial position of container with `L.Map.latLngToLayerPoint()`, `getPixelOrigin()` and/or `getPixelBounds()`
-			
+
 			L.DomUtil.setPosition(this._container, point);
-			
+
 			// Add and position children elements if needed
-			
+
 			map.on('zoomend viewreset', this._update, this);
 		},
-		
+
 		onRemove: function(map) {
 			L.DomUtil.remove(this._container);
 			map.off('zoomend viewreset', this._update, this);
 		},
-		
+
 		_update: function() {
 			// Recalculate position of container
-			
+
 			L.DomUtil.setPosition(this._container, point);        
 
 			// Add/remove/reposition children elements if needed

docs/examples/extending/extending-3-controls.md

@@ -5,7 +5,7 @@ title: Extending Leaflet, New Handlers and Controls
 
 <br>
 
-This tutorial assumes you've read the [theory of Leaflet class inheritance](examples/extending/extending-1-classes.html).
+This tutorial assumes you've read the [theory of Leaflet class inheritance](./extending-1-classes.html).
 
 In Leaflet, a "layer" is anything that moves with the map. In contraposition to that, a "control" is a HTML element that remains static relative to the map container, and a "handler" is a piece of invisible code that changes the map's behaviour.
 
@@ -19,11 +19,11 @@ Handlers are relatively simple: they just need a `addHooks()` method (which runs
 		addHooks: function() {
 			L.DomEvent.on(document, 'eventname', this._doSomething, this);
 		},
-	
+
 		removeHooks: function() {
 			L.DomEvent.off(document, 'eventname', this._doSomething, this);
 		},
-		
+
 		_doSomething: function(event) { … }
 	});
 
@@ -33,11 +33,11 @@ This can be illustrated with a simple handler to pan the map when a mobile devic
 		addHooks: function() {
 			L.DomEvent.on(window, 'deviceorientation', this._tilt, this);
 		},
-	
+
 		removeHooks: function() {
 			L.DomEvent.off(window, 'deviceorientation', this._tilt, this);
 		},
-		
+
 		_tilt: function(ev) {
 			// Treat Gamma angle as horizontal pan (1 degree = 1 pixel) and Beta angle as vertical pan
 			this._map.panBy( L.point( ev.gamma, ev.beta ) );
@@ -49,7 +49,7 @@ The handler can be attached to the map using `map.addHandler('tilt', L.TiltHandl
 	L.Map.addInitHook('addHandler', 'tilt', L.TiltHandler);
 
 Our handler can now be enabled by running `map.tilt.enable()` and disabled by `map.tilt.disable()`
-	
+
 Moreover, if the map has a property named the same as the handler, then that handler will be enabled by default if that options is `true`, so this will enable our handler by default:
 
 	var map = L.map('mapDiv', { tilt: true });
@@ -71,13 +71,13 @@ The simplest example of a custom control would be a watermark, which is just an
 	L.Control.Watermark = L.Control.extend({
 		onAdd: function(map) {
 			var img = L.DomUtil.create('img');
-			
+
 			img.src = '../../docs/images/logo.png';
 			img.style.width = '200px';
-			
+
 			return img;
 		},
-		
+
 		onRemove: function(map) {
 			// Nothing to do here
 		}
@@ -86,7 +86,7 @@ The simplest example of a custom control would be a watermark, which is just an
 	L.control.watermark = function(opts) {
 		return new L.Control.Watermark(opts);
 	}
-	
+
 	L.control.watermark({ position: 'bottomleft' }).addTo(map);
 
 {% include frame.html url="watermark.html" %}