Map Is Showing Grey Area

Question

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

Answer 1

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.