Esri/ArcGIS basemap

This example shows the usage of Ogma geo mode with Esri/ArcGIS services. This is done using the esri-leaflet adapter. Note the libraries and .css files that have to be included. Also check out our tutorial on how to integrate Ogma geo mode and esri services in your project.
          <!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>
  <!-- Load Esri Leaflet from CDN -->
  <script src="https://unpkg.com/esri-leaflet@2.3.0/dist/esri-leaflet.js" crossorigin=""></script>
  <script src="../build/ogma.min.js"></script>
  <style>
    html,
    body {
      margin: 0;
    }

    #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);
    }

    .control-bar {
      font-family: Helvetica, Arial, sans-serif;
      box-shadow: 0 1px 5px rgba(0, 0, 0, 0.65);
      border-radius: 4px;
      background: white;
      padding: 5px 10px;
    }

    #controls {
      position: absolute;
      top: 10px;
      right: 10px;
      z-index: 9999;
    }

    #controls label span {
      line-height: 24px;
    }
  </style>
</head>

<body>
  <div id="graph-container"></div>
  <div class="control-bar" id="controls">
    <label>
      <span>Geo mode</span>
      <input type="checkbox" id="mode" checked />
    </label>
  </div>

  <script>
    'use strict';

    var graph = {
      nodes: [
        {
          id: 'Paris',
          data: { latitude: 48.858838, longitude: 2.343436 },
          attributes: { radius: 10, text: 'Paris', x: 0, y: 0 }
        }, {
          id: 'London',
          data: { latitude: 51.509615, longitude: -0.134514 },
          attributes: { radius: 10, text: 'London', x: 100, y: 0 }
        }, { // no geo coordinates in this one, it will be ignored
          id: 'Nowhere',
          attributes: { radius: 10, text: 'Nowhere', x: 100, y: 50 }
        }
      ],
      edges: [
        { id: 'Eurostar', source: 'Paris', target: 'London', attributes: { width: 5, text: 'Eurostar' } },
        { id: 'No road', source: 'Paris', target: 'Nowhere', attributes: { width: 5, text: 'No road' } }
      ]
    };

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

    function toggleGeo() {
      var esriLayer = L.esri.tiledMapLayer({
        url: "https://services.arcgisonline.com/ArcGIS/rest/services/World_Street_Map/MapServer",
        detectRetina: false,
        minZoom: 3,
        maxZoom: 10
      });
      return ogma.geo.toggle({
        tiles: esriLayer,
        duration: 1000
      });
    }

    document.querySelector('#mode').addEventListener('change', function (evt) {
      var checkbox = evt.target;
      checkbox.disabled = true;
      toggleGeo().then(function () {
        checkbox.disabled = false;
        checkbox.checked = ogma.geo.enabled();
      });
    });

    toggleGeo();

  </script>
</body>

</html>