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"); })); } };
Solved! Go to Solution.
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); }
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(); }; } };
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.
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(); })); } };
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 | ||
})); | ||
} |
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); }
Sounds like you want to do something similar like what I did here:
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?
Check out my post here: Javascript API - Advanced Draw widget