CODEWITHSUNDEEP
angularmapbox-gl
cpeddie
cpeddie

Reputation: 799

adding satellite layer to ngx-mapboxgl street map

I've spent the day trying to decipher how to add a satellite layer to an ngx-mapboxgl map in an angular map, and think I am oh so close. I believe I've managed to actaully add the layer to the map, but I'm getting an error I have no idea how to fix at runtime. Here is the html where I create the map:

<mat-card >
    <mat-card-content >
  <mgl-map
  [style]="mapStyle"
  [zoom]="_zoom"
  [center]="_center"
  (load)="loadMap($event)"
  (zoomEnd)="onZoom($event)">
  <mgl-control
      mglScale
      unit="imperial"
      position="top-right">
  </mgl-control>


</mgl-map>
  <div class="map-overlay">
    <button mat-button (click)="layerControl()"><mat-icon>layers</mat-icon>    </button>
  </div>
  </mat-card-content>
</mat-card>

and here is the code where I'm trying to add the satellite layer:

  loadMap( map: Map) {
     this._mapRef = map;
     this._center = map.getCenter();
     this._mapRef.addLayer({
       "id": "satellite",
       "type": "raster",
       "visible": "visible",
       "source": {
         "type": "raster",
         "source": 'mapbox://styles/v1/mapbox/satellite-streets-v9'
       },
       maxzoom: 14
     });
  
     console.log('map=',this._mapRef);
   }

First, I'm getting a compiler error telling I'm using type GeoJSON when I'm specify type of raster (ERROR in ../home/home.component.ts(93,9): error TS2322: Type '{ "type": string; "source": string; }' is not assignable to type 'string | GeoJSONSourceRaw | VideoSourceRaw | ImageSourceRaw | CanvasSourceRaw | VectorSource | RasterSource | RasterDemSource'. Object literal may only specify known properties, and '"source"' does not exist in type 'AnySourceData'.)

, then I get a runtime error complaining about length which I cannot figure where it is being thrown: enter image description here

I searched and searched for some documentation on how to do this in angular, but have not found any example applies to ngx/angular and ts. I'm sure it can be done, but am currently at a loss for where to turn next.

Any pointers?

Thanks.......

Upvotes: 0

Views: 779

Answers (1)

cpeddie
cpeddie

Reputation: 799

After a couple of days of digging and experimenting, I finally have the code to add a satellite layer to a ngx-mapboxgl street map, and toggle its visibility. Code to add the layer to the map:

  loadMap( map: Map) {
    this._mapRef = map;
    this._center = map.getCenter();
    this._mapRef.addLayer({
      id: 'satellite-street',
      type: 'raster',
      layout: {
        visibility: 'visible'
      },
      source: {
        type: 'raster',
        url: 'mapbox://mapbox.satellite'
      },
      'source-layer': 'satellite',
      maxzoom: 15
    });

and the lines that turn on/off its visibility:

 this._mapRef.setLayoutProperty( 'satellite-street', 'visibility', 'visible');

Hopefully this will save some other people a lot of wasted time trying to find this all documented in spot.

Cheers!

Upvotes: 1

Related Questions