Map Is Showing Grey Area

Nilesh Khonde 40 Reputation points
2024-06-27T04:44:15.7266667+00:00

I have a PCF control in React, in which I am loading an Azure map. I am trying to place this control as a code component on a PowerPage list component. Initially, the component was loading with the map and the details of the map. I wanted to hide the details and only display the map, so I imported the following CSS file into my component:

import "azure-maps-control/dist/atlas.min.css"; I Have Also Tried Changeing Css also.

This makes the details disappear, but the size of the map is small, as shown in the screenshots. In my React project, this issue occurs, but it works fine on a normal project like an HTML page

Screenshotssss

Screenshot (183)

Azure Maps
Azure Maps
An Azure service that provides geospatial APIs to add maps, spatial analytics, and mobility solutions to apps.
649 questions
0 comments

1 answer

Sort by: Most helpful
Most helpful Newest Oldest
  1. rbrundritt 16,331 Reputation points Microsoft Employee
    2024-06-27T13:19:56.37+00:00

    I suspect that the map height is based on percentages in your app (CSS) and when the page originally loads, the area is either hidden (e.g. in a tab), or there is something that starts the available area of the map smaller than increased. With this in mind, it's likely that the s used by the map needs to be resized (they don't scale automatically with percentage sizes in CSS). One thing to try is to call the maps resize function when viewing the map. This will force it to recalculate the available area and resize the canvas.

    map.resize() is likely all you need. If you are hiding the map in a tab or hidden part of the page, call this function when switching to the map view.

    0 comments