別のデータソースからフォワードジオコーディング検索結果を取得

Mapbox Geocoding APIのmapbox-gl-geocoderコントロール機能を使って場所を検索し、ローカルデータソースまたは関数からの結果を補完します。この場合はテキスト入力とシカゴパークの名前を一致させます。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>別のデータソースからフォワードジオコーディング検索結果を取得</title>
<meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no" />
<script src="https://api.mapbox.com/mapbox-gl-js/v1.6.1/mapbox-gl.js"></script>
<link href="https://api.mapbox.com/mapbox-gl-js/v1.6.1/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/v4.4.2/mapbox-gl-geocoder.min.js"></script>
<link
rel="stylesheet"
href="https://api.mapbox.com/mapbox-gl-js/plugins/mapbox-gl-geocoder/v4.4.2/mapbox-gl-geocoder.css"
type="text/css"
/>
<!-- Promise polyfill script required to use Mapbox GL Geocoder in IE 11 -->
<script src="https://cdn.jsdelivr.net/npm/es6-promise@4/dist/es6-promise.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/es6-promise@4/dist/es6-promise.auto.min.js"></script>
<div id="map"></div>
 
<script>
	mapboxgl.accessToken = '<your access token here>';
var map = new mapboxgl.Map({
container: 'map',
style: 'mapbox://styles/mapbox/streets-v11',
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',
mapboxgl: mapboxgl
})
);
</script>
 
</body>
</html>