Using Identification Tiles Technology to Serve Maps

Share:
Ad:

You can save a lot of resources by implementing identification tiles technology which enables you to host your map on a standard and static website with using a map server.

What is Identification Tile Technology?

Identification tiles is a technique to embed into map tiles IDs of features, so when the user clicks on a tile, the click can be handled client-side and the IDs of the features selected can be calculated on the fly.

How Identification Tile Technology Works

Identification tiles are a structured directory of PNGs following the slippy map specification.

Each PNG contains many feature IDs, where the features actually are so for the end-user application will be computionally fast to get those informations simply obtaining the raw bits of the image.

The former and suggested implementation divides each PNG 256×256 pixel in a 64×64 grid, with 4×4 pixel in each cell.

Using 8 bit as color dept you can store up to 3 UUIDs version 4 in each cell:

An UUID is128 bits
We know that all features use UUID version 4122 bits
We need to store 3 UUIDs v4 in each cell366 bits
We use first bit of red channel to store utility information382 bits
Store the number of features, maximum is 3 so we need 2 bits384 bits
In a 4×4 square of PNG (lossless) we have three 8bit channels384 bits
Unused bits000 bits

When implementing it is required that you use images that are in PNG format since they are lossless, and we are accessing raw bytes of the image.

How to Use Identification Tiles

Your first step is to produce identification tiles starting from your data.

You can follow our free and open PostGIS implementation. [LINK to https://github.com/osm-for-the-dyslexic/data_management/blob/master/scripts/008_uuid_tiles.sql]

Like map tiles you have to choose which features are selectable for each zoom level.

The second step is made of computation only and is the generation of many small images: the identification tiles.

You end up with a directory where each file represent the identificable features for an area.

The identification tile of the World at zoom level zero.

The identification tile of the World at zoom level zero.

Inside an identification tile you can see the encoded IDs of the features.

Inside an identification tile you can see the encoded IDs of the features.

Your work is not done, there is a third step because your server has to be ready to handle identification requests. The suggested implementation is to store identification data in JSON files, directly on the file system of the server. To limit the number of JSON files in the “data directory” use the first 3 characters of the exadecimal representation of the UUID as subdirecory name.

\000

\0008de09-1db1-4985-b3c0-9e4a1b1de80f.json

\00a

\00a3a895-9158-458a-9a02-9fbee931791b.json

\00a782cd-471b-4825-b608-d10d799b4054.json

\00a01926-3cf5-47d2-8f6a-22e0da39215b.json

At the end of your server-side work you should have:

– a directory of map tiles, following the slippy map specification

– the directoy of identification tiles, an identification tile for each map tile

– the data directory, containing json data to be accessed for identification

Upload everything on a static web site and forget.

Client Side

Since it is a very new technique, at the time of writing no one of the wide-used libraries handle identification tiles, you have to implement it by your self. Make use of this free and open javascript implementation [LINK to https://github.com/osm-for-the-dyslexic/viewer/blob/gh-pages/js/frontend-manager.js].

About the Author: Massimiliano Bernabé

I enjoy working with geographical data, and my experience is from back end to the front end passing through the database.

– I design geodatabases and implement a wide range of computations among them.

– I develop mobile applications web and native

– I prefer open source to commercial, but not always.

I think facing real problems is the best way to learn and innovate.

Website: develost.com

twitter: develost_com

facebook: https://www.facebook.com/mass.bernabe

linkedin: https://it.linkedin.com/in/massimilianobernabe/en



Advertising


Like this article and want more?

Enter your email to receive the weekly GIS Lounge newsletter:

Advertising