Appearance
RTL support
This example shows how to display Right to Left texts in Ogma. RTL support requires the mapbox-gl-rtl-text library. Tutorial on how to include optional dependencies here.
ts
import Ogma from '@linkurious/ogma';
// graph with mixed RTL and LTR text labels
const graph = {
nodes: [
{ id: 0, attributes: { text: 'Arabic - العَرَبِيَّة', radius: 12 } },
{ id: 1, attributes: { text: 'Maghrebi group', radius: 8 } },
{ id: 2, attributes: { text: 'Moroccan Arabic (الدارجة - darija)' } },
{ id: 3, attributes: { text: 'Tunisian Arabic (تونسي - tūnsī)' } },
{ id: 4, attributes: { text: 'Algerian Arabic (دارجة - darja)' } },
{ id: 5, attributes: { text: 'Libyan Arabic ( ليبي - lībi)' } },
{ id: 6, attributes: { text: 'Hassaniya Arabic' } },
{ id: 7, attributes: { text: 'Saharan Arabic' } },
{ id: 8, attributes: { text: 'Sudanese group', radius: 8 } },
{ id: 9, attributes: { text: 'Sudanese Arabic (سوداني - sūdānī)' } },
{ id: 10, attributes: { text: 'Chadian Arabic' } },
{ id: 11, attributes: { text: 'Juba Arabic' } },
{ id: 12, attributes: { text: 'Egyptian group', radius: 8 } },
{ id: 13, attributes: { text: 'Egyptian Arabic (مصرى - maṣri)' } },
{ id: 14, attributes: { text: "Sa'idi Arabic (صعيدى - ṣaʿīdi)" } },
{ id: 15, attributes: { text: 'Arabian Peninsula group', radius: 8 } },
{ id: 16, attributes: { text: 'Bahrani Arabic' } },
{ id: 17, attributes: { text: 'Bareqi Arabic' } },
{ id: 18, attributes: { text: 'Gulf Arabic (خليجي - ḵalījī)' } },
{ id: 19, attributes: { text: 'Najdi Arabic (نجدي - najdi)' } },
{ id: 20, attributes: { text: 'Omani Arabic (عماني - ʿumāni)' } },
{ id: 21, attributes: { text: 'Hejazi Arabic (حجازي - ḥijāzi)' } },
{ id: 22, attributes: { text: 'Hadhrami Arabic (حضرمي - ḥaḍrami)' } },
{ id: 23, attributes: { text: 'Shihhi Arabic' } },
{ id: 24, attributes: { text: 'Dhofari Arabic' } },
{ id: 25, attributes: { text: 'Yemeni Arabic (يمني - yamani)' } },
{ id: 26, attributes: { text: 'Tihamiyya Arabic' } },
{ id: 27, attributes: { text: 'Mesopotamian group', radius: 8 } },
{ id: 28, attributes: { text: 'Mesopotamian Arabic' } },
{
id: 29,
attributes: { text: 'North Mesopotamian Arabic (Moslawi/Qeltu)' }
},
{ id: 30, attributes: { text: 'Levantine group', radius: 8 } },
{ id: 31, attributes: { text: 'Levantine Arabic (شامي - šāmi)' } },
{ id: 32, attributes: { text: 'Syrian Arabic' } },
{ id: 33, attributes: { text: 'Cypriot Maronite Arabic' } },
{ id: 34, attributes: { text: 'Lebanese Arabic (لبناني - libnēni)' } },
{ id: 35, attributes: { text: 'Jordanian Arabic (أردني - urduni)' } },
{
id: 36,
attributes: { text: 'Palestinian Arabic (فلسطيني - falasṭīni)' }
},
{ id: 37, attributes: { text: 'Bedawi Arabic (بدوي - badawi/bdiwi)' } },
{ id: 38, attributes: { text: 'Andalusian group', radius: 8 } }
],
edges: [
{ source: 0, target: 1 },
{ source: 0, target: 8 },
{ source: 0, target: 12 },
{ source: 0, target: 15 },
{ source: 0, target: 27 },
{ source: 0, target: 30 },
{ source: 0, target: 38 },
{ source: 1, target: 2 },
{ source: 1, target: 3 },
{ source: 1, target: 4 },
{ source: 1, target: 5 },
{ source: 1, target: 6 },
{ source: 1, target: 7 },
{ source: 8, target: 9 },
{ source: 8, target: 10 },
{ source: 8, target: 11 },
{ source: 12, target: 13 },
{ source: 12, target: 14 },
{ source: 15, target: 16 },
{ source: 15, target: 17 },
{ source: 15, target: 18 },
{ source: 15, target: 19 },
{ source: 15, target: 20 },
{ source: 15, target: 21 },
{ source: 15, target: 22 },
{ source: 15, target: 23 },
{ source: 15, target: 24 },
{ source: 15, target: 25 },
{ source: 15, target: 26 },
{ source: 27, target: 28 },
{ source: 27, target: 29 },
{ source: 30, target: 31 },
{ source: 30, target: 32 },
{ source: 30, target: 33 },
{ source: 30, target: 34 },
{ source: 30, target: 35 },
{ source: 30, target: 36 },
{ source: 30, target: 37 }
]
};
const ogma = new Ogma({
graph: graph,
container: 'graph-container'
});
ogma.tools.brand.set(
'<span class="footnote">Data © <a href="https://en.wikipedia.org/wiki/Varieties_of_Arabic">Wikipedia</a></span>',
{ position: 'bottom-right' }
);
// do not hide labels
ogma.styles.addNodeRule({
text: {
//scaling: true,
//scale: 0.8,
minVisibleSize: 0,
position: 'right',
backgroundColor: 'white'
}
});
ogma.layouts
.hierarchical({
direction: 'LR',
levelDistance: 200,
nodeDistance: 20,
duration: 0
})
.then(() => {
return ogma.view.locateGraph({ padding: { right: 250 } });
});
html
<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<!-- use CDN to load the library for RTL support -->
<script src="https://cdn.jsdelivr.net/npm/@mapbox/mapbox-gl-rtl-text@0.2.1/index.js"></script>
<link type="text/css" rel="stylesheet" href="styles.css" />
</head>
<body>
<div id="graph-container"></div>
<script type="module" src="index.ts"></script>
</body>
</html>
css
.footnote {
font-family: Helvetica, Ariel, sans-serif;
font-size: 0.8em;
display: inline-block;
padding: 5px;
}
#graph-container {
top: 0;
bottom: 0;
left: 0;
right: 0;
position: absolute;
margin: 0;
overflow: hidden;
}