I'm trying to use Dojo Dijits Border Container and Content Pane with a Tiled Imagery Layer. I can get the code to work to display just the Tiled Imagery Layer and also get it to work fine with the Dojo Dijits layout. My problem is when I combine them into one unified code, all of the original styling is removed and I do not see the layer I am loading. I had luck getting the two to merge together when I was using version 4.22, though when using version 4.27, I seem to be running into issues. I need it to run with the 4.27 so I can use some widgets that require that version.
I attached the code I have thus far. When I include the last portion of the Javascript, my layout gets shifted and I loose most of the original formatting. Any ideas on how to resolve this?
<html lang="en">
<head>
<meta charset="utf-8">
<title>Demo: Layout with Dijit</title>
<link rel="stylesheet" href="style.css" media="screen">
<link rel="stylesheet" href="//ajax.googleapis.com/ajax/libs/dojo/1.10.4/dijit/themes/claro/claro.css" media="screen">
<script src="//ajax.googleapis.com/ajax/libs/dojo/1.10.4/dojo/dojo.js"
data-dojo-config="async:true, parseOnLoad:true"> </script>
</head>
<body class="claro">
<div id="appLayout" class="demoLayout" data-dojo-type="dijit/layout/BorderContainer" data-dojo-props="design: 'headline'">
<div class="centerPanel" data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region: 'center'">
<div id="viewDiv"></div>
</div>
<div class="edgePanel" data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region: 'top'">Header content (top)
</div>
<div id="leftCol" class="edgePanel" data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region: 'left', splitter: true">Sidebar content (left)
</div>
</div>
</body>
<!-- -----------------------------------CSS-------------------------------------------- -->
<style>
html, body {
height: 100%;
margin: 0;
overflow: hidden;
padding: 0;}
#viewDiv {
padding: 0;
margin: 0;
height: 100%;
width: 100%;
box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.5);}
#appLayout {
height: 100%;}
#leftCol {
width: 14em;}
.claro .demoLayout .edgePanel {
background-color: #d0e9fc;}
#viewsChart {
width: 550px;
height: 550px;}
</style>
<!-- --------------------------------JAVASCRIPT---------------------------------------- -->
<link rel="stylesheet" href="https://js.arcgis.com/4.27/esri/themes/light/main.css" />
<script src="https://js.arcgis.com/4.27/"></script>
<script>
require(["dojo/parser", "dijit/layout/BorderContainer", "dijit/layout/TabContainer",
"dijit/layout/ContentPane"]);
</script>
<script>
require([
"esri/Map",
"esri/views/MapView",
"esri/layers/ImageryTileLayer", // Import ImageryLayer module
"esri/widgets/TimeSlider",
"esri/widgets/Expand",
"esri/widgets/Legend"
], (Map, MapView, ImageryTileLayer, TimeSlider, Expand, Legend) => {
// Create an ImageryLayer using the Image Service URL
const raster = new ImageryTileLayer({
url:
"https://tiledimageservices9.arcgis.com/6EuFgO4fLTqfNOhu/arcgis/rest/services/76_CRF/ImageServer"
});
const map = new Map({
basemap: "gray-vector",
layers: [raster]
});
const view = new MapView({
map: map,
container: "viewDiv",
zoom: 11,
center: [-121.6555, 36.6777]
});
});
</script>
<!-- ---------------------------------------------------------------------------------- -->
</html>