ArcGIS map linking

Something I’ve found frustrating with a few different instances of ArcGIS-based maps is the lack of an easy ability to share or link to a particular location. E.g., one of the water districts shares this map: https://valleywater.maps.arcgis.com/apps/webappviewer/index.html?id=39632100ff6d48dcab9405ee080b142b.

After some fruitless searching in regular search, Gemini helped get me on the right track in response to the prompt: “what query parameters are available other than id when loading a page with an embedded arcgis map?” The params I’ve checked out from those listed don’t seem to be hallucinations and the docs were legit (and not something I’d found before, somehow).

In particular, these query params are pretty helpful:

• “find”, which expects the name of a location to search for, as in "find=12327-12373+El+Monte+Rd%2C+Los+Altos%2C+California%2C+94022" (example link)
• “extent”, defining the area to focus on, which seems to expect a list in the following format: bottom_left_longitude "," bottom_left_latitude "," top_right_longitude "," top_right_latitude, as in extent=-122.128230,37.357770,-122.128080,37.358120 (example link)

(Having longitude come first threw me off a little.)

Finally, inspecting a page with the map revealed this interesting object:

> _viewerMap.geographicExtent
{xmin: -122.13007727544566, ymin: 37.3572280189291, xmax: -122.1289427010327, ymax: 37.358839794840996, spatialReference: {…}, …}

We can write a little JavaScript function to create the URL for us:

function getUrlForCurrentMapExtent() {
  const url = new URL(location.href);
  const params = url.searchParams;
  const e = _viewerMap.geographicExtent;
  return url.origin + url.pathname + '?id=' + params.get('id') + '&extent=' + [e.xmin, e.ymin, e.xmax, e.ymax].join(',');
}

(One thing to watch out for: the adjustment of the viewing area in response to opening the inspector can throw the coordinates off. You might want to stretch the window out a bit… or we could put this into a Chrome extension.)

Finally, I was curious what suggestions Gemini would have on improving my code. In response to my prompt “Speaking as an expert JavaScript programmer, how would you improve the following code?”, it suggested the following:

function getUrlForCurrentMapExtent() {
  const url = new URL(location.href);
  const params = url.searchParams;

  // Ensure necessary parameters are present
  const id = params.get('id');
  if (!id) {
    console.error('Missing "id" parameter in URL');
    return;
  }

  const extent = _viewerMap.geographicExtent;
  if (!extent) {
    console.error('Missing "geographicExtent" property in _viewerMap');
    return;
  }

  // Use URLSearchParams to efficiently add or modify parameters
  params.set('extent', [extent.xmin, extent.ymin, extent.xmax, extent.ymax].join(','));

  return url.toString();
}

It works! (Should we throw an exception instead of logging an error and returning undefined?)