Community

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

419
2
02-06-2023 04:09 AM
Anuj_5398
by
New Contributor
‎02-06-2023 04:09 AM
 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);
        }
      });
0 Kudos
2 Replies
Noah-Sager
by Esri Regular Contributor
Esri Regular Contributor
‎02-06-2023 09:07 AM

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

0 Kudos
Anuj_5398
by
New Contributor
‎02-07-2023 09:19 PM

@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;
0 Kudos