How to create labels on map to show some value
Solved! Go to Solution.
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>
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
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??
Hi rajni sharma,
Did you have a look at these samples?
BR,
Egge-Jan
I think u have been misunderstanding me, i m talking about html label or some small div like button size on side of map
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>