Create Dialog Box Dynamically,Get user input values and Add Text Graphics on Map ?

[mayur9785]

Hi,

I added one more draw button in draw widget for add text graphic on map.
My requirement is user will click on Add Text Draw tool and then click on Map, When user click on Map open the dialog.

I have added HTML template "TextGraphics.html" in Draw widgets templates folder
UI of the TextGraphics.html is below.

User will enter text and chose color(Red, Black) from drop down and when click on save button get values of textbox and drop down selected value and add text on Map.

I want to display "TextGraphics.html" templates when user click on Map. How do I call this template HTMLpage and get user input values of textbox and dropdown selected value when You click on Save button.

HTML Templates code is below:

<div style="padding:5px;">
    <div id="dialogconfirmtext">
        <table>
            <tr>
                <td><label for="name">Enter label:</label></td>
                <td>
                    <div data-dojo-type="dijit/form/Form" data-dojo-attach-point="drawTextFormDijit">
                        <input type="text" data-dojo-type="dijit/form/ValidationTextBox" id="addmaptext"
                               data-dojo-props="name:'drawText',trim:true,required:true,style:'width:100%;',placeholder:''" />
                    </div>
                </td>
            </tr>


            <tr>
                <td>
                    <label for="name">Color:</label>
                </td>
                <td>
                    <select name="select" data-dojo-type="dojox/form/DropDownSelect">
                        <option value="Red">Red</option>
                        <option value="Black" selected="selected">Black</option>
                    </select>
                </td>
            </tr>
            
        </table>
    </div>
</div>
<div class="buttonActionBar" id="btnact">
    <table>
        <tr>
            <td>
                <button data-dojo-type="dijit/form/Button" data-dojo-props="iconClass:'fa fa-globe',showLabel:true" data-dojo-attach-point="savetext" id="savetext"
                        >
                    save
                </button>
            </td>
        </tr>
    </table>
</div>

Code for Add Text graphics Draw tool button is:

drawText: function() {            
                this.disconnectMapClick();
                var drawTextClickHanlder = this.map.on('click', lang.hitch(this, function(evt, override) {
                    var textSymbol = new TextSymbol(
                        "Test Label",
                        this.textFont,
                        this.textColor
                    );
                    var textGraphic = new Graphic(evt.mapPoint, textSymbol);
                    this.textGraphics.add(textGraphic);
                    this.connectMapClick();
                    drawTextClickHanlder.remove();
                }));           
        },

Thanks,

[ERS-Long]

Please check this cool widget, it has the draw text functionality already.

https://github.com/ishiland/cmv-widgets#advanceddraw