topic Re: Retrieval of latitude/longitude when Locate button clicked in ArcGIS JavaScript Maps SDK Questions

Retrieval of latitude/longitude when Locate button clicked

DavidShearan — Wed, 09 Aug 2023 18:25:35 GMT

I have inherited a website from another developer but I am new to arcgis and esri. One of the functions of the site is to record butterfly sightings in Corfu. The PHP script has two input fields 'rLatitude' and 'rLongitude' which are populated when a user clicks on the displayed map. The map also has a Locate button to get the user's current location - when clicked it zooms in and displays the current location but it does not populate the two fields. That is what I am trying to achieve.

Please could someone advise what extra coding I need in order to achieve my objective.

Many thanks in advance

The full script (with the exception of the Corfu polygon) is as follows:

// SET UP LOCATOR TASK USING WORLD GEOCODE SERVER
var locatorTask = new Locator({
url: "https://geocode.arcgis.com/arcgis/rest/services/World/GeocodeServer"
});

//LOAD INITIAL BASE LAYER TYPE
var map = new Map({
basemap: "topo-vector"
});

//LOCATE MAP CENTER AND ZOOM LEVEL
var view = new MapView({
container: "viewDiv",
map: map,
center: [19.874268, 39.576056], // longitude, latitude
zoom: 10
});

/*******************************************************************
* This click event sets generic content on the popup not tied to
* a layer, graphic, or popupTemplate. The location of the point is
* used as input to a reverse geocode method and the resulting
* address is printed to the popup content.
*******************************************************************/
view.popup.autoOpenEnabled = false;
view.on("click", function(event) {
// Get the coordinates of the click on the view
var lat = Math.round(event.mapPoint.latitude * 1000000) / 1000000;
var lon = Math.round(event.mapPoint.longitude * 1000000) / 1000000;

view.popup.open({
// Set the popup's title to the coordinates of the location
title: "<strong>Location coordinates:</strong><br><br><strong>Latitude:</strong> " + lat + "<br><strong>Longitude:</strong> " + lon + "",
location: event.mapPoint // Set the location of the popup to the clicked location
});

var params = {
location: event.mapPoint
};

// Update the form fields
$('#rLatitude').val(lat);
$('#rLongitude').val(lon);
graphicsLayer.removeAll();
var point = {
type: "point",
latitude: lat,
longitude: lon
};

//FORMAT RECORD POINT STYLE
var simpleMarkerSymbol = {
type: "simple-marker",
color: [220, 53, 69, 1], // orange
outline: {
color: [255, 255, 255, 1], // white
width: 2
}
};

var pointGraphic = new Graphic({
geometry: point,
symbol: simpleMarkerSymbol
});

graphicsLayer.add(pointGraphic);
});

view.on("Locate", function(event) {
// Get the coordinates of the click on the view
var lat = Math.round(event.mapPoint.latitude * 1000000) / 1000000;
var lon = Math.round(event.mapPoint.longitude * 1000000) / 1000000;

var params = {
location: event.mapPoint
};

// Update the form fields
$('#rLatitude').val(lat);
$('#rLongitude').val(lon);
graphicsLayer.removeAll();
var point = {
type: "point",
latitude: lat,
longitude: lon
};

//FORMAT RECORD POINT STYLE
var simpleMarkerSymbol = {
type: "simple-marker",
color: [220, 53, 69, 1], // orange
outline: {
color: [255, 255, 255, 1], // white
width: 2
}
};

var pointGraphic = new Graphic({
geometry: point,
symbol: simpleMarkerSymbol
});

graphicsLayer.add(pointGraphic);
});

//TOGGLE LOCATE BUTTON
var locateBtn = new Locate({
view: view
});

//TOGGLE HOME BUTTON
var homeBtn = new Home({
view: view
});

//TOGGLE COMPASS BUTTON
var compassWidget = new Compass({
view: view
});

//TOGGLE BASE LAYER TYPE
var basemapToggle = new BasemapToggle({
view: view,
nextBasemap: "satellite"
});

//POSITION BASE LAYER TOGGLE
view.ui.add(basemapToggle, "bottom-left");

//POSITION BASE LAYER TOGGLE
var graphicsLayer = new GraphicsLayer();
map.add(graphicsLayer);

<?php
/**
* Only add the marker if lat long set (breaks add record otherwise)
*/

if(isset($rLatitude) && isset($rLongitude)) :
?>

//POSITION RECORD POINT
var point = {
type: "point",
latitude: <?= $rLatitude ?>,
longitude: <?= $rLongitude ?>
};

//FORMAT RECORD POINT STYLE
var simpleMarkerSymbol = {
type: "simple-marker",
color: [220, 53, 69, 1], // orange
outline: {
color: [255, 255, 255, 1], // white
width: 2
}
};

var pointGraphic = new Graphic({
geometry: point,
symbol: simpleMarkerSymbol
});

graphicsLayer.add(pointGraphic);

<?php
endif;
?>

var simpleFillSymbol = {
type: "simple-fill",
color: [0, 190, 90, 0.025], // CBC Green, opacity 2.5%
outline: {
color: [0, 190, 90, 1],
width: 1
}
};

var polygonGraphic = new Graphic({
geometry: polygon,
symbol: simpleFillSymbol
});

graphicsLayer.add(polygonGraphic);

//LOAD AND FORMAT CO-ORDINATE WIDGET TO DISPLAY LAT/LON, SCALE AND ZOOM LEVEL
var coordsWidget = document.createElement("div");
coordsWidget.id = "coordsWidget";
coordsWidget.className = "esri-widget esri-component";
coordsWidget.style.padding = "7px 15px 5px";

view.ui.add(coordsWidget, "bottom-right");

