URL Parameters with 4.18 API? (Go to XY via url parameter?)

1134
4
Jump to solution
12-30-2020 08:59 AM
RexRobichaux
Occasional Contributor

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>

 

 

 

 

 

0 Kudos
1 Solution

Accepted Solutions
JohnGrayson
Esri Regular Contributor

You'll have to handle the URL parameters in your code, and one way to do this task is with URLSearchParams which makes it easier to work with URL parameters. 

View solution in original post

4 Replies
JohnGrayson
Esri Regular Contributor

You'll have to handle the URL parameters in your code, and one way to do this task is with URLSearchParams which makes it easier to work with URL parameters. 

RexRobichaux
Occasional Contributor

Thank you John- this was perfect! Also, a huge shout out to @BlakeTerhune who drafted the code that that got my app working.  Below is the final snippet that got me up and running. You all rock! :thumbs_up:

 

      var view = new MapView({
        container: "viewDiv",
        map: map,
      });
      
      const urlParams = new URLSearchParams(window.location.search);
      let coords = urlParams.get("coords").split(",").map(Number);
      let zoomLevel = urlParams.get("zoomLevel");
      console.log(`zoom level ${zoomLevel} at ${coords}`);
      view.goTo({
        center: coords,
        zoom: zoomLevel
      });
      

 

 

Update- Edited as pointed out by Blake below. Thanks again folks!

 

JohnGrayson
Esri Regular Contributor

One thing to watch out for is if the URL parameters you're looking for are not there; you might want to check before using the values.

BlakeTerhune
MVP Regular Contributor

You'll want to remove the extra brackets around coords in view.goTo() because it's already an array from the original assignment.