# Query Parameters

[View on Github](https://github.com/CartoDB/carto-react-template)

{% hint style="warning" %}
**Note:** We are reducing our investment in CARTO for React and currently we discourage users from starting new projects with it.

CARTO for React is an opinionated framework with pre-built components and templates. This greatly speeds up the process to create React-based applications, but customization options are limited.

If you need further customization in React, or you want to build geospatial applications using **Vue, Angular, or any other Javascript-based framework**, we recommend going directly to the main CARTO for Developers documentation, including [CARTO + deck.gl](https://github.com/CartoDB/gitbook-documentation/blob/master/carto-for-developers/key-concepts/carto-for-deck.gl), which allows for maximum flexibility and scalability.
{% endhint %}

You can use QueryParameters to filter your layers & widgets at the backend side, using the concept of *parametrized queries* over your sources. You can check our related [deck.gl documentation](https://docs.carto.com/development-tools/carto-for-deck.gl/reference) for different providers. In this guide we’re going to create a simple map that shows the earthquakes in Spain and allows to filter it by their magnitude.

## **Creating a map using QueryParameters**

First you’ll need to create a source that supports query parameters. In this case we are getting all the earthquakes from a **bigquery** connection, whoses magnitude are between `min: 4` and `max: 5`.

```jsx
import { MAP_TYPES } from '@deck.gl/carto';

const sql = 'select * from `carto-demo-data.demo_tables.spain_earthquakes` where magnitude between @min and @max';

const earthquakesSource = {
  id: 'earthquakes',
  data: sql,
  type: MAP_TYPES.QUERY,
  queryParameters: {
    min: 4,
    max: 5
  }
}
```

Once you have your source ready to be used, you can create your layer using `useCartoLayerProps` hook.

```jsx
import { CartoLayer } from '@deck.gl/carto';
import { useCartoLayerProps } from '@carto/react-api';

const layerProps = useCartoLayerProps({ source: earthquakesSource });
const earthquakesLayer = new CartoLayer({
  ...layerProps,
  id: 'earthquakesLayer',
  pointRadiusUnits: 'pixels',
  lineWidthUnits: 'pixels',
  getLineColor: [0, 0, 0],
  getPointRadius: 3,
});
```

Now your layer is ready and you can use it in your map, so we’re going to create a `<FormulaWidget />` which displays the number of earthquakes in your viewport.

## **Using queryParameters with widgets**

All our widgets are ready to use **sources** with queryParameters. You just need to pass the `datasource` properly configured (that basically means declaring its `type` as MAP\_TYPES.QUERY and adding the corresponding `queryParameters` configuration). After that, you can use any widget as usual, eg:

```jsx
<FormulaWidget
  id='totalEarthquakes'
  title='Total earthquakes'
  dataSource={earthquakesSource.id}
  operation={AggregationTypes.COUNT}
  />
```

## **Filtering with queryParameters using a widget**

But the utility of queryParameters is dynamically changing the parametrized values in the app, so now we’re gonna use a widget to modify those values (and as a consequence, to apply new backend filters using queryParameters). Here we’re going to add a `<RangeWidgetUI />` to allow filtering earthquakes by magnitude.

First we need to prepare the source to support `queryParameters` modification, passing those values as parameters to it.

```jsx
import { MAP_TYPES } from '@deck.gl/carto';

function useEarthquakeSource([min, max]) {
  const sql = 'select * from `carto-demo-data.demo_tables.spain_earthquakes` where magnitude between @min and @max';
  
  const earthquakesSource = {
    id: 'earthquakes',
    data: sql,
    type: MAP_TYPES.QUERY,
    queryParameters: {
      min,
      max,
    }
  };

  return earthquakesSource;
}
```

Once the datasource is ready we can add a widget to filter by magnitude.

```jsx
import { useState } from 'react';
import { CartoLayer } from '@deck.gl/carto';
import { useCartoLayerProps } from '@carto/react-api';
import { FormulaWidget } from '@carto/react-widgets';
import { RangeWidgetUI } from '@carto/react-ui';

function Earthquakes() {
  const [magnitudes, setMagnitudes] = useState([0, 10]);
  const earthquakesSource = useEarthquakeSource(magnitudes);
  const layerProps = useCartoLayerProps({ source: earthquakesSource });
  const earthquakesLayer = new CartoLayer({
    ...layerProps,
    id: 'earthquakesLayer',
    pointRadiusUnits: 'pixels',
    lineWidthUnits: 'pixels',
    getLineColor: [0, 0, 0],
    getPointRadius: 3,
  });
  
  return (
    <>
      <RangeWidgetUI
        min={0}
        max={10}
        onSelectedRangeChange={(range) => setMagnitudes(range)}
      />
  
      <FormulaWidget
        id='totalEarthquakes'
        title='Total earthquakes'
        dataSource={earthquakesSource.id}
        operation={AggregationTypes.COUNT}
      />
    </>
  );
}

export default Earthquakes;
```


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.carto.com/carto-for-developers/carto-for-react/guides/query-parameters.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.