Search code examples
javascriptreactjsarcgisarcgis-js-api

Is it possible to add tooltip at sketchViewModel in 2D?

I am using ArcGIS Maps SDK for JavaScript within a React project. So, when I am drawing some shapes I want to show tooltip with some shape properties, but i can't find solution. Arcgis offer only their popup which is very bulky to display only a few text fields.

I'm looking for an implementation of this tooltip that they use in 3D maps. I need an implementation for 2d.

If you have any ideas how it can be implemented, I will be very grateful !

Tooltip example

Solution

  • That is the Sketch tooltip, you can activate it by adding tooltipOptions when creating the sketch.

    Look at this example, I just take ArcGIS API Sample - Sketch Geometries and activate the tooltip.

    <html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta
      name="viewport"
      content="initial-scale=1,maximum-scale=1,user-scalable=no"
    />
    <title>Sketch widget | Sample | ArcGIS Maps SDK for JavaScript 4.26</title>

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

    <style>
      html,
      body,
      #viewDiv {
        padding: 0;
        margin: 0;
        height: 100%;
        width: 100%;
      }
    </style>
    <script>
      require([
        "esri/widgets/Sketch",
        "esri/Map",
        "esri/layers/GraphicsLayer",
        "esri/views/MapView"
      ], (Sketch, Map, GraphicsLayer, MapView) => {
        const graphicsLayer = new GraphicsLayer();

        const map = new Map({
          basemap: "topo-vector",
          layers: [graphicsLayer]
        });

        const view = new MapView({
          container: "viewDiv",
          map: map,
          zoom: 5,
          center: [90, 45]
        });

        view.when(() => {
          const sketch = new Sketch({
            layer: graphicsLayer,
            view: view,
            // graphic will be selected as soon as it is created
            creationMode: "update",
            tooltipOptions: { enabled: true }
          });

          view.ui.add(sketch, "top-right");
        });
      });
    </script>
  </head>

  <body>
    <div id="viewDiv"></div>
  </body>
</html>

    Let me know if this is what you looking for.