src/index.html

<!DOCTYPE html>
<html>
  <head>
    <title>DEQ Spills Widget</title>
  </head>
  <body>
    <!-- styling demo -->
    <style type="text/css">
      .agrc-app,
      body,
      html {
        height: 700px;
        width: 620px;
      }
    </style>

    <!-- required widget div and .js file -->
    <div id="AGRCMap"></div>

    <!-- build:template:prod
    <script>var apiKey = 'AGRC-67369981957692'; // deqspills.ugrc.utah.gov </script>
    /build -->
    <!-- build:template:stage
    <script>var apiKey = 'AGRC-95AC5682168353'; // *.dev.utah.gov </script>
    /build -->
    <!-- build:template:dev
    <script>var apiKey = 'AGRC-63E1FF17767822'; // localhost </script>
    /build -->

    <!-- build:remove -->
    <script>
      var apiKey = "AGRC-E5B94F99865799"; // localhost
    </script>
    <!-- /build -->

    <script>
      const eventName = "widget-loaded";
      const widgetLoadedEvent = new Event(eventName);
      let iframeId;
      function processMessage(event) {
        // don't really care about origin check because there's not much that can be done on this side
        console.log("iframe: message received:", event);

        if (!Object.hasOwn(event.data, 'iframeId')) {
          // ignore messages from other sources
          return;
        }

        if (!iframeId && event.data.iframeId) {
          iframeId = event.data.iframeId;
        } else if (iframeId && event.data.iframeId !== iframeId) {
          // ignore messages from other sources
          return;
        }

        if (window.widgetIsLoaded) {
          initializeWidget(event.data);
        } else {
          window.addEventListener(eventName, function () {
            initializeWidget(event.data);
          });
        }
      }

      window.addEventListener("message", processMessage);

      window.agrcOnLoad = function () {
        window.dispatchEvent(widgetLoadedEvent);
        window.widgetIsLoaded = true;

        if (window.location === window.parent.location) {
          // this is not an iframe
          initializeWidget({
            UTM_X: '424000',
            UTM_Y: '4510000',
            targetOrigin: '*'
          });
          window.removeEventListener("message", processMessage)
        }
      };

      function initializeWidget(props) {
        console.log("iframe: initializeWidget:", props);
        var app = new AGRCMap(
          {
            UTM_X: props?.UTM_X,
            UTM_Y: props?.UTM_Y,
            apiKey: apiKey,
            // this prevents the widget from re-defining a location on load
            skipDefine: props?.UTM_X ? true : false
          },
          document.getElementById("AGRCMap")
        );

        // must always call startup
        app.startup();

        app.on("location-defined", function (result) {
          console.log("location-defined:", result);
          const data = {
            ADDRESS: result.ADDRESS,
            CITY: result.CITY,
            COUNTY: result.COUNTY,
            DD_LAT: result.DD_LAT,
            DD_LONG: result.DD_LONG,
            HIGHWAY: result.HIGHWAY,
            INDIAN: result.INDIAN,
            MILEMARKER: result.MILEMARKER,
            OWNER_AGENCY: result.OWNER_AGENCY,
            UTM_X: result.UTM_X,
            UTM_Y: result.UTM_Y,
            ZIP: result.ZIP,
            iframeId
          };
          console.log('data', JSON.stringify(data, null, 2));

          window.parent.postMessage(data, props?.targetOrigin);
        });
      }
    </script>
    <script type="text/javascript" src="EmbeddedMapLoader.js"></script>
    <!-- <script type='text/javascript' src='https://deqspills.dev.utah.gov/EmbeddedMapLoader.js'></script> -->

    <!-- Google tag (gtag.js) -->
    <script
      async
      src="https://www.googletagmanager.com/gtag/js?id=G-PECSFZVT9S"
    ></script>
    <script>
      window.dataLayer = window.dataLayer || [];
      function gtag() {
        dataLayer.push(arguments);
      }
      gtag("js", new Date());

      gtag("config", "G-PECSFZVT9S");
    </script>
  </body>
</html>