Leaflet / Leaflet.VectorGrid

Display gridded vector data (sliced GeoJSON or protobuf vector tiles) in Leaflet 1.0.0
591 stars 192 forks source link

Uncaught TypeError: this._baseLayer.getURL is not a function #240

Closed cerodell closed 4 years ago

cerodell commented 4 years ago

Hello :)

I am using L.vectorGrid.slicer with topojson files (about 1.8MB in size). My goal is to use TimeDimension to allow the user to click through varied forecast times. I am trying this by extending the TimeDimension.Layer to include L.vectorGrid.slicer.

My issue is getting the base URL from the L.vectorGrid.slicer layer within the L.TimeDimension.Layer.VectorGrid.Slicer. I receive the following error: Uncaught TypeError: this._baseLayer.getURL is not a function

I think the source of my problem is how I initialize the base layer? I didn't use the fetch method to load the JSON like in this repos example. I have multiple forecasts products. With fetch, I found to have multiple vectorGrid.slicer layers I needed to add them to layer groups whereas the method below I don't. Wich is important when extending TimeDimension

I guess my question is how do you get the URL from the L.vectorGrid.slicer layer?

Any and all help is greatly appreciated!

var ffmc_topo_file = 'json/ffmc/FFMC_2020061800.geojson';

var json = $.getJSON({'url': ffmc_topo_file, 'async': false});  
// console.log(json);
json = JSON.parse(json.responseText); 
console.log(json);

var geo_json_ffmc = L.vectorGrid.slicer( json, {
    rendererFactory: L.canvas.tile,
    vectorTileLayerStyles:{
          "FFMC" : geo_json_styler
            }
        }
    ).setZIndex(1000)
IvanSanchez commented 4 years ago

I guess my question is how do you get the URL from the L.vectorGrid.slicer layer?

You don't, because there is none.

Leaflet.VectorGrid is based off L.GridLayer (which needs a createTile method to be implemented) and not off L.TileLayer (which needs a getTileUrl method to be implemented).

You see, the magic to fetch a tile from a sliced geojson happens in a createTile call at

https://github.com/Leaflet/Leaflet.VectorGrid/blob/83f320ebe97cd92321e66998694a4e8b225051a1/src/Leaflet.VectorGrid.Slicer.js#L100

...to send a message to a web worker, which then...

https://github.com/Leaflet/Leaflet.VectorGrid/blob/83f320ebe97cd92321e66998694a4e8b225051a1/src/slicerWebWorker.js#L29

... so there are no URLs at all when fetching tile data. I guess that you must rethink your approach.

cerodell commented 4 years ago

Thanks for the timely and thorough response @IvanSanchez !

I will be exploring L.vectorGrid.slicer embedded in a L.layerGroup to expand TimeDimension.Layer

Your L.vectorGrid.slicer is too awesome to give up on :)