topic version 4.22 angular 13 Map container height in ArcGIS JavaScript Maps SDK Questions

version 4.22 angular 13 Map container height

marjbilou — Thu, 21 Mar 2024 11:28:15 GMT

Hi,

i am working on a project based on angular 13, i added the library arcgis/core (4.22.2).

as stated in the tutorials, i added the css in my component css :

@import url('https://js.arcgis.com/4.22/@arcgis/core/assets/esri/themes/light/main.css');

i also added the height:100%;width:100% in my component css.

but i can't see the map in my page (the height is computed to 0)

i have to set mannually a height in px to see it.

what am i doing rwrong ?

Re: version 4.22 angular 13 Map container height

AndyGup — Thu, 21 Mar 2024 15:46:02 GMT

Hi @marjbilou can you provide a simple GitHub repo or StackBlitz that reproduces the issue? And, are you are able to upgrade to the latest ArcGIS JS Maps SDK release, which is currently 4.29? Version 4.22 goes into mature support in just a few days, at the end of this month: https://support.esri.com/en-us/products/arcgis-maps-sdk-for-javascript/life-cycle.

Here's our Angular sample that might give you some hints on what's not working: https://github.com/Esri/jsapi-resources/tree/main/esm-samples/jsapi-angular-cli. The sample is using Angular 17 (latest). Angular 13 is no longer supported by Google: https://angular.io/guide/releases#actively-supported-versions.

Re: version 4.22 angular 13 Map container height

boa_panter — Tue, 26 Mar 2024 12:14:47 GMT

I had the same problem.
Here is the CSS code which fixed the problem for me.
You need to set the container to position absolute.

@import "@arcgis/core/assets/esri/themes/light/main"; :host { width: 100%; height: 100%; } .map-wrapper { position: relative; height: 100%; width: 100%; .map-content { position: absolute; height: 100%; width: 100%; margin: 0; padding: 0; } }