Canvas height keep increasing

04-26-2021 02:33 AM
New Contributor II

Hello All,

I am facing issue while using Arcgis/core 4.18. My map canvas height keep increasing. I am using Arcgis/Core with Angular 11. 

Here is my code


      <div id="viewDiv"></div>
#viewDiv {
import { Component,OnInit,AfterViewInit } from '@angular/core';
import { ArcgisService } from './arcgis.service';
import MapView from '@arcgis/core/views/MapView'
import config from '@arcgis/core/config';
import Map from '@arcgis/core/Map';
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
export class AppComponent  {
  title = 'sampleProgram';

  constructor(public arcgis:ArcgisService) {

  ngOnInit() {


    config.assetsPath = './assets';
    const map = new Map({
      basemap: "arcgis-topographic" //Basemap layer service
    // Create a MapView instance (for 2D viewing) and reference the map instance
    const view = new MapView({
      map: map,
      center: [-118.8050034.02700], //Longitude, latitude
      zoom: 13,
      container: "viewDiv"
    view.when(() => console.log('view ready'));

Install npm arcgis/core
0 Kudos
7 Replies
Esri Regular Contributor

Hi @GiovanniVanore1 this doesn't sounds like it's related to the ArcGIS API for JavaScript. Can you provide a simple github repo that reproduces the issue?

0 Kudos
New Contributor II
0 Kudos
Frequent Contributor II

I've seen this happen if you don't have the CSS for the ArcGIS JSAPI included in your application.

0 Kudos
New Contributor II

@ReneRubalcava Yes, I have added ArcGIS JSAPI . Still getting same issue

0 Kudos
Esri Regular Contributor

@GiovanniVanore1 I'm not sure what's going on, I tried just about everything to get the app running right. My recommendation is to start fresh using our Angular sample app:  

0 Kudos
New Contributor II

I took a quick look at your code. There are several issues.

The main one (causing the endless div resize) is this:

@import "@arcgis/core/assets/esri/themes/light/main.css";

Should be in your main styles.scss. Not in the scope of your app.component scss.

Secondly, your app layout is not good if you wish a fullscreen map application.
Your styles.scss file should contain something like:

html, body { height: 100%; }

Then your app.component.html file mention a html-head-body hierarchy that is already in index.html.
This is screwing your vertical positioning.
Keep it simple like this:

<div id="viewDiv"></div>

New Contributor II

Yes finally its resolved by Js-api and its working fine  Thanks a lot guys.

0 Kudos