Kothic JS is a full-featured JavaScript map rendering engine using HTML5 Canvas. It was initially developed as a JavaScript port of Kothic rendering engine written in Python.

Check out the demo: http://kothic.org/

Maintenance status

Kothic JS is a legacy runtime and compatibility target for existing Canvas rendering integrations. The maintained MapCSS-to-Kothic JS converter now lives in kothic/kothic and emits MapCSS.loadStyle(...) style modules for this runtime.

Large new features should come as fresh source-level pull requests with a working demo or focused tests. Old feature requests and stale demo reports may be closed as historical unless someone is actively maintaining that path.

Features

• Rendering OpenStreetMap data visually on par with Mapnik
• MapCSS support (see How to Prepare a Map Style)
• rendering from lightweight GeoJSON-like tiles (see Tiles Format)
• easy integration with Leaflet (interactive maps library)

Building Kothic

Install Node.js, then run:

npm install
npm install -g grunt-cli
grunt

Minified Kothic source will be generated in the dist folder.

Run the local checks with:

npm test

The test suite builds Kothic, runs the Leaflet clickable-layer smoke test, and compares a browser-rendered canvas fixture with a checked-in PNG baseline using pixelmatch. The pretest step installs the Playwright Chromium binary when it is missing. To intentionally refresh the render baseline, run:

UPDATE_RENDER_FIXTURES=1 node tests/render-pixelmatch-test.js

Basic usage

Include kothic.js from the dist folder on your page. Now you can call:

Kothic.render(
	canvas, // canvas element (or its id) to render on
	data, // JSON data to render
	zoom, // zoom level
	{
		onRenderComplete: callback, // (optional) callback to call when rendering is done
    	styles: ['osmosnimki-maps', 'surface'], // (optional) only specified styles will be rendered, if any
    	locales: ['be', 'ru', 'en'] // (optional) map languages, see below
	});

locales Kothic-JS supports map localization based on name:lang tags. Renderer will check all mentioned languages in order of persence. If object doesn't have localized name, name tag will be used.

Contributing to Kothic JS

Kothic JS is licensed under a BSD license, and we'll be glad to accept your contributions!

Core contributors:

• Darafei Praliaskouski (@Komzpa)

• Vladimir Agafonkin (@mourner, creator of Leaflet)

• Maksim Gurtovenko (@Miroff)

• Leaflet 1.x compatibility, Stephan Brandt (@braandl)