Text is not showing on map but will show after Print export arcgis javascript api 4x

Question

sketchViewModel.on("create", (event: any) => {        if (event.state === "complete") {          if (document.querySelector("button.active")?.id === "textButton") {            if (fontStyle === "normal") {              textSymbol.color = fontColor;              textSymbol.font.size = fontSize;
              textSymbol.haloColor = "";              textSymbol.haloSize = "0px";            } else {              textSymbol.color = fontColor;              textSymbol.font.size = fontSize;
              textSymbol.haloColor = fontColor;              textSymbol.haloSize = "0.5px";            }
            graphicSymbol = textSymbol;            graphicSymbol.text = prompt(              "Please enter some text",              "Default Text"            );          } else {            graphicSymbol = sketchViewModel.polygonSymbol;          }                   graphic = new Graphic({            geometry: event.graphic.geometry,            symbol: graphicSymbol,          });          
          graphicsToolLayer.add(graphic);        }      });

Anuj_5398 · Answer

@Noah-Sager, have changed the code and now using the sketchModuleView and MapNotesLayer to draw the graphics and add the text on map. draw the graphics working fine but when add the text on the map it is not showing but when we try to print export the text would be visible. also getting the error: [esri.views.2d.engine.webgl.TextureManager] Sharing the Code: import { useEffect, useState } from "react"; import Expand from "@arcgis/core/widgets/Expand"; import SketchViewModel from "@arcgis/core/widgets/Sketch/SketchViewModel"; import Graphic from "@arcgis/core/Graphic"; import GraphicsLayer from "@arcgis/core/layers/GraphicsLayer"; import Legend from "@arcgis/core/widgets/Legend"; import MapNotesLayer from "@arcgis/core/layers/MapNotesLayer"; import "./GraphicTool.css"; let panBtn: any; let rectangleBtn: any; let textButn: any; let erageBtn: any; let textSymbol: any; let graphicSymbol: any; let styleSelector: any; let fontColor = "red"; let fontColorOption: any; let fontStyle = "normal"; let fontStyleOption: any; let graphic_Layer_Symboloygi: any = {}; let change_Style = "none"; let fontSizeOption: any; let fontSize = "14"; let mapNoteLayer: any; let legend: any; let graphicCount: any = 0; let polygonRactangelLayer: any; let textNotLayer: any; let ractangelSKetchViewModel: any; let textSketchViewModel: any; let sketchVM: any; const GraphicTools = (props: any) => { let [colorOptions, setColorOptions] = useState("#d72c8e"); let [styleOption, setStyleOption] = useState("none"); useEffect(() => { props.impMap.when(() => { styleSelector = document.getElementById( "styleSelector" ) as HTMLButtonElement; panBtn = document.getElementById("graphicTool") as HTMLButtonElement; rectangleBtn = document.getElementById( "rectangleBtn" ) as HTMLButtonElement; erageBtn = document.getElementById("ClearBtn") as HTMLButtonElement; textButn = document.getElementById("textButton") as HTMLButtonElement; fontColorOption = document.getElementById( "fontcolor" ) as HTMLButtonElement; fontStyleOption = document.getElementById( "fontstly" ) as HTMLButtonElement; fontSizeOption = document.getElementById("fontsize") as HTMLButtonElement; styleSelector.addEventListener("change", (event: any) => { setStyleOption(event.target.value); change_Style = event.target.value; styleOption = change_Style; }); fontColorOption.addEventListener("change", (event: any) => { fontColor = event.target.value; }); fontSizeOption.addEventListener("change", (event: any) => { fontSize = event.target.value; }); fontStyleOption.addEventListener("change", (event: any) => { fontStyle = event.target.value; }); const hitTEstGraphicLayer = new GraphicsLayer(); props.impMap.map.add(hitTEstGraphicLayer); const stylerExpand = new Expand({ view: props.impMap, content: panBtn, expanded: false, expandIconClass: "esri-icon-sketch-rectangle", expandTooltip: "Graphic Tool", }); props.impMap.ui.add(stylerExpand, "top-right"); stylerExpand.view = props.impMap; legend = new Legend({ view: props.impMap, visible: false, }); props.impMap.ui.add(legend, "bottom-left"); graphic_Layer_Symboloygi = { type: "simple-fill", style: styleOption, color: colorOptions, outline: { width: 3, style: "solid", color: colorOptions, }, }; const hitTestSymbol = { type: "simple-fill", style: "none", color: "#d72c8e", outline: { width: 3, style: "solid", color: "#d72c8e", }, }; textSymbol = { type: "text", color: fontColor, text: "", xoffset: 3, yoffset: 3, font: { size: fontSize + "pt", }, }; mapNoteLayer = new MapNotesLayer(); mapNoteLayer.id = "MapNotes_layer"; props.impMap.map.add(mapNoteLayer); polygonRactangelLayer = mapNoteLayer.polygonLayer; textNotLayer = mapNoteLayer.textLayer; ractangelSKetchViewModel = createSketchViewModels(polygonRactangelLayer); textSketchViewModel = createSketchViewModels(textNotLayer); function createSketchViewModels(layer: any) { sketchVM = new SketchViewModel({ view: props.impMap, layer, polygonSymbol: graphic_Layer_Symboloygi, //updateOnGraphicClick: true }); sketchVM.on("create", addGraphic); return sketchVM; } function addGraphic(event: any) { if (event.state === "complete") { switch (event.tool) { case "point": graphicCount++; let elemental = document.getElementsByClassName("active"); if (elemental[0].id == "textButton") { graphicCount++; textNotLayer.remove(event.graphic); if (fontStyle === "normal") { textSymbol.color = fontColor; textSymbol.font.size = fontSize; textSymbol.haloColor = ""; textSymbol.haloSize = "0px"; } else { textSymbol.color = fontColor; textSymbol.font.size = fontSize; textSymbol.haloColor = fontColor; textSymbol.haloSize = "0.5px"; } graphicSymbol = textSymbol; graphicSymbol.text = prompt( "Please enter some text", "Default Text" ); const newTextGraphic = new Graphic({ geometry: event.graphic.geometry, symbol: graphicSymbol, attributes: { title: "text map note #" + graphicCount, }, }); textNotLayer.add(newTextGraphic); } else { console.log("point logic error occurred"); break; } setActiveButton(textButn); break; case "rectangle": graphicCount++; polygonRactangelLayer.remove(event.graphic); graphicSymbol = sketchVM.polygonSymbol; const newPolygonGraphic = new Graphic({ geometry: event.graphic.geometry, symbol: graphicSymbol, attributes: { title: "polygon map note #" + graphicCount, }, }); polygonRactangelLayer.add(newPolygonGraphic); setActiveButton(rectangleBtn); break; default: console.log("geometry type not found: ", graphicCount); } } } rectangleBtn.onclick = function () { ractangelSKetchViewModel.create("rectangle"); if (change_Style === "solid") { setColorOptions("yellow"); graphic_Layer_Symboloygi.style = styleOption; graphic_Layer_Symboloygi.color = "yellow"; graphic_Layer_Symboloygi.outline.color = "yellow"; sketchVM.polygonSymbol = graphic_Layer_Symboloygi; } if (change_Style === "forward-diagonal") { setColorOptions("red"); graphic_Layer_Symboloygi.style = styleOption; graphic_Layer_Symboloygi.color = "red"; graphic_Layer_Symboloygi.outline.color = "red"; sketchVM.polygonSymbol = graphic_Layer_Symboloygi; } if (change_Style === "none") { setColorOptions("#d72c8e"); graphic_Layer_Symboloygi.style = styleOption; graphic_Layer_Symboloygi.color = "#d72c8e"; graphic_Layer_Symboloygi.outline.color = "#d72c8e"; sketchVM.polygonSymbol = graphic_Layer_Symboloygi; } setActiveButton(rectangleBtn); }; textButn.onclick = function () { textSketchViewModel.create("point"); setActiveButton(textButn); }; erageBtn.onclick = function () { polygonRactangelLayer.removeAll(); textNotLayer.removeAll(); setActiveButton(this); graphicCount = 0; }; props.impMap.on("click", function (event: any) { hitTEstGraphicLayer.removeAll(); props.impMap.hitTest(event.screenPoint).then(function (response: any) { var result = response.results[0].graphic; if (result) { props.impMap.goTo(response.results[0].graphic.geometry).then(() => { var graphiclayer = response.results[0].graphic; props.impMap.zoom = 17; graphiclayer.symbol = hitTestSymbol; hitTEstGraphicLayer.add(graphiclayer); props.impMap.graphics.add(hitTEstGraphicLayer); }); } }); }); function setActiveButton(selectedButton: any) { // focus the view to activate keyboard shortcuts for sketching props.impMap.focus(); var elements = document.getElementsByClassName("active"); for (var i = 0; i < elements.length; i++) { elements[i].classList.remove("active"); } if (selectedButton) { selectedButton.classList.add("active"); } } }); }, []); return (

Font Color

Font Size

Font Style

Select Style

); }; export default GraphicTools;

Noah Sager · Answer

Hi @Anuj_5398, can you share a simplified app that reproduces the issue so we can look into it?