Search code examples
openlayersopenlayers-5angular-openlayers

Different types of Tiles in Open Layers


I am new to Open Layers and i stumbled upon different types of tiles which are: image tile, Tile, Vector, Vector Tile. I would really like to know the difference between these four. Also, would like to know which one of these are the faster for loading the map on the screen.


Solution

  • Simplified explanation:

    A map is divided into a grid of tiles (Tile). These can be either image tiles (ImageTile) or vector tiles (VectorTile).

    A tile contains geographic information. For image tiles this information is rendered into a raster image on the server and sent to the client. For vector tiles the information is sent typically as JSON along with som styling information as it is the job of the client to render the tile.

    Which is better depends on your particular use case.


    Here are some pros and cons between image and vector tiles (courtesy of maptiler.com).

    Image tiles

    Pros:

    • Suitable for raster data like satellite/aerial imagery
    • Lower requirements for end-users hardware
    • Still a bit better support in web JavaScript libraries and desktop GIS software

    Cons:

    • A bigger size of each tile and data on servers
    • Takes more time to generate
    • Slower loading disrupts the user experience when moving around the map

    Vector tiles

    Pros:

    • Smaller data size and therefore lower disk space requirement
    • Lower bandwidth consumption
    • Faster generating time
    • Better user experience - smooth zooming
    • No need for zoom levels - users zoom and pan throughout all scales
    • De-facto mobile standard
    • Easy customization - with one small text file, you define how the map should look like, what font should be used, language for map labels and even hide specific map elements - everything on-the-fly

    Cons:

    • The map is rendering on the client’s side and requires a bit more powerful hardware
    • Data are generalized and therefore not suitable for direct edits