Hello everyone,
I've been working on a pet project to make a lightweight web GIS editing app leveraging on-premise feature service editing using the 4.18 ArcGIS JS API. I've got it pretty close to where I want it, but have ran into one small hitch. Essentially, I need to pass dynamic lat/lon or XY values to the app (will be coming from another application which has XY location date for our given data layers).
The expected behavior would be for the app to launch in a new tab, zoom to the provided coordinates, and display the location where a user will either create a new record, or edit / delete an existing record through the app via the feature service.
I found this older thread from 2012 which mentioned using the ?coords= paremater but this doesn't seem to be honored in my app when testing it out. Is this parameter supported at the 4.x JS API? http://localhost/ZoomCoords.html?coords=-117.13,32.82&zoomLevel=8
EDIT: I forgot to add a rather important piece of info. I've tried inserting the below JS into my working code, but I must be missing something as it's failing load with a "missing }" error... I'm no developer...so I'm guessing this is a simply syntax error on my part somewhere:
//if there are url params zoom to location
var coords, zoomLevel;
var urlObject = esri.urlToObject(document.location.href);
if(urlObject.query && urlObject.query.coords && urlObject.query.zoomLevel){
var coords = urlObject.query.coords.split(',');
var lon = parseFloat(coords[0]);
var lat = parseFloat(coords[1]);
var zoomLevel = parseInt(urlObject.query.zoomLevel);
var point = esri.geometry.geographicToWebMercator(new esri.geometry.Point(lon,lat));
map.centerAndZoom(point,zoomLevel);
}
I've provided my current (working) JS/html code (sans the urlObject snippet above) for the app below in case anyone is interested. Simple insert the feature service url of your choice, and update the popup info with your fields (line 31) and outFields value/s (line 37) and it should be plug and play.
For my testing, I tried removing the map center and zoom details (line 50 and 51) and still had no luck with the url parameters. Thanks for any ideas you can provide!
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
<title>DEQ GIS Spatial Data Editor</title>
<style>
html, body, #viewDiv {
padding: 0;
margin: 0;
height: 100%;
width: 100%;
}
</style>
<link rel="stylesheet" href="https://js.arcgis.com/4.18/esri/themes/light/main.css">
<script src="https://js.arcgis.com/4.18/"></script>
<script>
require([
"esri/Map",
"esri/views/MapView",
"esri/widgets/Search",
"esri/layers/FeatureLayer",
"esri/widgets/Editor",
"esri/widgets/BasemapToggle",
"esri/widgets/BasemapGallery"
], function(Map, MapView, Search, FeatureLayer, Editor, BasemapToggle, BasemapGallery) {
var popup1 = {
"title": "Feature Information",
"content": "<b>PC Num:</b> {PCNUM}"
}
var PetroleumReleases = new FeatureLayer({
//*** Replace with your URL ***//
url: "yourfeatureserviceurlgoeshere",
outFields: ["PCNUM"],
popupTemplate: popup1
});
var map = new Map({
basemap: "topo-vector",
//*** ADD ***//
layers: [PetroleumReleases]
});
var view = new MapView({
container: "viewDiv",
map: map,
center: [-78.214, 37.59], // longitude, latitude
zoom: 8
});
// Search widget
var search = new Search({
view: view
});
view.ui.add(search, "top-right");
var editorWidget = new Editor({
view: view
});
view.ui.add(editorWidget, "top-left");
function showCoordinates(pt) {
var coords = "Lat/Lon " + pt.latitude.toFixed(3) + " " + pt.longitude.toFixed(3) +
" | 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 }));
});
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");
var basemapToggle = new BasemapToggle({
view: view,
nextBasemap: "satellite"
});
view.ui.add(basemapToggle, "bottom-left");
});
</script>
</head>
<body>
<div id="viewDiv"></div>
</body>
</html>
