Community

create labels on map

492
5
Jump to solution
04-02-2020 03:17 AM
rsharma
by
Occasional Contributor III
‎04-02-2020 03:17 AM

How to create labels on map to show some value

0 Kudos
1 Solution

Accepted Solutions
Egge-Jan_Pollé
by MVP Regular Contributor
MVP Regular Contributor
‎04-02-2020 05:12 AM

Hi rajni sharma,

Do you mean something like this? Your own little div on the map...?

See html below

HTH,

Egge-Jan

<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
  <title>ArcGIS JavaScript Tutorials: Create a Starter App</title>
  <style>
    html, body, #viewDiv {
      padding: 0;
      margin: 0;
      height: 100%;
      width: 100%;
    }
  </style>
  
    <link rel="stylesheet" href="https://js.arcgis.com/4.14/esri/themes/light/main.css">
  <script src="https://js.arcgis.com/4.14/"></script>
  
  <script>  
    require([
      "esri/Map",
      "esri/views/MapView",
    ], function(Map, MapView) {

      var map = new Map({
        basemap: "topo-vector"
      });

      var view = new MapView({
        container: "viewDiv",
        map: map,
        center: [-118.80500, 34.02700],
        zoom: 13
      });

      var myWidget = document.createElement("div");
      myWidget.id = "myWidget";
      myWidget.className = "esri-widget esri-component";
      myWidget.style.padding = "7px 15px 5px";

      view.ui.add(myWidget, "bottom-right");
      
      var myValue = "Your calculation here"
      
      myWidget.innerHTML = myValue      

    });
  </script>
</head>
<body>
  <div id="viewDiv"></div>
</body>
</html>‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

View solution in original post

0 Kudos
5 Replies
Egge-Jan_Pollé
by MVP Regular Contributor
MVP Regular Contributor
‎04-02-2020 03:39 AM

Hi rajni sharma,

Please see the example below. Here you can turn labels on and off in the layer list.

HTH,

Egge-Jan

Aan de slag met ArcGIS JavaScript - Labels aan- of uitzetten 

0 Kudos
rsharma
by
Occasional Contributor III
‎04-02-2020 03:44 AM

I just need simple label to show some dynamically calculated value, this link contains layerlist, i just need a simple label.

Do you know how to do it??

0 Kudos
rsharma
by
Occasional Contributor III
‎04-02-2020 04:49 AM

I think u have been misunderstanding me, i m talking about html label or some small div like button size on side of map

0 Kudos
Egge-Jan_Pollé
by MVP Regular Contributor
MVP Regular Contributor
‎04-02-2020 05:12 AM

Hi rajni sharma,

Do you mean something like this? Your own little div on the map...?

See html below

HTH,

Egge-Jan

<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
  <title>ArcGIS JavaScript Tutorials: Create a Starter App</title>
  <style>
    html, body, #viewDiv {
      padding: 0;
      margin: 0;
      height: 100%;
      width: 100%;
    }
  </style>
  
    <link rel="stylesheet" href="https://js.arcgis.com/4.14/esri/themes/light/main.css">
  <script src="https://js.arcgis.com/4.14/"></script>
  
  <script>  
    require([
      "esri/Map",
      "esri/views/MapView",
    ], function(Map, MapView) {

      var map = new Map({
        basemap: "topo-vector"
      });

      var view = new MapView({
        container: "viewDiv",
        map: map,
        center: [-118.80500, 34.02700],
        zoom: 13
      });

      var myWidget = document.createElement("div");
      myWidget.id = "myWidget";
      myWidget.className = "esri-widget esri-component";
      myWidget.style.padding = "7px 15px 5px";

      view.ui.add(myWidget, "bottom-right");
      
      var myValue = "Your calculation here"
      
      myWidget.innerHTML = myValue      

    });
  </script>
</head>
<body>
  <div id="viewDiv"></div>
</body>
</html>‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍
0 Kudos