nav[aria-label="Primary Navigation"] { padding: 0; & ul { list-style: none; width: 100%; display: flex; flex-direction: row; justify-content: start; align-items: start; gap: 30px; padding: 0; & li { margin: 0; } & ul li { list-style: none; } } }

JS API 4.18 - Map height increasing non stop

PierreLarondelle

Hi,

I'm facing a weird issue wich was already existing in js api 3.x : When the app start, the map loads and the inner canvas heigth start to increase non stop (see attachment). Looks like I'm animating an elevator ...

In js api 3.x, @RobErt Scheitlin solves the problem suggesting to set "autoResize" property to false.

In js api 4.x, I don't see any equivalent property. It's the first time I encounter such a problem, dunno how to solve this issue

Here is the code :

In HTML file :
<div id="mapMatriCAD"></div>
In JS file :
// Create a Map instance
const matricadMap = new Map({
basemap: colorBasemap
});
// Create a MapView instance (for 2D viewing) and reference the map instance
const matricadMapView = new MapView({
container: "mapMatriCAD",
map: matricadMap,
highlightOptions: {
color: "orange"
}
});
// Toggle backgrounds layers
const basemapToggle = new BasemapToggle({
view: matricadMapView,
nextBasemap: aerophotoBasemap
});
ready(function () {
/* Set ArcGIS Server proxy URL */
esriConfig.request.proxyUrl = proxyiedUrl;
/* Set ArcGIS GeometryService URL */
esriConfig.geometryServiceUrl = 'https://<my-geometry-service>';

// Set map extent
const matricadMapExtent = new Extent({
xmin: 145998.0719999969,
ymin: 162020.52899999917,
xmax: 152430.14699999988,
ymax: 167383.29899999872,
spatialReference: {
wkid: 31370
}
});
matricadMapView.extent = matricadMapExtent;
// Set initial zoom
matricadMapView.constraints = {
minScale: 25000
};
// Get graphic properties from view click
matricadMapView.on('click', function (event) {
matricadMapView.hitTest(event).then(function (response) {
if (response.results.length) {
debugger;
}
});
});
});

20210322-ArcgisJSapi-CanvasHeight.jpg

Find more posts tagged with

Accepted answers

PierreLarondelle

Rene, altough the css was included in the code and correctly loaded, it was not correctly parsed for wathever reason I'm investigating now.

It doesn't appear missing in the dev tools so the debug wasn't showing any problem apparently.

Thanks for showing the way.

All comments

PierreLarondelle

Thanks Jeffrey for your help. It was finally a sporadic css parsing issue.

Have a nice day

PierreLarondelle

Rene, altough the css was included in the code and correctly loaded, it was not correctly parsed for wathever reason I'm investigating now.

It doesn't appear missing in the dev tools so the debug wasn't showing any problem apparently.

Thanks for showing the way.

JeffreyWilkerson

There are a lot of things I'm unsure of in this sample. I've included some code below that works, but I've left out the proxy (I don't need it) and the geometry service (you don't need it in this sample piece so not sure why it's there). Also, you can set the initial zoom location and scale through the view initialization, not sure why you have a secondary extent and resolution. I left those out and just relied on the initial View zoom. Also, the coordinates and map projection may not be correct, unless you are looking at the west coast of Africa (usually the first sign you're not). I'm sure there's a lot more to this than what you're showing but this would work (with a good projection) using the code you have provided so far:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>Testing</title>

    <link rel="stylesheet" href="https://js.arcgis.com/4.18/esri/themes/dark-blue/main.css">
    <script src="https://js.arcgis.com/4.18/"></script>

    <style>
        html,
        body,
        #mapMatriCAD {
            padding: 0;
            margin: 0;
            height: 100%;
            width: 100%;
        }
    </style>

    <script>
        require([
            "esri/Map",
            "esri/layers/FeatureLayer",
            "esri/layers/GraphicsLayer",
            "esri/views/MapView",
            "esri/geometry/Extent",
            "esri/widgets/BasemapToggle"

        ], function (Map, FeatureLayer, GraphicsLayer, MapView, Extent, BasemapToggle
        ) {

            // Create the Map
            const matricadMap = new Map({
                basemap: "topo-vector"
            });

            // Set map extent
            const matricadMapExtent = new Extent({
                xmin: 145998.0719999969,
                ymin: 162020.52899999917,
                xmax: 152430.14699999988,
                ymax: 167383.29899999872,
                spatialReference: {
                    wkid: 31370
                }
            });

            // Create a MapView instance (for 2D viewing) and reference the map instance
            const matricadMapView = new MapView({
                container: "mapMatriCAD",
                map: matricadMap,
                center: matricadMapExtent.center,
                zoom: 9,
                highlightOptions: {
                    color: "orange"
                }
            });

            // Carbon storage of trees in Warren Wilson College.
            var featureLayer = new FeatureLayer({
                url: "https://services.arcgis.com/V6ZHFr6zdgNZuVG0/arcgis/rest/services/Landscape_Trees/FeatureServer/0"
            });

            matricadMap.add(featureLayer);

            // Toggle backgrounds layers
            const basemapToggle = new BasemapToggle({
                view: matricadMapView,
                nextBasemap: "hybrid"
            });

            matricadMapView.when(function () {
                /* Set ArcGIS Server proxy URL */
                //esriConfig.request.proxyUrl = proxyiedUrl;
                /* Set ArcGIS GeometryService URL */
                //esriConfig.geometryServiceUrl = 'https://<my-geometry-service>';

                //matricadMapView.extent = matricadMapExtent;

                // Set initial zoom
                //matricadMapView.constraints = {
                //    minScale: 25000
                //};

                // Get graphic properties from view click
                matricadMapView.on('click', function (event) {
                    matricadMapView.hitTest(event).then(function (response) {
                        if (response.results.length) {
                            console.log(response);
                        }
                    });
                });
            });

        });
    </script>
</head>
<body>
    <div id="mapMatriCAD"></div>
</body>
</html>

ReneRubalcava

I usually see this happen when you don't have the CSS for the API added to your page, can you verify your CSS version matches the API version.

Join the Conversation

Signed in members can post, follow updates, and more. New here? Register a free account.

Quick Links

Community Help
Find useful guides, FAQs, and documents to help you navigate and make the most of Esri Community.