topic Re: Adding two tiled layers to the map Javascript API in ArcGIS JavaScript Maps SDK Questions

Adding two tiled layers to the map Javascript API

AlexGunko — Wed, 24 Jun 2015 13:30:43 GMT

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

Re: Adding two tiled layers to the map Javascript API

TimWitt2 — Wed, 24 Jun 2015 13:39:39 GMT

Alex,

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

Tim

Re: Adding two tiled layers to the map Javascript API

JohnFell — Sat, 11 Dec 2021 16:43:12 GMT

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"


}));

Re: Adding two tiled layers to the map Javascript API

AlexGunko — Wed, 24 Jun 2015 13:51:31 GMT

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

Re: Adding two tiled layers to the map Javascript API

RobertScheitlin__GISP — Sat, 11 Dec 2021 16:43:15 GMT

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>