Skip to content

Instantly share code, notes, and snippets.

@1ec5

1ec5/index.html

Last active August 26, 2024 14:58
Show Gist options
  • Save 1ec5/e23e53fc5d1f7d860a82a381c5e77cca to your computer and use it in GitHub Desktop.
Save 1ec5/e23e53fc5d1f7d860a82a381c5e77cca to your computer and use it in GitHub Desktop.
Download ZIP
MapLibre GL JS complex text rendering demo
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<meta name="viewport" content="width=device-width"/>
<title></title>
<script type="text/javascript" src="./maplibre-gl-dev.js"></script>
<link rel="stylesheet" href="./maplibre-gl.css"/>
<style type="text/css">
body {
margin: 0;
padding: 0;
}
html, body, #map {
width: 100%;
height: 100%;
}
</style>
</head>
<body>
<div id="map"></div>
<script type="text/javascript">
maplibregl.setRTLTextPlugin(
'https://unpkg.com/@mapbox/mapbox-gl-rtl-text@0.2.3/mapbox-gl-rtl-text.min.js',
false
);
let map = new maplibregl.Map({
container: 'map',
hash: true,
"localIdeographFontFamily": "sans-serif",
style: {
version: 8,
glyphs: 'https://www.openhistoricalmap.org/map-styles/fonts/{fontstack}/{range}.pbf',
sources: {
point: {
type: 'geojson',
data: {
"type": "Feature",
"geometry": {
"type": "Point",
"coordinates": [0, 0]
},
"properties": {
"name_en": "abcde",
"name_ja": "あいうえお",
"name_zh": "阿衣乌唉哦𪚥",
"name_ko": "아이우",
"name_bn": "বাংলা বর্ণমালা বা লিপি",
"name_sa": "क्षि द्ध्र्य",
"name_vi": "Nhà Bè",
"name_vi-Hani": "茹𦨭",
"name_egy": "𓃰",
"name_und-Zyse": "🇦🇶 🦽👩🏽‍🦽",
"name_my": "နေပြည်တော် ဥတ္တရသီရိ ရန်ကုန် မန္တလေးတိုင်း",
"name_km": "បឹងទន្លេសាប",
"name_si": "ශ්‍රී ලංකාව",
"name_dv": "ކޮންގޯ (ދިމިޤްރާޠީ ޖުމްހޫރިއްޔާ)",
"name_ckb": "ھیندستان",
"name_ar": "ديربورن",
}
},
},
line: {
type: 'geojson',
data: {
"type": "FeatureCollection",
"features": [
{
"type": "Feature",
"properties": {
"name_as": "বাংগালোৰ",
"name_bn": "বেঙ্গালুরু",
"name_en": "Bengaluru",
"name_hi": "बेंगालुरू",
"name_kn": "ಬೆಂಗಳೂರು",
"name_ml": "ബെംഗളൂരു",
"name_mr": "बंगळूर",
"name_ta": "பெங்களூரு",
"name_te": "బెంగళూరు",
"name_my": "နေပြည်တော် ဥတ္တရသီရိ ရန်ကုန် မန္တလေးတိုင်း",
"name_km": "បឹងទន្លេសាប",
},
"geometry": {
"type": "Polygon",
"coordinates": [
[
[
15.508556234167116,
38.65461223427515
],
[
12.91618533464088,
38.533086925182445
],
[
10.369386791762732,
38.170897801403726
],
[
7.911250489330584,
37.57504517154547
],
[
5.580261287277247,
36.75668964212406
],
[
3.408802684012227,
35.7304791602892
],
[
1.4224030050179726,
34.51375559381378
],
[
-0.3603119885100135,
33.12574173309967
],
[
-1.9271069273004928,
31.586791410799275
],
[
-3.2712624345357417,
29.917756835988456
],
[
-4.390532290242028,
28.139497715267705
],
[
-5.286088308116945,
26.272532721817203
],
[
-5.961558750226224,
24.336817979571787
],
[
-6.422218638757453,
22.351629101996423
],
[
-6.674353565063194,
20.33552108446206
],
[
-6.724794309234385,
18.306341780580755
],
[
-6.580606056024191,
16.281277925727142
],
[
-6.248910220313924,
14.276916417038606
],
[
-5.736815902838026,
12.309307084263022
],
[
-5.0514394188501415,
10.394016175442848
],
[
-4.199992541679002,
8.546162195091357
],
[
-3.189922080284193,
6.780427686534619
],
[
-2.0290846576036983,
5.111042235602698
],
[
-0.7259409327651817,
3.5517336008847487
],
[
0.7102468482099399,
2.115645637684904
],
[
2.2692308225573745,
0.8152237168479365
],
[
3.9396244272560836,
-0.33792930095168466
],
[
5.708797465103204,
-1.3332208500879303
],
[
7.56283486169337,
-2.1612518193704524
],
[
9.486571060468322,
-2.8140042442881206
],
[
11.463706304864688,
-3.2850208806337307
],
[
13.477003548815889,
-3.5695632635030097
],
[
15.508556234167113,
-3.664735505247768
],
[
17.54010891951834,
-3.569563263503013
],
[
19.55340616346954,
-3.2850208806337338
],
[
21.5305414078659,
-2.814004244288124
],
[
23.454277606640847,
-2.1612518193704586
],
[
25.308315003231023,
-1.3332208500879303
],
[
27.077488041078148,
-0.3379293009516815
],
[
28.74788164577685,
0.8152237168479334
],
[
30.306865620124288,
2.1156456376848993
],
[
31.743053401099417,
3.5517336008847535
],
[
33.04619712593792,
5.111042235602685
],
[
34.20703454861842,
6.7804276865346065
],
[
35.21710501001324,
8.546162195091362
],
[
36.06855188718437,
10.394016175442848
],
[
36.75392837117225,
12.309307084263008
],
[
37.26602268864816,
14.276916417038606
],
[
37.59771852435842,
16.28127792572714
],
[
37.74190677756861,
18.30634178058075
],
[
37.691466033397425,
20.33552108446206
],
[
37.43933110709168,
22.351629101996416
],
[
36.97867121856046,
24.336817979571787
],
[
36.30320077645118,
26.272532721817203
],
[
35.40764475857626,
28.13949771526769
],
[
34.288374902869975,
29.917756835988456
],
[
32.944219395634725,
31.586791410799275
],
[
31.37742445684425,
33.125741733099666
],
[
29.59470946331626,
34.51375559381378
],
[
27.60830978432201,
35.7304791602892
],
[
25.43685118105698,
36.75668964212406
],
[
23.10586197900367,
37.57504517154546
],
[
20.64772567657151,
38.170897801403726
],
[
18.100927133693347,
38.533086925182445
],
[
15.508556234167116,
38.65461223427515
]
]
]
}
}
]
},
},
},
layers: [
{
"id": "sample-text-ja-en",
"type": "symbol",
"source": "point",
"layout": {
"text-field": "{name_ja}{name_en}",
"text-font": ["OpenHistorical"],
"text-size": 30,
"text-offset": [0, -2]
}
},
{
"id": "sample-text-zh-ko",
"type": "symbol",
"source": "point",
"layout": {
"text-field": "{name_zh}{name_ko}",
"text-font": ["OpenHistorical"],
"text-size": 30,
"text-offset": [0, 0]
}
},
{
"id": "sample-text-en-ja",
"type": "symbol",
"source": "point",
"layout": {
"text-field": "{name_en}{name_ja}",
"text-font": ["OpenHistorical"],
"text-size": 30,
"text-offset": [0, 2]
}
},
{
"id": "sample-text-vi-vi-hani",
"type": "symbol",
"source": "point",
"layout": {
"text-field": "{name_vi} {name_vi-Hani}",
"text-font": ["OpenHistorical"],
"text-size": 30,
"text-offset": [0, 4]
}
},
{
"id": "sample-text-egy-emoji",
"type": "symbol",
"source": "point",
"layout": {
"text-field": "{name_egy} {name_und-Zyse}",
"text-font": ["OpenHistorical"],
"text-size": 30,
"text-offset": [0, 4]
}
},
{
"id": "sample-text-hi-en",
"type": "symbol",
"source": "point",
"layout": {
"text-field": ["format", "कोलकाता", "\n", "(\u2068", {"font-scale": 0.8}, "Kolkata", {"font-scale": 0.8}, "\u2069)", {"font-scale": 0.8}],
"text-font": ["OpenHistorical"],
"text-size": 30,
"text-offset": [0, 7]
}
},
{
"id": "sample-text-si",
"type": "symbol",
"source": "point",
"layout": {
"text-field": "{name_si}",
"text-font": ["OpenHistorical"],
"text-size": 30,
"text-offset": [0, 9]
}
},
{
"id": "sample-text-dv",
"type": "symbol",
"source": "point",
"layout": {
"text-field": "{name_dv}",
"text-font": ["OpenHistorical"],
"text-size": 30,
"text-offset": [-10, 0]
}
},
{
"id": "sample-text-ckb",
"type": "symbol",
"source": "point",
"layout": {
"text-field": "{name_ckb}",
"text-font": ["OpenHistorical"],
"text-size": 30,
"text-offset": [-10, 2]
}
},
{
"id": "sample-text-ar",
"type": "symbol",
"source": "point",
"layout": {
"text-field": "{name_ar}",
"text-font": ["OpenHistorical"],
"text-size": 30,
"text-offset": [-10, 4]
}
},
{
"id": "line-bengaluru",
"type": "line",
"source": "line",
"paint": {
"line-color": "blue",
"line-offset": -60,
"line-dasharray": [8, 6],
"line-opacity": 0.4,
}
},
{
"id": "line-text-bengaluru",
"type": "symbol",
"source": "line",
"layout": {
"symbol-placement": "line",
"symbol-spacing": 1,
"text-max-angle": 60,
"text-padding": 0,
//"text-anchor": "top",
"text-field": [
"format",
["get", "name_as"],
" ",
["get", "name_en"],
{"text-font": ["literal", ["OpenHistorical Italic"]]},
" ",
["get", "name_kn"],
" ",
["get", "name_mr"],
],
"text-font": ["OpenHistorical"],
"text-size": 30,
"text-offset": [0, -2],
}
},
{
"id": "line-bengaluru2",
"type": "line",
"source": "line",
"paint": {
"line-color": "blue",
"line-opacity": 0.4,
}
},
{
"id": "line-text-bengaluru2",
"type": "symbol",
"source": "line",
"layout": {
"symbol-placement": "line",
"symbol-spacing": 1,
"text-max-angle": 60,
"text-padding": 0,
//"text-anchor": "top",
"text-field": [
"concat",
["get", "name_bn"],
" ",
["get", "name_hi"],
" ",
["get", "name_ml"],
" ",
["get", "name_ta"],
" ",
["get", "name_te"],
],
"text-font": ["OpenHistorical"],
"text-size": 30,
"text-offset": [0, 0],
}
},
{
"id": "line-naypyidaw",
"type": "line",
"source": "line",
"paint": {
"line-color": "blue",
"line-offset": 60,
"line-dasharray": [8, 6],
"line-opacity": 0.4,
}
},
{
"id": "line-text-naypyidaw",
"type": "symbol",
"source": "line",
"layout": {
"symbol-placement": "line",
"symbol-spacing": 1,
"text-max-angle": 60,
"text-padding": 0,
//"text-anchor": "top",
"text-field": [
"concat",
["get", "name_my"],
],
"text-font": ["OpenHistorical"],
"text-size": 30,
"text-offset": [0, 2],
}
},
],
},
center: [0, 0],
zoom: 1,
});
map.showCollisionBoxes = true;
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment