Skip to content

Commit

Permalink
Included modified copy of KothicJS, removed patches, updated README
Browse files Browse the repository at this point in the history
  • Loading branch information
rurseekatze committed Aug 18, 2014
1 parent e5c01d2 commit 3b867eb
Show file tree
Hide file tree
Showing 18 changed files with 2,553 additions and 347 deletions.
46 changes: 18 additions & 28 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -6,17 +6,17 @@

## Features

* Serves tiles bitmap tiles usable in Leaflet or OpenLayers
* Serves vector tiles rendered on clientside by KothicJS
* Uses KothicJS both as bitmap renderer on serverside and canvas renderer on clientside
* Filesystem caching mechanisms
* Map styling with MapCSS
* Support for tiles in multiple rendering styles
* Designed to use a osm2pgsql hstore database containing OpenStreetMap data
* Refresh tiles manually by GET requests
* Rerender expired tiles automatically in the background
* High performance that profits from the non-blocking I/O design of NodeJS
* Easy to install on several operating systems, distributions and environments due to less dependencies
* Serves tiles bitmap tiles usable in Leaflet or OpenLayers
* Serves vector tiles rendered on clientside by KothicJS
* Uses KothicJS both as bitmap renderer on serverside and canvas renderer on clientside
* Filesystem caching mechanisms
* Map styling with MapCSS
* Support for tiles in multiple rendering styles
* Designed to use a osm2pgsql hstore database containing OpenStreetMap data
* Refresh tiles manually by GET requests
* Rerender expired tiles automatically in the background
* High performance that profits from the non-blocking I/O design of NodeJS
* Easy to install on several operating systems, distributions and environments due to less dependencies

## Authors

Expand All @@ -41,7 +41,7 @@

After that you can install all necessary NodeJS modules with npm:

$ npm install canvas@1.0.4
$ npm install canvas
$ npm install rbush
$ npm install mkdirp
$ npm install pg
Expand Down Expand Up @@ -122,20 +122,6 @@

Have a look at an [example toolchain](https://github.com/rurseekatze/OpenRailwayMap/blob/master/import/import.sh) for an example of using osm2pgsql with filtered data.

If you want to use vector tiles for client-side rendering, you have to install KothicJS and do some modifications. If you just want to use bitmap tiles, you can skip the next steps.

Clone the KothicJS repository:

$ git clone https://github.com/kothic/kothic-js.git
$ cd kothic-js

Apply some patches, otherwise some features will not work properly:

$ patch src/kothic.js < ../patches/kothic.diff
$ patch src/style/style.js < ../patches/style.diff
$ patch dist/kothic-leaflet.js < ../patches/kothic-leaflet.diff
$ patch style/mapcss.js < ../patches/mapcss.diff

You need MapCSS converter to compile your MapCSS styles to javascript:

$ wget https://raw2.github.com/kothic/kothic-js-mapcss/master/scripts/mapcss_converter.py
Expand All @@ -151,6 +137,8 @@

$ for stylefile in *.mapcss ; do python mapcss_converter.py --mapcss "$stylefile" --icons-path . ; done

Note that you have to recompile the stylesheets every time you change the MapCSS files to apply the changes. It is also necessary to restart the tileserver to reload the stylesheets.

You need a proxy that routes incoming requests. It is recommended to use a NodeJS proxy like [this](https://github.com/rurseekatze/OpenRailwayMap/blob/master/proxy.js), especially if you are running another webserver like Apache parallel to NodeJS. Remember to change the domains in the script and the configuration of your parallel running webservers. The NodeJS proxy listens on port 80 while parallel webservers should listen on 8080.

Now you are almost ready to run the tileserver. You just need to check the configuration.
Expand All @@ -171,7 +159,7 @@ You can set various options to configure your tileserver:

* `expiredtilesdir` Relative or absolute path to the list of expired tiles. _Default: `../../olm/import`_

* `scriptdir` Relative or absolute path to the directory of the required scripts, usually `kothic-js/src`. _Default: `../js`_
* `scriptdir` Relative or absolute path to the directory of the required scripts, usually the `kothic` directory included in this repository. _Default: `../js`_

* `styledir` Relative or absolute path to the directory containing (compiled) MapCSS styles. _Default: `../styles`_

Expand Down Expand Up @@ -260,7 +248,7 @@ __Note:__ For some parameters it is also necessary to change the modify the opti

__Leaflet example:__

Include all javascript files from kothic-js/src and kothic-js/dist and your compiled MapCSS styles into your website.
Include all javascript files from kothic/src and kothic/dist and your compiled MapCSS styles into your website.

...
map = L.map('mapFrame');
Expand Down Expand Up @@ -359,3 +347,5 @@ This program is free software: you can redistribute it and/or modify it under th
This program is distributed in the hope that it will be useful, but WITHOUT ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU General Public License for more details.

You should have received a copy of the GNU General Public License along with this program. If not, see http://www.gnu.org/licenses/.

__The files in the `kothic` directory are published under other licenses. See the header of each file for more information.__
170 changes: 170 additions & 0 deletions kothic/kothic-leaflet.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,170 @@
/*
Copyright (c) 2011-2013, Darafei Praliaskouski, Vladimir Agafonkin, Maksim Gurtovenko
All rights reserved.
Redistribution and use in source and binary forms, with or without modification, are
permitted provided that the following conditions are met:
1. Redistributions of source code must retain the above copyright notice, this list of
conditions and the following disclaimer.
2. Redistributions in binary form must reproduce the above copyright notice, this list
of conditions and the following disclaimer in the documentation and/or other materials
provided with the distribution.
THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS" AND ANY
EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED WARRANTIES OF
MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE
COPYRIGHT HOLDER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL,
EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION)
HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR
TORT (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF THIS
SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
*/


L.TileLayer.Kothic = L.TileLayer.Canvas.extend({
options: {
tileSize: 256,
zoomOffset: 0,
minZoom: 2,
maxZoom: 19,
updateWhenIdle: true,
unloadInvisibleTiles: true,
attribution: 'Map data &copy; 2013 <a href="http://osm.org/copyright">OpenStreetMap</a> contributors,' +
' Rendering by <a href="http://github.com/kothic/kothic-js">Kothic JS</a>',
async: true,
buffered: false,
styles: MapCSS.availableStyles
},

initialize: function(url,options) {
L.Util.setOptions(this, options);

this._url = url;
this._canvases = {};
this._scripts = {};
this._debugMessages = [];

window.onKothicDataResponse = L.Util.bind(this._onKothicDataResponse, this);
},

_onKothicDataResponse: function(data, zoom, x, y) {
var key = [zoom, x, y].join('/'),
canvas = this._canvases[key],
zoomOffset = this.options.zoomOffset,
layer = this;

if (!canvas) {
return;
}

function onRenderComplete() {
layer.tileDrawn(canvas);

document.getElementsByTagName('head')[0].removeChild(layer._scripts[key]);
delete layer._scripts[key];
}

var styles = this.options.styles;

Kothic.render(canvas, data, zoom + zoomOffset, {
styles: styles,
onRenderComplete: onRenderComplete
});

delete this._canvases[key];
},

getDebugMessages: function() {
return this._debugMessages;
},

drawTile: function(canvas, tilePoint, zoom) {
var zoomOffset = this.options.zoomOffset,
key = [(zoom - zoomOffset), tilePoint.x, tilePoint.y].join('/'),
url=this._url.replace('{x}',tilePoint.x).
replace('{y}',tilePoint.y).
replace('{z}',zoom-zoomOffset);
this._canvases[key] = canvas;
this._scripts[key] = this._loadScript(url);
},

enableStyle: function(name) {
// start modified by rurseekatze
if (this.options.styles.indexOf(name) == -1) {
// end modified by rurseekatze
this.options.styles.push(name);
}
},

disableStyle: function(name) {
if (this.options.styles.indexOf(name) >= 0) {
var i = this.options.styles.indexOf(name);
this.options.styles.splice(i, 1);
}
},

// start modified by rurseekatze
redraw: function() {
MapCSS.invalidateCache();

this._map.getPanes().tilePane.empty = false;

if (this._map) {
this._reset({hard: true});
this._update();
}

for (var i in this._tiles) {
this._redrawTile(this._tiles[i]);
}
return this;
},
// end modified by rurseekatze

_invertYAxe: function(data) {
var type, coordinates, tileSize = data.granularity, i, j, k, l, feature;
for (i = 0; i < data.features.length; i++) {
feature = data.features[i];
coordinates = feature.coordinates;
type = data.features[i].type;
if (type === 'Point') {
coordinates[1] = tileSize - coordinates[1];
} else if (type === 'MultiPoint' || type === 'LineString') {
for (j = 0; j < coordinates.length; j++) {
coordinates[j][1] = tileSize - coordinates[j][1];
}
} else if (type === 'MultiLineString' || type === 'Polygon') {
for (k = 0; k < coordinates.length; k++) {
for (j = 0; j < coordinates[k].length; j++) {
coordinates[k][j][1] = tileSize - coordinates[k][j][1];
}
}
} else if (type === 'MultiPolygon') {
for (l = 0; l < coordinates.length; l++) {
for (k = 0; k < coordinates[l].length; k++) {
for (j = 0; j < coordinates[l][k].length; j++) {
coordinates[l][k][j][1] = tileSize - coordinates[l][k][j][1];
}
}
}
} else {
throw "Unexpected GeoJSON type: " + type;
}

if (feature.hasOwnProperty('reprpoint')) {
feature.reprpoint[1] = tileSize - feature.reprpoint[1];
}
}
},

_loadScript: function(url) {
var script = document.createElement('script');
script.src = url;
script.charset = 'utf-8';
document.getElementsByTagName('head')[0].appendChild(script);
return script;
}
});
Loading

0 comments on commit 3b867eb

Please sign in to comment.