How to get canvas from tileLayer Leaflet 1.0

Question

I'm using the Leaflet.VectorGrid plugin to draw tiles sliced via geojson-vt in Leaflet 1.0.

I want to add a gradient to paths while drawing. I found code on stackoverflow for adding gradient along a path but it needs a canvas.

My question is: how to get a reference to the canvas, or its context ( ctx ) to draw on it?

Here is my code to add a tileLayer:

var tileLayer = L.vectorGrid.slicer(data, {
        rendererFactory: L.canvas.tilee,
        vectorTileLayerStyles: {
            sliced: function(properties, zoom) {                    
                var endColor=70;       

                // var grad = ctx.createLinearGradient(begin[0], begin[1], end[0], end[1]);
                // grad.addColorStop(0, begin[2]);
                // grad.addColorStop(1, end[2]);
                // ctx.strokeStyle = grad;

                return {                        
                    stroke: true,
                    fill: true,
                    color: endColor < 20? 'red' :
                            endColor < 50? 'orange' :
                            endColor < 70? 'yellow' :
                            endColor < 100? 'green' : 'blue',/
                    weight: 5,
                }
            }
        }

    });

Answer 1

I'm the creator of Leaflet.VectorGrid.

My question is: how to get a reference to the canvas, or its context (ctx) to draw on it?

The answer is: you don't . The Leaflet code is structured in a way that abstracts the canvas context away. The goal of this design is to let the user focus on the geometries and not on the rendering, and provide cross-compatibility thanks to dual SVG support. SVG-only or canvas-only features are discouraged.

Furthermore, canvases in Leaflet.VectorGrid inherit from L.Canvas . Note that vanilla L.Canvas does not have support for gradients along lines, so you should focus on using a plugin that allows for gradients on polylines , and only then worry about how to make that work with vector tiles.

That will involve understanding how both plugins monkey-patch the Leaflet classes, in which order, and how the class inheritances are handled.

And once you have understand that, you will have to worry about instantiating L.Hotline s from within the L.GeoJSON s that are instantiated within the sliced tiles.

TL;DR: Read and understand the code for Leaflet.VectorGrid and Leaflet.Hotline.