Zoom value of Mapview is -1 in arcgis js 4.10

447
10
08-20-2019 11:55 PM
Highlighted
New Contributor II

i am explicitly setting zoom value of Mapview in arcgis js 4.10.

But zoom effect is not visible on map and on console view.zoom value is -1 .

i want to know the reason of negative value of zoom.

Reply
0 Kudos
10 Replies
Highlighted
MVP Regular Contributor

Hi Ritika Manderwal,

Can you please show us the code of your application? In that way we might be able to test and find out what is going wrong.

Cheers,

Egge-Jan

Reply
0 Kudos
Highlighted
New Contributor II

Hi Egge-Jan Pollé 's Blog

This is my code.

require([

"esri/Map",

"esri/views/MapView",

"esri/layers/WMSLayer",

"esri/layers/GraphicsLayer",

"esri/widgets/Sketch",

"esri/widgets/LayerList",

"esri/widgets/Expand",

"esri/widgets/ScaleBar",

"esri/widgets/Fullscreen",

"esri/widgets/Search",

"esri/widgets/Home",

"esri/Basemap"

], function(Map,MapView,WMSLayer,GraphicsLayer,Sketch,LayerList,Expand,ScaleBar,Fullscreen,Search,Home,Basemap)

{

var commonUrl = "server-wms-url"

var imageUrl = "server-wms-url-image";

var appConfig = {

mapView: null,

sceneView: null,

activeView: null,

container: “mapdiv”,

// use same container for views

};

var initialViewParams = {

zoom:12, // here I am trying to set zoom level

//scale:20000000,

center:[78.19342753563451,21.591641645634088],

container: appConfig.container

};

baselayer = new WMSLayer({

url:commonUrl,

sublayers: [{

name:"Base Layer"

}],

title:"Base Layer",

});

var basemapcview = new Basemap({

baseLayers:[baselayer]

})

cviewmap = new Map({

basemap: [basemapcview],

layers:[baselayer]

});

appConfig.mapView = createView(initialViewParams,"2d",jsonData,coordinatevalue);

appConfig.mapView.map = cviewmap;

appConfig.activeView = appConfig.mapView;

function createView(params, type,jsonData,coordinatevalue){

var is2D = type === "2d";

if(is2D){

cview = new MapView(params);

} else {

cview = new SceneView(params);

getmaplatlong(cview);

}

var layerList = new LayerList({

container: document.createElement("div"),

view:cview

});

var layerListExpand = new Expand({

expandIconClass: "esri-icon-layers",

view:cview,

content:layerList.domNode

})

cview.ui.add(layerListExpand,"top-right");

var scaleBar = new ScaleBar({

view:cview,

unit:"dual",

});

cview.ui.add(scaleBar,{

position:"bottom-right"

});

cview.ui.move("zoom","top-right");

var fullscreen = new Fullscreen({

view:cview

});

cview.ui.add(fullscreen,{

position:"top-right"

});

var homeBtn = new Home ({

view:cview

})

cview.ui.add(homeBtn,{

position:"top-right"

});

return cview;

}

});

}

thak you

Reply
0 Kudos
Highlighted
New Contributor III

Hi Ritika,

Have you embedded/referred the web map in your JavaScript code?

regards

Ashok

Reply
0 Kudos
Highlighted
New Contributor II

Hi ashok,

I am not using webmap.

This is my js code

require([

"esri/Map",

"esri/views/MapView",

"esri/layers/WMSLayer",

"esri/layers/GraphicsLayer",

"esri/widgets/Sketch",

"esri/widgets/LayerList",

"esri/widgets/Expand",

"esri/widgets/ScaleBar",

"esri/widgets/Fullscreen",

"esri/widgets/Search",

"esri/widgets/Home",

"esri/Basemap"

], function(Map,MapView,WMSLayer,GraphicsLayer,Sketch,LayerList,Expand,ScaleBar,Fullscreen,Search,Home,Basemap)

{

var commonUrl = "server-wms-url"

var imageUrl = "server-wms-url-image";

var appConfig = {

mapView: null,

sceneView: null,

activeView: null,

container: “mapdiv”,

// use same container for views

};

var initialViewParams = {

zoom:12, // here I am trying to set zoom level

//scale:20000000,

center:[78.19342753563451,21.591641645634088],

container: appConfig.container

};

baselayer = new WMSLayer({

url:commonUrl,

sublayers: [{

name:"Base Layer"

}],

title:"Base Layer",

});

var basemapcview = new Basemap({

baseLayers:[baselayer]

})

cviewmap = new Map({

basemap: [basemapcview],

layers:[baselayer]

});

appConfig.mapView = createView(initialViewParams,"2d",jsonData,coordinatevalue);

appConfig.mapView.map = cviewmap;

appConfig.activeView = appConfig.mapView;

function createView(params, type,jsonData,coordinatevalue){

var is2D = type === "2d";

if(is2D){

cview = new MapView(params);

} else {

cview = new SceneView(params);

getmaplatlong(cview);

}

var layerList = new LayerList({

container: document.createElement("div"),

view:cview

});

var layerListExpand = new Expand({

expandIconClass: "esri-icon-layers",

view:cview,

content:layerList.domNode

})

cview.ui.add(layerListExpand,"top-right");

var scaleBar = new ScaleBar({

view:cview,

unit:"dual",

});

cview.ui.add(scaleBar,{

position:"bottom-right"

});

cview.ui.move("zoom","top-right");

var fullscreen = new Fullscreen({

view:cview

});

cview.ui.add(fullscreen,{

position:"top-right"

});

var homeBtn = new Home ({

view:cview

})

cview.ui.add(homeBtn,{

position:"top-right"

});

return cview;

}

});

 

Reply
0 Kudos
Highlighted
New Contributor III

Hi Ritika,

In your code, it is trying WMS Layer has been assigned as Base Map which fails to work in setting up the required zoom. 

In order to set the Zoom Value as defined, the ArcGIS JS requires to have Base Map Setup correctly and which is used for reference in setting up Zoom, Scale, Extents for any layers loaded in your case the WMS Layer.

Instead use the below code to replace variable "cviewmap".

cviewmap = new Map({

basemap: "streets",

layers:[baselayer]


});

The Base Map should be any of the maps from the list of ArcGIS Online BaseMaps or Web Tiles hosted on ArcGIS server.

Map | ArcGIS API for JavaScript 4.12 

Let me know if you need any help to understand further.

Regards

Ashok

Reply
0 Kudos
Highlighted
New Contributor II

Thank you @ashok vanam 

You have cleared some points.

But actually problem is that i am using arcgis js 4.10 offline.So i cant use ArcGIS Online BaseMaps or Web Tiles hosted on ArcGIS server.

I am using a server where maps are deployed as wms service.

Any other you handle this.

Reply
0 Kudos
Highlighted
New Contributor III

Hi Ritika,  If you are using Offline, how are you trying to access ArcGIS JS libraries, have you downloaded Javascript library into your server?

On which GIS software your maps have been hosted? ArcGIS Server or Geoserver or someother?

Regards

Ashok

Highlighted
New Contributor II

Hi Ashok 

I have downloaded arcgis library and added that folder in my application 

Reply
0 Kudos
Highlighted
New Contributor III

The intent of using arcgis js library is to consume the services online. 

A related discussion: Trying to use own basemap | GeoNet, The Esri Community | GIS and Geospatial Professional Community 

in your Case, replace wms  layer with arcgis map server layer. This should work.  Means your maps should be on arcgis server.

regards

ashok

Reply
0 Kudos