ProjectE-mail This Topic Printable Version Give Us Feedback

View live sample

Description

This example demonstrates how to project map coordinates between coordinate systems. Click on the map to get the x, y location in the WGS 1984 Web Mercator projected coordinate system. Click "Convert back to LatLong" to see the corresponding x, y values in the WGS 1984 geographic coordinate system.

Projecting features requires an ArcGIS Server geometry service. This type of service is new at ArcGIS Server 9.3 and allows for buffering, projecting, and geometry simplification with the ArcGIS JavaScript APIs. The geometry service is defined on this line:

gsvc = new esri.arcgis.gmaps.Geometry("http://sampleserver1.arcgisonline.com/arcgis/rest/services/Geometry/GeometryServer/");

Use the Services Directory to find out the URL to your own geometry service. Because the geometry service is always named Geometry, the URL will be very similar to the one in this example.

This example contains two functions that do the projecting between the two coordinate systems: projectToWebMercator and projectToLatLong. Both functions are designed to exit if you click an existing overlay, such as a marker that's on the map. If you click anywhere else, the functions continue and define ProjectParameters, which are passed to the Geometry.project method.

The projection parameters include an input spatial reference (params.inSpatialReference) and an output spatial reference (params.outSpatialReference). These are set to 4326 and 102113, which are the well-known IDs of the WGS 1984 geographic coordinate system and the WGS 1984 Web Mercator projected coordinate system, respectively. See the reference topics Projected Coordinate Systems and Geographic Coordinate Systems for a listing of all well-known IDs for different coordinate systems.

The two functions work with the projected point differently. Because projectToWebMercator produces a point that does not have a spatial reference of 4326, the result is returned as an array of object literals of the form:

{
 "points" : [ [<x1>, <y1>], [<x2>, <y2>] ],
 "spatialReference" : { "wkid" : <wkid> }
}

In contrast, the function projectToLatLong does produce a point with a spatial reference of 4326, therefore the result is returned as a GMarker[][].

Code

<html>

<head>
  <title>GMaps: Project</title>

    <script src="http://maps.google.com/maps?file=api&amp;v=2&amp;key=DioG219lPJG3WTn3zmQqebsjVg" type="text/javascript"></script>
    <script src="http://serverapi.arcgisonline.com/jsapi/gmaps/?v=1.6" type="text/javascript" ></script>

  <script type="text/javascript">
    var gmap;
    var mapExtension;
    var overlays;
    var geometry;
    var pt;

    function initialize() {
      gmap = new GMap2(document.getElementById("map"));
      gmap.addControl(new GLargeMapControl());
      gmap.addControl(new GMapTypeControl());
      gmap.setCenter(new GLatLng(33.9795, -117.3716), 12);
      gmap.enableScrollWheelZoom();

      mapExtension = new esri.arcgis.gmaps.MapExtension(gmap);

      geometry = new esri.arcgis.gmaps.Geometry("http://sampleserver1.arcgisonline.com/arcgis/rest/services/Geometry/GeometryServer");
      GEvent.addListener(gmap, 'click', projectToWebMercator);
    }

    function projectToWebMercator(overlay, point) {
      if (overlay) {
        return;
      }
      mapExtension.removeFromMap(overlays);

      var params = new esri.arcgis.gmaps.ProjectParameters();
      params.geometries = [ point ]; // GOverlay[]
      params.inSpatialReference = 4326;
      params.outSpatialReference = 102113;

      geometry.project(params, function(projectResults) {
        // projectResults.geometries is an Array of ArcGISGeometryObject (i.e., ArcGISGeometryObject[])
        pt = projectResults.geometries[0];
        gmap.openInfoWindowHtml(point, "<b>Web Mercator Coordinates:</b><p>x: " + pt.x + ", y: " + pt.y + "</p>" + "<input type='button' value='Convert back to LatLong' onclick='projectToLatLong();' />");
      });
    }

    function projectToLatLong() {
      var params = new esri.arcgis.gmaps.ProjectParameters();
      params.geometries = [ { x: pt.x, y: pt.y } ]; // ArcGISGeometryObject[]
      params.inSpatialReference = 102113;
      params.outSpatialReference = 4326;
      params.geometryType = "esriGeometryPoint";

      geometry.project(params, function(projectResults) {
        // projectResults.geometries is a 2-D Array of GOverlay (i.e., GOverlay[][])
        var marker = projectResults.geometries[0][0];
        var latlng = marker.getLatLng();
        alert("latitude = " + latlng.lat() + ", longitude = " + latlng.lng());
      });
    }

  </script>
</head>

<body  onload="initialize();" onunload="GUnload();">
  <b>Click a location on the map to Project from LatLng -> Web Mercator:</b>
  <div id="map" style="width:400px; height:400px; border:1px solid #000;"></div>
</body>

</html>