topic Re: Map doesn't show in browser. using map components, calcite components with Angular. in ArcGIS JavaScript Maps SDK Questions

Map doesn't show in browser using map components, calcite components with Angular.

ForrestLin — Fri, 28 Mar 2025 20:18:39 GMT

I'm working on website using map components, calcite components with Angular.

I create a angular component "esri-map" with arcgis-map

esri-map.component.html:

<arcgis-map item-id="cece49703cc24b0783dffb3032b0679c"></arcgis-map>

I put it in <calcite-shell>:

app.component.html:

<calcite-shell>

<app-esri-map ></app-esri-map>

</calcite-shell>

The map doesn't show in browser.

I inspect the document:

Re: Map doesn't show in browser. using map components, calcite components with Angular.

ReneRubalcava — Thu, 27 Mar 2025 20:34:56 GMT

If you could provide a repro to look at, would be easier to see the problem. If I had to guess, your `<app-esri-map>` element needs a height and width in css. The `<arcgis-map>` component will grow to the size of it's container, so the container probably doesn't have them.

Re: Map doesn't show in browser. using map components, calcite components with Angular.

ForrestLin — Fri, 28 Mar 2025 18:42:38 GMT

@ReneRubalcava

You are right!

`<app-esri-map>` element needs a height and width in css:

app-esri-map {

padding: 0;

margin: 0;

height: 100%;

width: 100%;

}

It works!

Thank you so much!

Forrest