Combine 2 basemap layers satellite and topo

[rsharma]

Hi

i want to know, how to combine 2 basemap layers to make a new one for satellite and topo, where i want topo to be on top of satellite, and i want to change color of the lines to red or any other color  for these kind of topo lines.

I got a link on older version Multiple Layers for 1 basemap . Do it work as my needs. bcz it include basemaplayer also

[VictorCoelho]

Hi Rajni, you can only have one basemap at a time, for your problem you'll need to find a non-tiled topo service and add it as an operational layer to your map.

[dotMorten_esri]

> you can only have one basemap at a time

True but you can add multiple layers to that basemap. So you'd first add the imagery to the baselayers, and then next add a layer that just has the contour lines on top. It doesn't have to be added as an operational layer (the split between operational and baselayers is really just about being able to easily switch basemaps without touching the operational layers)

[rsharma]

I didn't understand, can u please give me any example, As i do not use any feature layer, just having graphics layer.

Like you said i have a basemap of satellite for example, and i want those lines to be added, but i don't know how???

Also can i change color of topo lines???

I want to make new basemap satellite topo

This is my code below

 var  topoBtn =domConstruct.toDom("<div class='map-button esri-component esri-widget--button esri-widget topo mapbtncolor' role='button' title='topo'>TOPO<span aria-hidden='true' role='presentation'></span></div>") ;
          var satelliteBtn = domConstruct.toDom("<div class='map-button esri-component esri-widget--button esri-widget sat basmapcolor' id='satt'  role='button' title='sattelite'>SATELLITE<span aria-hidden='true' role='presentation'></span></div>");

 function setbasemap(basemap){
          webmap.basemap = basemap;
          }
          topoBtn.addEventListener('click', function(){
            setbasemap('topo');

});

satelliteBtn.addEventListener('click', function(){
            setbasemap('satellite');

  });

[VictorCoelho]

Hi,

Morten Nielsen is right and you can indeed combine two layer to create a custom basemap, here's a sample code:

require([

    "esri/basemaps",

    "esri/map",

    "dojo/domReady!"

  ], function (esriBasemaps, Map){

    esriBasemaps.Test = {

      baseMapLayers: [{url: "https://services.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer"}

      ,{url: "https://services.arcgisonline.com/ArcGIS/rest/services/Reference/World_Boundaries_and_Places/MapServer"}],

      thumbnailUrl: "https://www.example.com/images/thumbnail_2014-11-25_61051.png",

      title: "Test"

    };

    var map = new Map("map", {

      basemap: "Test",

      center: [-111.879655861, 40.571338776], // long, lat

      zoom: 13,

      sliderStyle: "small"

    });

});

[rsharma]

Hi Victor

I m working on 4.14 version i used your example and this link Basemap | ArcGIS API for JavaScript 4.15 

and created this code, but it doesn't work out. I don't know where i am gettig wrong. Can any one please help me out.

[VictorCoelho]

Hi,

I don't think it will work with the topo layer that you are using. You need to find a layer that just has the contour lines for the Topo, try your code with the following layers (you should see a label layer on top of a imagery one):

https://services.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer

https://services.arcgisonline.com/ArcGIS/rest/services/Reference/World_Boundaries_and_Places/MapServ...

[KenBuja]

Did you see this sample on creating a custom basemap for 4.x?