topic How to zoom to a non-Web Mercator extent? in ArcGIS JavaScript Maps SDK Questions

How to zoom to a non-Web Mercator extent?

StephenLead — Wed, 14 Aug 2013 10:56:54 GMT

Given an ArcGIS Server service which is stored in non-Web Mercator coordinates, how can I zoom to its extent when the map is using Web Mercator?

There is a method geographicToWebMercator - but what if the original coordinates are not geographic?

Below is some sample code to illustrate the problem.

Thanks,
Steve

<!DOCTYPE html> <html>   <head>     <meta http-equiv="Content-Type" content="text/html; charset=utf-8">     <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no">     <title>Zoom to non-WM dynamic layer</title>     <link rel="stylesheet" href="http://js.arcgis.com/3.6/js/esri/css/esri.css"/>     <style>       html,body,#mapDiv{         padding:0;         margin:0;         height:100%;       }     </style>     <script src="http://js.arcgis.com/3.6/"></script>     <script>       dojo.require("esri.map");       var map;       var url = "http://loczy.mfgi.hu/ArcGIS/rest/services/TJAM/surf_ujfalu_t/MapServer/"         function init() {                  //Get the layer's extent from ArcGIS Server         esri.request({        url: url,   content: {f:  "json"},   handleAs: "json",   callbackParamName: "callback",   load: function(response) {                //Create the map. Since we're specifying the Gray basemap it'll use Web Mercator    map = new esri.Map("mapDiv", {basemap: "gray"});      //Add the dynamic layer. Although it's not stored in Web Mercator, it's automatically    //projected on-the-fly and displays in the correct location    var dynamicMapServiceLayer = new esri.layers.ArcGISDynamicMapServiceLayer(url);            map.addLayer(dynamicMapServiceLayer);                //Zoom the map to the new layer's extent. This fails, since the extent doesn't use WM    map.setExtent(response.initialExtent);               },       error: function (error) {          alert("Sorry, there was a problem zooming to the new layer");               }  });   }         dojo.ready(init);     </script>   </head>   <body>     <div id="mapDiv"></div>\   </body> </html>

Re: How to zoom to a non-Web Mercator extent?

JakubMalec — Sat, 11 Dec 2021 15:55:31 GMT

If you know the initialExtent's Spatial Reference WKID, you can convert the coordinates using proj4js (http://trac.osgeo.org/proj4js/)

Using proj4js is easy, it'll look like this:


var srcProj = new Proj4js.Proj('EPSG:YOUR_WKID');
var destProj = new Proj4js.Proj('EPSG:3857'); // 3857 is the default map WKID

var bottomLeft = new Proj4js.Point(response.initialExtent.minx, response.initialExtent.miny);
Proj4js.transform(srcProj, destProj, bottomLeft);

var topRight = new Proj4js.Point(response.initialExtent.maxx, response.initialExtent.maxy);
Proj4js.transform(srcProj, destProj, topRight);

map.setExtent(bottomLeft.x, bottomLeft.y, topRight.x, topRight.y, map.spatialReference);

Re: How to zoom to a non-Web Mercator extent?

StephenLead — Wed, 14 Aug 2013 13:30:54 GMT

Thanks Jakub,

This looks really promising. I'm a bit confused as to which file to include, though.

I downloaded the package from https://github.com/proj4js/proj4js - I assumed that I should add dist/proj4.js or dist/proj4.min.js

But when I use either file, the line new Proj4js.Proj is not recognised.

The user guide at http://trac.osgeo.org/proj4js/wiki/UserGuide seems a bit older (possibly out of date), and references:

// include the library
<script src="lib/proj4js-combined.js"></script>

but this file is no longer included in the package. The GitHub repo contains mention of grunt - is this a requirement?

Thanks for any advice,
Steve

EDIT: nevermind, I used the legacy code from http://trac.osgeo.org/proj4js/wiki/Download and it seems to work better

Re: How to zoom to a non-Web Mercator extent?

JasonZou — Wed, 14 Aug 2013 14:15:50 GMT

An alternative way is to use geometryService.project to reproject the extent in non-Web Mercator to Web Mercator, and use the result to zoom the map to in the callback function.

Re: How to zoom to a non-Web Mercator extent?

StephenLead — Thu, 15 Aug 2013 08:35:35 GMT

Thanks Jason, that looks a bit more robust as it removes the external dependencies.

If anyone from Esri is reading this, it would be nice if the map object could do this automatically - calling map.setExtent(non-web-mercator-extent) could conceivably handle this on-the-fly.

Re: How to zoom to a non-Web Mercator extent?

JohnGrayson — Sat, 11 Dec 2021 15:55:33 GMT

Stephen,
also, you don't need to use esri.request, just listen for the layer 'onLoad' event and then the initialExtent is a property of the layer. Using a geometry service to project the extent is the way to go.

