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

Anuj_5398 — Mon, 06 Feb 2023 12:09:01 GMT

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);

}

});

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

Noah-Sager — Mon, 06 Feb 2023 17:07:27 GMT

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

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

Anuj_5398 — Wed, 08 Feb 2023 05:19:14 GMT

@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 ( <div id="graphicTool" className="esri-component esri-widget"> <table> <tbody> <tr> <td> <button style={{ color: "white", backgroundColor: colorOptions }} id="rectangleBtn" className="esri-widget--button esri-interactive esri-icon-checkbox-unchecked" aria-label="Draw Rectangle" title="Draw Rectangle" ></button> </td> <td> <button // style={{ color: 'white', backgroundColor: fontColor }} className="esri-widget--button esri-interactive esri-icon-comment" id="textButton" aria-label="Add Text" title="Add Text" ></button> </td> <td> <button style={{ color: colorOptions }} id="ClearBtn" className="esri-widget--button esri-interactive esri-icon-erase" aria-label="Clear Graphics" title="Clear Graphics" ></button> </td> </tr> </tbody> </table> <div id="textStyle" className="txtstyle"> <hr /> <table> <tbody> <tr> <td> <span className="stylename"> <b> <center>Font Color</center> </b> </span> <select className="fontcolr" id="fontcolor"> <option value="red">RED</option> <option value="green">GREEN</option> <option value="blue">BLUE</option> <option value="white">WHITE</option> <option value="black">BLACK</option> <option value="yellow">YELLOW</option> </select> </td> <td> <span className="stylename"> <b> <center>Font Size</center> </b> </span> <select className="fontSize" id="fontsize" style={{ width: 67 }} > <option value="14">14</option> <option value="9">9</option> <option value="10">10</option> <option value="11">11</option> <option value="12">12</option> <option value="13">13</option> <option value="15">15</option> <option value="16">16</option> <option value="17">17</option> <option value="18">18</option> <option value="19">19</option> <option value="20">20</option> </select> </td> <td> <span className="stylename"> <b> <center>Font Style</center> </b> </span> <select className="fontStyle" id="fontstly"> <option value="normal">Normal</option> <option value="bold">Bold</option> </select> </td> </tr> </tbody> </table> </div> <hr /> <span className="stylename"> <b> <center>Select Style</center> </b> </span> <select className="selectSketch" id="styleSelector"> <option value="none">Edged</option> <option value="forward-diagonal">Hatched</option> <option value="solid">Fill</option> </select> </div> ); }; export default GraphicTools;

topic Text is not showing on map but will show after Print export arcgis javascript api 4x in ArcGIS JavaScript Maps SDK Questions

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

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

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