Adding two tiled layers to the map Javascript API

AlexGunko · ‎06-24-2015

Hey,

I'm trying to add 2 tiled layers to my map and the map shows only the first.

However when I tried the same thing in SIlverlight API it works just fine!

I tried to search over the internet for solutions and I have found none.

Any solution please? Thanks!

P.S

I consume the layers from a third party source so unfortunately I don't have access to the data

TimWitt2 · ‎06-24-2015

Alex,

it would help if you show us the part of the code where you create and add the layers.

Tim

AlexGunko · ‎06-24-2015

var map = new Map("map", { slider: false, infoWindow: popup, extent: new Extent({..., spatialReference: { wkid: 4326 }});

var tiled1 = new ArcGISTiledMapServiceLayer("someUrl");

tiled1.id = "someID";

var tiled2 = new ArcGISTiledMapServiceLayer("someUrl");

tiled2.id = "someID";

map.addLayer(tiled1);

map.addLayer(tiled2);

Sorry this is a little taste of my code, I can't expose it publicly

JohnFell · ‎06-24-2015

Alex,

I have done this using a basemap with two tiled map services within a basemap gallery. Although, I am still new to the arcgis javascript api, this does work for us.

basemapGallery=new BasemapGallery({
   showArcGISBasemaps: false,
   map: map
},"basemapGallery");

basemapGallery.startup();

basemapGallery.on("error",function(msg)
  {
     console.log("basemap gallery error:  ",msg);
   });

// add basemap to gallery for aerial imagery hybrid
basemapGallery.add(new esri.dijit.Basemap({
    layers: [
        new esri.dijit.BasemapLayer({
            "url": "World_Imagery (MapServer) "
        }),
        new esri.dijit.BasemapLayer({
            "url": "https://services.arcgisonline.com/ArcGIS/rest/services/Reference/World_Transportation/MapServer"
        })
    ],
    title: "Imagery Hybrid",
    thumbnailUrl: "images/imagery_labels.jpg"


}));

RobertScheitlin__GISP · ‎06-27-2015

Alex,

Here is a sample that shows adding two tiled services to the map. As long as both services are the same WKID and are cached at the same LODs then it will work fine.

<!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>Simple Map</title>
    <link rel="stylesheet" href="http://js.arcgis.com/3.13/esri/css/esri.css">
    <style>
      html, body, #map {
        height: 100%;
        width: 100%;
        margin: 0;
        padding: 0;
      }
      body {
        background-color: #FFF;
        overflow: hidden;
        font-family: "Trebuchet MS";
      }
    </style>
    <script src="http://js.arcgis.com/3.13/"></script>
    <script>
      var map;

      require([
        "esri/map",
        "esri/layers/ArcGISTiledMapServiceLayer",
        "dojo/domReady!"
      ], function(
        Map,
        ArcGISTiledMapServiceLayer
      ) {
        map = new Map("map", {
          center: [-122.45, 37.75], // longitude, latitude
          zoom: 4
        });

        var agoServiceURL = "http://server.arcgisonline.com/arcgis/rest/services/World_Street_Map/MapServer";
        var agoLayer = new ArcGISTiledMapServiceLayer(agoServiceURL);
        map.addLayer(agoLayer);

        var wtServiceURL = "http://sampleserver6.arcgisonline.com/arcgis/rest/services/WorldTimeZones/MapServer";
        var wtLayer = new ArcGISTiledMapServiceLayer(wtServiceURL);
        map.addLayers([agoLayer,wtLayer]);
      });
    </script>
  </head>

  <body>
    <div id="map"></div>
  </body>
</html>