Extract required features

The Place Details API returns a GeoJSON FeatureCollection object as the result. The FeatureCollection contains all the requested features.

Every feature has a "feature_type" property that lets you identify which Place Details API feature the object relates to. Note, that depending on the feature it could be one or more objects of the same feature type:

// only one feature of "details" type, which is a GeoJSON Feature object
const detailsFeature = result.features.find(feature => feature.properties.feature_type === 'details');

// array of the features of "radius_500.supermarket" type
const radius500Supermarkets = result.features
  .filter(feature => feature.properties.feature_type === 'radius_500.supermarket');

// create a GeoJSON FeatureCollection object from an array of GeoJSON Feature to visualize it
const radius500SupermarketsGeoJSON = `{
  "type": "FeatureCollection",
  "features": ${radius500Supermarkets}
}`

Visualize features

GeoJSON objects are supported by most client map libraries.

Here are a few examples how to display GeoJSON Layers with MapLibre GL / Mapbox GL:


// remove previourly added layers and source:
if (this.map.getSource(this.placeLayerId)) {
    if (this.map.getLayer(this.placeLayerId + '-point')) {
        this.map.removeLayer(this.placeLayerId + '-point');
    }

    if (this.map.getLayer(this.placeLayerId + '-line')) {
      this.map.removeLayer(this.placeLayerId + '-line');
    }

    if (this.map.getLayer(this.placeLayerId + '-poly')) {
      this.map.removeLayer(this.placeLayerId + '-poly');
    }

    this.map.removeSource(this.placeLayerId);
}

// add new GeoJSON source
this.map.addSource(this.placeLayerId, {
    type: 'geojson', data: geojson
});

// add layers for the GeoJSON source

// 1. Layer to visualize Points
this.map.addLayer({
    'id': this.placeLayerId + '-point',
    'type': 'circle',
    'source': this.placeLayerId,
    'paint': {
        "circle-radius": 10,
        'circle-color': "#bf4080",
        'circle-opacity': 0.7,
        "circle-blur": 0
    },
    'filter': ['==', '$type', 'Point']
});

// 2. Layer to visualize LineStrings and MultiLineStrings
this.map.addLayer({
    'id': this.placeLayerId + '-line',
    'type': 'line',
    'source': this.placeLayerId,
    'paint': {
        'line-color': "#bf4080"
    },
    'filter': ['==', '$type', 'LineString']
});

// 3. Layer to visualize Polygons and Multipolygons
this.map.addLayer({
    'id': this.placeLayerId + '-poly',
    'type': 'fill',
    'source': this.placeLayerId,
    'paint': {
        'fill-color': "#333399",
        'fill-opacity': 0.2
    },
    'filter': ['==', '$type', 'Polygon']
});