> For the complete documentation index, see [llms.txt](https://docs.mapbox.com/mapbox-gl-js/llms.txt)
# Supplement forward geocoding search results with another data source
This example adds a geocoding control on top of a web map and supplements the place data available through the [Mapbox Geocoding API](https://docs.mapbox.com/api/search/geocoding/) with custom data from a local data source.
Custom data is loaded into the example using the `customData` GeoJSON object. The `forwardGeocoder` function takes a user's query string and performs local geocoding to supplement Mapbox Geocoding API results with results from `customData`, adding a tree emoji (🌲) as a prefix for custom data results. Finally, it uses `.addControl` to add the [mapbox-gl-geocoder](https://github.com/mapbox/mapbox-gl-geocoder) plugin to the map, with the `localGeocoder` option defined as the `forwardGeocoder` function.
Search for *Lincoln Park* to see a custom feature appear as a search result.
> Example code:
**JavaScript**
```html
Supplement forward geocoding search results with another data source
```
**React**
```jsx
import React, { useEffect, useRef } from 'react';
import * as mapboxgl from 'mapbox-gl/esm';
import MapboxGeocoder from '@mapbox/mapbox-gl-geocoder';
import 'mapbox-gl/dist/mapbox-gl.css';
import '@mapbox/mapbox-gl-geocoder/dist/mapbox-gl-geocoder.css';
const MapboxExample = () => {
const mapContainerRef = useRef();
const mapRef = useRef();
useEffect(() => {
mapRef.current = new mapboxgl.Map({
// TO MAKE THE MAP APPEAR YOU MUST
// ADD YOUR ACCESS TOKEN FROM
// https://account.mapbox.com
accessToken: 'YOUR_MAPBOX_ACCESS_TOKEN',
container: mapContainerRef.current,
style: 'mapbox://styles/mapbox/standard',
config: {
basemap: {
theme: 'monochrome',
lightPreset: 'night'
}
},
center: [-87.6244, 41.8756],
zoom: 13
});
const customData = {
features: [
{
type: 'Feature',
properties: {
title: 'Lincoln Park is special'
},
geometry: {
coordinates: [-87.637596, 41.940403],
type: 'Point'
}
},
{
type: 'Feature',
properties: {
title: 'Burnham Park is special'
},
geometry: {
coordinates: [-87.603735, 41.829985],
type: 'Point'
}
},
{
type: 'Feature',
properties: {
title: 'Millennium Park is special'
},
geometry: {
coordinates: [-87.622554, 41.882534],
type: 'Point'
}
}
],
type: 'FeatureCollection'
};
function forwardGeocoder(query) {
const matchingFeatures = [];
for (const feature of customData.features) {
if (
feature.properties.title.toLowerCase().includes(query.toLowerCase())
) {
feature['place_name'] = `🌲 ${feature.properties.title}`;
feature['center'] = feature.geometry.coordinates;
feature['place_type'] = ['park'];
matchingFeatures.push(feature);
}
}
return matchingFeatures;
}
mapRef.current.addControl(
new MapboxGeocoder({
accessToken: 'YOUR_MAPBOX_ACCESS_TOKEN',
useBrowserFocus: true,
localGeocoder: forwardGeocoder,
zoom: 14,
placeholder: 'Enter search e.g. Lincoln Park',
mapboxgl: mapboxgl
})
);
return () => mapRef.current.remove();
}, []);
return ;
};
export default MapboxExample;
```