Community

Display current Map Scale (1:xyzxyzx)

3754
3
10-18-2019 05:24 AM
BulbulMajumder
by
Emerging Contributor
‎10-18-2019 05:24 AM

How can I display current map scale (1:xyzxyzx)? Please help.

Tags (1)
0 Kudos
3 Replies
RobertScheitlin__GISP
by MVP Emeritus
MVP Emeritus
‎10-18-2019 07:19 AM

Here is a sample for that:

<!DOCTYPE html>
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no"/>
    <title>Simple Map</title>
    <link rel="stylesheet" href="https://js.arcgis.com/3.30/esri/css/esri.css">
    <style>
      html, body, #map {
        height: 100%;
        margin: 0;
        padding: 0;
      }
      #scale {
        position: absolute;
        bottom: 5px;
        left: 5px;
        background: rgba(255,255,255,0.7);
        font-size: 13px;
        line-height: 15px;
      }
    </style>
    <script src="https://js.arcgis.com/3.30/"></script>
    <script>
      var map;

      require(["esri/map", "dojo/domReady!"], function(Map) {
        map = new Map("map", {
          basemap: "topo",  //For full list of pre-defined basemaps, navigate to http://arcg.is/1JVo6Wd
          center: [-122.45, 37.75], // longitude, latitude
          zoom: 13
        });
        
        map.on('update-end', function(evt){
          document.getElementById('scale').innerHTML = '1:' + map.getScale().toFixed(2);
        });
      });
    </script>
  </head>

  <body>
    
    <div id="map"></div>
    <div id="scale"></div>
  </body>
</html>‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍
BulbulMajumder
by
Emerging Contributor
‎10-18-2019 08:09 PM

I'm working on API 4.x

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

Is there any compatible way to do this work in API 4.x

Thank you,

0 Kudos
RobertScheitlin__GISP
by MVP Emeritus
MVP Emeritus
‎10-19-2019 04:42 AM

Ah, You forgot to mention that earlier.

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <meta
      name="viewport"
      content="initial-scale=1,maximum-scale=1,user-scalable=no"
    />
    <title>Load a basic WebMap - 4.13</title>

    <style>
      html,
      body,
      #viewDiv {
        padding: 0;
        margin: 0;
        height: 100%;
        width: 100%;
      }
      #vScale {
        padding: 10px;
      }
    </style>

    <link
      rel="stylesheet"
      href="https://js.arcgis.com/4.13/esri/themes/light/main.css"
    />

    <script src="https://js.arcgis.com/4.13/"></script>

    <script>
      require(["esri/views/MapView", "esri/WebMap"], function(MapView, WebMap) {
        /************************************************************
         * Creates a new WebMap instance. A WebMap must reference
         * a PortalItem ID that represents a WebMap saved to
         * arcgis.com or an on-premise portal.
         *
         * To load a WebMap from an on-premise portal, set the portal
         * url with esriConfig.portalUrl.
         ************************************************************/
        var webmap = new WebMap({
          portalItem: {
            // autocasts as new PortalItem()
            id: "f2e9b762544945f390ca4ac3671cfa72"
          }
        });

        /************************************************************
         * Set the WebMap instance to the map property in a MapView.
         ************************************************************/
        var view = new MapView({
          map: webmap,
          container: "viewDiv"
        });
        view.watch('scale', function(evt){
          document.getElementById('vScale').innerHTML = '1:' + evt.toFixed(2);
        });
        view.ui.add(vScale, 'bottom-left')
      });
    </script>
  </head>

  <body>
    <div id="viewDiv"></div>
    <div id="vScale" class="esri-widget"></div>
  </body>
</html>
‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍
0 Kudos