How to load a custom .pbf file in ngx-openlayers

Question

I was able to load maps using the ngx-openlayers with the following code

   <aol-map [width]="'100%'" [height]="'100%'">
      <aol-view [zoom]="zoom">
        <aol-coordinate [x]="5" [y]="45" [srid]="'EPSG:4326'"></aol-coordinate>
      </aol-view>
      <aol-layer-tile [opacity]="opacity">
        <aol-source-osm></aol-source-osm>
      </aol-layer-tile>
      <aol-layer-vector [opacity]="opacity">
        <aol-source-vector>
          <aol-feature>
            <aol-geometry-point>
              <aol-coordinate [x]="5" [y]="45" [srid]="'EPSG:4326'"></aol-coordinate>
            </aol-geometry-point>
            <aol-style>
              <aol-style-circle [radius]="10">
                <aol-style-stroke [color]="'black'" [width]="width"></aol-style-stroke>
                <aol-style-fill [color]="'green'"></aol-style-fill>
              </aol-style-circle>
            </aol-style>
          </aol-feature>
          <aol-feature>
            <aol-geometry-point>
              <aol-coordinate [x]="5.1" [y]="45.1" [srid]="'EPSG:4326'"></aol-coordinate>
            </aol-geometry-point>
            <aol-style>
              <aol-style-icon [src]="'assets/marker.png'" [anchor]="[0.5, 1]" [anchorXUnits]="'fraction'" [anchorYUnits]="'fraction'" [scale]="0.1"
                [anchorOrigin]="'top-left'">
              </aol-style-icon>
            </aol-style>
          </aol-feature>
        </aol-source-vector>
      </aol-layer-vector>
    </aol-map>

My issue is I want to load a custom map location that I have served on my local machine using MapTile server on http://localhost:8090/tileserver.php#trails/ol3 URL. Now the XYZ URL from the above server is (http://localhost:8090/tileserver.php?/index.json?/trails/{z}/{x}/{y}.pbf)

How can I load this map using the ngx-openlayers packkage

I have tried to use this but it is not working

<aol-map [width]="'500px'" [height]="'300px'">
        <aol-interaction-default></aol-interaction-default>
        <aol-control-defaults></aol-control-defaults>
        <aol-control-fullscreen></aol-control-fullscreen>
        <aol-layer-tile>
        <aol-source-osm></aol-source-osm>
        <aol-source-xyz [url]="'http://localhost:8090/tileserver.php?/index.json?/trails/{z}/{x}/{y}.pbf'">
        </aol-source-xyz>
        </aol-layer-tile>

        <aol-view [zoom]="12">
        <aol-coordinate [x]="6.47" [y]="53.44" [srid]="'EPSG:4326'"></aol-coordinate>
        </aol-view>
        </aol-map>

[PBF](https://wiki.openstreetmap.org/wiki/PBF_Format) is the file format of raw OSM vector data. A [tile](https://wiki.openstreetmap.org/wiki/Tiles) server needs raster images instead (which can be produced by *rendering* PBF data). — scai, May 01 '18 at 20:19
Thanks, I get it now but how can PBF data can be rendered? is it at runtime? or there is a tool I can use to generate the .png without losing the folder structure? or use mbtiles? — Miki Maine Amdu, May 02 '18 at 08:45
[Rendering](https://wiki.openstreetmap.org/wiki/Rendering) needs a [tile server](https://switch2osm.org/serving-tiles/) to do it on the fly or some software like Maperitive or TileMill to do it beforehand. mbtiles will work, too. They contain pre-rendered tiles. — scai, May 02 '18 at 08:51

score 0 · Accepted Answer · answered May 03 '18 at 10:27

So yeah I'm about to answer my own question cause it might help someone in the future.

The Basics

There are two broad classifications for maps from OSM (OpenStreetMap)

1.Raster Format: This one is the raster image (PNG, JPEG, SVG ...) tiles for the map. This format can be compressed and put it to .mbtiles format. You can use tools like mbuilt to extract the contents into the tms, wsm or XYZ folder structure. This one is the easy and faster option.

Vector Format: This one is a Vector file format it can have multiple file type like .pbf inside it. It can also be compressed into a .mbtiles file. we need a tile server to render the contents of the vector files. Tile server GL is a tile server to serve both vector/raster map files (mbtiles)

After solving the offline hosting issue, I have used a default leaflet.js package for angular and everything worked fine without an issue.

I used OpenMaptiles map files to host them using the tileserver-gl

How to load a custom .pbf file in ngx-openlayers

1 Answers1