nav[aria-label="Primary Navigation"] { padding: 0; & ul { list-style: none; width: 100%; display: flex; flex-direction: row; justify-content: start; align-items: start; gap: 30px; padding: 0; & li { margin: 0; } & ul li { list-style: none; } } }

Combine 2 basemap layers satellite and topo

rsharma

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

Find more posts tagged with

Accepted answers

All comments

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.

SomeGISGuy

> 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"

});

Join the Conversation

Signed in members can post, follow updates, and more. New here? Register a free account.

Quick Links

Community Help
Find useful guides, FAQs, and documents to help you navigate and make the most of Esri Community.