CODEWITHSUNDEEP
angulartypescriptopenlayers-6
Funn_Bobby
Funn_Bobby

Reputation: 715

OpenLayers 6.4.3 Map not showing after update

I've update to the latest version on OpenLayers and I have checked the version documentation and I didn't have any breaking changes.

The Code compiles in VS code without errors and the code loads in Chrome without issues occasionally and occasionally it gives this error...A layer can only be added to the map once.

Every time I load a layer I check for the layer and then remove it before reloading so I don't see how this is possible.

I have made no other changes than upgrading to OpenLayers 6.4.3.

Map HTML:

  <div id="mapContainer" class="h100 w-100">
  <div id="map" class="map"
    style="padding: 0px; width: 100%; height: 100%;z-index: 0; position: 
    inherit; opacity: 1"
    [ngStyle]="{'cursor':mapvalues.mapCursor}">
    <div
      style="height: 200px;width: 50px;right: 0px;bottom: 0px; padding: 
       3px;margin: 0px;position: 
      absolute;z-index: 4999">
      <div style="float:left;padding: 3px; padding-right: 0px;padding-top: 
       0px">
        <lib-tool-zoom-sel></lib-tool-zoom-sel>
      </div>
      <div style="float:left;padding: 3px; padding-right: 0px;padding-top: 
       0px">
        <lib-tool-zoom-in></lib-tool-zoom-in>
      </div>
      <div style="float:left;padding: 3px; padding-right: 0px;padding-top: 
       0px">
        <lib-tool-zoom-out></lib-tool-zoom-out>
      </div>
      <div style="float:left;padding: 3px; padding-right: 0px;padding-top: 
        0px">
        <lib-tool-handcursor></lib-tool-handcursor>
      </div>
    </div>
  </div>
  </div>

Map CSS:

.mapWrap {
 height: 100%;
 overflow: hidden;
 padding-bottom: 22.25%;
 padding-top: 30px;
 }
 #mapWrap {
 width: 100%;
 // min-height: 400px;
 height : 100%;
 // position: inherit;
}

Map and View .ts:

 import View from 'ol/View';
 import olMap from 'ol/Map';
 import { transform } from 'ol/proj';
 import { defaults as defaultInteractions } from 'ol/interaction';

 let view = new View({
 center:[Lng,Lat],
 zoom: 8,
 projection: 'EPSG:3857',
 maxZoom: 20,
 minZoom: 5
 });
 let map = new olMap({
 interactions: defaultInteractions({
 doubleClickZoom: false,
 dragPan: false,
 altShiftDragRotate: false,
 shiftDragZoom: false
 }),
 target: 'map',
 view: view,
 controls:[]
 })

UPDATE

I've updated the code above to include a container that my map is contained in. Previous to the update this container had a class attached that set height and width...this is now ignored and a concrete height needs to be entered in the container to make the map show...so I have to enter xxx.px in height...this in no way is responsive design...how can I make this behave in a responsive way?

Upvotes: 1

Views: 1318

Answers (1)

Funn_Bobby
Funn_Bobby

Reputation: 715

I added a concrete height to the container for my map.

i.e.

<div id="mapContainer" class="h100 w-100">
    <div id="map"></div>
</div>

Upvotes: 2

Related Questions