Combine 2 basemap layers satellite and topo

380
7
04-29-2020 03:26 AM
rsharma
Occasional Contributor III

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

0 Kudos
7 Replies
VictorCoelho
New Contributor III

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
Esri Frequent Contributor

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
Occasional Contributor III

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');

  });

0 Kudos
VictorCoelho
New Contributor III

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 (esriBasemapsMap){
    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.87965586140.571338776], // long, lat
      zoom: 13,
      sliderStyle: "small"
    });
});
rsharma
Occasional Contributor III

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.

0 Kudos
VictorCoelho
New Contributor III

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):

0 Kudos
KenBuja
MVP Honored Contributor

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