topic Re: CSS not properly loading, buttons & widget not rendering correctly in ArcGIS JavaScript Maps SDK Questions

CSS not properly loading, buttons & widget not rendering correctly

KevinWrona — Thu, 02 Sep 2021 15:29:00 GMT

Hey,

I am using ArcGIS API for JavaScript 4.20 ES modules and I am trying to add a Sketch Widget to the top right corner. The standard buttons like Zoom in and Zoom out and the widget are not rendering properly. All I am getting is the following:

Like in the documentation i am adding CSS resource with @import "@arcgis/core/assets/esri/themes/light/main.css";

Nearly the same Code worked with 4.17.

My angular component below.

import MapView from '@arcgis/core/views/MapView'; import BaseMap from '@arcgis/core/Basemap'; import WMSLayer from "@arcgis/core/layers/WMSLayer"; import Map from "@arcgis/core/Map"; import esriConfig from "@arcgis/core/config"; import Sketch from "@arcgis/core/widgets/Sketch"; import GraphicsLayer from "@arcgis/core/layers/GraphicsLayer"; @Injectable() export class AppComponent{ // The <div> where we will place the map @ViewChild('mapViewNode', { static: true }) private mapViewEl: ElementRef | undefined; constructor() { esriConfig.assetsPath = "assets/@arcgis/core/assets"; } public initializeMap() { const graphicsLayer = new GraphicsLayer(); const basemap = new BaseMap({ baseLayers: [ new WMSLayer({ url: '<URL to WMS Server>?SERVICE=WMS&VERSION=1.3.0&REQUEST=GetCapabilities' }) ] }); const map = new Map({ basemap: basemap, layers: [graphicsLayer] }); const view = new MapView({ container: this.mapViewEl?.nativeElement, map: map, zoom: 5, center: [90, 45] }); view.when(() => { const sketch = new Sketch({ layer: graphicsLayer, view: view }); view.ui.add(sketch, "top-right"); }); } public ngOnInit(): void { // Initialize MapView and return an instance of MapView this.initializeMap(); } }

Any ideas?

Re: CSS not properly loading

ReneRubalcava — Thu, 02 Sep 2021 15:24:04 GMT

What does you build set up look like? Are you using webpack or some other framework build?

Re: CSS not properly loading

KevinWrona — Thu, 02 Sep 2021 15:31:52 GMT

Thanks for quick answer! Only installed ArcGIS JS API with npm ang run my angular app with "ng serve" ...

Re: CSS not properly loading, buttons & widget not rendering correctly

AndyGup — Thu, 02 Sep 2021 15:36:39 GMT

Hi Kevin, I'm not sure I understand, we didn't have ES modules (@arcgis/core) at 4.17. Is there a reason why you want to host the assets locally? They'll automatically pull from CDN, here's some additional info: https://developers.arcgis.com/javascript/latest/es-modules/#working-with-assets

Re: CSS not properly loading, buttons & widget not rendering correctly

KevinWrona — Fri, 03 Sep 2021 09:05:54 GMT

Hi Andy, at 4.17 it worked with AMD and for 4.20 I used ES modules, so only import statements and assets changed, core code is the same. I am in a security environment with no internet connection and own GIS Server. After copying the assets there are no exceptions or warnings so i have no clue why the rendering not like in 4.17

Re: CSS not properly loading, buttons & widget not rendering correctly

AndyGup — Fri, 03 Sep 2021 14:31:58 GMT

Okay, that's kind of what I figured, thanks for clarifying. It is odd that there are no 404, or even 504, errors when the app tries to retrieve the assets. One likely possibility is your assetsPath setting, the example above isn't what I would expect to see. Have you tried something like this:

esriConfig.assetsPath = "./assets";

If that doesn't work, send us a snippet of how you are copying the assets, such as your npm script, etc.

Re: CSS not properly loading, buttons & widget not rendering correctly

KevinWrona — Sun, 05 Sep 2021 12:37:07 GMT

I tried in 2 seperate projects. In one project I use the:

"copyEsriAssets": "xcopy .\\node_modules\\@arcgis\\core\\assets .\\apps\\vwa\\src\\assets\\@arcgis\\core\\assets /sy"

In a second blank Angular project for testing I copied the assets (esri and components folder) manually to my-app\src\assets\@arcgis\core\assets and use

esriConfig.assetsPath = "./assets/@arcgis/core/assets";

I am sure the path is correct becauce if I change it I get a 404 for widget-assets not found and so on ...

So I am not sure about what is important next to the asset folder and the import of main.css