ZoomIn on click on the map

119
1
04-27-2020 12:52 PM
AkhilaM
New Contributor

When click on the zoomIn button(it should activate) and click on the map it should zoom in to that point (making on click point as center). I need to develop this with help of Javascript API. 

Will you please help me with same ZoomOut as well.

Thanks.

@rscheitlin

ArcGIS API for JavaScript

Tags (1)
0 Kudos
1 Reply
RobertScheitlin__GISP
MVP Esteemed Contributor

Akhila,

Here are the modifications to the previous sample I provided to do that:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no">
<title>Navigation Toolbar - 4.15</title>
<style>
html,
body,
#viewDiv {
padding: 0;
margin: 0;
height: 100%;
width: 100%;
}

#tools {
padding: 1em;
text-align: center;
}

.tool {
padding-top: 3px;
padding: 4px 2px;
}

.tool.disabled,
.tool.disabled:hover {
opacity: 0.6;
pointer-events: none;
}

.tool:hover,
.tool.selected:hover {
background-color: rgba(0, 0, 0, 0.5);
}

.tool.selected {
background-color: rgba(0, 0, 0, 0.3);
}
</style>

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

<script>
var _prevExtent, _preExtent,
_currentvExtent, _extentHistory,
evtViewDragHandler, evtViewKeyDownHandler, draw,
fullExtent
require([
"esri/Map",
"esri/views/MapView",
"esri/core/watchUtils",
"dojo/dom-class",
"dojo/dom",
"dojo/on",
"esri/views/2d/draw/Draw",
"esri/geometry/Extent",
"esri/geometry/Point",
"esri/Graphic"
], function(Map, MapView, watchUtils, domClass, dom, on, Draw, Extent, Point, Graphic) {
_prevExtent = false;
_preExtent = null;
_currentExtent = null;
_extentHistory = [];
_extentHistoryIndx = 0;
_nextExtent = false;
var map = new Map({
basemap: "streets"
});

var view = new MapView({
container: "viewDiv",
map: map,
zoom: 4,
center: [15, 65] // longitude, latitude
});

watchUtils.whenTrue(view, "ready", function(){
fullExtent = view.extent.clone();
draw = new Draw({
view: view
});
initToolbar();
watchUtils.whenOnce(view, "extent", function(){
watchUtils.when(view, 'stationary', function(evt){
if(evt){
extentChangeHandler(view.extent);
}
});
});
});

function extentChangeHandler(evt) {
if(_prevExtent || _nextExtent){
_currentExtent = evt;
}else{
_preExtent = _currentExtent;
_currentExtent = evt;
_extentHistory.push({
preExtent: _preExtent,
currentExtent: _currentExtent
});
_extentHistoryIndx = _extentHistory.length - 1;
}
_prevExtent = _nextExtent = false;
extentHistoryChange();
}

function extentHistoryChange() {
if(_extentHistory.length === 0 || _extentHistoryIndx === 0 ){
domClass.add(dom.byId("zoomprev"), "disabled");
} else {
domClass.remove(dom.byId("zoomprev"), "disabled");
}
if(_extentHistory.length === 0 || _extentHistoryIndx === _extentHistory.length - 1){
domClass.add(dom.byId("zoomnext"), "disabled");
} else {
domClass.remove(dom.byId("zoomnext"), "disabled");
}
}

function enableViewPanning() {
if(evtViewDragHandler){
evtViewDragHandler.remove();
evtViewDragHandler = null;
}
if(evtViewKeyDownHandler){
evtViewKeyDownHandler.remove();
evtViewKeyDownHandler = null;
}
}

function disableViewPanning() {
if(evtViewDragHandler){
evtViewDragHandler.remove();
evtViewDragHandler = null;
}
if(evtViewKeyDownHandler){
evtViewKeyDownHandler.remove();
evtViewKeyDownHandler = null;
}
evtViewDragHandler = view.on("drag", function(event) {
// prevents panning with the mouse drag event
event.stopPropagation();
});

evtViewKeyDownHandler = view.on("key-down", function(event) {
// prevents panning with the arrow keys
var keyPressed = event.key;
if (keyPressed.slice(0, 5) === "Arrow") {
event.stopPropagation();
}
});
}

function displayCrosshairCursor() {
this.view && this.view.container && this.view.container.style && "crosshair" !== this.view.container.style.cursor && (this.view.container.style.cursor = "crosshair")
}
function displayPointerCursor() {
this.view && this.view.container && this.view.container.style && "pointer" !== this.view.container.style.cursor && (this.view.container.style.cursor = "pointer")
}
function displayDefaultCursor() {
this.view && this.view.container && this.view.container.style && "default" !== this.view.container.style.cursor && (this.view.container.style.cursor = "default")
}

function removeCurrentSelTool() {
view.popup.close();
domClass.remove(dom.byId("panmap"), "selected");
domClass.remove(dom.byId("zoomin"), "selected");
domClass.remove(dom.byId("zoomout"), "selected");
}

function drawRect(event){
var vertices = event.vertices;
//remove existing graphic
view.graphics.removeAll();
if(vertices.length < 2){
return;
}

// create a new extent
var extent = getExtentfromVertices(vertices);

var graphic = new Graphic({
geometry: extent,
symbol: {
type: "simple-fill", // autocasts as SimpleFillSymbol
color: [0, 0, 0, 0.3],
style: "solid",
outline: { // autocasts as SimpleLineSymbol
color: [255, 0, 0],
width: 1
}
}
});

view.graphics.add(graphic);
}

function zoomIn(evt){
draw.reset();
view.graphics.removeAll();
var action = draw.create("rectangle");
view.focus();
action.on("vertex-add", drawRect);
action.on("draw-complete", zoomIn);
action.on("cursor-update", drawRect);
if(evt.vertices.length === 1){
var pnt = new Point({x: evt.vertices[0][0], y: evt.vertices[0][1], spatialReference: view.spatialReference});
view.goTo({target: pnt, scale: (view.scale * .5)});
return;
}
var extent = getExtentfromVertices(evt.vertices);
if (extent.width !== 0 || extent.height !== 0){
view.goTo(extent);
}
}

function zoomOut(evt){
var vertices = evt.vertices;
draw.reset();
view.graphics.removeAll();
var action = draw.create("rectangle");
view.focus();
action.on("vertex-add", drawRect);
action.on("draw-complete", zoomOut);
action.on("cursor-update", drawRect);
if(evt.vertices.length === 1){
var pnt = new Point({x: evt.vertices[0][0], y: evt.vertices[0][1], spatialReference: view.spatialReference});
view.goTo({target: pnt, scale: (view.scale * 2)});
return;
}
var sx = vertices[0][0], sy = vertices[0][1];
var ex = vertices[1][0], ey = vertices[1][1];
var rect = {
x: Math.min(sx, ex),
y: Math.max(sy, ey),
width: Math.abs(sx - ex),
height: Math.abs(sy - ey),
spatialReference: view.spatialReference
};
if (rect.width !== 0 || rect.height !== 0){
var scrPnt1 = view.toScreen(rect);
var scrPnt2 = view.toScreen({x: rect.x + rect.width, y: rect.y, spatialReference: rect.spatialReference});
var mWidth = view.extent.width;
var delta = (mWidth * view.width / Math.abs(scrPnt2.x - scrPnt1.x) - mWidth) / 2;
var vExtent = view.extent;
view.goTo(new Extent({
xmin: vExtent.xmin - delta,
ymin: vExtent.ymin - delta,
xmax: vExtent.xmax + delta,
ymax: vExtent.ymax + delta,
spatialReference: vExtent.spatialReference
}));
}
}

function getExtentfromVertices(vertices){
var sx = vertices[0][0], sy = vertices[0][1];
var ex = vertices[1][0], ey = vertices[1][1];
var rect = {
x: Math.min(sx, ex),
y: Math.max(sy, ey),
width: Math.abs(sx - ex),
height: Math.abs(sy - ey),
spatialReference: view.spatialReference
};
if (rect.width !== 0 || rect.height !== 0){
return new Extent({
xmin: parseFloat(rect.x),
ymin: parseFloat(rect.y) - parseFloat(rect.height),
xmax: parseFloat(rect.x) + parseFloat(rect.width),
ymax: parseFloat(rect.y),
spatialReference: rect.spatialReference
});
}else{
return null;
}
}

function initToolbar() {
on(dom.byId("zoomfull"), "click", function() {
view.goTo( fullExtent);
});
on(dom.byId("zoomnext"), "click", function() {
_nextExtent = true;
_extentHistoryIndx++;
view.goTo(_extentHistory[_extentHistoryIndx].currentExtent);
});
on(dom.byId("zoomprev"), "click", function() {
if(_extentHistory[_extentHistoryIndx].preExtent){
_prevExtent = true;
view.goTo(_extentHistory[_extentHistoryIndx].preExtent);
_extentHistoryIndx--;
}
});
on(dom.byId("zoomin"), "click", function() {
removeCurrentSelTool();
disableViewPanning();
view.graphics.removeAll();
var action = draw.create("rectangle");
displayCrosshairCursor();
view.focus();
action.on("vertex-add", drawRect);
action.on("draw-complete", zoomIn);
action.on("cursor-update", drawRect);
domClass.add(dom.byId("zoomin"), "selected");
});
on(dom.byId("zoomout"), "click", function() {
removeCurrentSelTool();
disableViewPanning();
view.graphics.removeAll();
var action = draw.create("rectangle");
displayCrosshairCursor();
view.focus();
action.on("vertex-add", drawRect);
action.on("draw-complete", zoomOut);
action.on("cursor-update", drawRect);
domClass.add(dom.byId("zoomout"), "selected");
});
on(dom.byId("panmap"), "click", function() {
removeCurrentSelTool();
enableViewPanning();
displayDefaultCursor();
draw.reset();
domClass.add(dom.byId("panmap"), "selected");
});
}
view.ui.add("tools", "top-right");
});
</script>
</head>

<body>
<div id="viewDiv"></div>
<div id="tools" class="esri-widget">
<img src="images/esriZoomIn.png" alt="Zoom In" title="Zoom In" class="tool" id="zoomin" />
<img src="images/esriZoomOut.png" alt="Zoom Out" title="Zoom Out" class="tool" id="zoomout" />
<img src="images/esriPan.png" alt="Pan Map" title="Pan Map" class="tool selected" id="panmap" />
<img src="images/esriZoomFullExtent.png" alt="Full Extent" title="Full Extent" class="tool" id="zoomfull" />
<img src="images/backward.png" alt="Back Extent" title="Back Extent" class="tool" id="zoomprev" />
<img src="images/forward.png" alt="Forward Extent" title="Forward Extent" class="tool" id="zoomnext" />
</div>
</body>
</html>
‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍
0 Kudos