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:
<script src="https://js.arcgis.com/4.22/"></script>
<script>
//LOAD LAYERS
require([
"esri/tasks/Locator",
"esri/Map",
"esri/views/MapView",
"esri/Graphic",
"esri/layers/GraphicsLayer",
"esri/widgets/BasemapToggle",
"esri/widgets/BasemapGallery",
"esri/widgets/Locate",
"esri/widgets/Home",
"esri/widgets/Compass"
], function(Locator, Map, MapView, Graphic, GraphicsLayer, BasemapToggle, BasemapGallery, Locate, Home, Compass) {
// 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;
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);
});
//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>
Solved! Go to Solution.
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());
});
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.
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?
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());
});
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
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...
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?
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?
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?
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