I need a custom zoom button for my project with the arcgis api 4.11. I found this example for 3.x series:
var map; // esri map initialization require(["esri/map", "esri/geometry/Point", "esri/symbols/SimpleMarkerSymbol", "esri/symbols/SimpleLineSymbol", "esri/graphic", "dojo/domReady!"], function (Map, Point, SimpleMarkerSymbol, SimpleLineSymbol, Graphic, Color) { map = new Map("map", { center: [0, 0], zoom: 5, basemap: "topo", slider: true // set to false to remove default zoom buttons }); });
on(dom.byId("zoomInBtn"), "click", function(evt){map.setZoom(map.getZoom()+1);});on(dom.byId("zoomOutBtn"), "click", function(evt){map.setZoom(map.getZoom()-1);});
Is it possible to implement something like that with arcgis api 4.11. ?
Solved! Go to Solution.
Denis,
Then this is what you are looking for:
<!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.11</title>
<style>
html,
body,
#viewDiv {
padding: 0;
margin: 0;
height: 100%;
width: 100%;
}
.esri-widget--button.esri-widget.esri-interactive.home {
border-top: solid 1px #e0e0e0;
}
</style>
<link
rel="stylesheet"
href="https://js.arcgis.com/4.11/esri/themes/light/main.css"
/>
<script src="https://js.arcgis.com/4.11/"></script>
<script>
require([
"esri/Map",
"esri/views/MapView",
"dojo/query",
"dojo/dom-construct",
"dojo/on"], function(
Map,
MapView,
query,
domConstruct,
on) {
var map = new Map({
basemap: "streets"
});
var view = new MapView({
container: "viewDiv",
map: map,
zoom: 4,
center: [15, 65]
});
view.when(function(){
var zoomInBtn = query('.esri-component.esri-zoom.esri-widget>div')[0];
var homeBtn = domConstruct.toDom("<div class='esri-widget--button esri-widget esri-interactive home' role='button' title='Home Extent'><span aria-hidden='true' role='presentation' class='esri-icon esri-icon-home'></span></div>");
on(homeBtn, 'click', function(evt){
console.info("Home Extent Button Clicked");
});
domConstruct.place(homeBtn, zoomInBtn, "after");
});
});
</script>
</head>
<body>
<div id="viewDiv"></div>
</body>
</html>
Denis,
Does the standard Zoom widget not work for you?
https://developers.arcgis.com/javascript/latest/api-reference/esri-widgets-Zoom.html
Robert,
yes, it works.
I just would like to zoom in/out buttons to separate and put the home widget button between them.
Denis,
Then this is what you are looking for:
<!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.11</title>
<style>
html,
body,
#viewDiv {
padding: 0;
margin: 0;
height: 100%;
width: 100%;
}
.esri-widget--button.esri-widget.esri-interactive.home {
border-top: solid 1px #e0e0e0;
}
</style>
<link
rel="stylesheet"
href="https://js.arcgis.com/4.11/esri/themes/light/main.css"
/>
<script src="https://js.arcgis.com/4.11/"></script>
<script>
require([
"esri/Map",
"esri/views/MapView",
"dojo/query",
"dojo/dom-construct",
"dojo/on"], function(
Map,
MapView,
query,
domConstruct,
on) {
var map = new Map({
basemap: "streets"
});
var view = new MapView({
container: "viewDiv",
map: map,
zoom: 4,
center: [15, 65]
});
view.when(function(){
var zoomInBtn = query('.esri-component.esri-zoom.esri-widget>div')[0];
var homeBtn = domConstruct.toDom("<div class='esri-widget--button esri-widget esri-interactive home' role='button' title='Home Extent'><span aria-hidden='true' role='presentation' class='esri-icon esri-icon-home'></span></div>");
on(homeBtn, 'click', function(evt){
console.info("Home Extent Button Clicked");
});
domConstruct.place(homeBtn, zoomInBtn, "after");
});
});
</script>
</head>
<body>
<div id="viewDiv"></div>
</body>
</html>
Great, that's it!
Just one more question:
I used the function goTo () for the home button:
on(homeBtn, 'click', function(evt){
view.goTo({
center: [-112, 38],
zoom: 13
});
});
Everything seems to be ok. Home Button works fine.
Is there another way to implement home center?
Thank you very much Robert
That's how I would do it.