Is there any other way to update the map coordinates in the run time?

[prasathfibonalabs]

This is my code, please help with the solution,

<script lang="ts">
  import { onMount } from "svelte";
  import * as THREE from "three";

  import ThreeGlobe from "globe.gl";

  import countries from "../../assets/custom.geo.json";

  let globeElem: HTMLElement;

  let map = {
    coordinates: [
      {
        text: "IND",
        size: 1.0,
        country: "India",
        city: "Chennai",
        lat: "13.089869",
        lng: "80.245901",
      },
      {
        text: "UAE",
        size: 1.0,
        country: "United Arab Emirates",
        city: "Dubai",
        lat: "23.214066",
        lng: "53.195262",
      },
    ],
  };

  onMount(() => {
    let Globe;
    function init() {
      Globe = ThreeGlobe({
        waitForGlobeReady: true,
        animateIn: true,
      })
        .backgroundColor("#fff")
        .hexPolygonsData(countries.features)
        .hexPolygonResolution(3)
        .hexPolygonColor(() => "#c600e5")
        .hexPolygonMargin(0.7)
        .showAtmosphere(true)
        .atmosphereColor("#fff")
        .showAtmosphere(false)
        .atmosphereAltitude(0.25)
        .labelsData(map.coordinates)
        .labelColor(() => "#ffcb23")
        .labelDotRadius(0.3)
        .labelSize((e: any) => e.size)
        .labelText("city")
        .labelResolution(6)
        .labelAltitude(0.01)
        .pointsData(map.coordinates)
        .pointColor(() => "#c600e5")
        .pointAltitude(0.07)
        .pointLabel(
          () => `<div style="width:200px; height:100px; background:white;cursor:pointer;">
          <p>hello world</p>
          </div>`
        )(globeElem);

      const globeMaterial = Globe.globeMaterial();
      globeMaterial.color = new THREE.Color(0xffffff);
    }

    init();
  });

  const onLoadCoord = () => {
    map.coordinates.push({
      text: "Bangalore",
      size: 1.0,
      country: "India",
      city: "Bangalore",
      lat: "12.931854",
      lng: "77.629102",
    });
  };
</script>

<div class="globe" bind:this={globeElem} />

<div class="absolute top-0 left-5">
  <button class="p-5 bg-red-400" on:click={onLoadCoord}>
    Change Coordinates
  </button>
</div>

[prasathfibonalabs]

Found one the solution, Any other suggested solution,

<script lang="ts">
  import { onMount } from "svelte";
  import * as THREE from "three";

  import ThreeGlobe from "globe.gl";

  import countries from "../../assets/custom.geo.json";

  let globeElem: HTMLElement;

  let map = {
    coordinates: [
      {
        text: "IND",
        size: 1.0,
        country: "India",
        city: "Chennai",
        lat: "13.089869",
        lng: "80.245901",
      },
    ],
  };

  let Globe: any;

  onMount(() => {
    function init() {
      Globe = ThreeGlobe({
        waitForGlobeReady: true,
        animateIn: true,
      })
        .backgroundColor("#fff")
        .hexPolygonsData(countries.features)
        .hexPolygonResolution(3)
        .hexPolygonColor(() => "#c600e5")
        .hexPolygonMargin(0.7)
        .showAtmosphere(true)
        .atmosphereColor("#fff")
        .showAtmosphere(false)
        .atmosphereAltitude(0.25)
        .labelsData(map.coordinates)
        .labelColor(() => "#ffcb23")
        .labelDotRadius(0.3)
        .labelSize((e: any) => e.size)
        .labelText("city")
        .labelResolution(6)
        .labelAltitude(0.01)
        .pointsData(map.coordinates)
        .pointColor(() => "#c600e5")
        .pointAltitude(0.07)
        .pointLabel(
          () => `<div style="width:200px; height:100px; background:white;cursor:pointer;">
          <p>hello world</p>
          </div>`
        )(globeElem);

      const globeMaterial = Globe.globeMaterial();
      globeMaterial.color = new THREE.Color(0xffffff);
    }

    init();
  });

  const onLoadCoord = () => {
    const coordinatesCopy = [...map.coordinates];
   // update the Globe with existing points
    Globe.pointsData([
      coordinatesCopy,
      {
        text: "UAE",
        size: 1.0,
        country: "United Arab Emirates",
        city: "Dubai",
        lat: "23.214066",
        lng: "53.195262",
      },
    ]);
  };
</script>

<div class="globe" bind:this={globeElem} />

<div class="absolute top-0 left-5">
  <button class="p-5 bg-red-400" on:click={onLoadCoord}>
    Change Coordinates
  </button>
</div>