OpenStreetMap

Experimenting with ClearTables, self-hosted vector tiles, and Tangram client-side rendering

Posted by pnorman on 24 August 2016 in English (English)

I've been experimenting with generating my own vector tiles and client-side rendering with Tangram in order to figure out how to best write a style in its language.

Tangram is a GL-based renderer written by Mapzen and normally used with their Tilezen vector tiles, but I'm interested in being able to make my own vector tiles with different cartographic choices.

Having a diverse selection of vector tile schemas is important, as is avoiding a situation where only large players in the market can get involved like right now.

For a toolchain I used osm2pgsql with ClearTables and Mapnik via Kosmtik to write vector tiles. With the demo I'm serving pre-rendered vector tiles from disk, but Kosmtik is useful in development with it's xray functionality. I input the style into Tangram Play, a web-based editor that automatically reloads the map when you change the style.

The cartography and vector tile definitions are loosely based on OSM Clear, a demo style I wrote. I didn't want to learn the language while designing new cartography at the same time. Being a learning exercise I don't consider the style complete or free of bugs.

The demo page is on my server at http://tangram-clear-demo.faramir.paulnorman.ca/ with the style and vector tile code at https://github.com/ClearTables/tangram-clear-demo.

I'm not sure what direction I'm going to take next as I don't have any particular style goals right now, or collaborators.

Cross-post from https://lists.openstreetmap.org/pipermail/dev/2016-August/029448.html

Comment from Severak on 25 August 2016 at 10:54

It takes some time to render the demo. Which tool did you used to generate vector tiles?

Hide this comment

Comment from pnorman on 26 August 2016 at 00:32

Which tool did you used to generate vector tiles?

The vector tiles were pre-rendered Kosmtik, using Mapnik. I just scraped my local development setup with curl. There are better ways to do this, but this had the advantage of being easy.

It takes some time to render the demo

I looked at the network timeline, and the slowness is coming from a few causes

  • Some vector tiles are large and unoptimized
  • The server isn't the fastest and has no CDN
  • All access is done on one domain, so there are limits on how many parallel connections browsers will do
Hide this comment

Leave a comment

Parsed with Markdown

  • Headings

    # Heading
    ## Subheading

  • Unordered list

    * First item
    * Second item

  • Ordered list

    1. First item
    2. Second item

  • Link

    [Text](URL)
  • Image

    ![Alt text](URL)

Login to leave a comment