To start, sorry for my rough English but I speak French.
I would like to create a new application with, on the right of the map, a toolbar that would contain several widgets.
Then I would like the content of each widget to open in another div.
I followed this discussion but I can't seem to position the widgets vertically and make their content visible in another div.
Attached is a view of the application design
Thank you in advance for the help you can give me.
Ps: i'm webdesigner but new in javascript.
Solved! Go to Solution.
This a very rough hurried sample of that.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no" />
<title>Toolbar - 4.14</title>
<link rel="stylesheet" href="https://js.arcgis.com/4.14/esri/themes/light/main.css" />
<script src="https://js.arcgis.com/4.14/"></script>
<style>
html,
body {
padding: 0;
margin: 0;
height: 100%;
width: 100%;
}
.appCont {
padding: 0;
margin: 0;
height: 100%;
width: 100%;
display: flex;
flex-flow: row nowrap;
}
#viewDiv {
width: calc(100% - 32px);
height: 100%;
padding: 0;
margin: 0;
}
#toolbar {
height: 100%;
width: 32px;
padding: 0;
margin: 0;
display: flex;
background: green;
flex-flow: column;
}
#widgetDivCont {
width: 300px;
padding: 0;
margin: 0;
display: flex;
background: white;
flex-flow: column;
display: none;
}
#widgetDiv,
#widgetDiv2 {
max-height: 200px;
}
.myButton {
font-size: 14px;
color: #fff;
width: 32px;
height: 32px;
padding: 0;
margin: 0;
overflow: hidden;
cursor: pointer;
text-align: center;
display: flex;
flex-flow: row nowrap;
justify-content: center;
align-items: center;
}
</style>
<script>
require([
"esri/WebScene",
"esri/views/SceneView",
"esri/widgets/Home",
"esri/widgets/BasemapGallery",
"esri/widgets/LayerList"
], function (WebScene, SceneView, Home, BasemapGallery, LayerList) {
var scene = new WebScene({
portalItem: {
// autocasts as new PortalItem()
id: "adfad6ee6c6043238ea64e121bb6429a"
}
});
var view = new SceneView({
container: "viewDiv",
map: scene
});
const widgetDivCont = document.getElementById('widgetDivCont');
const bmBtn = document.getElementById('basemapBtn');
const lyrlistBtn = document.getElementById('llBtn');
bmBtn.addEventListener('click', function(){
widgetDivCont.style.display = "block";
});
var basemapGallery = new BasemapGallery({
view: view,
container: widgetDiv
});
view.when(function() {
var layerList = new LayerList({
view: view,
container: widgetDiv2
});
});
});
</script>
</head>
<body></body>
<div class="appCont">
<div id="viewDiv"></div>
<div id="toolbar">
<div id="basemapBtn" class="myButton esri-home"><span aria-hidden="true" class="esri-icon esri-icon-basemap"></span></div>
<div id="llBtn" class="myLayerList myButton"><span aria-hidden="true" class="esri-icon esri-icon-bookmark"></span></div>
</div>
<div id="widgetDivCont">
<div id="widgetDiv"></div>
<div id="widgetDiv2"></div>
</div>
</div>
</body>
</html>
This a very rough hurried sample of that.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no" />
<title>Toolbar - 4.14</title>
<link rel="stylesheet" href="https://js.arcgis.com/4.14/esri/themes/light/main.css" />
<script src="https://js.arcgis.com/4.14/"></script>
<style>
html,
body {
padding: 0;
margin: 0;
height: 100%;
width: 100%;
}
.appCont {
padding: 0;
margin: 0;
height: 100%;
width: 100%;
display: flex;
flex-flow: row nowrap;
}
#viewDiv {
width: calc(100% - 32px);
height: 100%;
padding: 0;
margin: 0;
}
#toolbar {
height: 100%;
width: 32px;
padding: 0;
margin: 0;
display: flex;
background: green;
flex-flow: column;
}
#widgetDivCont {
width: 300px;
padding: 0;
margin: 0;
display: flex;
background: white;
flex-flow: column;
display: none;
}
#widgetDiv,
#widgetDiv2 {
max-height: 200px;
}
.myButton {
font-size: 14px;
color: #fff;
width: 32px;
height: 32px;
padding: 0;
margin: 0;
overflow: hidden;
cursor: pointer;
text-align: center;
display: flex;
flex-flow: row nowrap;
justify-content: center;
align-items: center;
}
</style>
<script>
require([
"esri/WebScene",
"esri/views/SceneView",
"esri/widgets/Home",
"esri/widgets/BasemapGallery",
"esri/widgets/LayerList"
], function (WebScene, SceneView, Home, BasemapGallery, LayerList) {
var scene = new WebScene({
portalItem: {
// autocasts as new PortalItem()
id: "adfad6ee6c6043238ea64e121bb6429a"
}
});
var view = new SceneView({
container: "viewDiv",
map: scene
});
const widgetDivCont = document.getElementById('widgetDivCont');
const bmBtn = document.getElementById('basemapBtn');
const lyrlistBtn = document.getElementById('llBtn');
bmBtn.addEventListener('click', function(){
widgetDivCont.style.display = "block";
});
var basemapGallery = new BasemapGallery({
view: view,
container: widgetDiv
});
view.when(function() {
var layerList = new LayerList({
view: view,
container: widgetDiv2
});
});
});
</script>
</head>
<body></body>
<div class="appCont">
<div id="viewDiv"></div>
<div id="toolbar">
<div id="basemapBtn" class="myButton esri-home"><span aria-hidden="true" class="esri-icon esri-icon-basemap"></span></div>
<div id="llBtn" class="myLayerList myButton"><span aria-hidden="true" class="esri-icon esri-icon-bookmark"></span></div>
</div>
<div id="widgetDivCont">
<div id="widgetDiv"></div>
<div id="widgetDiv2"></div>
</div>
</div>
</body>
</html>
Hello Robert,
Sorry to not have answered directly but I wanted to come back with a complete version of my project to share with other users.
In the meantime, thank you already for answering my question.
Best regard.
Alan.