Using ArcGIS Javascript API, we have a custom widget to allow user to select his role to analyse the data on the Map. I must display the "Role : XXXX" on top right of the Map. This should be visible to the user always. "Role: " is static & "XXXX" is dynamic as and when user changes his role. I tried using TextSymbol to display the content on the Map. TextSymbol requires "Graphic point" to be added to Graphics Layer.

var t = new TextSymbol("Role: ", font, color); var p = new Point([-100,52]); var g = new Graphic(p,t); graphicsLayer.add(g); map.addLayer(graphicsLayer);

By giving the point in graphics, the text moves along with the map as the point becomes fixed.

How do I add text to Map without map point?

  • Welcome to GIS SE! As a new user be sure to take the Tour. For questions that involve code we ask that you show us where you are stuck with your own code by including a code snippet in your question. There is an edit button beneath your question which will enable you to do that and a {} button that enables you to format any highlighted code nicely. – PolyGeo May 25 '17 at 8:35

If you just want to place some text on top of the map div, then you could add a div with absolute positioning. No need to use the API for this.

Example code: https://jsbin.com/mijariy/edit?html,output. Look for the roleInfo div, and the CSS for it.

<!DOCTYPE html>
  <meta charset="utf-8">
  <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no">
  <title>rolediv on top of map</title>
    #viewDiv {
      padding: 0;
      margin: 0;
      height: 100%;
      width: 100%;

    #roleInfo {
      top: 20px;
      left: 100px;
      position: absolute;
      z-index: 99;
      border-radius: 8px;
      border: 2px solid gray;
      color: gray;
      background: white;
      padding: 10px;
      opacity: 0.65;

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

    ], function(Map, MapView) {

      var map = new Map({
        basemap: "streets"

      var view = new MapView({
        container: "viewDiv",
        map: map,
        zoom: 4,
        center: [15, 65]


  <div id="roleInfo">Role: <span id="role">TBD</span></div>
  <div id="viewDiv"></div>
| improve this answer | |
  • Thankyou so much Bjorn Svensson! But we use 3.20 version of ArcGIS. MapView is not available in 3.20 :(. Please guide on how to achieve this. – nandhini May 26 '17 at 5:45
  • Im sorry, I should have mentioned the version earlier. – nandhini May 26 '17 at 9:18
  • @nandhini - the solution would be the same with 3.x, use a "div" with "absolute positioning". – Bjorn Svensson May 26 '17 at 13:36
  • @nandhini - I'm glad you got it working. If the answer works, feel free to "accept" it - see gis.stackexchange.com/help/someone-answers :) – Bjorn Svensson May 26 '17 at 17:04

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.