Wondering if it is possible to keep my 'home' widget; but remove the functionality set where it 'returns' to a zoom level and position on my map. i.e. I want to just keep the icon (for now). https://developers.arcgis.com/javascript/latest/api-reference/esri-widgets-Home.html
Cam,
Sure you can just add this html code to your add:
<div id="myHomeBtn" class="esri-component esri-home esri-widget--button esri-widget" role="button" tabindex="0" aria-label="Default map view" title="Default map view">
<span aria-hidden="true" class="esri-icon esri-icon-home"></span>
<span class="esri-icon-font-fallback-text">Home</span>
</div>
Now you have a button but no code or event listener hooked up to it.
Thank you Robert; I am invoking it originally with the below code and find it useful to keep due to its location and load time. How can I keep it invoked this way, but disable the current functionality affiliated with zoom. You can see I am trying to use return false and also preventDefault(); in effort to do this.
Cam,
That is going to be tough. Using the widget it has all the event handlers programmed into the widgets code and there are no simple hooks to get in there and disable those. Location and load time are really not good reasons to try and use a widget for the button look and icon. You can get the location and speed by adding the html to the views UI like this:
view.ui.add(document.getElementById("myHomeBtn"), "top-left");
Thanks Robert. Just stand alone like that? I am getting view undefined.
Cam,
Here is my complete concept sample:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta
name="viewport"
content="initial-scale=1, maximum-scale=1,user-scalable=no"
/>
<title>Home button - 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,
#viewDiv {
padding: 0;
margin: 0;
height: 100%;
width: 100%;
}
</style>
<script>
require([
"esri/Map",
"esri/views/SceneView",
"esri/widgets/Home"
], function(Map, SceneView, Home) {
var map = new Map({
basemap: "streets",
ground: "world-elevation"
});
var view = new SceneView({
container: "viewDiv",
map: map,
center: [-56.049, 38.485, 78],
zoom: 3
});
// var homeBtn = new Home({
// view: view
// });
// // Add the home button to the top left corner of the view
// view.ui.add(homeBtn, "top-left");
view.ui.add(document.getElementById("myHomeBtn"), "top-left")
});
</script>
</head>
<body>
<div id="viewDiv">
<div id="myHomeBtn" class="esri-component esri-home esri-widget--button esri-widget" role="button" tabindex="0" aria-label="Default map view" title="Default map view">
<span aria-hidden="true" class="esri-icon esri-icon-home"></span>
<span class="esri-icon-font-fallback-text">Home</span>
</div>
</div>
</body>
</html>