Share via

Azure Map - Polygons not displayed when map within IFrame

Richard Kyle 20 Reputation points
2024-10-25T23:37:15.2633333+00:00

Our web application creates polygons and sends them with postMessage to Azure Map running within an IFrame. Markers display correctly but the polygons don't show up, and no errors are reported.

I tested by generating an html page with inline script containing hardcoded coordinates, it works fine when loaded in to a browser directly. The IFrame version fails to draw the polygons. (There is a load map button at the top for testing adding the polygons to the map)I've probably overlooked something. Any help would be appreciated.

Without IFrame: https://www.enfor.net/map2.html

With IFrame: https://www.enfor.net/map3.html

Azure Maps
Azure Maps
An Azure service that provides geospatial APIs to add maps, spatial analytics, and mobility solutions to apps.
739 questions
0 comments
Accepted answer
  1. rbrundritt 18,686 Reputation points Microsoft Employee
    2024-10-28T16:24:31.8633333+00:00

    Expanding on IotGirl's answer, there are a lot of nuances when it comes to using iframes. In this case you are passing raw HTML into the srcdoc of an iframe. All content in srcdoc of an iframe is generally considered untrusted by the browser, so a lot of advance capabilities become disabled by the browser and silently fail.

    That said, if you instead host your content as it's own page and iframe that in using src and your hosted page is on an https endpoint, it is considered trusted and you can do pretty much everything you could do normally, depending on what attributes you add (e.g. PowerBI iframes in 3rd party visuals and disables WebGL by default using an attribute on the iframe). So try this:

    <iframe src="https://www.enfor.net/map2.html"></iframe>

    This approach should make developing and debugging a lot easier as well.

    1 person found this answer helpful.

1 additional answer

Sort by: Most helpful
Most helpful Newest Oldest
  1. IoTGirl 3,211 Reputation points Microsoft Employee
    2024-10-27T20:07:03.9233333+00:00

    Hi Richard,

    The iFrame blocks any external resources and some behaviors. Azure Maps web control is based on MapLibre so you can also see some of the limitations there as well https://maplibre.org/maplibre-gl-js/docs/examples/fullscreen/.

    For code samples, please see https://samples.azuremaps.com/?search=polygon

    Sincerely,

    IoTGirl

    1 person found this answer helpful.
    0 comments

Your answer

Answers can be marked as Accepted Answers by the question author, which helps users to know the answer solved the author's problem.