All versions of this documentation
X

Dynamic geo base maps

You can use different base map providers and even switch between them on the fly.

Open in a new window.
          <!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <script src="../build/ogma.min.js"></script>
  <style>
    #graph-container { top: 0; bottom: 0; left: 0; right: 0; position: absolute; margin: 0; overflow: hidden; }

    .attribution {
      font-family: 'Helvetica Neue', Arial, Helvetica, sans-serif;
      font-size: 11px;
      padding: 1px 5px;
      background: rgba(255, 255, 255, 0.7);
    }

    #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}{retina}.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}{retina}.png?access_token={token}">Mapbox Streets</option>
      <option value="//{s}.tiles.mapbox.com/v4/mapbox.light/{z}/{x}/{y}{retina}.png?access_token={token}">Mapbox Light</option>
      <option value="//{s}.tiles.mapbox.com/v4/mapbox.satellite/{z}/{x}/{y}{retina}.png?access_token={token}">Mapbox Satellite</option>
    </optgroup>
    <optgroup label="Carto">
      <option value="//{s}.basemaps.cartocdn.com/light_all/{z}/{x}/{y}{retina}.png">Light</option>
      <option value="//{s}.basemaps.cartocdn.com/dark_all/{z}/{x}/{y}{retina}.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>
  </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 MAPBOX_TOKEN = 'pk.eyJ1IjoidzhyIiwiYSI6ImNpeGhwaXF1ejAwMHQydG8yZ3pyanZ5aTkifQ.QNScWNGnLRHIHXeAsGMvyw';
  var ATTRIBUTIONS = {
    MAPBOX: '<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:   'Tiles © Esri — Source: Esri, i-cubed, USDA, USGS, AEX, GeoEye, Getmapping, Aerogrid, IGN, IGP, UPR-EGP, and the GIS User Community',
    OSM:    '<a href="https://openstreetmap.org/about/" target="_blank">&copy; OpenStreetMap</a>',
    CARTO:  '&copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>, &copy; <a href="https://carto.com/attribution">CARTO</a>'
  };

  function getSettings(type) {
    var attribution;

    // Get 512x512 tiles if available for this provider
    type = type.replace('{retina}', window.devicePixelRatio === 2 ? '@2x' : '');

    // Replace token string for services like Mapbox
    if (/mapbox/i.test(type)) type = type.replace('{token}', MAPBOX_TOKEN);

    // Supply attribution string. Note: some providers require attribution
    // to be requested individually per bounding box
    if (/mapbox/i.test(type)) {
      attribution = ATTRIBUTIONS.MAPBOX;
    } else if (/arcgis/i.test(type)) {
      attribution = ATTRIBUTIONS.ESRI;
    } else if (/carto/i.test(type)) {
      attribution = ATTRIBUTIONS.CARTO;
    } else {
      attribution = ATTRIBUTIONS.OSM;
    }
    attribution = '<div class="attribution">' + attribution + '</div>';

    return {
      tileUrlTemplate: type, // indicates from which server the tiles must be retrieved
      attribution: attribution
    };
  }

  function setMap (type) {
    var attribution;

    // Get 512x512 tiles if available for this provider
    type = type.replace('{retina}', window.devicePixelRatio === 2 ? '@2x' : '');

    // Replace token string for services like Mapbox
    if (/mapbox/i.test(type)) type = type.replace('{token}', MAPBOX_TOKEN);

    // Supply attribution string. Note: some providers require attribution
    // to be requested individually per bounding box
    if (/mapbox/i.test(type)) {
      attribution = ATTRIBUTIONS.MAPBOX;
    } else if (/arcgis/i.test(type)) {
      attribution = ATTRIBUTIONS.ESRI;
    } else if (/carto/i.test(type)) {
      attribution = ATTRIBUTIONS.CARTO;
    } else {
      attribution = ATTRIBUTIONS.OSM;
    }
    attribution = '<div class="attribution">' + attribution + '</div>';
    ogma.geo.setOptions({
      tileUrlTemplate: type, // indicates from which server the tiles must be retrieved
      attribution: attribution
    });
  }

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

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