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