Protobuf TMS URLs not working with Leaflet 1.0.2.

minus34 commented 7 years ago

I'm trying to display Protobuf tiles from Geoserver 2.11 using a TMS formatted URL. Setting the y value in the URL to {-y} to honour the orientation of the tile grid returns this error:

Util.js:167 Uncaught Error: No value provided for variable {-y}(…)
(anonymous function) @ Util.js:167
template @ Util.js:163
_getVectorTilePromise @ Leaflet.VectorGrid.bundled.js:1657
createTile @ Leaflet.VectorGrid.bundled.js:1302
_addTile @ GridLayer.js:747
_update @ GridLayer.js:644
_setView @ GridLayer.js:511
_resetView @ GridLayer.js:483
onAdd @ GridLayer.js:137
_layerAdd @ Layer.js:106
whenReady @ Map.js:1345addLayer @ Layer.js:164
addTo @ Layer.js:48
(anonymous function) @ (index):39

Code is below. Note: I don't have a public Geoserver 2.11 TMS URL for testing. The equivalent PNG TMS URL is in the code for direct comparison. It works with {-y} but the PBF equivalent doesn't.

<!DOCTYPE html>
<html>
<head>
    <title>TMS Test - Leaflet</title>

    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <link rel="stylesheet" href="https://unpkg.com/leaflet@1.0.2/dist/leaflet.css" />
    <script src="https://unpkg.com/leaflet@1.0.2/dist/leaflet-src.js"></script>
    <script src="https://unpkg.com/leaflet.vectorgrid@latest/dist/Leaflet.VectorGrid.bundled.js"></script>
</head>
<body>
    <div id="mapid" style="width: 100vw; height: 100vh"></div>

    <script>
        var map = L.map('mapid').setView([-33.85, 151.0], 12);

        var localities = L.tileLayer('http://localhost:8080/geoserver/gwc/service/tms/1.0.0/loceng%3Alocality_bdys_display@EPSG%3A900913@png/{z}/{x}/{-y}.png', {
            opacity: 0.4
        }).addTo(map);

        var url = 'http://localhost:8080/geoserver/gwc/service/tms/1.0.0/loceng%3Alocality_bdys_display@EPSG%3A900913@pbf/{z}/{x}/{-y}.pbf';

        var vectorTileOptions = {
            rendererFactory: L.svg.tile,
            vectorTileLayerStyles: {

                locality_bdys_display: {
                    color: '#ff0000',
                    fillColor: '#0000ff',
                    fillOpacity: 0.6,
                    fill: true,
                    stroke: true
                }
            }
        };
        var pbfLayer = L.vectorGrid.protobuf(url, vectorTileOptions).addTo(map);

    </script>
</body>
</html>

IvanSanchez commented 7 years ago

The problem is around https://github.com/Leaflet/Leaflet.VectorGrid/blob/master/src/Leaflet.VectorGrid.Protobuf.js#L26 , in the call to L.Util.Template inside _getVectorTilePromise.

A previous version of this plugin called L.TileLayer.prototype.getTileUrl() directly, but that caused a different set of problems.

You might want to have a look at the source code for L.TileLayer.prototype.getTileUrl(), copy the bits about -y into VectorGrid.Protobuf.js, test it out, and send a pull request to fix this.

IvanSanchez commented 7 years ago

Closing because #47 was merged.

Leaflet / Leaflet.VectorGrid

Protobuf TMS URLs not working with Leaflet 1.0.2. #46