topic Re: How to make the previewHTML same as the text symbol show on map? in ArcGIS JavaScript Maps SDK Questions

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

LeoDeng — Wed, 26 Apr 2023 02:15:05 GMT

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

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

GharVisit — Wed, 26 Apr 2023 02:39:44 GMT

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

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

LeoDeng — Wed, 26 Apr 2023 03:02:07 GMT

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

Bests,
Leo

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

AnneFitz — Wed, 26 Apr 2023 15:46:31 GMT

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.

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

JoelBennett — Wed, 26 Apr 2023 17:11:30 GMT

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

AnneFitz — Mon, 15 May 2023 22:38:26 GMT

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 !

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

LeoDeng — Thu, 18 May 2023 23:34:00 GMT

Yes. It solved problem. Thank you!