Bing Maps

import React, { useState } from "react";
import "ol/ol.css";
import { Map } from "@react-ol/fiber";

export const styles = [
  "RoadOnDemand",
  "Aerial",
  "AerialWithLabelsOnDemand",
  "CanvasDark",
  "OrdnanceSurvey",
];

export const ExampleBingMaps = () => {
  const [currentStyle, setCurrentStyle] = useState(styles[0]);
  return (
    <>
      <select
        value={currentStyle}
        onChange={(e) => setCurrentStyle(e.target.value)}
      >
        {styles.map((style) => (
          <option key={style} value={style}>
            {style}
          </option>
        ))}
      </select>
      <Map>
        <olView
          initialCenter={[-6655.5402445057125, 6709968.258934638]}
          initialZoom={13}
        />
        {styles.map((style) => (
          <olLayerTile
            key={style}
            visible={style === currentStyle}
            preload={Infinity}
          >
            <olSourceBingMaps
              _key="<<<<YOUR_BING_MAPS_KEY_HERE>>>>"
              imagerySet={style}
            />
          </olLayerTile>
        ))}
      </Map>
    </>
  );
};