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.
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
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 = {
//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
Hi Ritika,
Have you embedded/referred the web map in your JavaScript code?
regards
Ashok
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;
}
});
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".
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
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.
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
Hi Ashok
I have downloaded arcgis library and added that folder in my application
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