Hide Table of Contents
Project a point

Description

This sample demonstrates how you can find the coordinates of a point in multiple coordinate systems. Click a point on the map to see its coordinates in the WGS 1984 Web Mercator projected coordinate system. The coordinates you see required a projection because they were retrieved from the mouse click as geographic coordinates (latitude and longitude). You can project the point back to geographic coordinates by clicking the button on the InfoWindow.

The projection is accomplished using an ArcGIS Server geometry service. This type of service is new at ArcGIS Server 9.3 and you can use it for buffering, projecting, and geometry simplification in JavaScript applications. This line creates the geometry service:

gsvc = new esri.tasks.GeometryService("http://tasks.arcgisonline.com/ArcGIS/rest/services/Geometry/GeometryServer");

You can use the Services Directory to discover the URL to your own geometry service. Since the service name is required to be Geometry, the URL will be very similar to this one.

The window that you see when you click the point is an InfoWindow . It's formatted by an InfoTemplate , which can contain HTML. This is what allows you to place a button in the InfoWindow. Notice the empty DIV with ID = 'latlong' that is placed in the InfoTemplate. This DIV is filled if you click the button to convert back to LatLong.

Code

<!DOCTYPE html>
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <!--The viewport meta tag is used to improve the presentation and behavior of the samples 
      on iOS devices-->
    <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no">
    <title>Project a point</title>

    <link rel="stylesheet" href="http://js.arcgis.com/3.13/dijit/themes/claro/claro.css">
    <link rel="stylesheet" href="http://js.arcgis.com/3.13/esri/css/esri.css">
    <style>
      .esriPopup .contentPane span {
        display: inline-block;
        padding: 0 0 0.2em 0;
        width: 6em;
      }
    </style>

    <script src="http://js.arcgis.com/3.13/"></script>
    <script>
      var map, gsvc, pt;

      require([
        "esri/map", "esri/graphic", "esri/symbols/SimpleMarkerSymbol",
        "esri/tasks/GeometryService", "esri/tasks/ProjectParameters",
        "esri/SpatialReference", "esri/InfoTemplate", "dojo/dom", "dojo/on",
        "dojo/domReady!"
      ], function(
        Map, Graphic, SimpleMarkerSymbol,
        GeometryService, ProjectParameters,
        SpatialReference, InfoTemplate, dom, on
      ) {
        map = new Map("map", {
          basemap: "streets",
          center: [-98.445, 46.147],
          zoom: 3
        });

        gsvc = new GeometryService("http://tasks.arcgisonline.com/ArcGIS/rest/services/Geometry/GeometryServer");
        map.on("click", projectToWebMercator);

        function projectToWebMercator(evt) {
          map.graphics.clear();
          
          var point = evt.mapPoint;
          var symbol = new SimpleMarkerSymbol().setStyle("diamond");
          var graphic = new Graphic(point, symbol);
          var outSR = new SpatialReference(102100);
          
          map.graphics.add(graphic);

          gsvc.project([ point ], outSR, function(projectedPoints) {
            pt = projectedPoints[0];
            graphic.setInfoTemplate(new InfoTemplate("Coordinates",
              "<span>X:</span>" + pt.x.toFixed() + "<br>" + 
              "<span>Y:</span>" + pt.y.toFixed() + "<br>" + 
              "<input type='button' value='Convert back to LatLong' id='convert'>" +
              "<div id='latlong'></div>"));
            map.infoWindow.setTitle(graphic.getTitle());
            map.infoWindow.setContent(graphic.getContent());
            map.infoWindow.show(evt.screenPoint, map.getInfoWindowAnchor(evt.screenPoint));
            on.once(dom.byId("convert"), "click", projectToLatLong);
          });
        }

        function projectToLatLong() {
          var outSR = new SpatialReference(4326);
          var params = new ProjectParameters();
          params.geometries = [pt.normalize()];
          params.outSR = outSR;
          
          gsvc.project(params, function(projectedPoints) {
            pt = projectedPoints[0];
            dom.byId("latlong").innerHTML = "<span>Latitude: </span> " + 
              pt.y.toFixed(3) + "<br><span>Longitude:</span>" + pt.x.toFixed(3);
          });
        }
      });
    </script>

  </head>
  <body class="claro">
    <b>Click a location on the map to Project from LatLng -> Web Mercator:</b>
    <div id="map" style="width:600px; height:400px; border:1px solid #000;"></div>
  </body>
</html>