Vexcel Map API Feature hover

How to handle feature click

index.html

        
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="https://app.vexcelgroup.com/map/v1/public/css/styles.css" type="text/css"/>
    <style>
        .map {
           height: 800px;
           overflow: hidden;
        }
    </style>
</head>
<body>

    <div id="map" class="map"></div>

    <script type="text/javascript" src="https://app.vexcelgroup.com/map/v1/public/Vexcel.js"></script>
    <script type="text/javascript" src="main.js"></script>
</body>
</html>

main.js

        
const API_KEY = "YOUR_KEY";
const core = new Vexcel.Map({
  target: "map",
  token: API_KEY,
  init: {
    layers: false,
    callback: () => {
      const highlightStyle = new Vexcel.Style.Style({
        fill: new Vexcel.Style.Fill({
          color: "rgba(255,255,255,0.7)",
        }),
        stroke: new Vexcel.Style.Stroke({
          color: "#33cc36",
          width: 2,
        }),
        image: new Vexcel.Style.Circle({
          radius: 5,
          fill: new Vexcel.Style.Fill({
            color: "rgba(255,255,255,0.7)",
          }),
          stroke: new Vexcel.Style.Stroke({
            color: "#33cc36",
            width: 2,
          }),
        }),
      });
      const style = new Vexcel.Style.Style({
        fill: new Vexcel.Style.Fill({
          color: "rgba(255,255,255,0.7)",
        }),
        stroke: new Vexcel.Style.Stroke({
          color: "#3399CC",
          width: 1,
        }),
        image: new Vexcel.Style.Circle({
          radius: 5,
          fill: new Vexcel.Style.Fill({
            color: "rgba(255,255,255,0.7)",
          }),
          stroke: new Vexcel.Style.Stroke({
            color: "#3399CC",
            width: 1,
          }),
        }),
      });
      const point = new Vexcel.Feature(
        new Vexcel.Geometry.Point(
          new Vexcel.Geometry.Location(33.34902669028525, -86.09930716682985)
        )
      );

      const line = new Vexcel.Feature(
        new Vexcel.Geometry.Line([
          new Vexcel.Geometry.Location(30.770159115784214, -86.6162109375),
          new Vexcel.Geometry.Location(31.914867503276223, -88.57177734375),
          new Vexcel.Geometry.Location(33.50475906922609, -87.2094726562),
        ])
      );

      const polygon = new Vexcel.Feature(
        new Vexcel.Geometry.Polygon([
          [
            new Vexcel.Geometry.Location(32.36140331527543, -84.44091796875),
            new Vexcel.Geometry.Location(32.36140331527543, -82.529296875),
            new Vexcel.Geometry.Location(33.87041555094183, -82.529296875),
            new Vexcel.Geometry.Location(33.87041555094183, -84.44091796875),
            new Vexcel.Geometry.Location(32.36140331527543, -84.44091796875),
          ],
        ])
      );
      function handleHover(e) {
        e.feature.setStyle(e.hover ? highlightStyle : style);
      }
      point.addEventListener(
        Vexcel.Events.FeatureEvents.FEATURE_HOVER,
        handleHover
      );
      line.addEventListener(
        Vexcel.Events.FeatureEvents.FEATURE_HOVER,
        handleHover
      );
      polygon.addEventListener(
        Vexcel.Events.FeatureEvents.FEATURE_HOVER,
        handleHover
      );
      const vectorLayer = new Vexcel.Layers.VectorLayer({
        visible: true,
        features: [polygon, point, line],
        style: [style]
      });

      core.getLayerManager().addLayer(vectorLayer);
    },
  },
});