Search code examples
javascriptzoomingcenterarcgisarcgis-js-api

ArcGIS API - Cannot center or zoom


So, I am using the ARCGIS api in order to show some old maps, that should start center at and zoomed in to a certain city. After finally figuring out how to use the specific map I want as a basemap, I've struggled for a couple of hours trying to zoom and center at the right place. I am able to zoom in to this place using a default basemap (e.g. "streets"), but not using my custom basemap. I've tried both map.centerAndZoom and map.centerAt, but neither seem to work. The relevant code:

var map;
    require(["esri/map", "esri/layers/ArcGISTiledMapServiceLayer", "dojo/on", "dojo/_base/json", "dojo/dom-style", "esri/request", "esri/geometry/Point", "esri/dijit/Search", "esri/dijit/LocateButton", "esri/tasks/GeometryService", "esri/tasks/locator", "esri/tasks/ProjectParameters", "esri/symbols/PictureMarkerSymbol", "dojo/domReady!"],
    function(Map, ArcGISTiledMapServiceLayer) {
        map = new Map("venster_Midden_2_Map");
        var customBasemap = new ArcGISTiledMapServiceLayer(
        "http://tiles.arcgis.com/tiles/nSZVuSZjHpEZZbRo/arcgis/rest/services/Historische_tijdreis_1815/MapServer");
        map.addLayer(customBasemap);
        map.centerAndZoom(51.1, 4.3, 0);
    });

Does anyone have a clue on how to get the zoom and center working? Or might it be the case that certain maps simply don't allow such operations?


Solution

  • centerAndZoom is more intended for events, like when a user has chosen a certain city from a list and would like the map to automatically zoom to it. As richj points out, it also requires a point, and a zoom level of zero won't work.

    If you don't want any of the Esri basemaps at all, just leave that out when initially creating the map. Slightly modifying this Tiled Map Service sample:

      require(["esri/map", "esri/layers/ArcGISTiledMapServiceLayer", "dojo/domReady!"],
        function(Map, Tiled) {
          map = new Map("map", {zoom: 3});
    
          var tiled = new Tiled("http://tiles.arcgis.com/tiles/nSZVuSZjHpEZZbRo/arcgis/rest/services/Historische_tijdreis_1815/MapServer");
          map.addLayer(tiled);
        }
      );
    

    Then, you will be able to include centerAndZoom as a response to an event (e.g. after the Tiled layer has been fully loaded from its web source).

      require(["esri/map",
               "esri/layers/ArcGISTiledMapServiceLayer",
               "esri/geometry/Point",
               "esri/SpatialReference",
               "dojo/domReady!"],
        function(Map, Tiled, Point, SpatRef) {
          map = new Map("map", {zoom: 3});
    
          var tiled = new Tiled("http://tiles.arcgis.com/tiles/nSZVuSZjHpEZZbRo/arcgis/rest/services/Historische_tijdreis_1815/MapServer");
          map.addLayer(tiled);
    
          var cityCenter = new Point(121000, 495000, new SpatRef({ wkid: 28992 }));
          tiled.on("load",function(evt) {
            map.centerAndZoom(cityCenter, 6);
          });
        });
    

    Ref. Point constructor, centerAndZoom method, and Working with events.