[UI Issue] Suddenly all UI Elements display as plain html outside of viewDiv

Jump to solution
02-11-2021 04:20 AM
New Contributor

Hi all,

I have recently encountered an issue where all UI elements (zoom buttons, legends, popups) are displaying as plain html outside of the map view. Their JavaScript functionality seems to be still working, but they are not displaying correctly (for example the zoom in/zoom out elements work, but do not display as buttons). No apparent issues seems to have caused it, as it started occurring when no changes were being made to the code. I have since reverted to previous versions before the onset of this issue, where UI elements were displaying correctly, but now even in those versions the UI is not displaying accurately.

No errors or warnings are displayed in my browser's console.

For general information, I am using the JavaScript API version 4.18, using Microsoft Edge.

This is what my current display looks like: 

ArcGIS Faulty UI Element Display.PNG

I expect the UI elements to look like this, where they are all rendered as styled elements on the view such as this:

ArcGIS Expected UI Display.PNG

My code is as follows:


<!DOCTYPE html>
    <!-- head -->
        /* styling unrelated to ArcGIS */

        html, body, #viewDiv {
            padding: 0;
            margin: 0;
            height: 670px;
            width: 100%;
        .esri-view-width-xlarge .esri-popup__main-container,
        .esri-view-width-large .esri-popup__main-container,
        .esri-view-width-medium .esri-popup__main-container{
            max-height: 450px !important;

    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">


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

    <script src="https://js.arcgis.com/4.18/"></script>
        require(["esri/config", "esri/Map", "esri/views/MapView", "esri/layers/CSVLayer", "esri/widgets/Legend", "esri/symbols/SimpleMarkerSymbol", "esri/symbols/SimpleLineSymbol",
                "esri/widgets/Home"], function (esriConfig, Map, MapView, CSVLayer, Legend, SimpleMarkerSymbol, SimpleLineSymbol, Home) {
        esriConfig.apiKey = "API-KEY";    
        const popupTemplate = {title: "<b>{sitename}</b>",
                               content: [{type: 'fields',
                                          fieldInfos: [{fieldName: "location", label: "Location"},
                                            {fieldName: "latitude", label: "Latitude"},
                                            {fieldName: "longitude", label: "Longitude"},
                                            {fieldName: "elevation", label: "Elevation (ft.)"},
                                            {fieldName: "dominant_species", label: "Dominant Species"},
                                            {fieldName: "first_im_date", label: "First Image Taken"},
                                            {fieldName: "last_im_date", label: "Most Recent Image Taken"},]},
                                         {type: 'text', text: "<small>Last upadated {last_updated}</small>"}]};
        const greenOutline = {type: 'simple-line', color: [38, 115, 0, 1], width: 1.75};
        var pathMarker = {type: "simple-marker", 
                          size: 22, 
                          outline: greenOutline, 
                          color: [56, 168, 0, 0.55],
                          path: "M16,3.5c-4.142,0-7.5,3.358-7.5,7.5c0,4.143,7.5,18.121,7.5,18.121S23.5,15.143,23.5,11C23.5,6.858,20.143,3.5,16,3.5z M16,14.584c-1.979,0-3.584-1.604-3.584-3.584S14.021,7.416,16,7.416S19.584,9.021,19.584,11S17.979,14.584,16,14.584z"};
        var renderer = {type: "simple", 
                        symbol: pathMarker, 
                        label: "Location of Site from Database"};

        // LAYER
        var layer = new CSVLayer({
            url: "https://link-to-csv.csv",
            renderer: renderer,
            title: "Phenology Analysis",
            popupTemplate: popupTemplate,
            fields: [new Field({name: 'sitename', alias: "Site", type: "string"})]

        // MAP and VIEW
        var map = new Map({basemap: "topo-vector", 
                           layers: [layer]});
        var view = new MapView({map: map, 
                                center: [-84.3268, 38.0], 
                                zoom: 4, 
                                container: "viewDiv"});
        // ADD UI ELEMENTS
        var legend = new Legend({view: view, 
                                 layerInfos: [{layer: metaLayer, 
                                               title: "Site Locations"}]});
        view.ui.add(legend, "bottom-left");
        view.ui.add(new Home({view: view}), "top-left");   




Is there anything that might perhaps be causing this issue? It perplexes me since I hadn't changed any code when this first occurred, and since I have reverted to previous versions where this issue was not present, but even in those previous versions the issue is present.

Thank you for taking the time to look at my issue!

0 Kudos
1 Solution

Accepted Solutions
Frequent Contributor II

I don't see a link to the esri css in your snippet, do you have it?

<link rel="stylesheet" href="https://js.arcgis.com/4.18/esri/css/main.css">

View solution in original post

3 Replies
by MVP Regular Contributor
MVP Regular Contributor

What happens when you take out ! Important?

0 Kudos
Frequent Contributor II

I don't see a link to the esri css in your snippet, do you have it?

<link rel="stylesheet" href="https://js.arcgis.com/4.18/esri/css/main.css">
New Contributor

Ah that it is it. I'm building the website using Django and for some reason Django was not rendering the content block that included that link. When I moved it out of the content block the CSS finally loaded. Thank you!

0 Kudos