Skip to content

Instantly share code, notes, and snippets.

@tyrasd

tyrasd/README.md

Last active February 2, 2016 15:25
Show Gist options
  • Star 1 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save tyrasd/f60119bbd9105154d872 to your computer and use it in GitHub Desktop.
Save tyrasd/f60119bbd9105154d872 to your computer and use it in GitHub Desktop.
Download ZIP
🚲 Bikeability Index Graz – http://bl.ocks.org/tyrasd/f60119bbd9105154d872/
Raw
README.md
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<title>Bikeability-Index Graz</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!--leaflet-->
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/leaflet/0.7.7/leaflet.css" />
<script src="//cdnjs.cloudflare.com/ajax/libs/leaflet/0.7.7/leaflet.js"></script>
<script src="TileLayer.Grayscale.js"></script>
</head>
<body>
<div id="map" style="position:absolute; top:0; left:0; right:0; bottom:0;"></div>
<script>
var map = L.map('map', { maxZoom: 15 }).setView([47.0731932, 15.4419574], 12);
L.tileLayer.grayscale('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
attribution: 'Basemap &copy; <a href="www.openstreetmap.org/copyright">OpenStreetMap contributors</a>'
}).addTo(map);
var bikeability = L.imageOverlay('bikeabilitygraz.jpg', [
[47.0118864, 15.3497141],
[47.1345000, 15.5342006]
], { opacity: 0.5, attribution: 'Bikeability Index Map &copy; <a href="http://dx.doi.org/10.4236/ojce.2015.54045">Krenn, Oja, Titze</a> (CC-BY 4.0)' }).addTo(map);
L.control.layers(undefined, {"Bikeability Graz": bikeability}).addTo(map);
</script>
</body>
</html>
Raw
TileLayer.Grayscale.js
/*
* L.TileLayer.Grayscale is a regular tilelayer with grayscale makeover.
*/
L.TileLayer.Grayscale = L.TileLayer.extend({
options: {
enableCanvas: true,
quotaRed: 3,
quotaGreen: 4,
quotaBlue: 1,
quotaDividerTune: 0,
quotaDivider: function() {
return this.quotaRed + this.quotaGreen + this.quotaBlue + this.quotaDividerTune;
}
},
initialize: function (url, options) {
var canvasEl = document.createElement('canvas');
if( !(canvasEl.getContext && canvasEl.getContext('2d')) ) {
options.enableCanvas = false;
}
L.TileLayer.prototype.initialize.call(this, url, options);
},
_loadTile: function (tile, tilePoint) {
tile.setAttribute('crossorigin', 'anonymous');
L.TileLayer.prototype._loadTile.call(this, tile, tilePoint);
},
_tileOnLoad: function () {
if (this._layer.options.enableCanvas && !this.canvasContext) {
var canvas = document.createElement("canvas");
canvas.width = canvas.height = this._layer.options.tileSize;
this.canvasContext = canvas.getContext("2d");
}
var ctx = this.canvasContext;
if (ctx) {
this.onload = null; // to prevent an infinite loop
ctx.drawImage(this, 0, 0);
var imgd = ctx.getImageData(0, 0, this._layer.options.tileSize, this._layer.options.tileSize);
var pix = imgd.data;
for (var i = 0, n = pix.length; i < n; i += 4) {
pix[i] = pix[i + 1] = pix[i + 2] = (this._layer.options.quotaRed * pix[i] + this._layer.options.quotaGreen * pix[i + 1] + this._layer.options.quotaBlue * pix[i + 2]) / this._layer.options.quotaDivider();
}
ctx.putImageData(imgd, 0, 0);
this.removeAttribute("crossorigin");
this.src = ctx.canvas.toDataURL();
}
L.TileLayer.prototype._tileOnLoad.call(this);
}
});
L.tileLayer.grayscale = function (url, options) {
return new L.TileLayer.Grayscale(url, options);
};
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment