Canvas height keep increasing

937
7
04-26-2021 02:33 AM
GiovanniVanore1
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

app.component.html

<html>
  <head>
  </head>
  <body>
      <div id="viewDiv"></div>
  </body>
</html>
 
app-component.css
 
#viewDiv {
    padding0;
    margin0;
    height100%;
    width100%;
  }
 
app-component.ts
 
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';
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent  {
  title = 'sampleProgram';

  constructor(public arcgis:ArcgisService) {
   }

  ngOnInit() {
    //this.arcgis.initMap();
    this.initMap();
  }

  ngAfterViewInit(){
    //this.initMap();
  }

  initMap(){
    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
AndyGup
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
GiovanniVanore1
New Contributor II
0 Kudos
ReneRubalcava
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
GiovanniVanore1
New Contributor II

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

0 Kudos
AndyGup
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: https://github.com/Esri/jsapi-resources/tree/master/esm-samples/jsapi-angular-cli.  

0 Kudos
Frédéric_ALBERT
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:

{{title}}
<div id="viewDiv"></div>
<router-outlet></router-outlet>

GiovanniVanore1
New Contributor II

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

0 Kudos