function showCoordinates(pt) {
var coords =
"Latitude " +
pt.latitude.toFixed(6) +
" | Longitude " +
pt.longitude.toFixed(6) +
" | Scale 1:" +
Math.round(view.scale * 1) / 1 +
" | Zoom " +
view.zoom;
coordsWidget.innerHTML = coords;
}

view.watch("stationary", function(isStationary) {
showCoordinates(view.center);
});

view.on("pointer-move", function(evt) {
showCoordinates(view.toMap({
x: evt.x,
y: evt.y
}));
});

// ADD THE LOCATE BUTTON
view.ui.add(locateBtn, {
position: "top-left"
});

// ADD THE HOME BUTTON
view.ui.add(homeBtn, "top-left");

// ADD THE COMPASS WIDGET BUTTON
view.ui.add(compassWidget, "top-left");
});
</script>

Re: Retrieval of latitude/longitude when Locate button clicked

JoelBennett — Wed, 09 Aug 2023 20:34:16 GMT

This should do it:

//TOGGLE LOCATE BUTTON var locateBtn = new Locate({ view: view }); //added code locateBtn.on("locate", function(position) { $("#rLatitude").val(position.coords.latitude.toString()); $("#rLongitude").val(position.coords.longitude.toString()); });

See also the documentation for the locate event of the Locate widget.

Re: Retrieval of latitude/longitude when Locate button clicked

DavidShearan — Thu, 10 Aug 2023 05:38:56 GMT

Thank you Joel for your rapid response. I have added that code to my script below the TOGGLE LOCATE BUTTON as you indicated. It hasn't made any difference I am afraid My two input fields stay resolutely empty. And thank you for pointing me at the documentation sample. I had seen the Locate widget page before during my many hours of Googling but not the locate event page.

Is there anything else I can provide that would help at all?

Re: Retrieval of latitude/longitude when Locate button clicked

JoelBennett — Thu, 10 Aug 2023 17:47:07 GMT

My bad...it should actually be more like this:

//TOGGLE LOCATE BUTTON var locateBtn = new Locate({ view: view }); //added code locateBtn.on("locate", function(evt) { $("#rLatitude").val(evt.position.coords.latitude.toString()); $("#rLongitude").val(evt.position.coords.longitude.toString()); });

Re: Retrieval of latitude/longitude when Locate button clicked

DavidShearan — Thu, 10 Aug 2023 18:50:31 GMT

Amazing. Thank you Joel. This site has always had that issue and now it's going to look like I'm some kind of super hero when in reality it's you

Re: Retrieval of latitude/longitude when Locate button clicked

JoelBennett — Thu, 10 Aug 2023 19:05:43 GMT

Glad to help, but don't underestimate yourself. You did your homework and asked for help afterwards, which is already more than a lot of people will do. Plus when you did, you gave a good problem description with all the necessary information and source code, which is also more than many do. You made it pretty easy for me actually...

Re: Retrieval of latitude/longitude when Locate button clicked

DavidShearan — Thu, 10 Aug 2023 19:12:04 GMT

Thank you for those encouraging words.

Actually I may have spoken too soon. The fix works fine on my localhost but doesn't appear to work on the live website. Any thoughts?

Re: Retrieval of latitude/longitude when Locate button clicked

JoelBennett — Thu, 10 Aug 2023 19:18:25 GMT

The documentation says this: "The Locate widget is not supported on insecure origins. To use it, switch your application to a secure origin, such as HTTPS. Note that localhost is considered 'potentially secure' and can be used for easy testing in browsers that supports Window.isSecureContext." This explains it working on localhost, but does your site use https?

Re: Retrieval of latitude/longitude when Locate button clicked

DavidShearan — Thu, 10 Aug 2023 19:27:48 GMT

The URL is https://websitename

Is this enough or could there be some other setting that is required?

I have just checked on the website hosting environment and under SSL Certificates it lists a Positive SSL certificate and an essential SSL certificate. The Essential certificate look OK and expires in 5 months time. The essential certificate has a status of 'Incomplete Order'. Could that be the problem?

Re: Retrieval of latitude/longitude when Locate button clicked

DavidShearan — Thu, 10 Aug 2023 19:44:52 GMT

No it's nothing to do with that. That certificate was for an old domain. I have chatted to the support team and they can't see any configuration restrictions that would be affecting this. They have suggested contacting the widget provider but first I think I will trawl the Esri community to see if I can find an answer

Re: Retrieval of latitude/longitude when Locate button clicked

JoelBennett — Thu, 10 Aug 2023 19:51:48 GMT

A good place to start would probably be the browser's developer tools (F12 or Ctrl-Shift-I)...do you see any error messages that get produced for this workflow?

Re: Retrieval of latitude/longitude when Locate button clicked

DavidShearan — Thu, 10 Aug 2023 20:03:57 GMT

Yes I checked there. No errors, just some warnings about cookies

Re: Retrieval of latitude/longitude when Locate button clicked

JoelBennett — Thu, 10 Aug 2023 23:17:24 GMT

You might also add this to see if it produces an error message:

locateBtn.on("locate-error", function(evt) { alert(evt.error.message); });

Re: Retrieval of latitude/longitude when Locate button clicked

DavidShearan — Fri, 11 Aug 2023 05:39:37 GMT

Thanks again Joel but I no longer have the issue.

I woke in the middle of the night with the sudden realisation that I had used FTP to upload the calling PHP script and not the included Javascript code! doh

So at about 5am I fired up the laptop, used my FTP program to upload the .js file and hey presto.

Sorry, it was a schoolboy error but I am still thrilled that it now works, thanks to you

Re: Retrieval of latitude/longitude when Locate button clicked

JoelBennett — Fri, 11 Aug 2023 16:53:14 GMT

It's amazing how many realizations occur at that time of day/night!