<!DOCTYPE html>
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no">
    <title>Zoom to non-WM dynamic layer</title>
    <link rel="stylesheet" href="http://js.arcgis.com/3.6/js/esri/css/esri.css"/>
    <style>
      html, body, #mapDiv {
        padding: 0;
        margin: 0;
        height: 100%;
      }
    </style>
    <script src="http://js.arcgis.com/3.6/"></script>
    <script>
      dojo.require("esri.map");
      dojo.require("esri.tasks.geometry");
      var map;
      var url = "http://loczy.mfgi.hu/ArcGIS/rest/services/TJAM/surf_ujfalu_t/MapServer/"
      var gsUrl = "http://server.domain.com/arcgis/rest/services/Geometry/GeometryServer"; // url to your geometry service 

      function init(){

        map = new esri.Map("mapDiv",{basemap: "gray"});

        var dynamicMapServiceLayer = new esri.layers.ArcGISDynamicMapServiceLayer(url);
        dynamicMapServiceLayer.on('load',function(){

          var projectParams = new esri.tasks.ProjectParameters();
          projectParams.geometries = [dynamicMapServiceLayer.initialExtent];
          projectParams.outSR  = map.spatialReference;

          var gs = new esri.tasks.GeometryService(gsUrl);
          gs.project(projectParams).then(function(projectedGeometries){
            var initialExtentWM = projectedGeometries[0];
            map.setExtent(initialExtentWM);
          });

        });
        map.addLayer(dynamicMapServiceLayer);
      }

      dojo.ready(init);
    </script>
  </head>
  <body>
    <div id="mapDiv"></div>
  </body>
</html>

Re: How to zoom to a non-Web Mercator extent?

JasonZou — Thu, 15 Aug 2013 14:47:27 GMT

It took me quite a while to figure out that the layer properties will be populated when it's loaded. In addition, the documentation should also mention what properties are read-only, and what are read-write. For constructors, which parameters are required, and which are optional. These are the key info for developers to use the api properly. I couldn't remember how many times I spent lots of effort trying to figure out these simple things which should be documented. ESRI does need to improve the documentation.

Re: How to zoom to a non-Web Mercator extent?

JohnGravois — Thu, 15 Aug 2013 15:19:27 GMT

jason,

in the API reference optional parameters for contructors and methods are typically denoted with a '?'

i can't think of an occasion when i attempted to set a property on an object and found that it was 'read-only'. can you share an example?

Re: How to zoom to a non-Web Mercator extent?

JasonZou — Thu, 15 Aug 2013 16:06:27 GMT

Here is one example: featureLayer.maxRecordCount. I thought I can set the value, but turned out it's a value carried over from the map service. Actually there is no way to control the record count at the feature layer level. I am not sure if this property should exist in the api if its value cannot be set and be honored.

Re: How to zoom to a non-Web Mercator extent?

StephenLead — Thu, 15 Aug 2013 16:08:18 GMT

you don't need to use esri.request, just listen for the layer 'onLoad' event and then the initialExtent is a property of the layer.

Hi John,

I'm actually using esri.request to retrieve additional properties of the service (this is just a cut-down version for repro purposes) - but that's a good tip.

Cheers,
Steve

Re: How to zoom to a non-Web Mercator extent?

JohnGravois — Thu, 15 Aug 2013 16:49:35 GMT

@Jason.

thanks for the feedback. i took a look at the documentation for some other popular classes and it seems that in most other similar instances, the description makes it a little clearer when a property is determined by the service itself.

i'm under the impression that we don't denote "read-only" for properties in the API because the concept is not actually enforced, but i agree with you that providing additional information to developers regarding individual properties is warranted.

the only other potential candidate i have found so far is Layer.capabilities. can you think of any others for me to include in my request to the development team?

Re: How to zoom to a non-Web Mercator extent?

JasonZou — Thu, 15 Aug 2013 17:03:23 GMT

Thanks John for looking into this issue. To be honest, I am not good at documenting the issues I've experienced. I know maxRecordCount is a read-only property since we tried to control how many features can be returned at the feature layer level and failed. It cannot be even controlled at the map service level via JS api. The only way to control is to change the settings via ArcGIS Server Manager or ArcCatalog (maybe?). In general, I know Javascript allows modifying any property of an object. The only issue is whether JS API will honor the change or not. I can easily tell a property is read-write if there is a setter method for it. Otherwise, I will need to guess.

Re: How to zoom to a non-Web Mercator extent?

JohnGravois — Thu, 15 Aug 2013 17:15:57 GMT

you are correct. maxRecordCount is a property set at the map service level at the time of publishing.

i found a couple other properties whose description seems to be a little ambiguous about the fact that the property is determined by the service itself. if anyone else was confused by another one. id love to hear about it.

FeatureLayer.hasAttachments
FeatureLayer.hasAttributionData
FeatureLayer.supportsStatistics
FeatureLayer.supportsAdvancedQueries