How to make the previewHTML same as the text symbol show on map?

LeoDeng · ‎04-25-2023

Hi All,

I'm going to set the preview HTML as same as the text symbol show on the map. I notice that there is a method renderPreviewHTML. However, the result is under expectation. Here is the code and result.

<html>
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no" />
    <title>Test Page</title>

    <style>
      html,
      body,
      #viewDiv {
        padding: 0;
        margin: 0;
        height: 100%;
        width: 100%;
      }
      #symbol-preview {
        position: absolute;
        right: 100px;
        top: 100px;
        width: 150px;
        height: 50px;
        border: 1px solid black;
        background-color: white;
      }
    </style>

    <link rel="stylesheet" href="https://js.arcgis.com/4.26/esri/themes/light/main.css">
    <script src="https://js.arcgis.com/4.26/"></script>
    <script>
        require([
            "esri/Map",
            "esri/views/MapView",
            "esri/Graphic",
            "esri/symbols/TextSymbol",
            "esri/symbols/support/symbolUtils"],
            function(Map, MapView, Graphic, TextSymbol, symbolUtils) {

        const map = new Map({
          basemap: "streets"
        });

        const view = new MapView({
          map: map,
          center: [-117.1947900, 34.0572650], // Longitude, latitude
          zoom: 13, // Zoom level
          container: "viewDiv" // Div element
        });

        const markerSymbol = {
            type: "simple-marker",
            color: "blue",
            size: "8px",
        };

        const graphic = new Graphic({
            attributes: {
              "Sequence": 5
            },
            geometry: {
                type: "point",
                longitude: -117.1947900,
                latitude: 34.0572650
            },
            symbol: {
                type: "simple-marker",
                color: "blue",
                size: "8px",
            }
        });
        view.graphics.add(graphic);


        // preview symbol
        const textSymbol = new TextSymbol({
          color: [255, 165, 0],
          haloColor: [0, 0, 0],
          haloColor: [255, 255, 255],
          haloSize: "2px",
          text: "Esri",
          backgroundColor: [0, 165, 165],
          borderLineSize: "1px",
          borderLineColor: [0, 0, 0],
          font: {
            size: 20,
            family: "Josefin Slab",
            weight: "bold"
          }
        });

        symbolUtils.renderPreviewHTML(textSymbol, {
          node: document.getElementById("symbol-preview"),
          size: 20
        });

        const textGraphic = new Graphic({
            geometry: {
                type: "point",
                longitude: -117.1947900,
                latitude: 34.0572650,
            },
            symbol: textSymbol
        });
        view.graphics.add(textGraphic);

      });
    </script>

  </head>
  <body>
    <div id="viewDiv"></div>
    <div id="symbol-preview"></div>
  </body>
</html>

My question is: Is this a bug on renderPreviewHTML or how to make the text symbol show on map same as in preview?

Thanks,
Leo

AnneFitz · ‎04-26-2023

Hi @LeoDeng - Thanks for providing the code snippet and for reporting this issue! This is a bug in the API - we'll work on a fix for an upcoming release.

View solution in original post

GharVisit · ‎04-25-2023

It would be helpful if you could provide more context and code related to your question so I can better understand the issue you are facing. Without more information, it's hard to provide an accurate answer. However, I'll provide some general advice that may help.

If you're trying to render HTML that matches the text symbol on the map, you'll need to make sure you're using the correct CSS styles and classes. One way to do this is to inspect the text symbol on the map using your browser's developer tools to see what styles and classes are being used. You can then use those styles and classes in your own HTML to ensure that it looks the same.

Here's an example of how you might use the renderPreviewHTML method to create HTML that matches the text symbol on the map:

const textSymbol = new esri.symbol.TextSymbol({
text: "Hello world!",
font: {
size: 14,
family: "Arial",
weight: "bold"
},
color: "#ffffff",
backgroundColor: "#000000"
});

const previewHtml = textSymbol.renderPreviewHTML();

const previewElement = document.createElement("div");
previewElement.innerHTML = previewHtml;

// Add the preview element to the DOM
document.body.appendChild(previewElement);

In this example, we create a TextSymbol with the text "Hello world!" and some font and color settings. We then call the renderPreviewHTML method to generate the HTML that corresponds to the symbol. Finally, we create a new div element, set its innerHTML to the preview HTML, and add it to the document.

Thanks

Airports details

LeoDeng · ‎04-25-2023

Hi GharVisit,
I'm not sure if there is a method called "renderPreviewHTML" in TextSymbol. Is there any document for reference?

Bests,
Leo

AnneFitz · ‎04-26-2023

Hi @LeoDeng - Thanks for providing the code snippet and for reporting this issue! This is a bug in the API - we'll work on a fix for an upcoming release.

AnneFitz · ‎05-15-2023

We've installed a fix for the upcoming 4.27 release (expected to go out in June). You can test out this fix in the development version of the API at https://js.arcgis.com/next

Let us know if you are still running into any issues @LeoDeng !

LeoDeng · ‎05-18-2023

Yes. It solved problem. Thank you!

JoelBennett · ‎04-26-2023