Appearance
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">© Mapbox</a><a href="https://openstreetmap.org/about/" target="_blank">© 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">© OpenStreetMap</a>'
},
CARTO: {
attribution:
'© <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>, © <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;
}