Hi there,
I'm trying to create a tabbed map view as is seen on this website (that I manage). However, I would like one of the tabs to be a map, and the other to be a dashboard. Is this possible? Code for that map is below. Maybe this isn't the right template to use? Any advice would be appreciated. Thanks!
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no" />
<title>Utah Fire Restrictions - Swap Maps</title>
<style>
html,
body {
padding: 0;
margin: 0;
height: 100%;
width: 100%;
overflow: hidden;
}
#viewDiv {
position: absolute;
right: 0;
left: 0;
top: 60px;
bottom: 0;
}
.header {
position: absolute;
top: 0;
width: 100%;
height: 10%;
}
.btns {
margin: 0 auto;
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
overflow: auto;
}
.btn-switch {
flex-grow: 4;
background-color: #ffa87d;
color: #fff;
font-size: 1.2em;
font-weight: bold;
margin: 1px;
width: 50%;
padding: 20px;
overflow: auto;
text-align: center;
cursor: pointer;
}
.active-map {
color: #fff;
background-color: #ea763c;
}
</style>
<link rel="stylesheet" href="https://js.arcgis.com/4.19/esri/themes/light/main.css" />
<script src="https://js.arcgis.com/4.19/"></script>
<script>
require(["esri/views/MapView", "esri/WebMap", "esri/widgets/Search", "esri/widgets/BasemapToggle"], function(MapView, WebMap, Search, BasemapToggle) {
var webmapids = [
"dc1ab69b0d48495d8da6534604d030d3",
"658cbebc11334e72ba7b29d72cd9d8bd"
];
/************************************************************
* Create multiple WebMap instances
************************************************************/
var webmaps = webmapids.map(function(webmapid) {
return new WebMap({
portalItem: {
// autocasts as new PortalItem()
id: webmapid
}
});
});
/************************************************************
* Initialize the View with the first WebMap
************************************************************/
var view = new MapView({
map: webmaps[0],
container: "viewDiv"
});
const searchWidget = new Search({
view: view });
// Adds the search widget below other elements in
// the top left corner of the view
view.ui.add(searchWidget, { position: "top-left", index: 2
});
let basemapToggle = new BasemapToggle({
view: view, // The view that provides access to the map's "streets-vector" basemap
nextBasemap: "streets-vector" // Allows for toggling to the "hybrid" basemap
});
document.querySelector(".btns").addEventListener("click", function(event) {
/************************************************************
* On a button click, change the map of the View
************************************************************/
var id = event.target.getAttribute("data-id");
if (id) {
var webmap = webmaps[id];
view.map = webmap;
var nodes = document.querySelectorAll(".btn-switch");
for (var idx = 0; idx < nodes.length; idx++) {
var node = nodes[idx];
var mapIndex = node.getAttribute("data-id");
if (mapIndex === id) {
node.classList.add("active-map");
} else {
node.classList.remove("active-map");
}
}
}
});
});
</script>
</head>
<body>
<section class="header esri-widget">
<div class="btns">
<div class="btn-switch active-map" data-id="0">Campfire and Other Restrictions</div>
<div class="btn-switch" data-id="1">Fireworks Restrictions</div>
</div>
</section>
<div id="viewDiv" class="esri-widget"></div>
</body>
</html>
