topic create labels on map in ArcGIS JavaScript Maps SDK Questions

create labels on map

rsharma — Thu, 02 Apr 2020 10:17:18 GMT

How to create labels on map to show some value

Re: create labels on map

Egge-Jan_Pollé — Thu, 02 Apr 2020 10:39:23 GMT

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

Re: create labels on map

rsharma — Thu, 02 Apr 2020 10:44:25 GMT

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??

Re: create labels on map

Egge-Jan_Pollé — Thu, 02 Apr 2020 11:35:51 GMT

Hi rajni sharma,

Did you have a look at these samples?

BR,

Egge-Jan

Re: create labels on map

rsharma — Thu, 02 Apr 2020 11:49:05 GMT

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

Re: create labels on map

Egge-Jan_Pollé — Sat, 11 Dec 2021 16:06:45 GMT

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>‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