topic Re: Only Add Text to Map After Click Submit Button in ArcGIS JavaScript Maps SDK Questions

Only Add Text to Map After Click Submit Button

LisCollins — Sun, 12 Dec 2021 05:17:21 GMT

Hi,

I have a web map where users want to be able to add their own text to the map. But for some reason the code is ignoring my if statement that says only add text when button is clicked.

What it's currently doing:

-When user clicks on map, the default text entered in the Text Box displays on the map.

-When user presses the submit text button, clicks on the map, the text entered in the Text Box displays on the map.

-Text is added to the map even after the submit button was pressed once when user clicks on map.

-It conflicts with the other tools in the map like the measure tool.

What I want it to do:

-I only want the text in the text box to show after the submit button is pressed once not conflict with other tools.

[Ex., user presses the submit button, clicks on map, text is added to the map. User clicks on map again, no text is added to the map. If user wants text to be added to the map again, the user will have to click the submit button again.]

Background Info:

Level: newbie JS developer.

Using ESRI JavaScript API - ESRI's Public information web map template: Esri/public-information-map-template-js · GitHub

This code was added to the main.js file in the _init: function ().

The code is posted below. Suggestions appreciated.

Thanks.

if (this.config.enableAddText) {
        
     if (query("div#TextButton .dijitButton .dijitButtonNode").on('click', lang.hitch (this, function()
     
     {console.log("if query text button accessed")
     
     
     })))
     {
     var map = this.map;
     console.log("text button was clicked");

     query("div#mapDiv").on('click', lang.hitch (this, function (evt){

     var map = this.map;
    
    map.graphics.add(
            new Graphic(
            new Point(evt.mapPoint.x, evt.mapPoint.y, new esri.SpatialReference({ wkid: 102100 })),
            new TextSymbol(dojo.byId("tsText").value).setColor(
                   new Color([0,0,0])).setAlign(esri.symbol.Font.ALIGN_START).setAngle(0).setOffset(0,0).setFont( 
                   new Font("12pt").setWeight(esri.symbol.Font.WEIGHT_BOLD))         
            )
        );
        console.log(map);
        console.log(evt.mapPoint.x);
        console.log(evt.mapPoint.y);
        console.log(dojo.byId("tsText").value);
        console.log("added text graphic"); 
        
           })); 
        
     }
     

        
        };

Re: Only Add Text to Map After Click Submit Button

TimWitt2 — Sun, 12 Dec 2021 05:17:24 GMT

This might work?

if (this.config.enableAddText) {  
          
     if (query("div#TextButton .dijitButton .dijitButtonNode").on('click', lang.hitch (this, function()  
       
     {console.log("if query text button accessed")  
       
       
     })))  
     {  
     var map = this.map;  
     console.log("text button was clicked");  
  
     query("div#mapDiv").on('click', lang.hitch (this, textClick))

  var textMe = function textClick(evt){
     var map = this.map;  
      
    map.graphics.add(  
            new Graphic(  
            new Point(evt.mapPoint.x, evt.mapPoint.y, new esri.SpatialReference({ wkid: 102100 })),  
            new TextSymbol(dojo.byId("tsText").value).setColor(  
                   new Color([0,0,0])).setAlign(esri.symbol.Font.ALIGN_START).setAngle(0).setOffset(0,0).setFont(   
                   new Font("12pt").setWeight(esri.symbol.Font.WEIGHT_BOLD))           
            )  
        );  
        console.log(map);  
        console.log(evt.mapPoint.x);  
        console.log(evt.mapPoint.y);  
        console.log(dojo.byId("tsText").value);  
        console.log("added text graphic");
  textMe.remove();
          
           };   
          
     }  
       
  
          
        };

Re: Only Add Text to Map After Click Submit Button

TimWitt2 — Wed, 25 Feb 2015 20:19:57 GMT

Sounds like you want to do something similar like what I did here:

http://jsfiddle.net/timw1984/4p7d241v/17/embedded/result/

Re: Only Add Text to Map After Click Submit Button

LisCollins — Sun, 12 Dec 2021 05:17:26 GMT

Hi Tim Witt‌,

I'm getting a textClick is not defined error.

I changed this:

query("div#mapDiv").on('click', lang.hitch (this, textClick))

to this:

query("div#mapDiv").on('click', lang.hitch (this, textMe))

The map is showing again, but the text is not adding now. The "if query text button accessed message" shows in the console when I press the submit button.

Re: Only Add Text to Map After Click Submit Button

LisCollins — Wed, 25 Feb 2015 20:45:15 GMT

This map is a great example of what I want, with the drawing function too! Which .js file holds your code for the add text and drawing functions?

Re: Only Add Text to Map After Click Submit Button

TimWitt2 — Sun, 12 Dec 2021 05:17:29 GMT

Try this:

