Dynamic geo base maps

You can use different base map providers and even switch between them on the fly.
          <!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.5.1/leaflet.css" />
  <script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.5.1/leaflet.js"></script>
  <script src="../build/ogma.min.js"></script>
  <style>
    #graph-container {
      top: 0;
      bottom: 0;
      left: 0;
      right: 0;
      position: absolute;
      margin: 0;
      overflow: hidden;
    }

    #basemaps-wrapper {
      position: absolute;
      top: 10px;
      right: 10px;
      z-index: 400;
      background: white;
      padding: 10px;
    }

    .control-bar {
      font-family: Helvetica, Arial, sans-serif;
      box-shadow: 0 1px 5px rgba(0, 0, 0, 0.65);
      border-radius: 4px;
    }
  </style>
</head>

<body>
  <div id="graph-container"></div>
  <div id="basemaps-wrapper" class="control-bar">
    <select name="basemaps" id="basemaps" onChange="changeBasemap(basemaps)">
      <optgroup label="OSM">
        <option value="https://maps.wikimedia.org/osm-intl/{z}/{x}/{y}{r}.png">Wikimedia Streets</option>
        <option value="//{s}.tile.openstreetmap.org/{z}/{x}/{y}.png">OSM Standard</option>
      </optgroup>
      <optgroup label="MapBox">
        <option value="//{s}.tiles.mapbox.com/v4/mapbox.streets/{z}/{x}/{y}{r}.png?access_token={token}">Mapbox
          Streets</option>
        <option value="//{s}.tiles.mapbox.com/v4/mapbox.light/{z}/{x}/{y}{r}.png?access_token={token}">Mapbox Light
        </option>
        <option value="//{s}.tiles.mapbox.com/v4/mapbox.satellite/{z}/{x}/{y}{r}.png?access_token={token}">Mapbox
          Satellite</option>
      </optgroup>
      <optgroup label="Carto">
        <option value="//{s}.basemaps.cartocdn.com/light_all/{z}/{x}/{y}{r}.png">Light</option>
        <option value="//{s}.basemaps.cartocdn.com/dark_all/{z}/{x}/{y}{r}.png">Dark</option>
      </optgroup>
      <optgroup label="Esri">
        <option value="//server.arcgisonline.com/ArcGIS/rest/services/World_Street_Map/MapServer/tile/{z}/{y}/{x}">Esri
          World Street Map</option>
        <option value="//server.arcgisonline.com/ArcGIS/rest/services/World_Topo_Map/MapServer/tile/{z}/{y}/{x}">Esri
          World Topo Map</option>
        <option value="//server.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}">Esri
          World Imagery</option>
      </optgroup>
      <optgroup label="WMS-Custom parameters">
        <option value="//ows.mundialis.de/services/service?">Mundialis Topographic WMS</option>
        <option
          value="//map1.vis.earthdata.nasa.gov/wmts-webmerc/VIIRS_CityLights_2012/default/{time}/{tilematrixset}{maxZoom}/{z}/{y}/{x}.{format}">
          Night view from NASA</option>
      </optgroup>
    </select>
  </div>

  <script>
    'use strict';

    var graph = {
      nodes: [
        { id: 'Paris', data: { latitude: 48.858838, longitude: 2.343436 }, attributes: { x: 0, y: 0, text: 'Paris', radius: 10 } },
        { id: 'London', data: { latitude: 51.509615, longitude: -0.134514 }, attributes: { x: 100, y: 0, text: 'London', radius: 10 } }
      ],
      edges: [
        { id: 'Eurostar', source: 'Paris', target: 'London', attributes: { width: 5, text: 'Eurostar' } }
      ]
    };

    var ogma = new Ogma({
      graph: graph,
      container: 'graph-container'
    });

    var BASEMAPS = {
      MAPBOX: {
        token: 'pk.eyJ1IjoidzhyIiwiYSI6ImNpeGhwaXF1ejAwMHQydG8yZ3pyanZ5aTkifQ.QNScWNGnLRHIHXeAsGMvyw',
        attribution: '<a href="https://www.mapbox.com/about/maps/" target="_blank">&copy; Mapbox</a><a href="https://openstreetmap.org/about/" target="_blank">&copy; OpenStreetMap</a>',
      },
      ESRI: {
        attribution: 'Tiles © Esri — Source: Esri, i-cubed, USDA, USGS, AEX, GeoEye, Getmapping, Aerogrid, IGN, IGP, UPR-EGP, and the GIS User Community',
      },
      OSM: {
        attribution: '<a href="https://openstreetmap.org/about/" target="_blank">&copy; OpenStreetMap</a>',
      },
      CARTO: {
        attribution: '&copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>, &copy; <a href="https://carto.com/attribution">CARTO</a>'
      },
      MUNDIALIS: {
        attribution: 'Aster DEM',
        layers: 'TOPO-WMS',
        wms: true
      },
      NIGHT: {
        attribution: 'Imagery provided by services from the Global Imagery Browse Services (GIBS), operated by the NASA/GSFC/Earth Science Data and Information System (<a href="https://earthdata.nasa.gov">ESDIS</a>) with funding provided by NASA/HQ.',
        minZoom: 1,
        maxZoom: 8,
        format: 'jpg',
        time: '',
        tilematrixset: 'GoogleMapsCompatible_Level'
      }
    };

    function getType(value) {
      if (/mapbox/i.test(value)) {
        return 'MAPBOX';
      }
      if (/arcgis/i.test(value)) {
        return 'ESRI';
      }
      if (/carto/i.test(value)) {
        return 'CARTO';
      }
      if (/mundialis/i.test(value)) {
        return 'MUNDIALIS';
      }
      if (/nasa/i.test(value)) {
        return 'NIGHT';
      }
      return 'OSM';
    }

    function getSettings(url) {
      var type = getType(url);

      var tiles = BASEMAPS[type];
      tiles.url = url;

      return { tiles: tiles };
    }

    function changeBasemap(evt) {
      ogma.geo.setOptions(getSettings(evt.value))
    }

    ogma.geo.enable(getSettings(document.getElementById('basemaps').value));
  </script>
</body>

</html>