Appearance

  2. Examples

Dynamic geo base maps ​

geointegrations

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