if (this.config.enableAddText) {  
          
     if (query("div#TextButton .dijitButton .dijitButtonNode").on('click', lang.hitch (this, function()  
       
     {console.log("if query text button accessed")  
       
       
     })))  
     {  
     var map = this.map;  
     console.log("text button was clicked");  
  
    var textAdd = query("div#mapDiv").on('click', lang.hitch (this, function (evt){  
  
     var map = this.map;  
      
    map.graphics.add(  
            new Graphic(  
            new Point(evt.mapPoint.x, evt.mapPoint.y, new esri.SpatialReference({ wkid: 102100 })),  
            new TextSymbol(dojo.byId("tsText").value).setColor(  
                   new Color([0,0,0])).setAlign(esri.symbol.Font.ALIGN_START).setAngle(0).setOffset(0,0).setFont(   
                   new Font("12pt").setWeight(esri.symbol.Font.WEIGHT_BOLD))           
            )  
        );  
        console.log(map);  
        console.log(evt.mapPoint.x);  
        console.log(evt.mapPoint.y);  
        console.log(dojo.byId("tsText").value);  
        console.log("added text graphic");  
  textAdd.remove();
          
           }));   
          
     }  
       
  
          
        };

Re: Only Add Text to Map After Click Submit Button

TimWitt2 — Wed, 25 Feb 2015 20:47:01 GMT

Check out my post here: Javascript API - Advanced Draw widget

Re: Only Add Text to Map After Click Submit Button

LisCollins — Wed, 25 Feb 2015 21:29:31 GMT

Ok, this is what I used to get it to work:

But now, I'm having trouble with getting it not to interfere with the pop ups.

 if (this.config.enableAddText) {    
     
    //var textAdd = query("div#mapDiv").on('click', lang.hitch (this, function (evt){  
    var textSub = query("div#TextButton .dijitButton .dijitButtonNode").on('click', lang.hitch (this, function (){    
      var map = this.map; 
    console.log("in text Submit");
    
    var textAdd = query("div#mapDiv").on('click', lang.hitch (this, function (evt){    
    
    console.log("in text Add");
    
     var map = this.map;    
        map.setInfoWindowOnClick(false);
    map.graphics.add(    
            new Graphic(    
            new Point(evt.mapPoint.x, evt.mapPoint.y, new esri.SpatialReference({ wkid: 102100 })),    
            new TextSymbol(dojo.byId("tsText").value).setColor(    
                   new Color([0,0,0])).setAlign(esri.symbol.Font.ALIGN_START).setAngle(0).setOffset(0,0).setFont(  
                   new Font("12pt").setWeight(esri.symbol.Font.WEIGHT_BOLD))         
            )    
        );    
        console.log(map);    
        console.log(evt.mapPoint.x);    
        console.log(evt.mapPoint.y);    
        console.log(dojo.byId("tsText").value);    
        console.log("added text graphic");    
  textAdd.remove();  
          map.setInfoWindowOnClick(true);
           }  ) ) // text add query
 
        }));  
}

Re: Only Add Text to Map After Click Submit Button

LisCollins — Sun, 12 Dec 2021 05:17:32 GMT

This is my code for getting the add text button to work with pop ups turned off:

    if (this.config.enableAddText) {    
        var textSub = query("div#TextButton .dijitButton .dijitButtonNode").on('click', lang.hitch (this, function (){    
          var map = this.map; 
              var textAdd = query("div#mapDiv").on('click', lang.hitch (this, function (evt){    
         var map = this.map;    
                             map.setInfoWindowOnClick(false); //this turns off the popups when click
        map.graphics.add(    
                new Graphic(    
                new Point(evt.mapPoint.x, evt.mapPoint.y, new esri.SpatialReference({ wkid: 102100 })),    
                new TextSymbol(dojo.byId("tsText").value).setColor(    
                       new Color([0,0,0])).setAlign(esri.symbol.Font.ALIGN_START).setAngle(0).setOffset(0,0).setFont(     
                       new Font("12pt").setWeight(esri.symbol.Font.WEIGHT_BOLD))             
                )    
            );    
      textAdd.remove();  
              var popAdd = query("div#mapDiv").on('click', lang.hitch (this, function (evt){  
      map.setInfoWindowOnClick(true);
      }  ) );        
                  }  ) ); 
               })); 
               var map = this.map; 
 map.setInfoWindowOnClick(true);
        }

	if (this.config.enableAddText) {

	//var textAdd = query("div#mapDiv").on('click', lang.hitch (this, function (evt){
	var textSub = query("div#TextButton .dijitButton .dijitButtonNode").on('click', lang.hitch (this, function (){
	var map = this.map;
	console.log("in text Submit");

		var textAdd = query("div#mapDiv").on('click', lang.hitch (this, function (evt){

		console.log("in text Add");

	var map = this.map;
	map.setInfoWindowOnClick(false);
	map.graphics.add(
	new Graphic(
	new Point(evt.mapPoint.x, evt.mapPoint.y, new esri.SpatialReference({ wkid: 102100 })),
	new TextSymbol(dojo.byId("tsText").value).setColor(
	new Color([0,0,0])).setAlign(esri.symbol.Font.ALIGN_START).setAngle(0).setOffset(0,0).setFont(
	new Font("12pt").setWeight(esri.symbol.Font.WEIGHT_BOLD))
	)
	);
	console.log(map);
	console.log(evt.mapPoint.x);
	console.log(evt.mapPoint.y);
	console.log(dojo.byId("tsText").value);
	console.log("added text graphic");
	textAdd.remove();
	map.setInfoWindowOnClick(true);
	} ) ) // text add query

	}));
}