Here’s a quick sample that demonstrates adding a custom basemap with some additional layers in the Esri Javascript 4.x API.

Check out Demo Link and view the code for the demo app on github

In this example, I’m using the new Firefly Basemap created by John Nelson at Esri. This new basemap, along with some great techniques he has blogged about demonstrate some pretty cool custom mapping options.

Normal Esri Basemap Snippet

  var map = new Map({
  basemap: "streets"
        });

  var view = new MapView({
  container: "viewDiv",
  map: map,
  zoom: 4,
  center: [-98, 38]
  });

Custom Basemap Snippet

var map = new Map();

var layer = new TileLayer({
    url: "https://servicesbeta.arcgisonline.com/arcgis/rest/services/Firefly_World_Imagery/MapServer"
});
map.add(layer);

var view = new MapView({
    container: "viewDiv",
    map: map,
    zoom: 4,
    center: [-98, 38]
});

view.constraints = {
    minZoom: 3,
    maxZoom: 5
};

Remember to load your requires and functions before!

require([
    "esri/Map",
    "esri/layers/TileLayer",
    "esri/views/MapView",

    ...
    ..
    .

    ], function(Map, TileLayer, MapView,    

The steps above will allow you to control and style your layers individually in your code, but you could definitely add the basemap and layers in an AGOL map and reference the id using this sample.