Add support for defining layer render order

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) {

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;

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