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>
