Only Add Text to Map After Click Submit Button

4389
8
Jump to solution
02-25-2015 12:00 PM
LisCollins
Occasional Contributor

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

        
        }; 
0 Kudos
1 Solution

Accepted Solutions
LisCollins
Occasional Contributor

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

View solution in original post

0 Kudos
8 Replies
TimWitt2
MVP Alum

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();
          
           };   
          
     }  
       
  
          
        };  
0 Kudos
LisCollins
Occasional Contributor

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.

0 Kudos
TimWitt2
MVP Alum

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();
          
           }));   
          
     }  
       
  
          
        };   
0 Kudos
LisCollins
Occasional Contributor

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

0 Kudos
LisCollins
Occasional Contributor

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);
        }
0 Kudos
TimWitt2
MVP Alum

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

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

0 Kudos
LisCollins
Occasional Contributor

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?

0 Kudos
TimWitt2
MVP Alum

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