Hi i want to set zoom in and out button n bottom right corner horizontally to each other, i did trying it with css, but it do not work in responsive pages.
Any solution will be helpfull.
Solved! Go to Solution.
Hi Rajni,
You can use the default zoom widget, but set the layout: "horizontal", and then add it to the bottom-right, like this:
var view = new MapView({
container: "viewDiv",
map: map,
ui: {
components: ["attribution"] // removes default widgets except for attribution
}
});
var zoom = new Zoom({
view: view,
layout: "horizontal"
});
view.ui.add(zoom, "bottom-right");
Hi Rajni,
You can use the default zoom widget, but set the layout: "horizontal", and then add it to the bottom-right, like this:
var view = new MapView({
container: "viewDiv",
map: map,
ui: {
components: ["attribution"] // removes default widgets except for attribution
}
});
var zoom = new Zoom({
view: view,
layout: "horizontal"
});
view.ui.add(zoom, "bottom-right");
Its not working, do i need to add in require something, it even stops my recentre button to display. and no button is shown on map
var view = new MapView({
map: webmap,
container: "viewDiv",
center: ['<?=$map_xy_coordinate['x']?>', '<?=$map_xy_coordinate['y']?>'],
zoom: 15,
ui: {
components: ["attribution"] // removes default widgets except for attribution
}
});
view.when(function() {
// Add the boundary polygon and new lot polygon graphics
// create DOM object
var recenterBtn = domConstruct.toDom("<div class='map-button esri-component esri-locate esri-widget--button esri-widget' role='button' title='Recenter'>RECENTRE<span aria-hidden='true' role='presentation'></span></div>");
var zoom = new Zoom({
view: view,
layout: "horizontal"
});
// add to view
view.ui.add(recenterBtn, "bottom-right");
view.ui.add(zoom, "bottom-right");
}
Rajni,
Did you add the obvious one? "esri/widgets/Zoom"
No
Hi sir,
I tried the same and it still not working and blocked to display my other buttons also
Rajni,
That means you have a error in how you added it to your requires array. I added it to my sample of your code without any issue.