Uncaught ReferenceError: eventName is not defined

[AndrewWrightNZ]

Hi Emeric

Thank you for creating this great library! I'm looking to create a map with shadows similar to your Sunny demo

I'm able to render the map to the page however the controls seem to be throwing this error:

Uncaught ReferenceError: eventName is not defined

The version I'm using is:

"@jdultra/ultra-globe": "^4.3.7",

Here is the complete component file I'm using to render the map in NextJS.

"use client";

import {
  Map,
  GoogleMap3DTileLayer,
  PanController,
  // @ts-ignore
} from "@jdultra/ultra-globe/dist/ultraglobe.min.js";
import { useEffect } from "react";

const App = () => {
  const loadMap = async () => {
    let map = new Map({ divID: "screen", shadows: true });

    map.moveAndLookAt(
      { x: 13.42, y: 52.48, z: 300 },
      { x: 13.42, y: 52.4895, z: 170 }
    );

    console.log("Map:", map);

    const googleMaps3DTiles = new GoogleMap3DTileLayer({
      id: 0,
      name: "Google Maps 3D Tiles",
      visible: true,
      apiKey: process.env.NEXT_PUBLIC_GOOGLE_MAPS_API_KEY,
      loadOutsideView: true,
      displayCopyright: true,
    });

    map.setLayer(googleMaps3DTiles, 0);

    // Uncomment and configure controllers as needed

    map.controller.clear(); // clear existing controller chain

    map.controller.append(new PanController(map.camera, map.domContainer, map));
    // map.controller.append(
    //   new RotateController(map.camera, map.domContainer, map)
    // );
    // map.controller.append(
    //   new ZoomController(map.camera, map.domContainer, map)
    // );
  };

  useEffect(() => {
    loadMap();
  }, []);

  return (
    <div
      id="screen"
      style={{
        width: "100vw",
        height: "100vh",
        position: "absolute",
        top: 0,
        left: 0,
        zIndex: 0,
      }}
    />
  );
};

export default App;

Could you please help me to understand if there is something I'm not setting up correctly or if this may be an issue? Thank you in advance!

Screenshots:

[ebeaufay]

Hi,

Can you try to comment out everything that has to do with the map.controller including: map.controller.clear() map.controller.append(new PanController(map.camera, map.domContainer, map));

I put that code in to show how to override the default controls but it's not necessary.

If you still have the issue it might be due to the Next.js environment.

[AndrewWrightNZ]

Thanks for your reply.

I've recreated this in a Vite app and it does not have the same error, so looks to be something with NextJS. I'm happy to use this in the Vite app to get around this so this can be closed.

If i find any details on why this is happening in NextJS i can add them in future if someone else runs into this.

Thank you again!

[ebeaufay]

Alright great, I usually stick to vanilla J's but I'm starting to make some samples with react etc.. will try to fix with Next.js, thanks for the feedback