Merge pull request #9 from ahocevar/multiple-layers

Support multiple layers

README.md

@@ -11,37 +11,39 @@ We are using mapboxGL in [The Capital Planning Platform](http://capitalplanning.
 Install
 `npm install geojson2mvt`
 
-`geojson2mvt` takes a geojson object and a config object, and builds the the pyramid in the specified output directory
+`geojson2mvt` takes a config object with the GeoJSONs to encode and other options, and builds the pyramid in the specified output directory
 
 ```
 var fs = require('fs');
 var geojson2mvt = require('geojson2mvt');
 
-const filePath = './bus_routes.geojson';
-
 var options = {
+  layers: {
+    layer0: JSON.parse(fs.readFileSync('bus_routes.geojson', "utf8")),
+    layer1: JSON.parse(fs.readFileSync('stops.geojson', "utf8"))
+  },
   rootDir: 'tiles',
   bbox : [40.426042,-74.599228,40.884448,-73.409958], //[south,west,north,east]
   zoom : {
     min : 8,
     max : 18,
-  },
+  }
-  layerName: 'layer0',
 };
-
-var geoJson = JSON.parse(fs.readFileSync(filePath, "utf8"));
-
 // build the static tile pyramid
-geojson2mvt(geoJson, options);
+geojson2mvt(options);
 ```
 Check out `/example` for a test project that you can try locally
 
 ## Options
 
+`layers` - Object<string,Object> (required) - GeoJSONs to create a vector tileset from. Keys are the layer names that will be used to access data from the respective GeoJSON when displaying data from the MVT.
+
 `rootDir` - string (required) - the filepath of the directory that will be the root of the file pyramid.  It will be created if it doesn't exist.
 
 `bbox` - array (required) - array of lat/lon bounds like `[s,w,n,e]`
 
 `zoom` - object (required) - object with `min` and `max` properties for the desired zoom levels in the tile pyramid
 
-`layername` - string (required) - the name of the layer in the vector tile that the data will be stored in.  When displaying data from an MVT, you must specify which layer to use.  
+## Backwards compatibility
+
+Instead of providing a single config object, you can provide two arguments: a geoJson and config object without a `layers` property, but instead with a `layerName` property for the name for the imported geoJson in the MVT.

example/script.js

@@ -1,19 +1,17 @@
 var fs = require('fs');
 var geojson2mvt = require('../src');
 
-const filePath = './bus_routes.geojson';
-
 var options = {
+  layers: {
+    layer0: JSON.parse(fs.readFileSync('bus_routes.geojson', "utf8")),
+    layer1: JSON.parse(fs.readFileSync('stops.geojson', "utf8"))
+  },
   rootDir: 'tiles',
   bbox : [40.426042,-74.599228,40.884448,-73.409958], //[south,west,north,east]
   zoom : {
     min : 8,
     max : 18,
-  },
+  }
-  layerName: 'layer0',
 };
-
-var geoJson = JSON.parse(fs.readFileSync(filePath, "utf8"));
-
 // build the static tile pyramid
-geojson2mvt(geoJson, options);
+geojson2mvt(options);

src/index.js

@@ -4,13 +4,26 @@ var geojsonvt =  require('geojson-vt');
 
 var helpers = require('./helpers.js');
 
-var geojson2mvt = function(geoJson, options) {
+var geojson2mvt = function(options) {
 
-    var tileIndex = geojsonvt(geoJson, {
+    if (arguments.length == 2) {
-        maxZoom: options.zoom.max,
+      var geoJson = options;
-        indexMaxZoom: options.zoom.max,
+      options = arguments[1];
-        indexMaxPoints: 0
+      options.layers = {};
-    });
+      options.layers[options.layerName] = geoJson;
+    }
+
+    var layerNames = Object.keys(options.layers);
+
+    var i = 0, ii = layerNames.length;
+    var tileIndex = new Array(ii);
+    for (; i < ii; ++i) {
+        tileIndex[i] = geojsonvt(options.layers[layerNames[i]], {
+            maxZoom: options.zoom.max,
+            indexMaxZoom: options.zoom.max,
+            indexMaxPoints: 0
+        });
+    }
 
     // create the "root directory" to place downloaded tiles in
     try {fs.mkdirSync(options.rootDir, 0777);}
@@ -50,7 +63,7 @@ var geojson2mvt = function(geoJson, options) {
             for(var y=tileBounds.yMin; y<=tileBounds.yMax; y++) {
 
                 console.log(`Getting tile ${z} ${x} ${y} `)
-                var mvt = getTile(z, x, y, tileIndex, options);
+                var mvt = getTile(z, x, y, tileIndex, layerNames);
 
                 // TODO what should be written to the tile if there is no data?
                 var output = mvt !== null ? mvt : '';
@@ -67,19 +80,19 @@ var geojson2mvt = function(geoJson, options) {
 
 
 
- function getTile(z, x, y, tileIndex, options) {
+ function getTile(z, x, y, tileIndex, layerNames) {
-    var tile = tileIndex.getTile(z, x, y);
+   var pbfOptions = {};
+   for (var i = 0, ii = tileIndex.length; i < ii; ++i) {
+       var tile = tileIndex[i].getTile(z, x, y);
 
-    if (tile != null) {
+       if (tile != null) {
-        var pbfOptions = {};
+           pbfOptions[layerNames[i]] = tile;
+       }
 
-        pbfOptions[options.layerName] = tile;
+   }
-        var pbf = vtpbf.fromGeojsonVt(pbfOptions);
+   return Object.keys(pbfOptions).length ?
-
+      vtpbf.fromGeojsonVt(pbfOptions) :
-        return pbf;
+      null;
-    }
-
-    return null;
 };