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!
Solved! Go to Solution.
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">
What happens when you take out ! Important?
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">
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!
Thank you! Between two projects I'm working on, I thought I'd applied styling to both - but turns out I missed it on one.
In my project, missing the stylesheet import also caused issues with displaying normal zoom buttons, map attributions, and caused a very weird rendering issue with React where multiple maps would appear nested within the main map's div. Just wanted to add in case anyone else experienced that.
"dependencies": {
"@arcgis/core": "^4.24.7",
"react": "^18.2.0",
"react-dom": "^18.2.0"
},
"devDependencies": {
"@babel/core": "^7.18.9",
"@babel/preset-env": "^7.18.9",
"@babel/preset-react": "^7.18.6",
"babel-loader": "^8.2.5",
"css-loader": "^6.7.1",
"html-webpack-plugin": "^5.5.0",
"style-loader": "^3.3.1",
"webpack": "^5.74.0",
"webpack-cli": "^4.10.0",
"webpack-dev-server": "^4.9.3"
}