Yes,
Here is an example using your html file.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no">
<title>Underground Utilities Caltrans District 7</title>
<style>
html,
body {
font-family: sans-serif;
padding: 0;
margin: 0;
height: 100%;
width: 100%;
overflow: hidden;
color: white;
text-align: center;
}
#viewDiv {
position: absolute;
right: 0;
left: 0;
top: 0;
bottom: 60px;
}
#viewy {
position: absolute;
width: 1150px;
height: 40px;
left: 10%;
text-align: justify;
z-index: 1;
text-align: center;
-webkit-text-stroke-width: 1.2px;
-webkit-text-stroke-color: black;
font-size: 35px
}
.footer {
position: absolute;
bottom: 0;
width: 100%;
height: 60px;
}
.btns {
margin: 0 auto;
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
overflow: auto;
}
.btn-switch {
flex-grow: 4;
background-color: #54A0CD;
color: #FFF;
margin: 1px;
width: 50%;
padding: 20px;
overflow: auto;
text-align: center;
cursor: pointer;
font-size: 0.7em;
}
.active-map {
color: #fff;
background-color: #54CDB4;
}
</style>
<link rel="stylesheet" href="https://js.arcgis.com/4.3/esri/css/main.css">
<script src="https://js.arcgis.com/4.3/"></script>
<script>
require([
"dojo/dom-construct",
"esri/views/MapView",
"esri/widgets/Legend",
"esri/WebMap",
"esri/widgets/Search",
"dojo/on",
"dojo/domReady!"
], function(
domConstruct, MapView, Legend, WebMap, Search,
on
) {
var webmapids = [
"ba7b97b7d6b24c6381eba23062f8aab1",
"7884594fbc904ac6bdb540727ff2f5d7",
"bde977a8dcb34a719a1b0bc30df9542d",
"e857341735434b67ae844244ae4701ca",
"4818da5fb8de4fafaa5499b4873c1bd7",
];
/************************************************************
* Create multiple WebMap instances
************************************************************/
var webmaps = webmapids.map(function(webmapid) {
return new WebMap({
portalItem: {
id: webmapid
}
});
});
/************************************************************
* Initialize the View with the first WebMap
************************************************************/
var view = new MapView({
map: webmaps[0],
container: "viewDiv"
});
on(document.querySelector(".btns"), ".btn-switch: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");
}
}
}
});
//******************* MY EDIT: ADD LEGEND HERE ***************************//
var legend = new Legend({
view: view
});
//************************************** END MY EDITS ******************//
var logo = domConstruct.create("img", {
src: "https://onramp.dot.ca.gov/hq/paffairs/CT_No_Logotype/CT_logo_no_type.gif",
style: "height:50px;width:80px;",
id: "logo",
title: "Office of Surveys, Geospatial Unit"
});
var search = new Search({
view: view
});
view.ui.add(logo, "bottom-right");
view.ui.add(search, "top-right");
view.ui.add(legend, "top-right");
});
</script>
</head>
<body>
<section class="footer">
<div class="btns">
<div class="btn-switch active-map" data-id="0">Caltrans Utilities</div>
<div class="btn-switch" data-id="1">Electrical</div>
<div class="btn-switch" data-id="2">Natural Gas</div>
<div class="btn-switch" data-id="3">Wastewater</div>
<div class="btn-switch" data-id="4">Water</div>
<div class="btn-switch" data-id="5">Utility Listing</div>
</div>
</section>
<div id="viewy"><b>Underground Utilities within Caltrans District 7<b></div>
<div id="viewDiv"></div>
</body>
</html>
The styling is not the greatest, so you may want to fancy it up!
But it does work!
Chris
This says it is not possible yet in the known limitations.
Which part isn't possible?
Thanks for the help. It works. Easier than what I thought. ☺
No problem!
Happy to help!
Don't forget to mark this question as "Answered"
Yes,
Here is an example using your html file.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no">
<title>Underground Utilities Caltrans District 7</title>
<style>
html,
body {
font-family: sans-serif;
padding: 0;
margin: 0;
height: 100%;
width: 100%;
overflow: hidden;
color: white;
text-align: center;
}
#viewDiv {
position: absolute;
right: 0;
left: 0;
top: 0;
bottom: 60px;
}
#viewy {
position: absolute;
width: 1150px;
height: 40px;
left: 10%;
text-align: justify;
z-index: 1;
text-align: center;
-webkit-text-stroke-width: 1.2px;
-webkit-text-stroke-color: black;
font-size: 35px
}
.footer {
position: absolute;
bottom: 0;
width: 100%;
height: 60px;
}
.btns {
margin: 0 auto;
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
overflow: auto;
}
.btn-switch {
flex-grow: 4;
background-color: #54A0CD;
color: #FFF;
margin: 1px;
width: 50%;
padding: 20px;
overflow: auto;
text-align: center;
cursor: pointer;
font-size: 0.7em;
}
.active-map {
color: #fff;
background-color: #54CDB4;
}
</style>
<link rel="stylesheet" href="https://js.arcgis.com/4.3/esri/css/main.css">
<script src="https://js.arcgis.com/4.3/"></script>
<script>
require([
"dojo/dom-construct",
"esri/views/MapView",
"esri/widgets/Legend",
"esri/WebMap",
"esri/widgets/Search",
"dojo/on",
"dojo/domReady!"
], function(
domConstruct, MapView, Legend, WebMap, Search,
on
) {
var webmapids = [
"ba7b97b7d6b24c6381eba23062f8aab1",
"7884594fbc904ac6bdb540727ff2f5d7",
"bde977a8dcb34a719a1b0bc30df9542d",
"e857341735434b67ae844244ae4701ca",
"4818da5fb8de4fafaa5499b4873c1bd7",
];
/************************************************************
* Create multiple WebMap instances
************************************************************/
var webmaps = webmapids.map(function(webmapid) {
return new WebMap({
portalItem: {
id: webmapid
}
});
});
/************************************************************
* Initialize the View with the first WebMap
************************************************************/
var view = new MapView({
map: webmaps[0],
container: "viewDiv"
});
on(document.querySelector(".btns"), ".btn-switch: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");
}
}
}
});
//******************* MY EDIT: ADD LEGEND HERE ***************************//
var legend = new Legend({
view: view
});
//************************************** END MY EDITS ******************//
var logo = domConstruct.create("img", {
src: "https://onramp.dot.ca.gov/hq/paffairs/CT_No_Logotype/CT_logo_no_type.gif",
style: "height:50px;width:80px;",
id: "logo",
title: "Office of Surveys, Geospatial Unit"
});
var search = new Search({
view: view
});
view.ui.add(logo, "bottom-right");
view.ui.add(search, "top-right");
view.ui.add(legend, "top-right");
});
</script>
</head>
<body>
<section class="footer">
<div class="btns">
<div class="btn-switch active-map" data-id="0">Caltrans Utilities</div>
<div class="btn-switch" data-id="1">Electrical</div>
<div class="btn-switch" data-id="2">Natural Gas</div>
<div class="btn-switch" data-id="3">Wastewater</div>
<div class="btn-switch" data-id="4">Water</div>
<div class="btn-switch" data-id="5">Utility Listing</div>
</div>
</section>
<div id="viewy"><b>Underground Utilities within Caltrans District 7<b></div>
<div id="viewDiv"></div>
</body>
</html>
The styling is not the greatest, so you may want to fancy it up!
But it does work!
Chris