SWAP Webmaps sample and widgets

211
2
Jump to solution
07-25-2019 09:20 AM
AxelLévy
New Contributor III

Hello,

I try to reproduce a tabbed application but with the possibility to have widgets in the map. (The Story Map Mapseries is too limited).

This example is almost perfect for me: https://developers.arcgis.com/javascript/latest/sample-code/webmap-swap/index.html

But when I add widgets (Home Button for example), they only load  after clicking a tab. 

Someone can help me ?

Here my code 

/************************************************************
* 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"
});

var homeBtn = new Home({
view: view
});

var layerList = new LayerList({
view: view
});

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");
}
}
}

view.ui.add(homeBtn, "top-left");
view.ui.add(layerList, "bottom-left");
});

Btw if we could switch between layers and not webmaps it would be even better!

thank you in advance

Tags (1)
0 Kudos
1 Solution

Accepted Solutions
KenBuja
MVP Honored Contributor

This code adds the home button.

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta
name="viewport"
content="initial-scale=1,maximum-scale=1,user-scalable=no"
/>
<title>Swap web maps in the same view - 4.12</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: rgba(34, 111, 14, 0.5);
color: #fff;
margin: 1px;
width: 50%;
padding: 20px;
overflow: auto;
text-align: center;
cursor: pointer;
}

.active-map {
color: #fff;
background-color: rgba(34, 111, 14, 1);
}
</style>

<link
rel="stylesheet"
href="https://js.arcgis.com/4.12/esri/themes/light/main.css"
/>
<script src="https://js.arcgis.com/4.12/"></script>

<script>
require(["esri/views/MapView", "esri/WebMap", "esri/widgets/Home"], function(MapView, WebMap, Home) {
var webmapids = [
"ad5759bf407c4554b748356ebe1886e5",
"71ba2a96c368452bb73d54eadbd59faa",
"45ded9b3e0e145139cc433b503a8f5ab"
];

/************************************************************
* 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"
});

var homeBtn = new Home({
view: view
});

view.ui.add(homeBtn, "top-left");

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">Missing Migrants</div>
<div class="btn-switch" data-id="1">Refugee Routes</div>
<div class="btn-switch" data-id="2">Sea Arrivals</div>
</div>
</section>
<div id="viewDiv" class="esri-widget"></div>
</body>
</html>

View solution in original post

0 Kudos
2 Replies
KenBuja
MVP Honored Contributor

This code adds the home button.

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta
name="viewport"
content="initial-scale=1,maximum-scale=1,user-scalable=no"
/>
<title>Swap web maps in the same view - 4.12</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: rgba(34, 111, 14, 0.5);
color: #fff;
margin: 1px;
width: 50%;
padding: 20px;
overflow: auto;
text-align: center;
cursor: pointer;
}

.active-map {
color: #fff;
background-color: rgba(34, 111, 14, 1);
}
</style>

<link
rel="stylesheet"
href="https://js.arcgis.com/4.12/esri/themes/light/main.css"
/>
<script src="https://js.arcgis.com/4.12/"></script>

<script>
require(["esri/views/MapView", "esri/WebMap", "esri/widgets/Home"], function(MapView, WebMap, Home) {
var webmapids = [
"ad5759bf407c4554b748356ebe1886e5",
"71ba2a96c368452bb73d54eadbd59faa",
"45ded9b3e0e145139cc433b503a8f5ab"
];

/************************************************************
* 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"
});

var homeBtn = new Home({
view: view
});

view.ui.add(homeBtn, "top-left");

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">Missing Migrants</div>
<div class="btn-switch" data-id="1">Refugee Routes</div>
<div class="btn-switch" data-id="2">Sea Arrivals</div>
</div>
</section>
<div id="viewDiv" class="esri-widget"></div>
</body>
</html>

View solution in original post

0 Kudos
AxelLévy
New Contributor III

OK thanks a lot ! I understand. I wrote the view.ui.add in the wrong place  

0 Kudos