Openlayers - Zoom to layer

Question

I've created a map with different Layers from OpenLayers, Openstreetmap and BingMaps.

Now I want to add the function, that if there is a new search entered, the map should zoom to the entered search result on the map. At the moment, the search result is entered into the layer, but it doesn't zoom to the result. Thanks.

Here is the code from my main.js.

import Map from 'ol/Map';
import View from 'ol/View';
import TileLayer from 'ol/layer/Tile';
import Stamen from 'ol/source/Stamen';
import VectorLayer from 'ol/layer/Vector';
import Vector from 'ol/source/Vector';
import GeoJSON from 'ol/format/GeoJSON';
import Style from 'ol/style/Style';
import Circle from 'ol/style/Circle';
import Fill from 'ol/style/Fill';
import Stroke from 'ol/style/Stroke';
import Overlay from 'ol/Overlay';
import {fromLonLat, toLonLat} from 'ol/proj';
import sync from 'ol-hashed';
import OSM from 'ol/source/OSM';
import Feature from 'ol/Feature';
import {circular} from 'ol/geom/Polygon';
import Point from 'ol/geom/Point';
import Control from 'ol/control/Control';
import * as olProj from 'ol/proj';
import XYZ from 'ol/source/XYZ';

// define the map
const map = new Map({
  target: 'map',
  view: new View({
    center: fromLonLat([16.37, 48.2]),
    zoom: 13
  })
});

sync(map);

//Adresssuche
const searchResultSource = new Vector();
const searchResultLayer = new VectorLayer({
  source: searchResultSource
});

searchResultLayer.setStyle(new Style({
  image: new Circle({
    fill: new Fill({
      color: 'rgba(255,255,255,0.4)'
    }),
    stroke: new Stroke({
      color: '#3399CC',
      width: 1.25
    }),
    radius: 15
  })
}));
var element = document.getElementById('search');  
element.addEventListener('keydown', listenerFunction);

function listenerFunction(event) {
  console.log(event);
  console.log(event.keyCode);
  if (event.keyCode === 13) {

    const xhr = new XMLHttpRequest;
    xhr.open('GET', 'https://photon.komoot.de/api/?q=' + element.value + '&limit=3');
    xhr.onload = function() {
      const json = JSON.parse(xhr.responseText);
      const geoJsonReader = new GeoJSON({
        featureProjection: 'EPSG:3857'
      });  
      searchResultSource.clear(); 
      const features = geoJsonReader.readFeatures(json);
      console.log(features);
      searchResultSource.addFeatures(features);
    };
    xhr.send();
  }
}

var ZoomLayer = new ol.ZoomLayer({
  layer: searchResultLayer,
  colName: 'SearchLayer',
  zoom: 10,
  collapsed: true,
  map: Map
  zoomTo: layer(5,xy)
});

//OpenStreetMap
const OSMbaseLayer = new TileLayer({
    type: 'base',
    source: new OSM()
}); 

// Statellit
const satellitLayer = new TileLayer({
    source: new XYZ ({
    attributions: ['Powered by Esri', 'Source: Esri, DigitalGlobe, GeoEye, Earthstar Geographics, CNES/Airbus DS, USDA, USGS, AeroGRID, IGN, and the GIS User Community'],
    attributionsCollapsible: false,
    url: 'https://services.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}',
    maxZoom: 30
    })
});

//shape
const parkLayer = new VectorLayer({
    source: new Vector({ 
        url: 'data/park1.geojson',
        format: new GeoJSON()
    })
});

// Layer hinzufügen
map.addLayer(OSMbaseLayer);
map.addLayer(searchResultLayer);   
map.addLayer(parkLayer);  


const OSMbase = document.getElementById('OSMbase');
OSMbase.addEventListener('click', function(event) {
  //contr.style.color = 'ffffff';
  //Andere Layer entfernen
  map.removeLayer(satellitLayer);
  map.removeLayer(searchResultLayer);
   //OSM Layer hinzufügen
  map.addLayer(OSMbaseLayer);
  map.addLayer(searchResultLayer);
});

// Get the satellit Base-Button
const satellit = document.getElementById('satellit');
satellit.addEventListener('click', function(event) {
  //Andere Layer entfernen
  map.removeLayer(OSMbaseLayer);
  map.removeLayer(searchResultLayer);
  //Satelliten Layer hinzufügen
  map.addLayer(satellitLayer);
  map.addLayer(searchResultLayer);  
 });

Answer 1

You can fit the view to the source extent when features are added to the source

searchResultSource.on('addfeature', function() {
  map.getView().fit(searchResultSource.getExtent());
});