Integrating Worldmap Node into Node-RED Dashboard 2.0 Without Using iFrame

[DhamodharanGopal]

• Hi everyone,

• I'm currently engaged in integrating the Worldmap node inside the Node-RED Dashboard 2.0. However, the dashboard does not provide a direct way to include the Worldmap node. I would prefer not to use an iframe due to security concerns.

• I attempted to load the worldmap.js file as a script within the UI template node, but the map still doesn't display in the dashboard UI. Any insights or suggestions on how to resolve this issue would be highly appreciated.

• Attached the code and defected output image for reference

    <template>
      <!-- Div container for the map -->
      <div id="worldmap" style="height: 400px;"></div>
    </template>
    
    <script type="text/javascript">
      // Ensure the script runs after the DOM has fully loaded
      document.addEventListener('DOMContentLoaded', function() {
        var script = document.createElement('script');
        script.src = "/worldmap.js"; // Adjust path if necessary
        script.onload = function() {
          // Assuming worldMap.createMap is a valid function
          var map = worldMap.createMap('worldmap', {
            center: [51.505, -0.09],
            zoom: 13
          });
    
          L.marker([51.5, -0.09]).addTo(map)
            .bindPopup('A marker on the map.')
            .openPopup();
        };
        document.head.appendChild(script);
      });
    </script>
  

  

• Thank you!