How to create a vector tiles map with ngx-leaflet (Angular way)?

Question

Any good recommended angular 6+ supported libraries which can be used to accomplish the following task?

I'm using ngx-leaflet as the Map. I wish to create the map with Vectors rather than Rasters. I know that Leaflet doesn’t support vector tiles by default, however, you can accomplish via mapbox-gl-leaflet plugin.

Can anyone recommend me an approach or an appropriate library to accomplish this task using angular 6+?

Answer 1

You may use Leaflet.VectorGrid plugin. See ngx-leaflet-starter and the associated demo.

1. Install it via yarn add leaflet.vectorgrid

2. Create binding file src/typings/leaflet.vectorgrid.d.ts defining API you want to use, eg:

   import * as L from "leaflet";
   
   declare module "leaflet" {
     namespace vectorGrid {
       export function slicer(data: any, options?: any): any;
     }
   }
   

3. Load your vector tiles, for instance:

   // add import statement
   import * as L from "leaflet";
   // then call...
   loadGeojson() {
       this.http.get("assets/airports.min.geojson").subscribe(result => {
               this.vtLayer = L.vectorGrid.slicer(result, {
                 zIndex: 1000
               });
               this.vtLayer.addTo(this.map);
       });
   }