--- title: "Filter within a Layer | JavaScript maps SDK" description: "Use setFilter to filter map layers based on input." --- > For AI agents: a documentation index is available at [/llms.txt](https://docs.maptiler.com/llms.txt). Markdown versions of all pages are available by appending .md to any URL. # Filter within a Layer This example shows how to filter a layer based on user input using `setFilter()`. Download the [earthquake sample data](../../assets/earthquakes.geojson). ### NPM module setup ```bash npm install --save @maptiler/sdk ``` #### main.js ```js import { Map, MapStyle, config } from '@maptiler/sdk'; import '@maptiler/sdk/dist/maptiler-sdk.css'; config.apiKey = 'YOUR_MAPTILER_API_KEY_HERE'; const data = {}; const map = new Map({ container: 'map', style: MapStyle.DATAVIZ.DARK, center: [-156.6, 44], zoom: 1.6, }); map.on('load', async function () { await maptilersdk.helpers.addPoint(map, { layerId: 'earthquakes', data: 'YOUR_MAPTILER_DATASET_ID_HERE', pointColor: '#FB3A1B', pointRadius: 40 }); }); document.getElementById('nav-filter').addEventListener('change', (e) => { let filterOnValue = ['all']; let operator = '=='; switch (e.target.id) { /// example: `map.setFilter("earthquakes", ["any", [">", "felt", 16.0]])` case 'felt': operatorFelt = document.getElementById('operator-felt'); felt = document.getElementById('range-felt'); operator = operatorFelt.value; // eslint-disable-next-line no-unused-expressions e.target.checked ? data.felt = Number(felt.value) : delete data['felt']; break; /// example: `map.setFilter("earthquakes", ["any", [">", "mag", 5.0]])` case 'mag': operatorMag = document.getElementById('operator-mag'); mag = document.getElementById('range-mag'); operator = operatorMag.value; // eslint-disable-next-line no-unused-expressions e.target.checked ? data.mag = Number(mag.value) : delete data['mag']; break; /// example: `map.setFilter("earthquakes", ["any", [">", "tsunami", 0]])` case 'tsunami': // eslint-disable-next-line @typescript-eslint/quotes tsunami = document.querySelector("input[type='radio'][name=tsunami]:checked"); operator = '=='; // eslint-disable-next-line no-unused-expressions e.target.checked ? data.tsunami = Number(tsunami.value) : delete data['tsunami']; break; default: console.log('default'); } filterOnValue = Object.keys(data); mapLibreFilterSpread = ['all', ...filterOnValue.map(id => [operator, id, data[id]])]; mapLibreFilter = mapLibreFilterSpread; document.getElementById('filter-result').textContent = JSON.stringify(mapLibreFilter); map.setFilter('earthquakes', mapLibreFilter); }); ``` #### index.html ```html Filter within a Layer | NPM example
["all"]
``` #### style.css ```css body {margin: 0; padding: 0;} #map {position: absolute; top: 0; bottom: 0; width: 100%;} ``` ### Basic JavaScript setup ```html Filter within a Layer
["all"]
``` ## Related examples ### [Filter symbols by text input](https://docs.maptiler.com/sdk-js/examples/filter-markers-by-input/) Examples Filter symbols by typing names into a text input. ### [Point filtering by property](https://docs.maptiler.com/sdk-js/examples/point-filtering/) Examples Filter features in real time by property. ### [Create a time slider](https://docs.maptiler.com/sdk-js/examples/timeline-animation/) Examples Visualize and filter earthquake data using a time slider. ### [Point layer colored and sized according to a property (point helper)](https://docs.maptiler.com/sdk-js/examples/helper-point-property-style/) Examples Style point layer by property using point helper.