diff --git a/docs/examples/extending/extending-2-layers.md b/docs/examples/extending/extending-2-layers.md index e447c2bfc..fb0639082 100644 --- a/docs/examples/extending/extending-2-layers.md +++ b/docs/examples/extending/extending-2-layers.md @@ -5,7 +5,7 @@ title: Extending Leaflet, New Layers
-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: … - + ### `L.GridLayer` and DOM elements Another extension method is `L.GridLayer.createTile()`. Where `L.TileLayer` assumes that there is a grid of images (as `` 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 `
`. 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 `` `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 diff --git a/docs/examples/extending/extending-3-controls.md b/docs/examples/extending/extending-3-controls.md index 527255bb2..f78eb9dec 100644 --- a/docs/examples/extending/extending-3-controls.md +++ b/docs/examples/extending/extending-3-controls.md @@ -5,7 +5,7 @@ title: Extending Leaflet, New Handlers and Controls
-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" %}