[UI Issue] Suddenly all UI Elements display as plain html outside of viewDiv
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:
I expect the UI elements to look like this, where they are all rendered as styled elements on the view such as this:
My code is as follows:
<!DOCTYPE html>
<html>
<head>
<!-- head -->
<style>
/* 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;
}
</style>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
</head>
<body>
<div id="viewDiv"> </div>
<script src="https://js.arcgis.com/4.18/"></script>
<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";
// POPUP TEMPLATE
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>"}]};
// SYMBOLS AND RENDERER
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");
});
</script>
</body>
</html>
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!
Accepted Solutions
