├── .gitignore
├── README.md
├── bower.json
├── build.sh
├── dist
    ├── hoverboard.js
    └── hoverboard.min.js
├── example.css
├── example.js
├── geojson.html
├── grenoble.png
├── index.html
├── package.json
├── src
    ├── hoverboard.js
    └── renderingInterface.js
├── topojson.html
└── watch.sh


/.gitignore:
--------------------------------------------------------------------------------
1 | node_modules
2 | bower_components
3 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # Hoverboard
 2 | 
 3 | Render vector tiles on canvas with leaflet. 
 4 | 
 5 | ![O little town of Grenoble](grenoble.png)
 6 | 
 7 | [Try it out](https://devtristan.github.io/hoverboard/)
 8 | 
 9 | Supports:
10 | 
11 | - [geojson](http://geojson.org/)
12 | - [topojson](https://github.com/mbostock/topojson/wiki)
13 | - [mapbox vector tiles (protobuf)](https://github.com/mapbox/vector-tile-spec)
14 | 


--------------------------------------------------------------------------------
/bower.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "hoverboard",
 3 |   "version": "1.1.3",
 4 |   "homepage": "https://github.com/devTristan/hoverboard",
 5 |   "authors": [
 6 |     "Tristan Davies <github@tristan.io>"
 7 |   ],
 8 |   "description": "Render vector tiles on canvas with leaflet. Supports geojson, topojson, and mapbox vector tiles (protobuf)",
 9 |   "main": "src/hoverboard.js",
10 |   "moduleType": [
11 |     "amd",
12 |     "globals",
13 |     "node"
14 |   ],
15 |   "keywords": [
16 |     "leaflet",
17 |     "vector",
18 |     "geojson",
19 |     "topojson",
20 |     "protobuf"
21 |   ],
22 |   "license": "MIT",
23 |   "ignore": [
24 |     "**/.*",
25 |     "node_modules",
26 |     "bower_components"
27 |   ],
28 |   "dependencies": {
29 |     "d3": "~3.5.3",
30 |     "hidpi-canvas": "~1.0.9",
31 |     "leaflet": "~0.7.3",
32 |     "pbf": "~0.0.3",
33 |     "topojson": "~1.6.18",
34 |     "vector-tile": "~0.1.1"
35 |   }
36 | }
37 | 


--------------------------------------------------------------------------------
/build.sh:
--------------------------------------------------------------------------------
1 | browserify -s Hoverboard src/hoverboard.js > dist/hoverboard.js
2 | uglify -s dist/hoverboard.js -o dist/hoverboard.min.js
3 | 
4 | 


--------------------------------------------------------------------------------
/dist/hoverboard.js:
--------------------------------------------------------------------------------
  1 | !function(e){if("object"==typeof exports&&"undefined"!=typeof module)module.exports=e();else if("function"==typeof define&&define.amd)define([],e);else{var o;"undefined"!=typeof window?o=window:"undefined"!=typeof global?o=global:"undefined"!=typeof self&&(o=self);var f=o;f=f.L||(f.L={}),f=f.tileLayer||(f.tileLayer={}),f.hoverboard=e()}}(function(){var define,module,exports;return (function e(t,n,r){function s(o,u){if(!n[o]){if(!t[o]){var a=typeof require=="function"&&require;if(!u&&a)return a(o,!0);if(i)return i(o,!0);var f=new Error("Cannot find module '"+o+"'");throw f.code="MODULE_NOT_FOUND",f}var l=n[o]={exports:{}};t[o][0].call(l.exports,function(e){var n=t[o][1][e];return s(n?n:e)},l,l.exports,e,t,n,r)}return n[o].exports}var i=typeof require=="function"&&require;for(var o=0;o<r.length;o++)s(r[o]);return s})({1:[function(require,module,exports){
  2 | var RenderingInterface = require('./renderingInterface');
  3 | 
  4 | module.exports = function(url, options){
  5 |   options = options || {};
  6 |   options.async = true;
  7 |   var layer = L.tileLayer.canvas(options);
  8 |   layer.setUrl(url);
  9 | 
 10 |   var projections = {};
 11 |   projections.WGS84 = function(offset){
 12 |     offset = offset || {x: 0, y: 0};
 13 | 
 14 |     return d3.geo.transform({
 15 |       point: function(y, x) {
 16 |         var point = layer._map.latLngToLayerPoint(new L.LatLng(x, y));
 17 |         this.stream.point(point.x-offset.x, point.y-offset.y);
 18 |       }
 19 |     });
 20 |   };
 21 | 
 22 |   var modes = {};
 23 |   modes.geojson = {
 24 |     extensions: ['geojson', 'json'],
 25 |     get: function(url, callback){
 26 |       var xhr = d3.xhr(url).responseType('json').get(callback);
 27 |       return xhr.abort.bind(xhr);
 28 |     },
 29 |     parse: function(data, canvas){
 30 |       var tileOffset = {
 31 |         x: parseInt(d3.select(canvas).style('left').slice(0, -2)),
 32 |         y: parseInt(d3.select(canvas).style('top').slice(0, -2))
 33 |       };
 34 | 
 35 |       return {
 36 |         data: data,
 37 |         projection: projections.WGS84(tileOffset)
 38 |       }
 39 |     }
 40 |   };
 41 |   modes.topojson = {
 42 |     extensions: ['topojson'],
 43 |     get: function(url, callback){
 44 |       var xhr = d3.xhr(url).responseType('json').get(callback);
 45 |       return xhr.abort.bind(xhr);
 46 |     },
 47 |     parse: function(data, canvas){
 48 |       var tileOffset = {
 49 |         x: parseInt(d3.select(canvas).style('left').slice(0, -2)),
 50 |         y: parseInt(d3.select(canvas).style('top').slice(0, -2))
 51 |       };
 52 | 
 53 |       var layers = {};
 54 |       for (var key in data.objects) {
 55 |         layers[key] = topojson.feature(data, data.objects[key]);
 56 |       }
 57 | 
 58 |       return {
 59 |         data: layers,
 60 |         projection: projections.WGS84(tileOffset)
 61 |       }
 62 |     }
 63 |   };
 64 |   modes.protobuf = {
 65 |     extensions: ['mvt', 'pbf', 'mapbox'],
 66 |     get: function(url, callback){
 67 |       var xhr = d3.xhr(url).responseType('arraybuffer').get(callback);
 68 |       return xhr.abort.bind(xhr);
 69 |     },
 70 |     parse: function(data, canvas){
 71 |       var tile = new VectorTile( new pbf( new Uint8Array(data) ) );
 72 | 
 73 |       var layers = {};
 74 | 
 75 |       for (var key in tile.layers) {
 76 |         layers[key] = tile.layers[key].toGeoJSON();
 77 |       }
 78 | 
 79 |       // console.log(layers);
 80 | 
 81 |       return {
 82 |         data: layers,
 83 |         projection: d3.geo.transform({
 84 |           point: function(x, y) {
 85 |             x = x/tile.layers[layer.__currentLayer].extent*canvas.width;
 86 |             y = y/tile.layers[layer.__currentLayer].extent*canvas.height;
 87 | 
 88 |             if (options.hidpiPolyfill) {
 89 |               x *= (1/window.devicePixelRatio);
 90 |               y *= (1/window.devicePixelRatio);
 91 |             }
 92 | 
 93 |             this.stream.point(x, y);
 94 |           }
 95 |         })
 96 |       };
 97 |     }
 98 |   };
 99 | 
100 |   var modeOption = 'auto';
101 |   layer.mode = function(_mode, overrides){
102 |     modeOption = _mode;
103 |     return layer;
104 |   };
105 | 
106 |   var renderers = [];
107 |   layer.render = function(layerName, fn){
108 |     if (typeof fn == 'function') {
109 |       renderers.push({
110 |         layer: layerName,
111 |         run: fn
112 |       });
113 |       return layer;
114 |     } else {
115 |       var renderer = new RenderingInterface(layer, layerName);
116 |       renderers.push({
117 |         layer: layerName,
118 |         run: renderer.run.bind(renderer)
119 |       });
120 |       return renderer;
121 |     }
122 |   };
123 | 
124 |   layer.drawTile = function(canvas, tilePoint, zoom) {
125 |     var context = canvas.getContext('2d');
126 |     tilePoint = {x: tilePoint.x, y: tilePoint.y, z: zoom};
127 | 
128 |     var mode;
129 |     if (modeOption == 'auto') {
130 |       var extension = layer._url.split('?')[0].split('.').pop();
131 |       for (var key in modes) {
132 |         if (modes[key].extensions.indexOf(extension) != -1) {
133 |           mode = modes[key];
134 |           break;
135 |         }
136 |       }
137 |       if (!mode) {
138 |         throw new Error('I don\'t know what to do with URLs ending in .'+extension);
139 |       }
140 |     } else if (typeof modeOption == 'object') {
141 |       mode = modeOption;
142 |     } else {
143 |       mode = modes[modeOption];
144 |     }
145 | 
146 |     var url = layer.getTileUrl(tilePoint);
147 |     mode.get(url, function(err, xhr){
148 |       if (err) {
149 |         throw err;
150 |       }
151 |       
152 |       var result = mode.parse(xhr.response, canvas);
153 | 
154 |       var path = d3.geo.path()
155 |         .projection(result.projection)
156 |         .context(context);
157 | 
158 |       var width = canvas.width, height=canvas.height;
159 | 
160 |       if (options.hidpiPolyfill) {
161 |         width *= (1/window.devicePixelRatio);
162 |         width *= (1/window.devicePixelRatio);
163 |       }
164 | 
165 |       context.clearRect(0, 0, width, height);
166 | 
167 |       if (renderers.length) {
168 |         renderers.forEach(function(renderer){
169 |           if (!result.data[renderer.layer]) return;
170 | 
171 |           layer.__currentLayer = renderer.layer;
172 | 
173 |           renderer.run(context, result.data[renderer.layer].features, tilePoint, function(features){
174 |             if (typeof features == 'object' && !Array.isArray(features)) {
175 |               features = [features];
176 |             }
177 | 
178 |             context.beginPath();
179 |             features.forEach(path);
180 |           });
181 |         });
182 |       } else {
183 |         throw new Error('No renderer specified!');
184 |       }
185 | 
186 |       layer.tileDrawn(canvas);
187 |     });
188 |   };
189 | 
190 |   return layer;
191 | };
192 | },{"./renderingInterface":2}],2:[function(require,module,exports){
193 | var RenderingInterface = function(layer, name){
194 |   this.layer = layer;
195 |   this.layerName = name;
196 | 
197 |   this.instructions = [];
198 |   this.whereConditions = [];
199 | 
200 |   var self = this;
201 |   Object.keys(layer.__proto__).forEach(function(key){
202 |     self[key] = function(){
203 |       return layer[key].apply(layer, arguments);
204 |     };
205 |   });
206 |   ['render', 'data', 'mode', 'addTo'].forEach(function(key){
207 |     self[key] = function(){
208 |       return layer[key].apply(layer, arguments);
209 |     };
210 |   });
211 | };
212 | 
213 | RenderingInterface.prototype.minZoom = function(minZoom){
214 |   this.minZoom = minZoom;
215 |   return this;
216 | };
217 | RenderingInterface.prototype.maxZoom = function(maxZoom){
218 |   this.maxZoom = maxZoom;
219 |   return this;
220 | };
221 | 
222 | RenderingInterface.prototype.fill = function(color){
223 |   this.instructions.push({
224 |     type: 'fill',
225 |     color: color
226 |   });
227 |   return this;
228 | };
229 | RenderingInterface.prototype.stroke = function(width, color){
230 |   this.instructions.push({
231 |     type: 'stroke',
232 |     width: width,
233 |     color: color
234 |   });
235 |   return this;
236 | };
237 | 
238 | RenderingInterface.prototype.fillBy = function(property, colors, fallback){
239 |   this.fill(function(d){
240 |     return colors[d.properties[property]] || fallback;
241 |   });
242 |   return this;
243 | };
244 | RenderingInterface.prototype.strokeBy = function(property, strokes, fallback){
245 |   this.stroke(function(d){
246 |     return strokes[d.properties[property]] || fallback;
247 |   });
248 |   return this;
249 | };
250 | 
251 | RenderingInterface.prototype._where = function(options){
252 |   // console.log('where', options);
253 |   var field = options.field;
254 |   var value = options.value;
255 | 
256 |   if (typeof value == 'undefined') {
257 |     if (typeof field == 'string') {
258 |       this.where(function(d){
259 |         return d.properties[field] ? true : false;
260 |       }, undefined, options.invert);
261 |     } else if (typeof field == 'object') {
262 |       for (var key in field) {
263 |         this.where(key, field[key], options.invert);
264 |       }
265 |     } else if (typeof field == 'function') {
266 |       if (options.invert) {
267 |         var oldField = field;
268 |         // console.log('inverting');
269 |         field = function(){
270 |           return !oldField.apply(null, arguments);
271 |         };
272 |       }
273 |       this.whereConditions.push(field);
274 |     } else {
275 |       throw new Error('with RenderingInterface.where(field, value) if value is undefined then field must be a string, object, or function!');
276 |     }
277 |   } else if (typeof value == 'string' || typeof value == 'number'){
278 |     this.where(function(d){
279 |       return d.properties[field] == value;
280 |     }, undefined, options.invert);
281 |   } else if (typeof value == 'object' && Array.isArray(value)) {
282 |     this.where(function(d){
283 |       return value.indexOf(d.properties[field]) != -1;
284 |     }, undefined, options.invert);
285 |   } else {
286 |     throw new Error('RenderingInterface.where(field, value) cannot be called with field as type '+(typeof field)+' and value as type '+(typeof value));
287 |   }
288 |   return this;
289 | };
290 | 
291 | RenderingInterface.prototype.where = function(field, value, invert){
292 |   return this._where({field: field, value: value, invert: invert});
293 | }
294 | RenderingInterface.prototype.whereNot = function(field, value){
295 |   // console.log('whereNot', field, value);
296 |   return this._where({field: field, value: value, invert: true});
297 | }
298 | 
299 | RenderingInterface.prototype.run = function(context, features, tile, draw){
300 |   if (typeof this.minZoom == 'number' && tile.z < this.minZoom) return;
301 |   if (typeof this.maxZoom == 'number' && tile.z > this.maxZoom) return;
302 | 
303 |   this.whereConditions.forEach(function(fn){
304 |     features = features.filter(fn);
305 |   });
306 | 
307 |   this.instructions.forEach(function(instruction){
308 |     if (instruction.type == 'fill') {
309 |       if (typeof instruction.color == 'string') {
310 |         //fill all at once
311 |         context.fillStyle = instruction.color;
312 |         draw(features);
313 |         context.fill();
314 |       } else if (typeof instruction.color == 'function') {
315 |         //fill individually
316 |         features.forEach(function(feature){
317 |           context.fillStyle = instruction.color(feature);
318 |           draw(feature);
319 |           context.fill();
320 |         });
321 |       } else {
322 |         throw new Error('fill color must be string or function, is type '+(typeof instruction.color));
323 |       }
324 |     } else if (instruction.type == 'stroke') {
325 |       if (typeof instruction.width == 'number' && typeof instruction.color == 'string') {
326 |         //draw all at once
327 |         context.lineWidth = instruction.width;
328 |         context.strokeStyle = instruction.color;
329 |         draw(features);
330 |         context.stroke();
331 |       } else if (typeof instruction.width == 'function' || typeof instruction.color == 'function') {
332 |         //draw individually
333 |         features.forEach(function(feature){
334 |           var lineWidth = (typeof instruction.width == 'function') ? instruction.width(feature) : instruction.width;
335 |           var strokeStyle = (typeof instruction.color == 'function') ? instruction.color(feature) : instruction.color;
336 | 
337 |           if (typeof instruction.color == 'undefined' && Array.isArray(lineWidth)) {
338 |             strokeStyle = lineWidth[1];
339 |             lineWidth = lineWidth[0];
340 |           }
341 | 
342 |           draw(feature);
343 |           context.stroke();
344 |         });
345 |       } else {
346 |         throw new Error('Expected stroke(number or function, string or function) or stroke(function), got stroke('+(typeof instruction.width)+', '+(typeof instruction.color)+')');
347 |       }
348 |     }
349 |   });
350 | };
351 | 
352 | module.exports = RenderingInterface;
353 | },{}]},{},[1])(1)
354 | });


--------------------------------------------------------------------------------
/dist/hoverboard.min.js:
--------------------------------------------------------------------------------
1 | !function(e){if("object"==typeof exports&&"undefined"!=typeof module)module.exports=e();else if("function"==typeof define&&define.amd)define([],e);else{var t;"undefined"!=typeof window?t=window:"undefined"!=typeof global?t=global:"undefined"!=typeof self&&(t=self);var r=t;r=r.L||(r.L={}),r=r.tileLayer||(r.tileLayer={}),r.hoverboard=e()}}(function(){return function e(t,r,o){function n(f,s){if(!r[f]){if(!t[f]){var a="function"==typeof require&&require;if(!s&&a)return a(f,!0);if(i)return i(f,!0);var u=new Error("Cannot find module '"+f+"'");throw u.code="MODULE_NOT_FOUND",u}var c=r[f]={exports:{}};t[f][0].call(c.exports,function(e){var r=t[f][1][e];return n(r?r:e)},c,c.exports,e,t,r,o)}return r[f].exports}for(var i="function"==typeof require&&require,f=0;f<o.length;f++)n(o[f]);return n}({1:[function(e,t){var r=e("./renderingInterface");t.exports=function(e,t){t=t||{},t.async=!0;var o=L.tileLayer.canvas(t);o.setUrl(e);var n={};n.WGS84=function(e){return e=e||{x:0,y:0},d3.geo.transform({point:function(t,r){var n=o._map.latLngToLayerPoint(new L.LatLng(r,t));this.stream.point(n.x-e.x,n.y-e.y)}})};var i={};i.geojson={extensions:["geojson","json"],get:function(e,t){var r=d3.xhr(e).responseType("json").get(t);return r.abort.bind(r)},parse:function(e,t){var r={x:parseInt(d3.select(t).style("left").slice(0,-2)),y:parseInt(d3.select(t).style("top").slice(0,-2))};return{data:e,projection:n.WGS84(r)}}},i.topojson={extensions:["topojson"],get:function(e,t){var r=d3.xhr(e).responseType("json").get(t);return r.abort.bind(r)},parse:function(e,t){var r={x:parseInt(d3.select(t).style("left").slice(0,-2)),y:parseInt(d3.select(t).style("top").slice(0,-2))},o={};for(var i in e.objects)o[i]=topojson.feature(e,e.objects[i]);return{data:o,projection:n.WGS84(r)}}},i.protobuf={extensions:["mvt","pbf","mapbox"],get:function(e,t){var r=d3.xhr(e).responseType("arraybuffer").get(t);return r.abort.bind(r)},parse:function(e,r){var n=new VectorTile(new pbf(new Uint8Array(e))),i={};for(var f in n.layers)i[f]=n.layers[f].toGeoJSON();return{data:i,projection:d3.geo.transform({point:function(e,i){e=e/n.layers[o.__currentLayer].extent*r.width,i=i/n.layers[o.__currentLayer].extent*r.height,t.hidpiPolyfill&&(e*=1/window.devicePixelRatio,i*=1/window.devicePixelRatio),this.stream.point(e,i)}})}}};var f="auto";o.mode=function(e){return f=e,o};var s=[];return o.render=function(e,t){if("function"==typeof t)return s.push({layer:e,run:t}),o;var n=new r(o,e);return s.push({layer:e,run:n.run.bind(n)}),n},o.drawTile=function(e,r,n){var a=e.getContext("2d");r={x:r.x,y:r.y,z:n};var u;if("auto"==f){var c=o._url.split("?")[0].split(".").pop();for(var l in i)if(-1!=i[l].extensions.indexOf(c)){u=i[l];break}if(!u)throw new Error("I don't know what to do with URLs ending in ."+c)}else u="object"==typeof f?f:i[f];var p=o.getTileUrl(r);u.get(p,function(n,i){if(n)throw n;var f=u.parse(i.response,e),c=d3.geo.path().projection(f.projection).context(a),l=e.width,p=e.height;if(t.hidpiPolyfill&&(l*=1/window.devicePixelRatio,l*=1/window.devicePixelRatio),a.clearRect(0,0,l,p),!s.length)throw new Error("No renderer specified!");s.forEach(function(e){f.data[e.layer]&&(o.__currentLayer=e.layer,e.run(a,f.data[e.layer].features,r,function(e){"object"!=typeof e||Array.isArray(e)||(e=[e]),a.beginPath(),e.forEach(c)}))}),o.tileDrawn(e)})},o}},{"./renderingInterface":2}],2:[function(e,t){var r=function(e,t){this.layer=e,this.layerName=t,this.instructions=[],this.whereConditions=[];var r=this;Object.keys(e.__proto__).forEach(function(t){r[t]=function(){return e[t].apply(e,arguments)}}),["render","data","mode","addTo"].forEach(function(t){r[t]=function(){return e[t].apply(e,arguments)}})};r.prototype.minZoom=function(e){return this.minZoom=e,this},r.prototype.maxZoom=function(e){return this.maxZoom=e,this},r.prototype.fill=function(e){return this.instructions.push({type:"fill",color:e}),this},r.prototype.stroke=function(e,t){return this.instructions.push({type:"stroke",width:e,color:t}),this},r.prototype.fillBy=function(e,t,r){return this.fill(function(o){return t[o.properties[e]]||r}),this},r.prototype.strokeBy=function(e,t,r){return this.stroke(function(o){return t[o.properties[e]]||r}),this},r.prototype._where=function(e){var t=e.field,r=e.value;if("undefined"==typeof r)if("string"==typeof t)this.where(function(e){return e.properties[t]?!0:!1},void 0,e.invert);else if("object"==typeof t)for(var o in t)this.where(o,t[o],e.invert);else{if("function"!=typeof t)throw new Error("with RenderingInterface.where(field, value) if value is undefined then field must be a string, object, or function!");if(e.invert){var n=t;t=function(){return!n.apply(null,arguments)}}this.whereConditions.push(t)}else if("string"==typeof r||"number"==typeof r)this.where(function(e){return e.properties[t]==r},void 0,e.invert);else{if("object"!=typeof r||!Array.isArray(r))throw new Error("RenderingInterface.where(field, value) cannot be called with field as type "+typeof t+" and value as type "+typeof r);this.where(function(e){return-1!=r.indexOf(e.properties[t])},void 0,e.invert)}return this},r.prototype.where=function(e,t,r){return this._where({field:e,value:t,invert:r})},r.prototype.whereNot=function(e,t){return this._where({field:e,value:t,invert:!0})},r.prototype.run=function(e,t,r,o){"number"==typeof this.minZoom&&r.z<this.minZoom||"number"==typeof this.maxZoom&&r.z>this.maxZoom||(this.whereConditions.forEach(function(e){t=t.filter(e)}),this.instructions.forEach(function(r){if("fill"==r.type)if("string"==typeof r.color)e.fillStyle=r.color,o(t),e.fill();else{if("function"!=typeof r.color)throw new Error("fill color must be string or function, is type "+typeof r.color);t.forEach(function(t){e.fillStyle=r.color(t),o(t),e.fill()})}else if("stroke"==r.type)if("number"==typeof r.width&&"string"==typeof r.color)e.lineWidth=r.width,e.strokeStyle=r.color,o(t),e.stroke();else{if("function"!=typeof r.width&&"function"!=typeof r.color)throw new Error("Expected stroke(number or function, string or function) or stroke(function), got stroke("+typeof r.width+", "+typeof r.color+")");t.forEach(function(t){var n="function"==typeof r.width?r.width(t):r.width,i="function"==typeof r.color?r.color(t):r.color;"undefined"==typeof r.color&&Array.isArray(n)&&(i=n[1],n=n[0]),o(t),e.stroke()})}}))},t.exports=r},{}]},{},[1])(1)});


--------------------------------------------------------------------------------
/example.css:
--------------------------------------------------------------------------------
 1 | html, body {
 2 |   height: 100%;
 3 |   padding: 0;
 4 |   margin: 0;
 5 | }
 6 | 
 7 | #map {
 8 |   width: 100%;
 9 |   height: 100%;
10 |   background: #bcd9bf;
11 | }
12 | 
13 | .leaflet-tile-container:first-child {
14 |   /* This prevents reference labels from being drawn twice at the same time, which is bad */
15 |   display: none;
16 | }
17 | 
18 | /* Hide zoom control on touch devices, which interferes with project page navigation overlay */
19 | .leaflet-touch .leaflet-control-zoom {
20 |     display: none;
21 | }
22 | 
23 | /* For non touch devices, move control out of the way at small window widths */
24 | @media (max-width: 752px) {
25 |     /* 767px - 15px for scrollbar */
26 |     .mapzen-demo-iframed .leaflet-top {
27 |       top: 50px;
28 |     }
29 | }
30 | 


--------------------------------------------------------------------------------
/example.js:
--------------------------------------------------------------------------------
  1 | var map = L.map('map', {
  2 |   //tokyo
  3 |   center: [35.6841,139.7546],
  4 |   zoom: 16
  5 | });
  6 | 
  7 | if (window.self !== window.top) {
  8 |   map.scrollWheelZoom.disable();
  9 |   document.documentElement.className += ' mapzen-demo-iframed';
 10 | }
 11 | 
 12 | if (map.attributionControl) {
 13 |   map.attributionControl.addAttribution('<a href="https://libraries.io/bower/hoverboard/v1.0.1" target="_top">Hoverboard</a> | © <a href="https://www.openstreetmap.org/copyright" target="_top">OpenStreetMap contributors</a> | <a href="https://mapzen.com/projects/vector-tiles" title="Tiles courtesy of Mapzen" target="_top">Mapzen</a>');
 14 | }
 15 | 
 16 | var url  = window.xyz_tile_source_url;
 17 | 
 18 | var colors = {
 19 |   base: '#f7ecdc',
 20 |   land: '#f7ecdc',
 21 |   water: '#357abf',
 22 |   grass: '#E6F2C1',
 23 |   beach: '#FFEEC7',
 24 |   park: '#a5af6e',
 25 |   cemetery: '#D6DED2',
 26 |   wooded: '#C3D9AD',
 27 |   agriculture: '#F2E8B6',
 28 |   building: '#b3bdc4',
 29 |   hospital: 'rgb(229,198,195)',
 30 |   school: '#FFF5CC',
 31 |   sports: '#B8E6B8',
 32 |   residential: '#f7ecdc',
 33 |   commercial: '#f7ecdc',
 34 |   industrial: '#f7ecdc',
 35 |   parking: '#EEE',
 36 |   big_road: '#673919',
 37 |   little_road: '#b29176',
 38 |   railway: '#ef7369'
 39 | };
 40 | 
 41 | L.tileLayer.hoverboard(url, {hidpiPolyfill: true})
 42 | 
 43 |   .render('landuse')
 44 |     .minZoom(12)
 45 |     .fillBy('kind', {
 46 |       allotments: colors.base,
 47 |       apron: colors.base,
 48 |       cemetery: colors.cemetery,
 49 |       cinema: colors.base,
 50 |       college: colors.school,
 51 |       commercial: colors.industrial,
 52 |       common: colors.residential,
 53 |       farm: colors.park,
 54 |       farmland: colors.park,
 55 |       farmyard: colors.park,
 56 |       footway: colors.little_road,
 57 |       forest: colors.park,
 58 |       fuel: colors.base,
 59 |       garden: colors.park,
 60 |       glacier: colors.water,
 61 |       golf_course: colors.sports,
 62 |       grass: colors.park,
 63 |       hospital: colors.hospital,
 64 |       industrial: colors.industrial,
 65 |       land: colors.land,
 66 |       library: colors.school,
 67 |       meadow: colors.park,
 68 |       nature_reserve: colors.park,
 69 |       park: colors.park,
 70 |       parking: colors.parking,
 71 |       pedestrian: colors.little_road,
 72 |       pitch: colors.base,
 73 |       place_of_worship: colors.base,
 74 |       playground: colors.sports,
 75 |       quarry: colors.industrial,
 76 |       railway: colors.railway,
 77 |       recreation_ground: colors.park,
 78 |       residential: colors.residential,
 79 |       retail: colors.industrial,
 80 |       runway: colors.base,
 81 |       school: colors.school,
 82 |       scrub: colors.park,
 83 |       sports_centre: colors.sports,
 84 |       stadium: colors.sports,
 85 |       taxiway: colors.little_road,
 86 |       theatre: colors.industrial,
 87 |       university: colors.school,
 88 |       village_green: colors.park,
 89 |       wetland: colors.water,
 90 |       conservation: colors.park,
 91 |       wood: colors.wooded,
 92 |       urban_area: colors.residential,
 93 |       park: colors.park,
 94 |       brownfield: colors.park,
 95 |       protected: colors.park,
 96 |       protected_area: colors.park
 97 |     })
 98 | 
 99 |   .render('roads')
100 |     .where('kind', ['minor_road', 'path'])
101 |     .stroke(1, 'rgba(255, 255, 255, 0.5)')
102 |     .stroke(0.5, colors.little_road)
103 | 
104 |   .render('buildings')
105 |     .fill('#888896')
106 |     .stroke(0.5, 'rgba(0,0,0,0.4)')
107 | 
108 |   .render('water')
109 |     .where('kind', ['ocean', 'water'])
110 |     .whereNot('boundary', ['yes'])
111 |     .fill(colors.water)
112 |     .stroke(0.5, colors.water)
113 | 
114 |   .render('water')
115 |     .where('kind', ['river', 'stream', 'canal'])
116 |     .stroke(0.5, colors.water)
117 | 
118 |   .render('water')
119 |     .where('kind', ['riverbank'])
120 |     .whereNot('boundary', ['yes'])
121 |     .fill(colors.water)
122 | 
123 |   .render('roads')
124 |     .where('kind', ['major_road', 'highway', 'rail'])
125 |     .stroke(1.75, 'rgba(255, 255, 255, 0.5)')
126 |     .stroke(0.75, colors.big_road)
127 | 
128 |   .addTo(map);
129 | 
130 | var hash = L.hash(map);
131 | 


--------------------------------------------------------------------------------
/geojson.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 | <head>
 4 |   <title>Map on Canvas using geojson</title>
 5 |   <meta charset="utf-8">
 6 |   <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
 7 |   <link rel="stylesheet" type="text/css" href="https://cdn.rawgit.com/Leaflet/Leaflet/v0.7.3/dist/leaflet.css">
 8 |   <link rel="stylesheet" type="text/css" href="example.css">
 9 | </head>
10 | <body>
11 | 
12 |   <div id="map"></div>
13 | 
14 |   <script src="https://cdn.rawgit.com/jondavidjohn/hidpi-canvas-polyfill/master/dist/hidpi-canvas.min.js"></script>
15 |   <script src="https://cdn.rawgit.com/Leaflet/Leaflet/v0.7.3/dist/leaflet.js"></script>
16 |   <script src="https://d3js.org/d3.v3.min.js"></script>
17 |   <script src='https://api.tiles.mapbox.com/mapbox.js/plugins/leaflet-hash/v0.2.1/leaflet-hash.js'></script>
18 |   <script src='//s3.amazonaws.com/assets-staging.mapzen.com/ui/components/bug/bug.min.js'></script>
19 | 
20 |   <script src="dist/hoverboard.js"></script>
21 | 
22 |   <script>
23 |     window.xyz_tile_source_url = 'https://vector.mapzen.com/osm/all/{z}/{x}/{y}.json?api_key=vector-tiles-LM25tq4';
24 | 
25 |     // initialize mapzen bug
26 |     var mzBug = new MapzenBug({
27 |       name: 'Map on Canvas using geojson',
28 |       link: 'https://mapzen.com/projects/vector-tiles',
29 |       tweet: 'A canvas geojson map demo from @mapzen',
30 |       repo: 'https://github.com/mapzen/hoverboard'
31 |     });
32 |   </script>
33 | 
34 |   <script src="example.js"></script>
35 | 
36 | </body>
37 | </html>
38 | 


--------------------------------------------------------------------------------
/grenoble.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/mapzen/hoverboard/e1437d9853c3aa28f7f117b613c2af51fbf51d25/grenoble.png


--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 | <head>
 4 |   <title>Map on Canvas using vector PBF</title>
 5 |   <meta charset="utf-8">
 6 |   <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
 7 |   <link rel="stylesheet" type="text/css" href="https://cdn.rawgit.com/Leaflet/Leaflet/v0.7.3/dist/leaflet.css">
 8 |   <link rel="stylesheet" type="text/css" href="example.css">
 9 | </head>
10 | <body>
11 | 
12 |   <div id="map"></div>
13 | 
14 |   <script src="https://cdn.rawgit.com/jondavidjohn/hidpi-canvas-polyfill/master/dist/hidpi-canvas.min.js"></script>
15 |   <script src="https://cdn.rawgit.com/Leaflet/Leaflet/v0.7.3/dist/leaflet.js"></script>
16 |   <script src="https://d3js.org/d3.v3.min.js"></script>
17 |   <script src="https://cdn.rawgit.com/devTristan/pbf/master/dist/pbf.min.js"></script>
18 |   <script src="https://rawgit.com/devTristan/vector-tile-js/master/dist/vectortile.min.js"></script>
19 |   <script src="https://api.tiles.mapbox.com/mapbox.js/plugins/leaflet-hash/v0.2.1/leaflet-hash.js"></script>
20 |   <script src='//s3.amazonaws.com/assets-staging.mapzen.com/ui/components/bug/bug.min.js'></script>
21 | 
22 |   <script src="dist/hoverboard.js"></script>
23 | 
24 |   <script>
25 |     window.xyz_tile_source_url = 'https://vector.mapzen.com/osm/all/{z}/{x}/{y}.mvt?api_key=vector-tiles-LM25tq4';
26 |     var mzBug = new MapzenBug({
27 |       name: 'Map on Canvas using vector PBF',
28 |       link: 'https://mapzen.com/projects/vector-tiles',
29 |       tweet: 'A canvas vector PBF map demo from @mapzen',
30 |       repo: 'https://github.com/mapzen/hoverboard'
31 |     });
32 |   </script>
33 | 
34 |   <script src="example.js"></script>
35 | 
36 | </body>
37 | </html>
38 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "leaflet-hoverboard",
 3 |   "version": "1.1.3",
 4 |   "description": "Render vector tiles on canvas with leaflet. Supports geojson, topojson, and mapbox vector tiles (protobuf)",
 5 |   "main": "src/hoverboard.js",
 6 |   "scripts": {
 7 |     "test": "echo \"Error: no test specified\" && exit 1"
 8 |   },
 9 |   "repository": {
10 |     "type": "git",
11 |     "url": "https://github.com/devTristan/hoverboard.git"
12 |   },
13 |   "keywords": [
14 |     "leaflet",
15 |     "vector",
16 |     "geojson",
17 |     "topojson",
18 |     "protobuf"
19 |   ],
20 |   "author": "Tristan Davies <github@tristan.io>",
21 |   "license": "MIT",
22 |   "bugs": {
23 |     "url": "https://github.com/devTristan/hoverboard/issues"
24 |   },
25 |   "homepage": "https://github.com/devTristan/hoverboard",
26 |   "dependencies": {
27 |     "topojson": "^1.6.18"
28 |   }
29 | }
30 | 


--------------------------------------------------------------------------------
/src/hoverboard.js:
--------------------------------------------------------------------------------
  1 | !function(e){if("object"==typeof exports&&"undefined"!=typeof module)module.exports=e();else if("function"==typeof define&&define.amd)define([],e);else{var o;"undefined"!=typeof window?o=window:"undefined"!=typeof global?o=global:"undefined"!=typeof self&&(o=self);var f=o;f=f.L||(f.L={}),f=f.tileLayer||(f.tileLayer={}),f.hoverboard=e()}}(function(){var define,module,exports;return (function e(t,n,r){function s(o,u){if(!n[o]){if(!t[o]){var a=typeof require=="function"&&require;if(!u&&a)return a(o,!0);if(i)return i(o,!0);var f=new Error("Cannot find module '"+o+"'");throw f.code="MODULE_NOT_FOUND",f}var l=n[o]={exports:{}};t[o][0].call(l.exports,function(e){var n=t[o][1][e];return s(n?n:e)},l,l.exports,e,t,n,r)}return n[o].exports}var i=typeof require=="function"&&require;for(var o=0;o<r.length;o++)s(r[o]);return s})({1:[function(require,module,exports){
  2 | var RenderingInterface = require('./renderingInterface');
  3 | 
  4 | module.exports = function(url, options){
  5 |   options = options || {};
  6 |   options.async = true;
  7 |   var layer = L.tileLayer.canvas(options);
  8 |   layer.setUrl(url);
  9 | 
 10 |   var projections = {};
 11 |   projections.WGS84 = function(offset){
 12 |     offset = offset || {x: 0, y: 0};
 13 | 
 14 |     return d3.geo.transform({
 15 |       point: function(y, x) {
 16 |         var point = layer._map.latLngToLayerPoint(new L.LatLng(x, y));
 17 |         this.stream.point(point.x-offset.x, point.y-offset.y);
 18 |       }
 19 |     });
 20 |   };
 21 | 
 22 |   var modes = {};
 23 |   modes.geojson = {
 24 |     extensions: ['geojson', 'json'],
 25 |     get: function(url, callback){
 26 |       var xhr = d3.xhr(url).responseType('json').get(callback);
 27 |       return xhr.abort.bind(xhr);
 28 |     },
 29 |     parse: function(data, canvas){
 30 |       var tileOffset = {
 31 |         x: parseInt(d3.select(canvas).style('left').slice(0, -2)),
 32 |         y: parseInt(d3.select(canvas).style('top').slice(0, -2))
 33 |       };
 34 | 
 35 |       return {
 36 |         data: data,
 37 |         projection: projections.WGS84(tileOffset)
 38 |       }
 39 |     }
 40 |   };
 41 |   modes.topojson = {
 42 |     extensions: ['topojson'],
 43 |     get: function(url, callback){
 44 |       var xhr = d3.xhr(url).responseType('json').get(callback);
 45 |       return xhr.abort.bind(xhr);
 46 |     },
 47 |     parse: function(data, canvas){
 48 |       var tileOffset = {
 49 |         x: parseInt(d3.select(canvas).style('left').slice(0, -2)),
 50 |         y: parseInt(d3.select(canvas).style('top').slice(0, -2))
 51 |       };
 52 | 
 53 |       var layers = {};
 54 |       for (var key in data.objects) {
 55 |         layers[key] = topojson.feature(data, data.objects[key]);
 56 |       }
 57 | 
 58 |       return {
 59 |         data: layers,
 60 |         projection: projections.WGS84(tileOffset)
 61 |       }
 62 |     }
 63 |   };
 64 |   modes.protobuf = {
 65 |     extensions: ['mvt', 'pbf', 'mapbox'],
 66 |     get: function(url, callback){
 67 |       var xhr = d3.xhr(url).responseType('arraybuffer').get(callback);
 68 |       return xhr.abort.bind(xhr);
 69 |     },
 70 |     parse: function(data, canvas){
 71 |       var tile = new VectorTile( new pbf( new Uint8Array(data) ) );
 72 | 
 73 |       var layers = {};
 74 | 
 75 |       for (var key in tile.layers) {
 76 |         layers[key] = tile.layers[key].toGeoJSON();
 77 |       }
 78 | 
 79 |       // console.log(layers);
 80 | 
 81 |       return {
 82 |         data: layers,
 83 |         projection: d3.geo.transform({
 84 |           point: function(x, y) {
 85 |             x = x/tile.layers[layer.__currentLayer].extent*canvas.width;
 86 |             y = y/tile.layers[layer.__currentLayer].extent*canvas.height;
 87 | 
 88 |             if (options.hidpiPolyfill) {
 89 |               x *= (1/window.devicePixelRatio);
 90 |               y *= (1/window.devicePixelRatio);
 91 |             }
 92 | 
 93 |             this.stream.point(x, y);
 94 |           }
 95 |         })
 96 |       };
 97 |     }
 98 |   };
 99 | 
100 |   var modeOption = 'auto';
101 |   layer.mode = function(_mode, overrides){
102 |     modeOption = _mode;
103 |     return layer;
104 |   };
105 | 
106 |   var renderers = [];
107 |   layer.render = function(layerName, fn){
108 |     if (typeof fn == 'function') {
109 |       renderers.push({
110 |         layer: layerName,
111 |         run: fn
112 |       });
113 |       return layer;
114 |     } else {
115 |       var renderer = new RenderingInterface(layer, layerName);
116 |       renderers.push({
117 |         layer: layerName,
118 |         run: renderer.run.bind(renderer)
119 |       });
120 |       return renderer;
121 |     }
122 |   };
123 | 
124 |   layer.drawTile = function(canvas, tilePoint, zoom) {
125 |     var context = canvas.getContext('2d');
126 |     tilePoint = {x: tilePoint.x, y: tilePoint.y, z: zoom};
127 | 
128 |     var mode;
129 |     if (modeOption == 'auto') {
130 |       var extension = layer._url.split('?')[0].split('.').pop();
131 |       for (var key in modes) {
132 |         if (modes[key].extensions.indexOf(extension) != -1) {
133 |           mode = modes[key];
134 |           break;
135 |         }
136 |       }
137 |       if (!mode) {
138 |         throw new Error('I don\'t know what to do with URLs ending in .'+extension);
139 |       }
140 |     } else if (typeof modeOption == 'object') {
141 |       mode = modeOption;
142 |     } else {
143 |       mode = modes[modeOption];
144 |     }
145 | 
146 |     var url = layer.getTileUrl(tilePoint);
147 |     mode.get(url, function(err, xhr){
148 |       if (err) {
149 |         throw err;
150 |       }
151 |       
152 |       var result = mode.parse(xhr.response, canvas);
153 | 
154 |       var path = d3.geo.path()
155 |         .projection(result.projection)
156 |         .context(context);
157 | 
158 |       var width = canvas.width, height=canvas.height;
159 | 
160 |       if (options.hidpiPolyfill) {
161 |         width *= (1/window.devicePixelRatio);
162 |         width *= (1/window.devicePixelRatio);
163 |       }
164 | 
165 |       context.clearRect(0, 0, width, height);
166 | 
167 |       if (renderers.length) {
168 |         renderers.forEach(function(renderer){
169 |           if (!result.data[renderer.layer]) return;
170 | 
171 |           layer.__currentLayer = renderer.layer;
172 | 
173 |           renderer.run(context, result.data[renderer.layer].features, tilePoint, function(features){
174 |             if (typeof features == 'object' && !Array.isArray(features)) {
175 |               features = [features];
176 |             }
177 | 
178 |             context.beginPath();
179 |             features.forEach(path);
180 |           });
181 |         });
182 |       } else {
183 |         throw new Error('No renderer specified!');
184 |       }
185 | 
186 |       layer.tileDrawn(canvas);
187 |     });
188 |   };
189 | 
190 |   return layer;
191 | };
192 | },{"./renderingInterface":2}],2:[function(require,module,exports){
193 | var RenderingInterface = function(layer, name){
194 |   this.layer = layer;
195 |   this.layerName = name;
196 | 
197 |   this.instructions = [];
198 |   this.whereConditions = [];
199 | 
200 |   var self = this;
201 |   Object.keys(layer.__proto__).forEach(function(key){
202 |     self[key] = function(){
203 |       return layer[key].apply(layer, arguments);
204 |     };
205 |   });
206 |   ['render', 'data', 'mode', 'addTo'].forEach(function(key){
207 |     self[key] = function(){
208 |       return layer[key].apply(layer, arguments);
209 |     };
210 |   });
211 | };
212 | 
213 | RenderingInterface.prototype.minZoom = function(minZoom){
214 |   this.minZoom = minZoom;
215 |   return this;
216 | };
217 | RenderingInterface.prototype.maxZoom = function(maxZoom){
218 |   this.maxZoom = maxZoom;
219 |   return this;
220 | };
221 | 
222 | RenderingInterface.prototype.fill = function(color){
223 |   this.instructions.push({
224 |     type: 'fill',
225 |     color: color
226 |   });
227 |   return this;
228 | };
229 | RenderingInterface.prototype.stroke = function(width, color){
230 |   this.instructions.push({
231 |     type: 'stroke',
232 |     width: width,
233 |     color: color
234 |   });
235 |   return this;
236 | };
237 | 
238 | RenderingInterface.prototype.fillBy = function(property, colors, fallback){
239 |   this.fill(function(d){
240 |     return colors[d.properties[property]] || fallback;
241 |   });
242 |   return this;
243 | };
244 | RenderingInterface.prototype.strokeBy = function(property, strokes, fallback){
245 |   this.stroke(function(d){
246 |     return strokes[d.properties[property]] || fallback;
247 |   });
248 |   return this;
249 | };
250 | 
251 | RenderingInterface.prototype._where = function(options){
252 |   // console.log('where', options);
253 |   var field = options.field;
254 |   var value = options.value;
255 | 
256 |   if (typeof value == 'undefined') {
257 |     if (typeof field == 'string') {
258 |       this.where(function(d){
259 |         return d.properties[field] ? true : false;
260 |       }, undefined, options.invert);
261 |     } else if (typeof field == 'object') {
262 |       for (var key in field) {
263 |         this.where(key, field[key], options.invert);
264 |       }
265 |     } else if (typeof field == 'function') {
266 |       if (options.invert) {
267 |         var oldField = field;
268 |         // console.log('inverting');
269 |         field = function(){
270 |           return !oldField.apply(null, arguments);
271 |         };
272 |       }
273 |       this.whereConditions.push(field);
274 |     } else {
275 |       throw new Error('with RenderingInterface.where(field, value) if value is undefined then field must be a string, object, or function!');
276 |     }
277 |   } else if (typeof value == 'string' || typeof value == 'number'){
278 |     this.where(function(d){
279 |       return d.properties[field] == value;
280 |     }, undefined, options.invert);
281 |   } else if (typeof value == 'object' && Array.isArray(value)) {
282 |     this.where(function(d){
283 |       return value.indexOf(d.properties[field]) != -1;
284 |     }, undefined, options.invert);
285 |   } else {
286 |     throw new Error('RenderingInterface.where(field, value) cannot be called with field as type '+(typeof field)+' and value as type '+(typeof value));
287 |   }
288 |   return this;
289 | };
290 | 
291 | RenderingInterface.prototype.where = function(field, value, invert){
292 |   return this._where({field: field, value: value, invert: invert});
293 | }
294 | RenderingInterface.prototype.whereNot = function(field, value){
295 |   // console.log('whereNot', field, value);
296 |   return this._where({field: field, value: value, invert: true});
297 | }
298 | 
299 | RenderingInterface.prototype.run = function(context, features, tile, draw){
300 |   if (typeof this.minZoom == 'number' && tile.z < this.minZoom) return;
301 |   if (typeof this.maxZoom == 'number' && tile.z > this.maxZoom) return;
302 | 
303 |   this.whereConditions.forEach(function(fn){
304 |     features = features.filter(fn);
305 |   });
306 | 
307 |   this.instructions.forEach(function(instruction){
308 |     if (instruction.type == 'fill') {
309 |       if (typeof instruction.color == 'string') {
310 |         //fill all at once
311 |         context.fillStyle = instruction.color;
312 |         draw(features);
313 |         context.fill();
314 |       } else if (typeof instruction.color == 'function') {
315 |         //fill individually
316 |         features.forEach(function(feature){
317 |           context.fillStyle = instruction.color(feature);
318 |           draw(feature);
319 |           context.fill();
320 |         });
321 |       } else {
322 |         throw new Error('fill color must be string or function, is type '+(typeof instruction.color));
323 |       }
324 |     } else if (instruction.type == 'stroke') {
325 |       if (typeof instruction.width == 'number' && typeof instruction.color == 'string') {
326 |         //draw all at once
327 |         context.lineWidth = instruction.width;
328 |         context.strokeStyle = instruction.color;
329 |         draw(features);
330 |         context.stroke();
331 |       } else if (typeof instruction.width == 'function' || typeof instruction.color == 'function') {
332 |         //draw individually
333 |         features.forEach(function(feature){
334 |           var lineWidth = (typeof instruction.width == 'function') ? instruction.width(feature) : instruction.width;
335 |           var strokeStyle = (typeof instruction.color == 'function') ? instruction.color(feature) : instruction.color;
336 | 
337 |           if (typeof instruction.color == 'undefined' && Array.isArray(lineWidth)) {
338 |             strokeStyle = lineWidth[1];
339 |             lineWidth = lineWidth[0];
340 |           }
341 | 
342 |           draw(feature);
343 |           context.stroke();
344 |         });
345 |       } else {
346 |         throw new Error('Expected stroke(number or function, string or function) or stroke(function), got stroke('+(typeof instruction.width)+', '+(typeof instruction.color)+')');
347 |       }
348 |     }
349 |   });
350 | };
351 | 
352 | module.exports = RenderingInterface;
353 | },{}]},{},[1])(1)
354 | });


--------------------------------------------------------------------------------
/src/renderingInterface.js:
--------------------------------------------------------------------------------
  1 | var RenderingInterface = function(layer, name){
  2 |   this.layer = layer;
  3 |   this.layerName = name;
  4 | 
  5 |   this.instructions = [];
  6 |   this.whereConditions = [];
  7 | 
  8 |   var self = this;
  9 |   Object.keys(layer.__proto__).forEach(function(key){
 10 |     self[key] = function(){
 11 |       return layer[key].apply(layer, arguments);
 12 |     };
 13 |   });
 14 |   ['render', 'data', 'mode', 'addTo'].forEach(function(key){
 15 |     self[key] = function(){
 16 |       return layer[key].apply(layer, arguments);
 17 |     };
 18 |   });
 19 | };
 20 | 
 21 | RenderingInterface.prototype.minZoom = function(minZoom){
 22 |   this.minZoom = minZoom;
 23 |   return this;
 24 | };
 25 | RenderingInterface.prototype.maxZoom = function(maxZoom){
 26 |   this.maxZoom = maxZoom;
 27 |   return this;
 28 | };
 29 | 
 30 | RenderingInterface.prototype.fill = function(color){
 31 |   this.instructions.push({
 32 |     type: 'fill',
 33 |     color: color
 34 |   });
 35 |   return this;
 36 | };
 37 | RenderingInterface.prototype.stroke = function(width, color){
 38 |   this.instructions.push({
 39 |     type: 'stroke',
 40 |     width: width,
 41 |     color: color
 42 |   });
 43 |   return this;
 44 | };
 45 | 
 46 | RenderingInterface.prototype.fillBy = function(property, colors, fallback){
 47 |   this.fill(function(d){
 48 |     return colors[d.properties[property]] || fallback;
 49 |   });
 50 |   return this;
 51 | };
 52 | RenderingInterface.prototype.strokeBy = function(property, strokes, fallback){
 53 |   this.stroke(function(d){
 54 |     return strokes[d.properties[property]] || fallback;
 55 |   });
 56 |   return this;
 57 | };
 58 | 
 59 | RenderingInterface.prototype._where = function(options){
 60 |   var field = options.field;
 61 |   var value = options.value;
 62 | 
 63 |   if (typeof value == 'undefined') {
 64 |     if (typeof field == 'string') {
 65 |       this.where(function(d){
 66 |         return d.properties[field] ? true : false;
 67 |       }, undefined, options.invert);
 68 |     } else if (typeof field == 'object') {
 69 |       for (var key in field) {
 70 |         this.where(key, field[key], options.invert);
 71 |       }
 72 |     } else if (typeof field == 'function') {
 73 |       if (options.invert) {
 74 |         var oldField = field;
 75 |         field = function(){
 76 |           return !oldField.apply(null, arguments);
 77 |         };
 78 |       }
 79 |       this.whereConditions.push(field);
 80 |     } else {
 81 |       throw new Error('with RenderingInterface.where(field, value) if value is undefined then field must be a string, object, or function!');
 82 |     }
 83 |   } else if (typeof value == 'string' || typeof value == 'number'){
 84 |     this.where(function(d){
 85 |       return d.properties[field] == value;
 86 |     }, undefined, options.invert);
 87 |   } else if (typeof value == 'object' && Array.isArray(value)) {
 88 |     this.where(function(d){
 89 |       return value.indexOf(d.properties[field]) != -1;
 90 |     }, undefined, options.invert);
 91 |   } else {
 92 |     throw new Error('RenderingInterface.where(field, value) cannot be called with field as type '+(typeof field)+' and value as type '+(typeof value));
 93 |   }
 94 |   return this;
 95 | };
 96 | 
 97 | RenderingInterface.prototype.where = function(field, value, invert){
 98 |   return this._where({field: field, value: value, invert: invert});
 99 | }
100 | RenderingInterface.prototype.whereNot = function(field, value){
101 |   return this._where({field: field, value: value, invert: true});
102 | }
103 | 
104 | RenderingInterface.prototype.run = function(context, features, tile, draw){
105 |   if (typeof this.minZoom == 'number' && tile.z < this.minZoom) return;
106 |   if (typeof this.maxZoom == 'number' && tile.z > this.maxZoom) return;
107 | 
108 |   this.whereConditions.forEach(function(fn){
109 |     features = features.filter(fn);
110 |   });
111 | 
112 |   this.instructions.forEach(function(instruction){
113 |     if (instruction.type == 'fill') {
114 |       if (typeof instruction.color == 'string') {
115 |         //fill all at once
116 |         context.fillStyle = instruction.color;
117 |         draw(features);
118 |         context.fill();
119 |       } else if (typeof instruction.color == 'function') {
120 |         //fill individually
121 |         features.forEach(function(feature){
122 |           context.fillStyle = instruction.color(feature);
123 |           draw(feature);
124 |           context.fill();
125 |         });
126 |       } else {
127 |         throw new Error('fill color must be string or function, is type '+(typeof instruction.color));
128 |       }
129 |     } else if (instruction.type == 'stroke') {
130 |       if (typeof instruction.width == 'number' && typeof instruction.color == 'string') {
131 |         //draw all at once
132 |         context.lineWidth = instruction.width;
133 |         context.strokeStyle = instruction.color;
134 |         draw(features);
135 |         context.stroke();
136 |       } else if (typeof instruction.width == 'function' || typeof instruction.color == 'function') {
137 |         //draw individually
138 |         features.forEach(function(feature){
139 |           var lineWidth = (typeof instruction.width == 'function') ? instruction.width(feature) : instruction.width;
140 |           var strokeStyle = (typeof instruction.color == 'function') ? instruction.color(feature) : instruction.color;
141 | 
142 |           if (typeof instruction.color == 'undefined' && Array.isArray(lineWidth)) {
143 |             strokeStyle = lineWidth[1];
144 |             lineWidth = lineWidth[0];
145 |           }
146 | 
147 |           draw(feature);
148 |           context.stroke();
149 |         });
150 |       } else {
151 |         throw new Error('Expected stroke(number or function, string or function) or stroke(function), got stroke('+(typeof instruction.width)+', '+(typeof instruction.color)+')');
152 |       }
153 |     }
154 |   });
155 | };
156 | 
157 | module.exports = RenderingInterface;


--------------------------------------------------------------------------------
/topojson.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 | <head>
 4 |   <title>Map on Canvas using topojson</title>
 5 |   <meta charset="utf-8">
 6 |   <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
 7 |   <link rel="stylesheet" type="text/css" href="https://cdn.rawgit.com/Leaflet/Leaflet/v0.7.3/dist/leaflet.css">
 8 |   <link rel="stylesheet" type="text/css" href="example.css">
 9 | </head>
10 | <body>
11 | 
12 |   <div id="map"></div>
13 | 
14 |   <script src="https://cdn.rawgit.com/jondavidjohn/hidpi-canvas-polyfill/master/dist/hidpi-canvas.min.js"></script>
15 |   <script src="https://cdn.rawgit.com/Leaflet/Leaflet/v0.7.3/dist/leaflet.js"></script>
16 |   <script src="https://d3js.org/d3.v3.min.js"></script>
17 |   <script src="https://cdnjs.cloudflare.com/ajax/libs/topojson/1.6.20/topojson.min.js"></script>
18 |   <script src='https://api.tiles.mapbox.com/mapbox.js/plugins/leaflet-hash/v0.2.1/leaflet-hash.js'></script>
19 |   <script src='//s3.amazonaws.com/assets-staging.mapzen.com/ui/components/bug/bug.min.js'></script>
20 | 
21 |   <script src="dist/hoverboard.js"></script>
22 | 
23 |   <script>
24 |     window.xyz_tile_source_url = 'https://vector.mapzen.com/osm/all/{z}/{x}/{y}.topojson?api_key=vector-tiles-LM25tq4';
25 |     var mzBug = new MapzenBug({
26 |       name: 'Map on Canvas using topojson',
27 |       link: 'https://mapzen.com/projects/vector-tiles',
28 |       tweet: 'A canvas topojson map demo from @mapzen',
29 |       repo: 'https://github.com/mapzen/hoverboard'
30 |     });
31 |   </script>
32 | 
33 |   <script src="example.js"></script>
34 | 
35 | </body>
36 | </html>
37 | 


--------------------------------------------------------------------------------
/watch.sh:
--------------------------------------------------------------------------------
 1 | #!/bin/bash
 2 | 
 3 | if [ ! -z $(which fswatch) ]
 4 | then
 5 | 	./build.sh
 6 | 	fswatch -o -1 ./src | xargs -n1 ./build.sh
 7 | else
 8 | 	while true; do
 9 | 		./build.sh
10 | 		inotifywait src/
11 | 	done
12 | fi
13 | 


--------------------------------------------------------------------------------