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
Solved! Go to Solution.
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.
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
Hi GharVisit,
I'm not sure if there is a method called "renderPreviewHTML" in TextSymbol. Is there any document for reference?
Bests,
Leo
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.
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 !
Yes. It solved problem. Thank you!
See also here for further reference.