Hybrid layer is intended to render massive vector geodata in browser without sending full geometry, but allowing some types of user interaction.

More concretely, it consists of a pre-rendered in pseudo-colors geometry (PNG image) and a correspondence between that pseudo-colors and original objects (text file). It is an intermediate format between fully server-side rendered images and original vector data.

Hybrid layers allow the following manipulations on the client side:

• to change colors of separate objects
• to change transparency of objects
• to reorder objects
• to get information about objects in any point without sending request to the server

This repository contains an implementation of server renderer and client-side viewer.

Examples

• Australia and Oceania OSM GPS Tracks
• OSM "route" relations in Moscow
• 10 years of OSM edits (idea and data from the Mapbox example)

Format

All the data is splitted into classical "Google tiles". Each tile is described by two files:

• PNG image 256x256. Each pixel stores an index in RGB channels (index = R << 16 + G << 8 + B), A channel is always 255. There should be no gaps in the indexes - if there is a pixel with index N, then it should be at least one pixel for each index less than N.
• JSON file with index descriptions. It is an array of arrays. External array corresponds to indexes in a PNG file. Each index is described by an array of objects' IDs for that index.

The way of how objects' attributes or colors are transferred to a client is not defined.

API

The main class L.HybridLayer extends L.TileLayer.Canvas. Constructor receives URLTemplate as the first argument:

    var hybridLayer = new L.HybridLayer('http://localhost/tiles/{z}/{x}/{y}');

PNG tiles should have postfix _img.png, JSON tiles - _info.txt.

L.HybridLayer has the following additional options:

Option	Type	Description
colorFunc	function(objID)->array[4]	Function, that returns color by object ID
indexFunc	function(index)->array[4]	Function, that returns color by index in tile
sortFunc	function(a, b)->Number	Function to sort an array of object IDs (as in JS Array.sort)