ThinkGeo.com    |     Documentation    |     Premium Support

Simple Map not displaying when using MapViewSizeUnitType.Percentage

#1

BaseMap.zip (2.0 MB)

I created a simple map using the following setting and it does not display:
<MapView Id=“map”
@ref="_mapView"
MapUnit="@ThinkGeo.Core.GeographyUnit.Meter"
ProgressiveZooming=“true”
Width=“100”
Height=“100”
MapViewSizeUnitType=“MapViewSizeUnitType.Percentage”
>
Code has been attached.

#2

Hi James,

When MapViewSizeUnitType is not set, MapView uses Pixel by default. That means:

  Width="100"
  Height="100"

is rendered as 100px x 100px. Since this is an explicit pixel size, the map can still display
even if the parent container does not have a defined height.

However, when you set:

MapViewSizeUnitType=“MapViewSizeUnitType.Percentage”

the same values become:

  width: 100%;
  height: 100%;

At that point, the map height depends on the height of its parent container. If the parent container does not have an explicit height, 100% has no valid reference, so the map area will not display correctly.

To make Percentage work, you need to give the parent container an explicit height. For example:

  <div id="map-container" class="map-container">
      <MapView Id="map" Width="100" Height="100"
       MapViewSizeUnitType="MapViewSizeUnitType.Percentage"
        ...>
          ...
      </MapView>
  </div>

  .map-container {
      width: 100%;
      height: 600px;
  }

  Or, if you want it to fill the viewport:

  .map-container {
      width: 100%;
      height: 100vh;
  }

In short, MapViewSizeUnitType.Percentage can work, but only when the parent container has a real height for the percentage to reference.

Thanks,
Ben