•  14-10-2022
  •  | 
  •  

Question

I need to create a layout with a "menu" sort of thing on the left, and on the right load a the world map. In the left menu I will have a tree, with checkboxes on the leaves. Each leave is a tile that will be loaded on it's position when the checkbox is selected. Let's say on the tree I have as parents USA and Canada. Under USA I have New York Buildings, New York Streets, Washington Buildings, and under Canada something similar. When I check New York Buildings, I need to load that tile over the map and center the map to that tile. When I click New York Streets I need the other tile to be put over this first one(it will have transparency). And so on. The main idea is that I cannot center the map to the location of the tile. Haven't tried the rest, this is where I am stuck. My code:

@{
ViewBag.Title = "Map";
Layout = "~/Views/Shared/_Layout.cshtml";
}
<div id="mainWindow" 
     data-dojo-type="dijit.layout.BorderContainer" 
     data-dojo-props="design:'headline', gutters:false" 
     style="width:100%; height:100%;">
  <div id="header" 
       data-dojo-type="dijit.layout.ContentPane" data-dojo-props="region:'top'">

    This is the header section
   <div id="subheader">subheader</div>

  </div>
  <div data-dojo-type="dijit.layout.ContentPane" id="leftPane" data-dojo-props="region:'left'">
    <div data-dojo-type="dijit.layout.TabContainer">

      <div data-dojo-type="dijit.layout.ContentPane" data-dojo-props="title:'Legend', selected:true">
        <div id="legendDiv"></div>
      </div>

      <div data-dojo-type="dijit.layout.ContentPane" data-dojo-props="title:'Tab 2'" >
        Content for the second tab
      </div>

    </div>
  </div>

  <div id="map" data-dojo-type="dijit.layout.ContentPane" data-dojo-props="region:'center'"></div>

  <div id="footer" data-dojo-type="dijit.layout.ContentPane" data-dojo-props="region:'bottom'">
    this is the footer section
  </div> 
</div>
@section Head
{
<script type="text/javascript">
    var map;

    require(["esri/map", "esri/layers/ArcGISTiledMapServiceLayer", "dojo/domReady!"],
      function (Map, Tiled) {
          var tiled = new Tiled("http://xx.xxx.xx.xx:xxxx/arcgis/rest/services/USA/NewYork_tiles/MapServer");

          map = new Map("map", {
              basemap: "topo",
              center: [[-79.40, 43.64],
              zoom: 12
          });

          map.addLayer(tiled);
      }
    );
</script>
      }

        <!DOCTYPE html>
    <html>
    <head>
        <meta charset="utf-8" />
        <meta name="viewport" content="width=device-width" />
        <title>@ViewBag.Title</title>



<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></title>
    <link rel="stylesheet" href="http://js.arcgis.com/3.8/js/esri/css/esri.css">
    <style>
      html, body, #map {
        height: 100%; width: 100%; margin: 0; padding: 0; 
      }
</style>

<script src="http://js.arcgis.com/3.8/"></script>

@RenderSection("Head", false)
@Styles.Render("~/Content/css")
@Scripts.Render("~/bundles/modernizr")
</head>
<body class="claro">
    @RenderBody()

@Scripts.Render("~/bundles/jquery")
@RenderSection("scripts", required: false)
</body>
</html>

this is how I found that one centers the map. But I would like to center it to the loaded tile. Also, can the folder structure with the tiles (http://xx.xxx.xx.xx:xxxx/arcgis/rest/services) loaded in a tree?

Was it helpful?

Solution

The map object has several methods for displaying a particular view, be it centring on a MapPoint or other geometry. For example, you could use Map.centerAt(mapPoint) if you had a map point. What you want to do is centre on the extent of the tiled map service you've loaded so you can use map.setExtent(extent, fit) passing it the extent of the tiled service and the Boolean fit if you want it to zoom as required to fit the whole extent. You can get the extent of the tiled service using TiledMapServiceLayer.fullExtent property. For example:

map.setExtent(tiled.fullExtent, true);

You can subsequently put this into your check box event function so that every time it's checked it zooms to the extent (if that's how you want it to behave, another option might be to have the checkbox click event just toggle the layers visibility but then have a 'goto' button next to it that zooms to it).

You can check out more documentiontation for the map object and all of the ArcGIS API here: https://developers.arcgis.com/javascript/jsapi/map-amd.html

Hope this helps.

Edit: As per your comment, trying to access the fullExtent property straight after the call to load the layer doesn't work because addLayer is asynchronous and so execution returns before the layer is loaded. To set the extent straight as soon as the layer is loaded, you need to register a function to run when the layers onLoad event is raised. The following code should achieve this:

var tiled = new Tiled("http://xx.xxx.xx.xx:xxxx/arcgis/rest/services/USA/NewYork_tiles/MapServer");
tiled.on("load", displayLayerExtent);
map.addLayer(tiled);

function displayLayerExtent(evt) {
    map.setExtent(evt.layer.fullExtent, true);
}
Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top