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);
}
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]);
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.
Kutay,
I don't see anything wrong with what you have:
var inputlat = document.getElementById("formlat").value;
var inputlon = document.getElementById("formlon").value;
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?
Have you tried to add a console.log(x + “, “ + y); in your code to see if you are getting the x and y values?
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.
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]);
});
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);
});
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?
Kutay,
Use view.graphics.clear();
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.
Kutay,
Sorry in 4.x it is:
view.graphics.removeAll();