Appearance

  2. Examples

Esri/ArcGIS basemap ​

geointegrations

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.

js
import Ogma from '@linkurious/ogma';

const 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' }
    }
  ]
};

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

const toggleGeo = () => {
  const 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', evt => {
  const checkbox = evt.target;
  checkbox.disabled = true;
  toggleGeo().then(() => {
    checkbox.disabled = false;
    checkbox.checked = ogma.geo.enabled();
  });
});

toggleGeo();
html
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <link
      rel="stylesheet"
      href="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.9.3/leaflet.css"
    />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.9.3/leaflet.js"></script>
    <!-- Load Esri Leaflet from CDN -->
    <script
      src="https://cdn.jsdelivr.net/npm/esri-leaflet@2.3.0/dist/esri-leaflet.js"
      crossorigin=""
    ></script>

    <link type="text/css" rel="stylesheet" href="styles.css" />
  </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 src="index.js"></script>
  </body>
</html>
css
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;
}