diff --git a/Leaflet.VectorTiles.js b/Leaflet.VectorTiles.js index 4193561..5045899 100644 --- a/Leaflet.VectorTiles.js +++ b/Leaflet.VectorTiles.js @@ -58,6 +58,7 @@ L.VectorTiles = L.GridLayer.extend({ * @param {Function} [options.getFeatureId] * @param {boolean} [options.debug] * @param {Object} [options.style] + * @param {string[]} [options.layerOrder] */ initialize(url, options) { L.Util.setOptions(options); @@ -244,7 +245,11 @@ L.VectorTiles = L.GridLayer.extend({ }); }) .then(function parseVectorTile(vtTile) { - for (const vtLayerName in vtTile.layers) { + const vtLayerNames = Object.keys(vtTile.layers); + if (this.options.layerOrder) { + vtLayerNames.sort((a, b) => this.options.layerOrder.indexOf(a) > this.options.layerOrder.indexOf(b)); + } + for (const vtLayerName of vtLayerNames) { // break out if this tile has already be unloaded if (this._toDestroy[tileKey]) { if (this._debug) { diff --git a/example/index.js b/example/index.js index e54dafb..6e2f857 100644 --- a/example/index.js +++ b/example/index.js @@ -25,8 +25,19 @@ function main(geojson) { const vtLayer = window.vtLayer = new L.VectorTiles(url, { getFeatureId: f => f.properties.name.toLowerCase(), - style: {}, - debug: true, + layerOrder: ['points', 'countries'], // order is bottom to top + style: { + type: { + point: { + color: 'green', + }, + country: { + color: 'blue', + fillOpacity: 0.9 + }, + }, + }, + //debug: true, }).addTo(map); var hoverHighlight = false; diff --git a/example/vt_server.js b/example/vt_server.js index 22b79a2..ccb9b4b 100644 --- a/example/vt_server.js +++ b/example/vt_server.js @@ -23,10 +23,17 @@ const mercator = new SphericalMercator({ size: 256 }); const countryGeoj = JSON.parse(fs.readFileSync('countries.geojson')); const pointGeoj = JSON.parse(fs.readFileSync('points-10000.geojson')); -// name the points so that we can id them +// add type property for styling +for (let i = 0; i < countryGeoj.features.length; i++) { + let country = countryGeoj.features[i]; + country.properties.type = 'country'; +} + +// name the points so that we can id them and add type property for styling for (let i = 0; i < pointGeoj.features.length; i++) { let point = pointGeoj.features[i]; point.properties.name = `${i}`; + point.properties.type = 'point'; } // tile index for Vector Tiles