Go To XY Widget for 4.6?

5500
12
04-02-2018 06:23 AM

Go To XY Widget for 4.6?

I want to add go to xy widget on my codes but I couldn't find any custom/official go to xy widget for 4.6. There are many widgets for 3.x but they are not working with 4.6. So, I tried goto() function. I want to take input as lat and long then write it into goto(lat,long). However, it won't work. Here are my codes. 

<form id="form" action="" method="get">
<table>
<tr>
<td>Latitute:</td>
<td><input type="text" name="formlat"><br><br></td>
</tr>
<tr>
<td>Longitute:</td>
<td><input type="text" name="formlon"><br><br></td>
</tr>
<tr><td><button onclick="myFunction()">GO!</button></td></tr>
</table>
</form>

function myFunction() {
var inputlat = document.getElementById("formlat").value;
var inputlon = document.getElementById("formlon").value;
goto(inputlat, inputlon);
}

Comments
RobertScheitlin__GISP
MVP Emeritus

Kutay,

   The goTo method on the View is expecting a array if you are providing a coordinate pair and the proper order is long then lat (you had it reversed).

view.goTo([inputlon, inputlat]);
KutayDeril
New Contributor II

Thanks for information but how can I take inputs from html to javascript? I am searching and trying for days but I couldn't make it. 

RobertScheitlin__GISP
MVP Emeritus

Kutay,

  I don't see anything wrong with what you have:

var inputlat = document.getElementById("formlat").value;
var inputlon = document.getElementById("formlon").value;

KutayDeril
New Contributor II

Hello Robert, 

I changed my codes but still I cannot take the inputs as lon and lat. 

<table>
<tr>
<td>Latitute:</td>
<td><input type="text" id="formlon"><br><br></td>
</tr>
<tr>
<td>Longitute:</td>
<td><input type="text" id="formlat"><br><br></td>
</tr>
<tr><td colspan="2"><button id="gobutton">GO</button></td></tr>
</table>

document.getElementById("gobutton").addEventListener("click",
function () {
var x = document.getElementById("formlon").value;
var y = document.getElementById("formlat").value;
view.goTo([x,y]);
});

it won't work but when I change view.goTo([12,34)]; it works so I thought inputs are not taken. Can you help me? 

RobertScheitlin__GISP
MVP Emeritus

Have you tried to add a console.log(x + “, “ + y); in your code to see if you are getting the x and y values?

KutayDeril
New Contributor II

I tried console log. I saw x and y values are getting the inputs correctly but view.goTo([x,y]); won't work. However, view.goTo([12,23]);  or any coordinates number works. I don't understand why x and y var not accepted in view.goto. 

any convertion necessary? like coordinates converts. 

RobertScheitlin__GISP
MVP Emeritus

Kutay,

   Yes you need yo convert the string into a number using parseFloat();

So it would look like:

document.getElementById("gobutton").addEventListener("click", function () {
  var x = parseFloat(document.getElementById("formlon").value);
  var y = parseFloat(document.getElementById("formlat").value);
  view.goTo([x,y]);
});
KutayDeril
New Contributor II

I solved the problem in another way like this. Thank you for helping. 

document.getElementById("gobutton").addEventListener("click",
function () {
var x = document.getElementById("formlon").value;
var y = document.getElementById("formlat").value;
var gotopt = new Point({
longitude: x,
latitude: y

});
view.goTo(gotopt);
var gotographic = new Graphic({
geometry: gotopt,
symbol: markerSymbol,

});

view.graphics.add(gotographic);
console.log(x);
console.log(y);


});

KutayDeril
New Contributor II

I couldn't reset point after first use. There are many points as entered locations on the map. I don't want it. How can I reset? 

RobertScheitlin__GISP
MVP Emeritus

Kutay,

   Use view.graphics.clear();

KutayDeril
New Contributor II

I tried it and I have this error.

index.html:576 Uncaught TypeError: view.graphics.clear is not a function
at HTMLButtonElement.<anonymous> (index.html:576)

When I enter locations and pressed GO button second time. the first point which is created by first pressing GO button won't be clear. 

RobertScheitlin__GISP
MVP Emeritus

Kutay,

   Sorry in 4.x it is:

view.graphics.removeAll();

Version history
Last update:
‎04-02-2018 06:23 AM
Updated by:
Contributors