Select to view content in your preferred language

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

3031
6
Jump to solution
04-25-2023 07:13 PM
LeoDeng
Occasional Contributor II

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>

 

 

 

 

LeoDeng_1-1682475048296.png

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

0 Kudos
1 Solution

Accepted Solutions
AnneFitz
Esri Regular Contributor

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

0 Kudos
6 Replies
GharVisit
New Contributor

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

0 Kudos
LeoDeng
Occasional Contributor II

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

LeoDeng_0-1682478039368.png

Bests,
Leo

0 Kudos
AnneFitz
Esri Regular Contributor

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.

0 Kudos
AnneFitz
Esri Regular Contributor

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
Occasional Contributor II

Yes. It solved problem. Thank you!

LeoDeng_0-1684452823208.png

 

0 Kudos
JoelBennett
MVP Regular Contributor

See also here for further reference.