CODEWITHSUNDEEP
javascriptmapbox
Bhrungarajni
Bhrungarajni

Reputation: 2535

how to filter the contents from list to the mapbox

I have a list of display items, if i click on one of the item, i want rest to get filtered based on the selected one. I want to filter the marker points based on the display list selected. Can anyone help me to solve this. i had tried with many examples from mapbob but none of them worked for me.

HTML:

<mat-select >

          <mat-option *ngFor="let interview of displayList" [value]="interview._id">

TS:

 mapboxgl.accessToken = 'pk.eyJ1IjoicmFrc2hpdGhhMTkiLCJhIjoiY2pjcHl1YW5wMjR5czJ6bzdqdjZrbDRzeSJ9.OOqu6zVyNsXavzCsYoBdPA';
    var coOrdinates = this.points;
    **var filterGroup = document.getElementById('filter-group');**
    var map = new mapboxgl.Map({
      container: 'maps',
      style: 'mapbox://styles/mapbox/streets-v9',
      center: [coOrdinates[1].lat,coOrdinates[1].lang],
      zoom: 3
    });

    });

Upvotes: 0

Views: 283

Answers (1)

Sravan
Sravan

Reputation: 18647

You have to catch the change event for the mat-select using (change) and then you have to filter data,

Here are the code changes you have to make after refering to your code and plunker

HTML:

<mat-select id='filter-group' class='filter-group' (change)="myFunction($event)">

    <mat-option *ngFor="let interview of displayList" [value]="interview.name">

    </mat-option>
</mat-select>

watch (change)="myFunction($event)" we are going to take myFunction in component.

TS:

myFunction(event){ 
    this.loadAllPins(event.value); 
}

loadAllPins(filter) { 
    let that = this; 
    this.points = this.places.map(function(pins) { 
    return {"name":pins.name,"lat":pins.lat,"lang":pins.lang,"address":pins.address,"category_name":pins.category_name,"description":pins.description,"email":pins.email,"phone_number":pins.phone_number,"pin_media":pins.pin_media, 
    "country":pins.user_details.country,"user_name":pins.user_details.user_name,"user_id":pins.user_id,"pin_id":pins._id}; 
    }); 
    if(filter) { 
        this.points = this.points.filter( 
        point => point.category_name == filter 
        ); 
    if (this.points == "") { 
        console.log("empty"); 
    } 
    } 
    mapboxgl.accessToken = 'pk.eyJ1IjoicmFrc2hpdGhhMTkiLCJhIjoiY2pjcHl1YW5wMjR5czJ6bzdqdjZrbDRzeSJ9.OOqu6zVyNsXavzCsYoBdPA'; 
    var coOrdinates = this.points; 
    var filterGroup = document.getElementById('filter-group'); 
    if(coOrdinates.length){ 
    var map = new mapboxgl.Map({ 
    container: 'maps', 
    style: 'mapbox://styles/mapbox/streets-v9', 
    center: [coOrdinates[0].lat,coOrdinates[0].lang], 
    zoom: 3 
    }); 
    } 
    else{ 
    var map = new mapboxgl.Map({ 
    container: 'maps', 
    style: 'mapbox://styles/mapbox/streets-v9', 
    zoom: 3 
    }); 
}

The filter logic I added is,

 if(filter) { 
      this.points = this.points.filter( 
      point => point.category_name == filter 
      ); 
  }

Upvotes: 1

Related Questions