Appearance
Geo mode + Heatmap
This example shows how to use the heatmap mode in combination with geo mode. It uses Leaflet.heat to create a heatmap layer.
ts
import Ogma from '@linkurious/ogma';
import L from 'leaflet';
import { heatLayer } from '@linkurious/leaflet-heat';
Ogma.libraries['leaflet'] = L;
let ogma = new Ogma({
container: 'graph-container'
});
const addressPoints = await fetch('./data.json').then(res => res.json());
const graph = await Ogma.parse.jsonFromUrl('./graph.json');
await ogma.setGraph(graph);
await toggleGeo();
async function toggleGeo() {
await ogma.geo.toggle({
disableNodeDragging: false,
duration: 0
});
if (ogma.geo.enabled()) {
const heat = heatLayer(addressPoints.map(p => [p[0], p[1]])).addTo(
ogma.geo.getMap()
);
return ogma.geo.setZoom(12);
}
}
let modeCheckbox = document.querySelector<HTMLInputElement>('#mode')!;
modeCheckbox.addEventListener('change', async evt => {
modeCheckbox.disabled = true;
await toggleGeo();
modeCheckbox.disabled = false;
modeCheckbox.checked = ogma.geo.enabled();
});html
<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.7.1/leaflet.css"
/>
<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.ts"></script>
</body>
</html>css
html,
body {
margin: 0;
}
#graph-container {
top: 0;
bottom: 0;
left: 0;
right: 0;
position: absolute;
margin: 0;
overflow: hidden;
}
.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;
}json
{
"dependencies": {
"leaflet": "^1.9.0",
"@linkurious/leaflet-heat": "^0.2.3"
}
}json
[
[
-37.8839,
175.3745188667,
"571"
],
[
-37.8869090667,
175.3657417333,
"486"
],
[
-37.8894207167,
175.4015351167,
"807"
],
[
-37.8927369333,
175.4087452333,
"899"
],
[
-37.90585105,
175.4453463833,
"1273"
],
[
-37.9064188833,
175.4441556833,
"1258"
],
[
-37.90584715,
175.4463564333,
"1279"
],
[
-37.9033391333,
175.4244005667,
"1078"
],
[
-37.9061991333,
175.4492620333,
"1309"
],
[
-37.9058955167,
175.4445613167,
"1261"
],
[
-37.88888045,
175.39146475,
"734"
],
[
-37.8950811333,
175.41079175,
"928"
],
[
-37.88909235,
175.3922956333,
"740"
],
[
-37.8889259667,
175.3938591667,
"759"
],
[
-37.8876576333,
175.3859563833,
"687"
],
[
-37.89027155,
175.3973178833,
"778"
],
[
-37.8864473667,
175.3806136833,
"631"
],
[
-37.9000262833,
175.4183242167,
"1012"
],
[
-37.90036495,
175.4189457,
"1024"
],
[
-37.9000976833,
175.4197312167,
"1027"
],
[
-37.90239975,
175.42371165,
"1067"
],
[
-37.9043379667,
175.42430325,
"1080"
],
[
-37.9026441,
175.4231055167,
"1068"
],
[
-37.8883536333,
175.3888573833,
"718"
],
[
-37.9029948833,
175.4237386167,
"1070"
],
[
-37.89824135,
175.4150421667,
"982"
],
[
-37.8976067833,
175.41510265,
"983"
],
[
-37.9023491333,
175.4225495,
"1066"
],
[
-37.8856157167,
175.3775632833,
"608"
],
[
-37.8963032667,
175.4132068,
"951"
],
[
-37.8922813667,
175.4073402333,
"1/898"
],
[
-37.88933345,
175.3956084333,
"769"
],
[
-37.8936148833,
175.4090577,
"906"
],
[
-37.8939398,
175.4094444833,
"914"
],
[
-37.8857355333,
175.3722297667,
"542"
],
[
-37.8931092167,
175.4083014,
"898"
],
[
-37.9008253167,
175.4198128,
"1030"
],
[
-37.9045052333,
175.4260735,
"1100"
],
[
-37.9053927167,
175.42822265,
"1130"
],
[
-37.90507935,
175.4313065,
"1147"
],
[
-37.9055749667,
175.4319092167,
"1154"
],
[
-37.9039034833,
175.4274736667,
"1/1105"
],
[
-37.9037633,
175.4261181833,
"1093"
],
[
-37.9038755,
175.42871045,
"3/1105"
],
[
-37.90369555,
175.4285285,
"2/1105"
],
[
-37.9056626,
175.4341078833,
"1170"
],
[
-37.9018736833,
175.438852,
"1/1213"
],
[
-37.9057596167,
175.4356650167,
"1180"
],
[
-37.9053502,
175.4361049333,
"1185"
],
[
-37.9053379167,
175.4366986167,
"1195"
],
[
-37.9058892333,
175.4381450333,
"1204"
],
[
-37.9060264167,
175.4400763167,
"1220"
],
[
-37.9056766833,
175.4412592,
"1233"
],
[
-37.9057312167,
175.4418380333,
"1235"
],
[
-37.9061575833,
175.4421068667,
"1242"
],
[
-37.9063946167,
175.4438004667,
"1256"
],
[
-37.8996027667,
175.43995055,
"4/1215"
],
[
-37.9006449667,
175.4395556833,
"3/1215"
],
[
-37.9009138167,
175.4394061333,
"2/1215"
],
[
-37.9034547,
175.4396315,
"1219"
],
[
-37.9055243,
175.4396033,
"1221"
],
[
-37.89952325,
175.4406619167,
"5/1215"
],
[
-37.90561525,
175.4404853167,
"1225"
],
[
-37.9045602333,
175.4477690333,
"1285"
],
[
-37.9040051667,
175.4388491833,
"1213"
],
[
-37.90588145,
175.4440349167,
"1257"
],
[
-37.90595915,
175.4389286833,
"1212"
],
[
-37.9059939667,
175.4398068833,
"1218"
],
[
-37.8868631833,
175.37991055,
"630"
],
[
-37.8878744833,
175.382179,
"650"
],
[
-37.8880764,
175.3839845667,
"670"
],
[
-37.8850457333,
175.3759821,
"594"
],
[
-37.88446045,
175.3762872667,
"587"
],
[
-37.8880782667,
175.38423415,
"1/670"
],
[
-37.8863533833,
175.3690698667,
"515"
],
[
-37.8861783167,
175.3710009833,
"530"
],
[
-37.885424,
175.3716677833,
"541"
],
[
-37.88524065,
175.3722141167,
"547"
],
[
-37.9022371333,
175.47991035,
"10"
],
[
-37.9020014833,
175.4799581667,
"1"
],
[
-37.9020824,
175.4802630167,
"2"
],
[
-37.9018589833,
175.4804760833,
"3"
],
[
-37.9018211333,
175.4806769667,
"4"
],
[
-37.9021543667,
175.4805538833,
"5"
],
[
-37.9022658,
175.4807579333,
"6"
],
[
-37.9024517833,
175.4806480667,
"7"
],
[
-37.9024251167,
175.48041985,
"8"
],
[
-37.9023317833,
175.4802119667,
"9"
],
[
-37.9321212167,
...json
{
"nodes": [
{
"id": "Point 1",
"data": {
"latitude": -37.887458688596475,
"longitude": 175.46383666992188
},
"attributes": {
"radius": 10,
"text": "Cambridge",
"x": 0,
"y": 0,
"color": "darkred"
}
},
{
"id": "Point 2",
"data": {
"latitude": -37.905630088673846,
"longitude": 175.47723007202148
},
"attributes": {
"radius": 10,
"text": "Leamington",
"x": 100,
"y": 0,
"color": "darkred"
}
},
{
"id": "Nowhere",
"attributes": { "radius": 10, "text": "Nowhere", "x": 100, "y": 50 }
}
],
"edges": [
{
"id": "Eurostar",
"source": "Point 1",
"target": "Point 2",
"attributes": { "width": 5, "color": "darkblue" }
},
{
"id": "No road",
"source": "Point 2",
"target": "Nowhere",
"attributes": { "width": 5, "text": "No road" }
}
]
}