How do I embedd a kepler map in .html file into an iframe in a react app?

Question

I am very new to Azure so have a rookie question about why my iframe html won't render in my azure hosted webapp. It works in firebase but not azure, I have remove auth to make sure it was not the issue.

I am probably doing something obviously wrong but been trying to fix for too many hours now.

Any help would be much appreciated.

When deployed on firebase we get:

When deployed in Azure we get:

The simple component is:

function GeographyChart() {

  const src = `${process.env.PUBLIC_URL}Wisconsin-Dairy-Plant3.html`;
  console.log(src);

  return (

Answer 1

Taking a look at the link to your Azure hosted version I noticed that after the page is loaded there is no DOM elements related to the map. This indicates that the event used to initialize the map is most likely not being called. Digging through the code it looks like a lot more than just the map is not displaying, none of the content in the dashboard/index.jsx file is displayed. This looks to be an issue with your React code and is not specific to Azure, or Azure Maps.