Skip to content
  1. Examples

Dynamic geo base maps

This example shows how to use different base map providers in the geo mode and switch between them on the fly.

js
import Ogma from '@linkurious/ogma';

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

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

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

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

const getSettings = url => {
  const type = getType(url);

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

  return { tiles: tiles };
};

document.getElementById('basemaps').addEventListener('change', evt => {
  ogma.geo.setOptions(getSettings(evt.target.value));
});

ogma.geo.enable(getSettings(document.getElementById('basemaps').value));
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>

  <link type="text/css" rel="stylesheet" href="styles.css">
</head>

<body>
  <div id="graph-container"></div>
  <div id="basemaps-wrapper" class="control-bar">
    <select name="basemaps" id="basemaps">
      <optgroup label="OSM">
        </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.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 src="index.js"></script>
</body>

</html>
css
#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;
}