Supplement forward geocoding search results from another data source

Use the mapbox-gl-geocoder control to search for places using Mapbox Geocoding API, supplementing results from a local data source or function, in this case to match Chicago Park names with text input.

<!DOCTYPE html>
<html>
<head>
    <meta charset='utf-8' />
    <title>Supplement forward geocoding search results from another data source</title>
    <meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' />
    <script src='https://api.tiles.mapbox.com/mapbox-gl-js/v0.51.0/mapbox-gl.js'></script>
    <link href='https://api.tiles.mapbox.com/mapbox-gl-js/v0.51.0/mapbox-gl.css' rel='stylesheet' />
    <style>
        body { margin:0; padding:0; }
        #map { position:absolute; top:0; bottom:0; width:100%; }
    </style>
</head>
<body>

<script src='https://api.mapbox.com/mapbox-gl-js/plugins/mapbox-gl-geocoder/v2.3.0/mapbox-gl-geocoder.min.js'></script>
<link rel='stylesheet' href='https://api.mapbox.com/mapbox-gl-js/plugins/mapbox-gl-geocoder/v2.3.0/mapbox-gl-geocoder.css' type='text/css' />
<div id='map'></div>

<script>
mapboxgl.accessToken = '<your access token here>';
var map = new mapboxgl.Map({
    container: 'map',
    style: 'mapbox://styles/mapbox/streets-v9',
    center: [-87.6244, 41.8756],
    zoom: 13
});

var customData = {
    "features": [
        {
            "type": "Feature",
            "properties": {
                "title": "Lincoln Park",
                "description": "A northside park that is home to the Lincoln Park Zoo"
            },
            "geometry": {
                "coordinates": [
                    -87.637596,
                    41.940403
                ],
                "type": "Point"
            }
        },
        {
            "type": "Feature",
            "properties": {
                "title": "Burnham Park",
                "description": "A lakefront park on Chicago's south side"
            },
            "geometry": {
                "coordinates": [
                    -87.603735,
                    41.829985
                ],
                "type": "Point"
            }
        },
        {
            "type": "Feature",
            "properties": {
                "title": "Millennium Park",
                "description": "A downtown park known for its art installations and unique architecture"
            },
            "geometry": {
                "coordinates": [
                    -87.622554,
                    41.882534
                ],
                "type": "Point"
            }
        },
        {
            "type": "Feature",
            "properties": {
                "title": "Grant Park",
                "description": "A downtown park that is the site of many of Chicago's favorite festivals and events"
            },
            "geometry": {
                "coordinates": [
                    -87.619185,
                    41.876367
                ],
                "type": "Point"
            }
        },
        {
            "type": "Feature",
            "properties": {
                "title": "Humboldt Park",
                "description": "A large park on Chicago's northwest side"
            },
            "geometry": {
                "coordinates": [
                    -87.70199,
                    41.905423
                ],
                "type": "Point"
            }
        },
        {
            "type": "Feature",
            "properties": {
                "title": "Douglas Park",
                "description": "A large park near in Chicago's North Lawndale neighborhood"
            },
            "geometry": {
                "coordinates": [
                    -87.699329,
                    41.860092
                ],
                "type": "Point"
            }
        },
        {
            "type": "Feature",
            "properties": {
                "title": "Calumet Park",
                "description": "A park on the Illinois-Indiana border featuring a historic fieldhouse"
            },
            "geometry": {
                "coordinates": [
                    -87.530221,
                    41.715515
                ],
                "type": "Point"
            }
        },
        {
            "type": "Feature",
            "properties": {
                "title": "Jackson Park",
                "description": "A lakeside park that was the site of the 1893 World's Fair"
            },
            "geometry": {
                "coordinates": [
                    -87.580389,
                    41.783185
                ],
                "type": "Point"
            }
        },
        {
            "type": "Feature",
            "properties": {
                "title": "Columbus Park",
                "description": "A large park in Chicago's Austin neighborhood"
            },
            "geometry": {
                "coordinates": [
                    -87.769775,
                    41.873683
                ],
                "type": "Point"
            }
        }
    ],
    "type": "FeatureCollection"
};

function forwardGeocoder(query) {
    var matchingFeatures = [];
    for (var i = 0; i < customData.features.length; i++) {
        var feature = customData.features[i];
        // handle queries with different capitalization than the source data by calling toLowerCase()
        if (feature.properties.title.toLowerCase().search(query.toLowerCase()) !== -1) {
            // add a tree emoji as a prefix for custom data results
            // using carmen geojson format: https://github.com/mapbox/carmen/blob/master/carmen-geojson.md
            feature['place_name'] = '🌲 ' + feature.properties.title;
            feature['center'] = feature.geometry.coordinates;
            feature['place_type'] = ['park'];
            matchingFeatures.push(feature);
        }
    }
    return matchingFeatures;
}

map.addControl(new MapboxGeocoder({
    accessToken: mapboxgl.accessToken,
    localGeocoder: forwardGeocoder,
    zoom: 14,
    placeholder: "Enter search e.g. Lincoln Park"
}));
</script>

</body>
</html>
Copy example