Canvas height keep increasing

GiovanniVanore1 · ‎04-26-2021

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>

</body>

</html>

app-component.css

#viewDiv {

padding: 0;

margin: 0;

height: 100%;

width: 100%;

}

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.80500, 34.02700], //Longitude, latitude

zoom: 13,

container: "viewDiv"

});

view.when(() => console.log('view ready'));

}

Install npm arcgis/core

AndyGup · ‎04-26-2021

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?

GiovanniVanore1 · ‎04-26-2021

Thank you

@AndyGup this is the github link.

https://github.com/guptarahul14/sampleApplication/tree/master/sampleProgram

ReneRubalcava · ‎04-26-2021

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

GiovanniVanore1 · ‎04-26-2021

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

AndyGup · ‎04-26-2021

@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.

Frédéric_ALBERT · ‎04-28-2021

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 · ‎05-05-2021

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