Opening Link with coordinates after clicking in ArcGIS Online Map

KaiBehncke · ‎10-04-2023

Dear users,

I`m quite new to ArcGIS Online.

In an application (an instant map) I would like to create the following function:

It someone activates that function and does a mouseclick in a map, a link to our cms should open, that has also the coordinates of the mouseclick. E.G. https://ourcontentmanagementsystem.de?coordidates=123456,3456787

Is this possible? Can anyone give me a hint, what I can do (where I have to search, maybe there a some documentations of that technique)?

KaiBehncke · ‎10-10-2023

Allright, I developed a small solution with ArcGIS Maps SDK for JavaScript.

It goes like that:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no" />
    <title>ArcGIS Maps SDK for JavaScript; Display a map and get coordinates in a link</title>

    <style>
      html,
      body,
      #viewDiv {
        padding: 0;
        margin: 0;
        height: 100%;
        width: 100%;
      }
    </style>

    <link rel="stylesheet" href="https://js.arcgis.com/4.27/esri/themes/light/main.css">
    <script src="https://js.arcgis.com/4.27/"></script>

    <script>
      require(["esri/config", "esri/Map", "esri/views/MapView", "esri/geometry/projection","esri/geometry/SpatialReference","esri/geometry/support/webMercatorUtils","esri/geometry/support/GeographicTransformation"], function(esriConfig, Map, MapView, projection, SpatialReference,webMercatorUtils,GeographicTransformation) {
     esriConfig.apiKey = "xxxxxxx";


const cs1 = new SpatialReference({
  wkid: 25832 
});


        const map = new Map({
          basemap: "arcgis-topographic" 
        });


        const view = new MapView({
          map: map,
		    spatialReference: {
    wkid: 3857},
          center: [7.718995,52.27677], 
          zoom: 13, 
          container: "viewDiv" 
        });


     view.on("click", myClickHandler);
  function myClickHandler(event) {
  
  projection.load().then(function() {
    var mp = webMercatorUtils.webMercatorToGeographic(event.mapPoint);
	var mp2= projection.project(event.mapPoint, cs1);

 //    alert("User clicked at " + 
 //   event.screenPoint.x + ", " + event.screenPoint.y +
 //   " on the screen. The map coordinate at this point is " + mp2.x
  //   + ", " + mp2.y);
  var gewuenschte_url="https://www.xxxxxxxxxxxxxx.de/file.php?&KOORD="+mp2.x+","+mp2.y;

 winAuskunft=window.open(gewuenschte_url,'Auskunft','menubar=1,resizable=1,width=350,height=250')
  
  
  
  
});
}
});






	  
    </script>

  </head>
  <body>
    <div id="viewDiv"></div>
  </body>
</html>

🙂

View solution in original post

jcarlson · ‎10-04-2023

You could approximate this with a feature popup that uses the coordinates of the clicked feature's centroid, something like that. Capturing the coordinates of the mouse and throwing that into a link seems doable, but likely requires custom development.

- Josh Carlson
Kendall County GIS

MiguelParedes · ‎10-05-2023

Greetings @KaiBehncke

Please, visit Introduction to ArcGIS Instant Apps to see what is possible with respect to customisation.

It is not possible to download these apps to host them in your own environment and therefore customise them as you would like to. See the following FAQ for ArcGIS Instant Apps for details.

I hope the above information is of assistance.

Miguel

KaiBehncke · ‎10-05-2023

Dear Miguel,

ok, thank you for answering 🙂

As far as I understand:

a) It is not possible to implement own JS-code in AGO and the Instant Apps or the Map Viewer /Map Viewer Classic, due to security reasons. So it is not possible to write own functions in that clients, rights?

b) It is not possible to download AGO or the Instant Apps to customise them on an own server.(e.g. on a linux server).

c) It is possible to use the ArcGIS Map Api
<script src="https://js.arcgis.com/4.27/"></script>

.....and create own code based on html/css/JS..... But then it`s not possible to you all the nice AGO-functions (creating maps by clicking). Then everything is "just codebased", right?

Is that right, what I have written?

KaiBehncke · ‎10-10-2023

Allright, I developed a small solution with ArcGIS Maps SDK for JavaScript.

It goes like that:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no" />
    <title>ArcGIS Maps SDK for JavaScript; Display a map and get coordinates in a link</title>

    <style>
      html,
      body,
      #viewDiv {
        padding: 0;
        margin: 0;
        height: 100%;
        width: 100%;
      }
    </style>

    <link rel="stylesheet" href="https://js.arcgis.com/4.27/esri/themes/light/main.css">
    <script src="https://js.arcgis.com/4.27/"></script>

    <script>
      require(["esri/config", "esri/Map", "esri/views/MapView", "esri/geometry/projection","esri/geometry/SpatialReference","esri/geometry/support/webMercatorUtils","esri/geometry/support/GeographicTransformation"], function(esriConfig, Map, MapView, projection, SpatialReference,webMercatorUtils,GeographicTransformation) {
     esriConfig.apiKey = "xxxxxxx";


const cs1 = new SpatialReference({
  wkid: 25832 
});


        const map = new Map({
          basemap: "arcgis-topographic" 
        });


        const view = new MapView({
          map: map,
		    spatialReference: {
    wkid: 3857},
          center: [7.718995,52.27677], 
          zoom: 13, 
          container: "viewDiv" 
        });


     view.on("click", myClickHandler);
  function myClickHandler(event) {
  
  projection.load().then(function() {
    var mp = webMercatorUtils.webMercatorToGeographic(event.mapPoint);
	var mp2= projection.project(event.mapPoint, cs1);

 //    alert("User clicked at " + 
 //   event.screenPoint.x + ", " + event.screenPoint.y +
 //   " on the screen. The map coordinate at this point is " + mp2.x
  //   + ", " + mp2.y);
  var gewuenschte_url="https://www.xxxxxxxxxxxxxx.de/file.php?&KOORD="+mp2.x+","+mp2.y;

 winAuskunft=window.open(gewuenschte_url,'Auskunft','menubar=1,resizable=1,width=350,height=250')
  
  
  
  
});
}
});






	  
    </script>

  </head>
  <body>
    <div id="viewDiv"></div>
  </body>
</html>

🙂