Wykks / ngx-mapbox-gl

Angular binding of mapbox-gl-js
https://wykks.github.io/ngx-mapbox-gl
MIT License
344 stars 138 forks source link

i'm trying to navigate US Polygon #280

Open ipula-cstech opened 3 years ago

ipula-cstech commented 3 years ago

i want to navigate state -> county like wise help needed

<mgl-map
    [style]="'mapbox://styles/mapbox/light-v9'"
    [zoom]="[3]"
    [center]="[-103.59179687498357, 40.66995747013945]"
    (mapLoad)="map = $event"
    style="height: 100%;"
    (click)="mapClicked($event)"
    [fitBounds]="bounds"
    [movingMethod]="jumpTo"
  >
  <ng-container>
    <mgl-geojson-source
      id="earthquakes"
      [data]="earthquakes"
      [cluster]="true"
      [clusterMaxZoom]="14"
      [clusterRadius]="50"
    >
    </mgl-geojson-source>
    <mgl-layer
        id="states-layer"
        type="fill"
        [source]="{
          type: 'geojson',
          data:'assets/api/states.json'
        }"
        [paint]="{
          'fill-color': 'rgba(200, 100, 240, 0.4)',
          'fill-outline-color': 'rgba(200, 100, 240, 1)'
        }"
        (layerMouseEnter)="cursorStyle = 'pointer'"
        (layerMouseLeave)="cursorStyle = ''"
        (layerClick)="onClickPolygon($event)"
      ></mgl-layer>
  </ng-container>
</mgl-map>
ipula-cstech commented 3 years ago
 onClickPolygon($evt: MapLayerMouseEvent) {
    this.selectedLngLat = $evt.lngLat;
    this.selectedElement = $evt.features![0];
    this.map.getSource('states-layer');
    this.map.easeTo({
      center: this.selectedElement.geometry.coordinates,
      zoom: 3
    })
    this.bounds=[this.map.getBounds().getSouthWest().lng,this.map.getBounds().getSouthWest().lat,this.map.getBounds().getNorthEast().lng,this.map.getBounds().getNorthEast().lat]
  }