Zoom not working if basemap is disabled arcgis javascript

aggarwalarpit93 · ‎02-15-2023

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:

<script>
        require([
            "esri/config",
            "esri/Map",
            "esri/views/MapView",
            "esri/layers/FeatureLayer",
            "esri/layers/support/LabelClass"
        ], (esriConfig, Map, MapView, FeatureLayer, LabelClass) => {

            esriConfig.apiKey= API_KEY;

            const map = new Map();

            const view = new MapView({
                map: map,
                center: [85.7780685, 25.8560264],
                zoom: 12,
                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);
        });
    </script>

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

Sage_Wall · ‎02-16-2023

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);
});

View solution in original post

Sage_Wall · ‎02-16-2023

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);
});

aggarwalarpit93 · ‎02-16-2023

Thank you so much for the help.

Egge-Jan_Pollé · ‎02-16-2023

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>

aggarwalarpit93 · ‎02-16-2023

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