binding coordinate values to html textbox in Openlayers

Question

So, I am writing a code that when user clicks on a map. It retrieves the coordinate values, and tries to bind it (show its value) in a texbox. I have tested it, the coordinate and click event works but I guess there is a problem with binding it to textbox. any suggestions on how to fix this?

the code:

<script type="text/javascript" src="http://www.openlayers.org/api/OpenLayers.js"></script>
    <script type="text/javascript">
        OpenLayers.Control.Click = OpenLayers.Class(OpenLayers.Control, {
                    defaultHandlerOptions: {
                        'single': true,
                        'double': false,
                        'pixelTolerance': 0,
                        'stopSingle': false,
                        'stopDouble': false
                    },

                    initialize: function (options) {
                        this.handlerOptions = OpenLayers.Util.extend(
                                {}, this.defaultHandlerOptions
                            );
                        OpenLayers.Control.prototype.initialize.apply(
                                this, arguments
                            );
                        this.handler = new OpenLayers.Handler.Click(
                                this, {
                                    'click': this.trigger
                                }, this.handlerOptions
                            );
                    },

                    trigger: function (e) {
                        var lonlat = map.getLonLatFromPixel(e.xy);

                        alert("You clicked near " + lonlat.lat + " N, " +
                                                      +lonlat.lon + " E");
                        $('#latlon').value = lonlat;
                    }
                });
    </script>

and how I define the textbox:

 <input type="text" name="coordinates" id="latlon" value="" Font-Names="Tahoma" Font-Size="10pt" Width="95%" />

The error message:

Uncaught TypeError: Cannot set property 'value' of null 
OpenLayers.Control.Click.OpenLayers.Class.trigger

score 1 · Accepted Answer · edited May 23 '17 at 12:27

1

You are using the value property of $('#latlon') which is not defined. Try using

$('#latlon').val(lonlat); as that is how it works in jQuery.

For more details on difference between value and val() refer to the different stack overflow question.

jquery function val() is not equivalent to "$(this).value="?

Add the following line before including the Openlayers.js file, this will include jquery into your code:

<script type="text/javascript" src="http://code.jquery.com/jquery-1.8.2.js"></script>

edited May 23 '17 at 12:27

Community

1
1

answered Oct 11 '12 at 10:56

Shubhanshu Mishra

6,210
6
21
23

I changed it but it gives the same error as before... any other suggestions? – Amin M Oct 11 '12 at 11:17
Is it going to the alert box. Also have you included the script to jquery in your HTML as the $() thing is in jquery. – Shubhanshu Mishra Oct 11 '12 at 11:26
Yes, It goes to alert box! but not in the textbox. How can I include the script to jquery? what do you mean by that? Could you please clarify... :) – Amin M Oct 11 '12 at 12:43
1

Are you trying to run a copy pasted code from some where. As the $() function is a part of jQuery and hence won't work in your code unless you include the jQuery.js in your code. The $("#latlon") is a jquery selector and you can read more about it at: http://api.jquery.com/all-selector/ – Shubhanshu Mishra Oct 11 '12 at 12:52
Oh! Sorry I am new to this forum. now I figured out how to up vote! thanks again! ;) – Amin M Oct 11 '12 at 15:39

binding coordinate values to html textbox in Openlayers

1 Answers1