topic Re: Zoom not working if basemap is disabled arcgis javascript in ArcGIS JavaScript Maps SDK Questions

Zoom not working if basemap is disabled arcgis javascript

aggarwalarpit93 — Thu, 16 Feb 2023 05:18:46 GMT

Hello, I have a map and using API key to display map. In API key I have disabled the basemap and using only feature layers without showing any map in the background. But if I do this map default zoom setting not working. Here is what I am trying:

In this, whatever value I set for the zoom it is not reflecting.

Re: Zoom not working if basemap is disabled arcgis javascript

Sage_Wall — Thu, 16 Feb 2023 13:44:00 GMT

Hi @aggarwalarpit93, without a basemap I think you likely need to use the scale property instead of zoom.

require([ "esri/config", "esri/Map", "esri/views/MapView", "esri/layers/FeatureLayer", "esri/layers/support/LabelClass" ], (esriConfig, Map, MapView, FeatureLayer, LabelClass) => { esriConfig.apiKey = ""; const map = new Map(); const view = new MapView({ map: map, center: [85.7780685, 25.8560264], scale: 3000000, container: "viewDiv", constraints: { snapToZoom: false } }); // Add district layer to the mapview const districtLayer = new FeatureLayer({ url: "https://gis.fmiscwrdbihar.gov.in/arcgis/rest/services/GisAtlas/GIS_Atlas_2023/MapServer/22", outFields: ["*"] }); map.add(districtLayer, 0); });

Re: Zoom not working if basemap is disabled arcgis javascript

Egge-Jan_Pollé — Thu, 16 Feb 2023 23:19:13 GMT

Hi @aggarwalarpit93,

Please see screen dump attached: your data in an application without a basemap.

I slightly modified your code (see below) and, next to the districts I also added the settlements, which will become visible when you zoom in.

Yeah, zooming in and zooming out is working fine.

And yeah, @Sage_Wall is right: you should use the scale instead of the zoom property.

HTH,

Egge-Jan

<html> <head> <meta charset="utf-8" /> <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no" /> <title>Test: no background map</title> <link rel="stylesheet" href="https://js.arcgis.com/4.25/esri/themes/light/main.css"> <script src="https://js.arcgis.com/4.25/"></script> <style> html, body { padding: 0; margin: 0; height: 100%; width: 100%; font-family: sans-serif; } #header { width: 100%; height: 70px; background-color: #154273; color:#FFFFFF; margin: 0; } #headertext { float: left; font-size: 35px; color: white; line-height: 70px; padding-left: 15px; } #viewDiv { position: absolute; top: 70px; bottom: 0; right: 0; left: 0; padding: 0; margin: 0; } </style> <script> require([ "esri/Map", "esri/views/MapView", "esri/layers/FeatureLayer", "esri/widgets/LayerList", "esri/widgets/Expand", ], (Map, MapView, FeatureLayer, LayerList, Expand) => { const map = new Map(); const settlementLayer = new FeatureLayer({ url: "https://gis.fmiscwrdbihar.gov.in/arcgis/rest/services/GisAtlas/GIS_Atlas_2023/MapServer/4", minScale: 100000 }); const districtLayer = new FeatureLayer({ url: "https://gis.fmiscwrdbihar.gov.in/arcgis/rest/services/GisAtlas/GIS_Atlas_2023/MapServer/22", }); map.addMany([districtLayer, settlementLayer]); const view = new MapView({ map: map, center: [85.7780685, 25.8560264], scale: 1800000, container: "viewDiv", }); const layerList = new LayerList({ view: view, listItemCreatedFunction: function(event){ const item = event.item; item.actionsSections = [ [ { title: item.layer.title, className: "esri-icon-description", id: "information" } ] ]; } }); layerList.on("trigger-action", function(event) { if (event.action.id === "information") { // If the information action is triggered, then open the item details page of the service layer. window.open(event.item.layer.url); } }); const layerListExpand = new Expand({ expandIconClass: "esri-icon-layers", // expandTooltip: layerList.label, expandTooltip: "LayerList", view: view, expanded: true, content: layerList, group: "expandable-widgets" }); view.ui.add([layerListExpand], "top-right") }); </script> </head> <body> <div id="header"> <div id="headertext" class="stretch">Test: no background map</div> </div> <div id="viewDiv"></div> </body> </html>

Re: Zoom not working if basemap is disabled arcgis javascript

aggarwalarpit93 — Fri, 17 Feb 2023 05:26:04 GMT

Thank you so much for the help.

Re: Zoom not working if basemap is disabled arcgis javascript

aggarwalarpit93 — Fri, 17 Feb 2023 05:26:36 GMT

Thank you so much. Scale property is what I was looking for.